/* PORTED for /separation-agreement/ (分居協議書, #124) from public/components/da-diff.css - renamed only (da-/cb- -> sa-);
   the reference behaviour is the spec (WORK-ORDER.md "behaves exactly like its reference"). */
/* sa-diff.css: /divorce-agreement/ section 4, 最常見的五個寫法錯誤 (src/components/agreement/Mistakes.astro): the
   carousel half of the cross-border differences block (a copy of cb-diff.css, the statement pin removed). Pale ground;
   the shared site.js [data-carousel] engine runs it (no autoplay, no scroll-to-turn on this page). */
.sa .sa-diff { position: relative; z-index: 2; background: var(--paper, #F2F3EE); color: var(--ink, #10201B); overflow: clip; padding: 120px 0; border-radius: var(--r-sec) var(--r-sec) 0 0; transition: background-color .8s cubic-bezier(.22, 1, .36, 1); }
.sa .sa-diff-head { padding-inline: var(--pad); }
.sa .sa-diff .eyebrow i { background: var(--amber); }
.sa .sa-diff .h2 { margin-top: 12px; }
.sa .sa-diff-sub { margin: 14px auto 0; max-width: 34em; }
.sa .sa-diff .svc-tabrow { display: flex; margin-top: 28px; }
.sa .sa-diff .svc-tabrow .seg-scroll { flex: 1 1 auto; margin-top: 0; }
@media (min-width: 1024px) { .sa .sa-diff .svc-tabrow .seg-scroll { overflow: visible; } }
.sa .sa-diff [data-carousel-tabs="sadiff"] { background: rgba(16,32,27,.06); min-width: 0; }
.sa .sa-diff [data-carousel-tabs="sadiff"] button { color: rgba(16,32,27,.64); font-weight: 500; min-height: 44px; }
.sa .sa-diff [data-carousel-tabs="sadiff"] button small { color: rgba(16,32,27,.5); }
.sa .sa-diff [data-carousel-tabs="sadiff"] button.on { color: var(--ink); }
.sa .sa-diff [data-carousel-tabs="sadiff"] button.on small { color: rgba(16,32,27,.62); }
.sa .sa-diff [data-carousel-tabs="sadiff"] button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.sa .sa-diff .carousel { overflow-x: clip; overflow-y: visible; margin-top: 40px; }
.sa .sa-diff .slide { background: #FFFFFF; transform-origin: center; transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease; }
.sa .sa-diff .slide.on { opacity: 1; transform: scale(1); box-shadow: 0 0 0 1px rgba(233,169,58,.55), 0 30px 80px rgba(16,32,27,.14); }
.sa .sa-diff .slide:not(.on) { opacity: .32; transform: scale(.96); }
.sa .sa-diff .scene { aspect-ratio: 4 / 3; align-self: center; background: var(--sa-sand); }
.sa .sa-diff .scene img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.sa .sa-diff .slide-copy { gap: 12px; }
.sa .sa-diff .sad-h3 { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.2; color: var(--ink); }
.sa .sa-diff .slide-copy .sub { color: var(--green); font-weight: 500; font-size: 18px; }
.sa .sa-diff .slide-copy .sub::before { content: ''; display: inline-block; width: 18px; height: 3px; background: var(--amber); margin-right: 10px; vertical-align: middle; }
.sa .sad-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.sa .sad-cell { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--r-sm, 14px); background: #F6F3EC; }
.sa .sad-cell.sad-cn { background: #EEF2EE; }
.sa .sad-cell b { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); }
.sa .sad-cell p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(16,32,27,.78); }
.sa .sad-law { margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(16,32,27,.12); font-size: 13px; letter-spacing: .04em; color: rgba(16,32,27,.66); }
.sa .sa-diff .sad-body { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(16,32,27,.72); }
.sa .sa-diff .slide-copy .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sa .sa-diff .slide-copy .btn.btn-outline { color: var(--ink); border-color: rgba(16,32,27,.3); }
.sa .sad-go { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(16,32,27,.35); text-underline-offset: 5px; }
.sa .sad-go:hover { text-decoration-color: var(--amber); }

.sa .sa-diff .arrows { color: rgba(16,32,27,.68); margin-top: 20px; }
.sa .sa-diff .arrows button { border-color: rgba(16,32,27,.16); width: 48px; height: 48px; }

/* the light switch into s6: once dp-consultant.js turns the ground on, this section lets the green show
   through and its own words switch to the light ink on the same .8s clock (cu-access.css did the same to
   撫養權 s5). The white cards keep their own ground. */
html.dpc-ground-on .sa .sa-diff { background-color: transparent; }
.sa .sa-diff-head .h2, .sa .sa-diff-sub, .sa .sa-diff-head .eyebrow, .sa .sa-diff .arrows { transition: color .8s cubic-bezier(.22, 1, .36, 1); }
html.dpc-ground-on .sa .sa-diff-head .h2 { color: var(--paper); }
html.dpc-ground-on .sa .sa-diff-sub, html.dpc-ground-on .sa .sa-diff-head .eyebrow, html.dpc-ground-on .sa .sa-diff .arrows { color: var(--mute-d); }
html.dpc-ground-on .sa .sa-diff .arrows button { border-color: var(--line-d); color: var(--paper); }
html.dpc-ground-on .sa .sa-diff [data-carousel-tabs="sadiff"] { background: rgba(255,255,255,.08); }
html.dpc-ground-on .sa .sa-diff [data-carousel-tabs="sadiff"] button:not(.on) { color: var(--mute-d); }
html.dpc-ground-on .sa .sa-diff [data-carousel-tabs="sadiff"] button:not(.on) small { color: var(--mute-d); }
@media (prefers-reduced-motion: reduce) { .sa .sa-diff, .sa .sa-diff-head .h2, .sa .sa-diff-sub, .sa .sa-diff-head .eyebrow, .sa .sa-diff .arrows { transition: none; } }

@media (max-width: 1023px) {
  .sa .sad-cmp { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .sa .sa-diff { padding: 72px 0; }
  .sa .sa-diff .svc-tabrow { margin-top: 20px; }
  .sa .sa-diff [data-carousel-tabs="sadiff"] .seg-ind { display: none; }
  .sa .sa-diff [data-carousel-tabs="sadiff"] button.on { background: var(--amber); color: var(--ink); }
  .sa .sa-diff .carousel { margin-top: 20px; }
  .sa .sa-diff .scene { aspect-ratio: 16 / 11; }
  .sa .sa-diff .sad-h3 { font-size: 30px; }
  .sa .sad-cell { padding: 12px 14px; }
}
/* while the ground is on (s6 crossing mid-screen) the pinned statement is long past; it must not show
   through the now-transparent carousel section where the two overlap (the cover's one-screen overlap) */
/* #91 scroll-to-turn pin (owner 2026-09-26, #84 row 3): Differences.astro carries the homepage settings, so the
   head + card pin under the nav (site.css [data-carousel-pin]) while the runway turns one card per band. Fit the pin
   to the screen the way mt-s3.css does (the picture height follows the viewport) so the arrows + counter stay on
   screen while pinned at 1024x768 .. 1920x1080. Only while the runway is live: reduced motion keeps the static layout. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .sa .sa-diff .svc-tabrow { margin-top: 22px; }
  .sa .sa-diff .carousel { margin-top: 24px; }
  .sa .sa-diff .scene { aspect-ratio: auto; height: clamp(260px, calc(100vh - 540px), 560px); }
}
@media (min-width: 1024px) and (max-height: 860px) and (prefers-reduced-motion: no-preference) {
  .sa .sa-diff .svc-tabrow { margin-top: 14px; }
  .sa .sa-diff .carousel { margin-top: 12px; }
  .sa .sa-diff .arrows { margin-top: 8px; }
  .sa .sa-diff .slide { padding-block: 14px; }
  /* this card carries more than 贍養費's (title, point, the 香港 | 內地 cells, a link row): measured 2026-09-26 the
     copy column (364-415px) sets the card height here, not the picture, and the arrows sat 25-70px under the fold
     at 1366x768 / 1024x768 / 1280x720. Same words, tighter type and spacing on short screens only. */
  .sa .sa-diff .h2 { margin-top: 6px; }
  .sa .sa-diff-sub { margin-top: 8px; }
  .sa .sa-diff .slide-copy { gap: 8px; }
  .sa .sa-diff .sad-h3 { font-size: 32px; }
  .sa .sad-cmp { gap: 10px; margin-top: 0; }
  .sa .sad-cell { gap: 4px; padding: 10px 14px; }
  .sa .sad-cell p { line-height: 1.55; }
  .sa .sad-law { padding-top: 4px; }
}
/* 2026-10-09 carousel-contract probe: at 1024x768 the arrows ended 14px under the fold (734-782 / 768) and the next
   click scrolled the page. The 離婚 card's long 我們會這樣寫 line wraps to more lines in the narrow 1024 cells than 離婚協議書's
   cards do, and that card sets the pinned height. Same words, a little tighter type, ONLY from 1024 to 1199 wide on
   short screens (1366x768 and wider, and every phone, do not match). */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 800px) and (prefers-reduced-motion: no-preference) {
  .sa .sa-diff .slide { padding-block: 10px; }
  .sa .sa-diff .sad-h3 { font-size: 28px; }
  .sa .sad-cell p { font-size: 14px; line-height: 1.45; }
  .sa .sa-diff .sad-body { font-size: 14px; line-height: 1.5; }
}
/* site.css drops .slide-copy .btn to 42px on phones: 44px on this page (page probe, tap) */
@media (max-width: 899px) { .sa .sa-diff .slide-copy .btn { height: 44px; } }

/* #105: the five short tabs (探視 · 按揭 · 贍養費 · 強積金 · 披露) sit on ONE row at 480 px and below (work order s4) */
@media (max-width: 899px) {
  .sa .sa-diff [data-carousel-tabs="sadiff"] { flex-wrap: nowrap; gap: 6px; }
  .sa .sa-diff [data-carousel-tabs="sadiff"] button { padding-inline: 12px; min-width: 44px; }
}
@media (max-width: 380px) {
  .sa .sa-diff [data-carousel-tabs="sadiff"] { gap: 4px; }
  .sa .sa-diff [data-carousel-tabs="sadiff"] button { padding-inline: 8px; font-size: 13px; }
}
@media (max-width: 480px) {
  .sa .sa-diff [data-carousel-tabs="sadiff"] { gap: 4px; }
  .sa .sa-diff [data-carousel-tabs="sadiff"] button { padding-inline: 9px; }
}