/* cu-orders.css — additions for /child-custody/ section 5 (src/components/custody/Orders.astro), on top of
   the UNCHANGED dp-stage.css / stack-cards.css the 離婚手續 folding cards use. Only what the three custody
   cards add: the 誰作決定 rows, the 適合 line, and a people PHOTO in the right panel (cover, face-anchored)
   instead of a square line drawing. Nothing here touches a property dp-stage.js or stack-cards.js write
   (the art transform, the fold scale/dim, the slot sticky geometry). */

/* the 誰作決定 rows: the slot of 「我們為您做的」's ticked list, as label + value pairs */
.cu-orders .cu-who { display: grid; gap: 0; margin: 0 0 14px; border-top: 1px solid rgba(16,32,27,.14); }
.cu-orders .cu-who-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(16,32,27,.14); }
.cu-orders .cu-who dt { color: var(--dps-card-mute); font-size: 14px; }
.cu-orders .cu-who dd { margin: 0; color: var(--dps-card-fg); font-size: 15px; font-weight: 500; }
.cu-orders .dps-slot[data-dps-tone="2"] .cu-who, .cu-orders .dps-slot[data-dps-tone="2"] .cu-who-row { border-color: rgba(242,243,238,.2); }
.cu-orders .cu-fit { margin: 0 0 18px; color: var(--dps-card-mute); font-size: 14px; line-height: 1.6; }
.cu-orders .cu-fit span { color: var(--dps-card-fg); font-weight: 500; }
/* the bold lead: the site's 600 would be a synthetic faux-bold on this page's one type scale */
.cu-orders .dps-copy .dps-summary { font-weight: 500; }
.cu-orders .dps-copy .num { font-weight: 400; }

/* the site's .btn-ink is green: on the green (tone 2) card it has no visible pill, so it turns amber there */
.cu-orders .dps-slot[data-dps-tone="2"] .btn-ink { background: var(--amber); color: var(--ink); }

/* the right panel: a people photo, never letterboxed. The frame keeps the photo's own measured ratio
   (inline aspect-ratio from art.ts) and is capped to the card's inner height on desktop; cover +
   top anchor keeps faces in view when the cap crops the bottom. */
.cu-orders .cu-photo-frame { width: 100%; aspect-ratio: 4 / 5; }
/* FIX 1 R7: the crop is placed from the MEASURED face union of each photo (art.ts FACES -> --cu-focus) */
.cu-orders .cu-photo-frame img { object-fit: cover; object-position: var(--cu-focus, 50% 18%); transform-origin: var(--cu-origin, 50% 50%); }
/* ^ dp-stage.js's arrival zoom (scale 1.3 -> 1, written inline on this img) is anchored where the
   measured faces stay inside the frame (art.ts faceOrigin), not the frame centre: the last card never
   finishes its arrival while on screen (no sticky room), and a centre-anchored 1.14 zoom cut the tablet
   face off 分割管養令 (measured) */
@media (min-width: 1024px) {
  .cu-orders .cu-photo-frame { max-height: calc(var(--dps-card-h, 640px) - 60px); }
  .cu-orders .dps-card-step-in { height: 100%; }
}
/* FIX 1 R7 (phone critic, frame 08440): below 1024 stack-cards.js pins each card at the nav and the next
   card slides over it, so a card taller than (screen - nav) never shows its bottom, and the photo sat at
   the bottom: only hair + shoulder were ever seen. The photo is now a 16:9 band at the TOP of the card
   (the face union of every order photo spans <= 44% of its height, the band shows 56%), and the copy is
   tightened so the whole card fits under the nav at 390 x 844. */
@media (max-width: 1023.98px) {
  .cu-orders .dps-art { order: -1; margin-bottom: 14px; }
  .cu-orders .cu-photo-frame { width: 100%; aspect-ratio: 16 / 9 !important; border-radius: 16px; }
  .cu-orders .dps-card-step-in { gap: 0; }
  .cu-orders .dps-copy .num { font-size: 34px; margin-bottom: 4px; }
  .cu-orders .dps-copy .eyebrow { margin-bottom: 8px; }
  .cu-orders .dps-copy h3 { margin-bottom: 6px; }
  .cu-orders .dps-copy h4 { margin: 12px 0 4px; }
  .cu-orders .cu-who-row { padding: 5px 0; }
  .cu-orders .cu-who { margin-bottom: 10px; }
  .cu-orders .cu-fit { margin-bottom: 12px; }
  .cu-orders .dps-tip { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
}