/* Sweet Moments — /begining story page (Tilda skin, live parity).
   Measurements from docs/study/visual-inventory.md A3; copy verbatim from
   .reference-tilda/pages/begining.html. Uses base.css tokens + main.js lightbox. */

body { background: #fff; }

.story { background: #fff; }

/* ---------- 1 · cover hero (450px full-bleed, darkened) ---------- */
.cover {
  position: relative;
  height: 450px;
  overflow: hidden;
}
.cover-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cover-filter {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.60), rgba(34,34,34,.20));
}
.cover-title {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 4.7vw, 30px);
  line-height: 1.17; /* 30/35.1 */
  color: #fff; text-align: center;
  animation: story-cover-in 1.2s cubic-bezier(0.19,1,0.22,1) both;
}
@keyframes story-cover-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
/* prefers-reduced-motion handled globally in base.css */

/* ---------- 2 · pink dek ---------- */
/* max-width = 560 content + 2*20 side padding (border-box) so the live 560 text column is preserved at desktop */
.dek {
  max-width: 600px; margin: 0 auto;
  padding: 30px 20px;
  text-align: center;
  font-size: 22px; line-height: 34.1px;
  color: #DD9BB5;
}

/* ---------- copy columns (760, Gilroy 22/34.1 #000000) ---------- */
/* max-width = 760 content + 2*20 side padding (border-box) so the live 760 text column is preserved at desktop */
.copy {
  max-width: 800px; margin: 0 auto;
  padding: 60px 20px;
  font-size: 22px; line-height: 34.1px;
  color: #000000;
}
.copy h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 22px; line-height: 33px;
  color: var(--brown);
  margin-bottom: 44px; /* measured: live's actual rendered heading-to-body gap, not the theoretical 2-line value */
}
.copy p { margin-bottom: 34.1px; }
.copy p:last-child { margin-bottom: 0; }
.copy-intro { padding-top: 82px; /* measured: live renders ~22px more top gap than the stated 60px record padding */ }

