/* cb-motto.css: section 2 of /cross-border-divorce/: the motto -> the three conditions.
   A copy of public/components/cu-motto.css (撫養權 s2, itself 贍養費 v4 mt-s1.css), renamed cu- -> cb-.
   What differs: the motto is TWO planned phrases (never broken inside a phrase; below 900 one line each, from 900
   up both on ONE line, edit round 2 at the end of this file); no sub-line, no picture;
   the three cards are plain (no link); the one-year note strip and the ask sit under the cards and hold
   with them. DEFAULT = FINAL STATE; ONE WRITER PER PROPERTY (cu-motto.css header, unchanged). */

.cb .cb-motto { padding: 0; background: var(--paper); color: var(--ink); --cm-e: cubic-bezier(.44,0,.56,1); --cm-soft: #2F6B55; }
.cb .cm-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 120px; padding-bottom: 40px; }
.cb .cm-ebs { display: grid; justify-items: center; }
.cb .cm-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); }
.cb .cm-lines { display: grid; justify-items: center; margin-top: 28px; }
.cb .cm-lead, .cb .cm-head { margin: 0; font-family: var(--serif); font-weight: 500; font-size: min(60px, calc((100vw - 40px) / 12.5)); line-height: 1.22; letter-spacing: -.02em; color: var(--ink); }
/* each phrase stays on ONE line at every width (the 贍養費 judge rule); the size above fits the longest (12 units) */
.cb .cm-head > span, .cb .cm-lead-in { display: block; white-space: nowrap; }
/* edit round 1 (#83 row 1): the motto is ONE plain line (11 units), big: 26px at 320, 80px from 1000 up */
.cb .cm-lead { font-size: clamp(24px, 7.4vw, 80px); line-height: 1.2; }
.cb .cm-l2 { color: var(--cm-soft); }
.cb .cm-sub { margin: 24px 0 0; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--cb-mute); max-width: 34em; }

.cb .cm-switch { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; }
.cb .cm-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(242,243,238,.22); transition: background-color .8s var(--cm-e); }
.cb .cm-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); }
.cb .cm-switch-label { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--paper); transition: color .8s var(--cm-e); }

/* ruling I, as amended by FIX 1 R5: the static reading (no JS, reduced motion) shows eyebrow A, the motto
   in ink, then the two heading lines and the sub-line, stacked. Only the switch, the green ground and
   eyebrow B (it names the parts that follow) exist in the moving version alone. */
.cb .cm-eb-b, .cb .cm-switch, .cb .cm-ground { display: none; }
.cb .cm-head { margin-top: 18px; }

/* ================= armed (JS on, motion allowed) ================= */
.cb .cm-pin.is-pinned .cm-lead, .cb .cm-pin.is-pinned .cm-head { grid-area: 1 / 1; margin-top: 0; }
.cb .cm-pin.is-pinned .cm-eb-b { display: block; }
.cb .cm-pin.is-pinned .cm-stage { background: var(--paper); }
.cb .cm-pin.is-pinned .cm-ground { display: block; position: absolute; inset: 0; z-index: 0; background: var(--green); }
.cb .cm-pin.is-pinned .cm-copy { padding-top: clamp(112px, 22vh, 260px); padding-bottom: 0; }
.cb .cm-pin.is-pinned .cm-eb-a { display: block; color: var(--on-dark-mute); }
.cb .cm-pin.is-pinned .cm-lead { display: block; color: var(--paper); }
.cb .cm-pin.is-pinned .cm-switch { display: inline-flex; }

