/* mt-s1.css: section 1 of /divorce-maintenance/ (the pinned statement + the seven factor cards).
   Spec: docs/design/maintenance-v4/section-1.md (rows 1 to 7, rulings A to I).
   Measured source: docs/research/2026-09-23-clearpath-cards-redecode/SPEC.md.

   Rules this file keeps:
   1. DEFAULT = FINAL STATE (ruling I). Without JS or under reduced motion mt-s1.js never adds
      .is-pinned / [data-s1-armed], so the section reads as: second eyebrow H2, the two heading
      lines, the sub-line, then a static grid of seven cards at full height.
   2. ONE WRITER PER PROPERTY. mt-s1.js writes, per frame: card height, photo transform, the
      switch knob transform, the ground opacity, the hero media opacity and two custom properties
      (the lead-in spring value, the phone per-character travel). The flip crossfades below are
      class-keyed CSS tweens on OTHER elements/properties; nothing here transitions a property the
      script also writes.
   3. ONE TYPE SCALE. The two eyebrow H2s keep class .h2 and are restyled small by id (exempt by id
      in the typescale probe, as the old motto label was); card titles are .mt-h3; serif 400/500. */

.mt .mt-s1 { padding: 0; background: var(--paper); color: var(--ink); --s1-e: cubic-bezier(.44,0,.56,1); --s1-soft: #2F6B55; }
.mt .s1-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 120px; padding-bottom: 72px; }
.mt .s1-ebs { display: grid; justify-items: center; }
.mt .s1-eb { grid-area: 1 / 1; margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .12em; line-height: 1.4; color: rgba(16,32,27,.62); }
.mt .s1-lines { display: grid; justify-items: center; margin-top: 28px; }
.mt .s1-lead, .mt .s1-head { grid-area: 1 / 1; margin: 0; font-family: var(--serif); font-weight: 500; font-size: min(60px, calc((100vw - 40px) / 15.5)); line-height: 1.22; letter-spacing: -.02em; color: var(--ink); }
/* judge 2026-09-23: each phrase stays on ONE line at every width (phone broke 清/楚 and 就/好了); the size
   above scales so the longest phrase (15 units incl. the ellipsis) fits 100vw - 40px. */
.mt .s1-head > span { display: block; white-space: nowrap; }
.mt .s1-lead-in { white-space: nowrap; }
.mt .s1-l2 { color: var(--s1-soft); }
.mt .s1-sub { margin: 24px 0 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--mute); max-width: 34em; }

/* the switch pill: our version of ClearPath's toggle, label 贍養費 */
.mt .s1-switch { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; }
.mt .s1-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(242,243,238,.22); transition: background-color .8s var(--s1-e); }
.mt .s1-knob { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #F2F3EE; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.mt .s1-switch-label { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--paper); transition: color .8s var(--s1-e); }

/* ruling I: what only exists in the moving version */
.mt .s1-eb-a, .mt .s1-lead, .mt .s1-switch, .mt .s1-ground { display: none; }

/* ================= armed (JS on, motion allowed) ================= */
.mt .s1-pin.is-pinned { height: calc(var(--screen) + 900px); }
.mt .s1-pin.is-pinned .s1-stage { background: var(--paper); }
.mt .s1-pin.is-pinned .s1-ground { display: block; position: absolute; inset: 0; z-index: 0; background: var(--green); }
.mt .s1-pin.is-pinned .s1-copy { padding-top: clamp(112px, 22vh, 260px); padding-bottom: 0; }
.mt .s1-pin.is-pinned .s1-eb-a { display: block; color: var(--on-dark-mute); }
.mt .s1-pin.is-pinned .s1-lead { display: block; color: var(--paper); }
.mt .s1-pin.is-pinned .s1-switch { display: inline-flex; }

/* before the flip (also the destination state when scrolling back up) */
.mt .is-pinned .s1-eb-a, .mt .is-pinned .s1-lead { opacity: 1; visibility: visible; transition: opacity .6s var(--s1-e) .4s, visibility 0s linear 0s; }
.mt .is-pinned .s1-eb-b, .mt .is-pinned .s1-l1, .mt .is-pinned .s1-l2, .mt .is-pinned .s1-sub { opacity: 0; visibility: hidden; transition: opacity .3s var(--s1-e) 0s, visibility 0s linear .3s; }
/* after the flip (SPEC L66-98: out .3s; in after .4s, .6s heading line 1, .8s line 2 and sub) */
.mt .is-pinned .is-flipped .s1-eb-a, .mt .is-pinned .is-flipped .s1-lead { opacity: 0; visibility: hidden; transition: opacity .3s var(--s1-e) 0s, visibility 0s linear .3s; }
.mt .is-pinned .is-flipped .s1-eb-b, .mt .is-pinned .is-flipped .s1-l1 { opacity: 1; visibility: visible; transition: opacity .6s var(--s1-e) .4s, visibility 0s linear 0s; }
.mt .is-pinned .is-flipped .s1-l2 { opacity: 1; visibility: visible; transition: opacity .8s var(--s1-e) .4s, visibility 0s linear 0s; }
.mt .is-pinned .is-flipped .s1-sub { opacity: 1; visibility: visible; transition: opacity .8s var(--s1-e) .6s, visibility 0s linear 0s; }
.mt .is-pinned .is-flipped .s1-track { background: #7FA69B; }
.mt .is-pinned .is-flipped .s1-switch-label { color: #4F5754; }

/* the lead-in line enters with the house spring (dp-stage.css:142-152 recipe, desktop):
   mt-s1.js writes --s1-a (k358 d100 m1) and this derives opacity, translateY 300px to 0, scale 1.1 to 1.
   It moves the whole statement block (eyebrow, switch, lead-in) as ONE unit, as dp moves its whole
   heading, so the arriving line never slides across the eyebrow and switch. */
@media (min-width: 900px) {
  .mt .is-pinned .s1-copy { opacity: var(--s1-a, 1); transform: translateY(calc(-300px * (1 - var(--s1-a, 1)))) scale(calc(1.1 - .1 * var(--s1-a, 1))); will-change: transform, opacity; }
}

/* ================= the seven cards ================= */
.mt .mt-factors { position: relative; z-index: 2; padding: 0 0 140px; background: transparent; }
/* ruling C: the cards follow the pin in flow and rise under the still-pinned heading, first card
   top 90px after the flip. The pull-up (margin-top) and the pin runway are MEASURED by mt-s1.js
   (owner row, ref 31): sub-line to first card = 56px at >= 1200, 32px below, at every viewport. */
.mt .s1-grid {
  --s1-max: min(560px, 62vh); --s1-t: 60px;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: var(--s1-max); gap: 24px;
}
.mt .s1-grid > .mt-fcard { grid-column: span 2; }
.mt .s1-grid > .mt-fcard:nth-child(5) { grid-column: 2 / span 2; }
.mt .mt-fcard {
  position: relative; align-self: center; height: var(--s1-max); border-radius: var(--r-card);
  overflow: hidden; isolation: isolate; background: var(--green); color: var(--on-dark);
}
.mt .mt-fcard-photo { position: absolute; inset: 0; overflow: hidden; }
/* ruling E: the photo is taller than the card by the travel and drifts inside it; its box is a
   FIXED size (max + travel) anchored to the card top, so a height change never rescales it */
.mt .mt-fcard-img { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--s1-max) + var(--s1-t)); object-fit: cover; object-position: 50% 0; display: block; }
/* row 7: solid deep-green panel over the lower part of the card (>= 92% opacity) */
.mt .mt-fcard-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px 22px 24px; background: rgba(11,46,36,.95); }
.mt .mt-fcard-num { display: inline-block; font-size: 15px; padding: 5px 11px 4px; border: 1px solid rgba(242,243,238,.34); border-radius: 999px; color: var(--on-dark); }
.mt .mt-fcard .mt-h3 { margin: 12px 0 0; color: var(--on-dark); }
.mt .mt-fcard-line { margin: 8px 0 0; color: rgba(242,243,238,.82); }