/* ---------- 4 · mom pair (570x758 2-col) ---------- */
/* max-width = 1160 content + 2*20 side padding (border-box) so the live 1160 grid width is preserved at desktop */
.mom-pair {
  max-width: 1200px; margin: 0 auto;
  padding: 135px 20px;
}
.photo-caption {
  max-width: 600px; margin: 0 auto 138px;
  text-align: center;
  font-family: var(--display); font-weight: 400;
  font-size: 22px; line-height: 33px;
  color: var(--brown);
}
.pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pair img {
  width: 100%;
  aspect-ratio: 570 / 758;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- 6 · fitness row (373x664 3-col) ---------- */
/* max-width = 1160 content + 2*20 side padding (border-box) so the live 1160 grid width is preserved at desktop */
.photo-row {
  max-width: 1200px; margin: 0 auto;
  padding: 30px 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.photo-row img {
  width: 100%;
  aspect-ratio: 373 / 664;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- 6b · divider (live t191 hairline between fitness row and heading) ---------- */
.divider { padding: 64px 20px; }
.divider-line {
  display: block;
  width: 160px; margin: 0 auto;
  height: 1px;
  background: #000000; opacity: .2;
}
.divider-wide { max-width: 1200px; margin: 0 auto; padding: 36px 20px 33px; }
.divider-line-wide { width: 100%; max-width: 1160px; }

/* ---------- 7 · My First Zefir Flowers (large 30/40.5) ---------- */
.copy-lg { padding: 45px 20px 48px; }
.copy-lg h2 {
  font-weight: 700;
  font-size: 30px; line-height: 40.5px;
  margin-bottom: 46px; /* measured: live's actual rendered heading-to-body gap */
}
.copy-lg p {
  font-size: 30px; line-height: 40.5px;
  margin-bottom: 40.5px;
}

/* ---------- 8 · flower mosaic (full-bleed 4x2, 360x270, no gaps) ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}
.mosaic img {
  width: 100%;
  aspect-ratio: 360 / 270;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- 9 · Enjoying the Process (18/24.3) ---------- */
.copy-md { padding: 45px 20px 76px; }
.copy-md h2 {
  font-weight: 700;
  font-size: 18px; line-height: 24.3px;
  margin-bottom: 26.6px; /* measured: live's actual rendered heading-to-body gap */
}
.copy-md p {
  font-size: 18px; line-height: 24.3px;
  margin-bottom: 24.3px;
}

/* ---------- 10 · portraits (373x640 3-col) ---------- */
.portraits { padding-top: 30px; }
.portraits img { aspect-ratio: 373 / 640; }

/* ---------- 11 · New Chapter (18/27.9) ---------- */
.copy-end { padding: 60px 20px 84px; }
.copy-end h2 {
  font-weight: 700;
  font-size: 18px; line-height: 27.9px;
  margin-bottom: 31.8px; /* measured: live's actual rendered heading-to-body gap */
}
.copy-end p {
  font-size: 18px; line-height: 27.9px;
  margin-bottom: 27.9px;
}
.copy-end .sign-off { margin-top: 27.9px; }

/* ---------- 12 · closing photo set (4-up 283x~500 + 2 below) ---------- */
/* max-width = 1160 content + 2*20 side padding (border-box) so the live 1160 grid width is preserved at desktop */
.closing {
  max-width: 1200px; margin: 0 auto;
  padding: 191px 20px 135px;
}
.closing-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; /* matches live t827 masonry gutter */
  margin-bottom: 10px;
}
.closing-row-2 {
  grid-template-columns: repeat(2, 283px);
  justify-content: center;
  margin-bottom: 0;
}
.closing img {
  width: 100%;
  aspect-ratio: 283 / 500;
  object-fit: cover;
  border-radius: 0;
}

/* ---------- responsive ≤960 (tablet breakpoint, measured live via computed-style probe @960) ---------- */
@media (max-width: 960px) {
  .divider { padding: 30px 20px; }
  .photo-caption { font-size: 20px; line-height: 30px; margin-bottom: 45px; }
  .copy-end h2 { font-size: 16px; line-height: 24.8px; margin-bottom: 28px; }
  .copy-end p { font-size: 16px; line-height: 24.8px; margin-bottom: 24.8px; }
  .copy-end .sign-off { margin-top: 24.8px; }

  /* live swaps the 1160-wide image grid container for a narrower 600-content
     one at the tablet breakpoint (measured: t-container max-width 640px) */
  .mom-pair, .photo-row, .closing { max-width: 640px; }
  /* the 760-content copy column also narrows to 600 at this breakpoint
     (measured: text elements report w:600 at viewport 960) */
  .copy, .copy-intro, .copy-lg, .copy-md, .copy-end { max-width: 640px; }
  /* closing-row (4-col desktop) collapses to 2-col here too, and the fixed
     283px closing-row-2 columns become fluid to match the narrower container */
  .closing-row, .closing-row-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .closing-row { margin-bottom: 10px; }
  .closing-row-2 { margin-bottom: 0; }
}

/* ---------- responsive ≤640 (measured live via computed-style probe @375) ---------- */
@media (max-width: 640px) {
  .cover { height: 450px; } /* keep live height */
  .cover-title { font-size: 30px; line-height: 35.1px; } /* live does not shrink the cover title on mobile */
  .dek { line-height: 31.9px; }

  /* live: copy-intro's desktop-only +82px top pad collapses back to the plain 60px record padding on mobile */
  .copy, .copy-intro { padding: 60px 20px; font-size: 22px; line-height: 32.8px; }
  .copy h2 { line-height: 32.8px; margin-bottom: 42px; }
  .copy p { margin-bottom: 32.8px; }

  .mom-pair, .closing { padding: 90px 20px; }
  .photo-caption { margin-bottom: 45px; font-size: 18px; line-height: 25.2px; }

  .divider { padding: 30px 20px; }
  .divider-wide { padding: 0 20px; }

  /* live shrinks the 30/40.5 "large" copy down to the same 22px scale as regular copy on mobile */
  .copy-lg { padding: 45px 20px; }
  .copy-lg h2 { font-size: 22px; line-height: 31.5px; margin-bottom: 36px; }
  .copy-lg p { font-size: 22px; line-height: 31.5px; margin-bottom: 31.5px; }

  /* copy-md (18/24.3) keeps its font size on mobile; only bottom padding shrinks */
  .copy-md { padding: 45px 20px; }

  /* live shrinks the 18/27.9 "end" copy down to 14/20.3 on mobile */
  .copy-end { padding: 60px 20px; }
  .copy-end h2 { font-size: 14px; line-height: 21.8px; margin-bottom: 25px; }
  .copy-end p { font-size: 14px; line-height: 21.8px; margin-bottom: 21.8px; }
  .copy-end .sign-off { margin-top: 21.8px; }

  /* live keeps .pair (2-col) and .photo-row (3-col, incl. portraits) at their
     desktop column counts down to 375px — only the 4-col grids collapse. */
  .closing-row, .closing-row-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .closing-row { margin-bottom: 10px; }
  .closing-row-2 { margin-bottom: 0; }
  /* full-bleed mosaic keeps 2-col on mobile (live t552 behaviour) */
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}