.cb .is-pinned .cm-eb-a, .cb .is-pinned .cm-lead { opacity: 1; visibility: visible; transition: opacity .6s var(--cm-e) .4s, visibility 0s linear 0s; }
.cb .is-pinned .cm-eb-b, .cb .is-pinned .cm-l1, .cb .is-pinned .cm-l2, .cb .is-pinned .cm-sub { opacity: 0; visibility: hidden; transition: opacity .3s var(--cm-e) 0s, visibility 0s linear .3s; }
.cb .is-pinned .is-flipped .cm-eb-a, .cb .is-pinned .is-flipped .cm-lead { opacity: 0; visibility: hidden; transition: opacity .3s var(--cm-e) 0s, visibility 0s linear .3s; }
.cb .is-pinned .is-flipped .cm-eb-b, .cb .is-pinned .is-flipped .cm-l1 { opacity: 1; visibility: visible; transition: opacity .6s var(--cm-e) .4s, visibility 0s linear 0s; }
.cb .is-pinned .is-flipped .cm-l2 { opacity: 1; visibility: visible; transition: opacity .8s var(--cm-e) .4s, visibility 0s linear 0s; }
.cb .is-pinned .is-flipped .cm-sub { opacity: 1; visibility: visible; transition: opacity .8s var(--cm-e) .6s, visibility 0s linear 0s; }
.cb .is-pinned .is-flipped .cm-track { background: #7FA69B; }
.cb .is-pinned .is-flipped .cm-switch-label { color: #4F5754; }

@media (min-width: 900px) {
  .cb .is-pinned .cm-copy { opacity: var(--cm-a, 1); transform: translateY(calc(-300px * (1 - var(--cm-a, 1)))) scale(calc(1.1 - .1 * var(--cm-a, 1))); will-change: transform, opacity; }
}

/* ================= the three parts ================= */
.cb .cb-parts { position: relative; z-index: 2; padding: 0 0 120px; background: transparent; }
.cb .cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; }
.cb .cm-card { position: relative; border-radius: var(--r-card); color: var(--on-dark); text-align: left; }
/* edit round 1 (#83 row 4): each card is a link to its section; the link carries the green ground */
.cb .cm-card-a { display: block; height: 100%; padding: 24px 26px 26px; border-radius: var(--r-card); background: var(--green); color: var(--on-dark); text-decoration: none; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), background-color .35s ease; }
.cb .cm-card-a:hover { transform: translateY(-4px); background: #13493A; box-shadow: 0 16px 32px rgba(15,59,46,.26); }
.cb .cm-card-a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.cb .cm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cb .cm-card-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); }
.cb .cm-card-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--amber); white-space: nowrap; }
.cb .cm-card-arrow { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cb .cm-card-a:hover .cm-card-arrow, .cb .cm-card-a:focus-visible .cm-card-arrow { transform: translateX(4px); }
.cb .cm-card .cb-h3 { margin: 14px 0 0; color: var(--on-dark); }
.cb .cm-card-line { margin: 8px 0 0; color: rgba(242,243,238,.82); }

/* edit round 1 (#83 row 2): THE HOLD. cb-motto.js sets [data-cm-hold] only when the whole frame (heading +
   picture + cards) fits one screen: the cards' wrap sticks at the measured --cm-stick while the ::after
   spacer (--cm-hold px) runs past, exactly as long as the stage's runway is extended, so stage and cards
   hold together and release together (pure CSS sticky: no per-frame write, no snap, any input). */
.cb .cb-parts[data-cm-hold] { padding-bottom: 48px; }
.cb .cb-parts[data-cm-hold] > .wrap { position: sticky; top: var(--cm-stick, 0px); }
.cb .cb-parts[data-cm-hold]::after { content: ''; display: block; height: var(--cm-hold, 0px); }

/* ================= phone (< 900) ================= */
@media (max-width: 899px) {
  .cb .cm-copy { padding-top: 88px; padding-bottom: 32px; }
  .cb .cm-lines { margin-top: 22px; }
  .cb .cm-sub { margin-top: 18px; font-size: 15px; }
  .cb .cm-pin.is-pinned .cm-copy { padding-top: calc(var(--nav-h) + 9vh); }
  /* the per-character motto reveal (dp-stage.js:202-245 recipe, via mt-s1.css), opacity + transform only */
  .cb .is-pinned .cm-ch { display: inline-block; --u: clamp(0, calc((var(--cm-m-s, 99999) - var(--i, 0) * var(--cm-m-stagger, 30)) / 300), 1); opacity: var(--u); transform: scale(calc(.9 + .1 * var(--u))); }
  .cb .cb-parts { padding-bottom: 72px; }
  .cb .cm-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* compact card: [num] [title] [了解更多 →] on one row, the line under it (the frame must fit one screen) */
  .cb .cm-card-a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 16px 15px; }
  .cb .cm-card-top { display: contents; }
  .cb .cm-card-num { grid-column: 1; grid-row: 1; font-size: 13px; padding: 3px 9px 2px; }
  .cb .cm-card .cb-h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .cb .cm-card-more { grid-column: 3; grid-row: 1; font-size: 12px; letter-spacing: .04em; }
  .cb .cm-card-line { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .cb .cb-parts[data-cm-hold] { padding-bottom: 40px; }
}

/* ================= 中港 additions ================= */
/* each motto / heading phrase is its OWN line (the phrase unit is .ln.join, cb-page.css) */
.cb .cm-lines .ln.join { display: block; }
/* the cards are not links here: no hover lift */
.cb div.cm-card-a:hover { transform: none; background: var(--green); box-shadow: none; }
.cb .cm-block { max-width: 1080px; margin: 0 auto; }
.cb .cm-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px auto 0; padding: 14px 20px; border-radius: var(--r-card); background: rgba(16,32,27,.05); font-family: var(--sans); font-size: 15px; line-height: 1.6; color: rgba(16,32,27,.78); text-align: left; }
.cb .cm-note-bar { flex: 0 0 auto; width: 4px; align-self: stretch; min-height: 20px; border-radius: 2px; background: var(--amber); }
.cb .cm-ask { margin-top: 20px; }
@media (max-width: 899px) {
  .cb .cm-note { margin-top: 12px; padding: 10px 14px; font-size: 14px; }
  .cb .cm-ask { margin-top: 12px; gap: 8px 16px; }
}
/* FIX ROUND 1 (#84 row 2): armed, the card block waits hidden at its stop until the flip, then fades in with it
   (cb-motto.js toggles .cm-shown on #cb-parts with the flip); no more cards travelling up from below the fold */