/* row 4: the old card 08 ask, one line plus the WhatsApp button under the grid */
.mt .s1-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-top: 56px; text-align: center; }
.mt .s1-ask-line { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--mute); }

/* ================= phone (< 900) ================= */
@media (max-width: 899px) {
  .mt .s1-copy { padding-top: 88px; padding-bottom: 48px; }
  .mt .s1-lines { margin-top: 22px; }
  .mt .s1-sub { margin-top: 18px; font-size: 15px; }
  .mt .s1-pin.is-pinned .s1-copy { padding-top: calc(var(--nav-h) + 9vh); }
  /* ruling G: the per-character lead-in (dp-stage.js:202-245 + dp-stage.css:270-276), minus the
     blur so only opacity and transform move. mt-s1.js writes --s1-m-s and --s1-m-stagger. */
  .mt .is-pinned .s1-ch { display: inline-block; --u: clamp(0, calc((var(--s1-m-s, 99999) - var(--i, 0) * var(--s1-m-stagger, 30)) / 300), 1); opacity: var(--u); transform: scale(calc(.9 + .1 * var(--u))); }
  /* phone flip at 550 of the runway (measured phone flip, SPEC phone recipe), cards 90px later.
     Row 1 hangs from the top of its row box so the breathing shrink never re-opens the gap under
     the sub-line (owner row, ref 31); later rows stay centred. */
  .mt .s1-grid > .mt-fcard:nth-child(-n+2) { align-self: start; }
  .mt .mt-factors { padding-bottom: 80px; }
  .mt .s1-grid { --s1-max: min(300px, 40vh); --s1-t: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mt .s1-grid > .mt-fcard, .mt .s1-grid > .mt-fcard:nth-child(5) { grid-column: auto; }
  .mt .s1-grid > .mt-fcard:nth-child(7) { grid-column: 1 / -1; }
  .mt .mt-fcard-panel { padding: 12px 12px 14px; }
  .mt .mt-fcard-num { font-size: 13px; padding: 3px 9px 2px; }
  .mt .mt-fcard .mt-h3 { margin-top: 8px; }
  .mt .mt-fcard-line { margin-top: 4px; }
  /* phone photos keep the owner sheet scale (card width, natural 4:5, top-anchored) instead of
     cover-by-height, which magnified them 1.5x and pushed faces under the panel (seen at 390).
     The floor keeps the photo covering the area above the panel through the whole drift. */
  .mt .mt-fcard-img { height: auto; aspect-ratio: 4 / 5; min-height: calc(var(--s1-max) * .6 + var(--s1-t)); }
  .mt .s1-grid > .mt-fcard:nth-child(7) .mt-fcard-img { height: calc(var(--s1-max) + var(--s1-t)); aspect-ratio: auto; min-height: 0; }
  /* card 07 full width: photo left, panel right */
  .mt .s1-grid > .mt-fcard:nth-child(7) .mt-fcard-photo { right: 50%; }
  .mt .s1-grid > .mt-fcard:nth-child(7) .mt-fcard-panel { left: 50%; top: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
  .mt .s1-grid > .mt-fcard:nth-child(7) .mt-fcard-num { align-self: flex-start; }
  .mt .s1-ask { margin-top: 36px; }
  .mt .s1-ask-line { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mt .mt-fcard, .mt .mt-fcard-img { transition: none !important; }
}