html[data-cm-armed] .cb .cb-parts .cm-block { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s cubic-bezier(.44,0,.56,1), transform .3s cubic-bezier(.44,0,.56,1), visibility 0s linear .3s; }
html[data-cm-armed] .cb .cb-parts.cm-shown .cm-block { opacity: 1; visibility: visible; transform: none; transition: opacity .6s cubic-bezier(.44,0,.56,1) .25s, transform .6s cubic-bezier(.44,0,.56,1) .25s, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .cb .cb-parts .cm-block { opacity: 1 !important; visibility: visible !important; transform: none !important; } }

/* EDIT ROUND 2 (#84 row 1, owner 2026-09-26 "in 1 line if possible"): from 900 up the motto and the flip heading
   are each ONE line: the two phrase spans (and the motto's per-character --i units) stay, they just sit side by side
   (nowrap on the parent, so rounding can never drop phrase 2). The size fits the WHOLE line inside the .wrap, which
   is the query container here (100cqi = its real content width, so a desktop scrollbar can never push the line over): the
   motto is 18 glyphs of 1em at -.02em = 17.64em (divisor 18); the heading (16 glyphs = 15.68em) takes the SAME
   divisor so it is never larger than the motto (900-1100 it would fit bigger); 60px from ~1100 up.
   Below 900 nothing changes: two phrases, one line each. Asserted by lab/probe-cb-motto.mjs m1. */
@media (min-width: 900px) {
  .cb .cm-copy { container-type: inline-size; }
  .cb .cm-lead, .cb .cm-head { white-space: nowrap; }
  .cb .cm-lines .ln.join, .cb .cm-lead-in, .cb .cm-head > span { display: inline-block; }
  .cb .cm-lead { font-size: min(80px, 100cqi / 18); }
  .cb .cm-head { font-size: min(60px, 100cqi / 18); }
}