/* case-carousel.css: page-scoped divorce-procedure case carousel. */
/* #15 (owner, 2026-09-16): cases moves to the homepage .cases look - paper ground, white slides,
   ink copy, .arrows-style controls - never charcoal or brand green as a section ground. The
   section itself carries no background/color any more (no .dark class on CaseCarousel.astro);
   every card/control below was already styled for a light ground independently of that class. */
/* ROUND 10 #62 (3rd rejection of the ground change): this section is the OPAQUE COVER that ends
   the consultant block's green — makro's measured exit (docs/research/2026-09-18-mobile-decode/
   SPEC.md §C line 57: "the page goes light again because the next section's opaque background
   arrives from below"). Three properties, nothing else: its own paper ground (it previously had
   none and merely inherited the body's, which let dp-consultant.css's fixed `.dpc-ground` layer
   turn it green — the "pollution" the owner rejected), `position: relative` + `z-index: 1` so it
   paints above BOTH that layer (z-index -1) and the pinned `.dpc-section` (z-index 0). All the
   rules that used to recolour this section's text on `html.dpc-ground-on` are deleted from
   dp-consultant.css in the same change: 客戶個案 now looks identical at every scroll position. */
.dp-cases { position: relative; z-index: 1; background: var(--paper); padding: var(--sec) 0; overflow: hidden; }
.dp-case-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.dp-case-filters button { min-height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--mute); font-size: 13px; }
.dp-case-filters button.on { border-color: var(--green); background: var(--green); color: var(--paper); }
.dp-case-carousel { min-width: 0; }
.dp-case-window { overflow: hidden; }
.dp-case-track { display: flex; gap: 18px; width: 100%; transition: opacity .2s ease; }
.dp-case-carousel.is-changing .dp-case-track { opacity: .35; }
.dp-case-carousel .dp-case-card { flex: 0 0 calc((100% - 36px) / 3); display: block; width: auto; min-width: 0; padding: 0; overflow: hidden; border-radius: var(--r-card); background: var(--white); opacity: 1; }
.dp-case-card > a { display: flex; flex-direction: column; height: 100%; }
.dp-case-card figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.dp-case-card figure img { width: 100%; height: 100%; object-fit: cover; }
/* 擬 cards use the site's line-art step stills (retired oil-paint object stills removed 2026-09-15,
   policy/retired-assets.json) — contain on the same measured surface as block 5's .dp-object.
   New defect 2 (owner, via critic, 2026-09-15): --bg-line-step is #FEFEFE, indistinguishable from
   this card's own white background (unlike block 5, whose card ground is paper, not white) - the
   icon read as floating with no surface at all. --paper-2 instead, so the panel reads as a
   deliberate surface exactly like block 5's. */
.dp-case-card[data-tags] figure:has(img[src*="assets/line/step-"]) { background: var(--paper-2); }
.dp-case-card[data-tags] figure img[src*="assets/line/step-"] { object-fit: contain; padding: 12px; }
/* New defect 1 (owner, via critic, 2026-09-15): the shared .dark rule sets color:var(--paper) on
   the whole .dp-cases.dark section for text sitting DIRECTLY on the charcoal ground, but this card
   is a WHITE tile (background:var(--white) above) - h3/blockquote (no colour of their own) were
   inheriting paper-on-white and going near-invisible. color:ink here stops that inheritance before
   it reaches them; .dp-case-tags/.dp-case-copy p/.dp-case-link already had explicit colours. */
.dp-case-copy { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px; color: var(--ink); }
.dp-case-copy h3 { font-size: 21px; }
.dp-case-tags { color: var(--mute); font-size: 12px; }
.dp-case-copy blockquote { font-size: 17px; }
.dp-case-copy p { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--green); font-size: 13px; }
.dp-case-link { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 13px; font-weight: 600; }
/* #43: color was var(--mute-d) - a PAPER-toned translucent colour meant for dark/green grounds
   (see .arrows in site.css, used on the charcoal-ground homepage carousels). This section sits on
   the page's light ground (case-carousel.css header comment, #15), same as the homepage's own
   .cases carousel, which uses `.cases .arrows { color: var(--mute); }` - var(--mute-d) here read as
   a near-invisible grey arrow on the white button. Reusing the homepage's own `.cases .arrows`
   token/button look exactly: var(--mute) icon+counter colour, var(--line) border, var(--white)
   fill (measured ~7:1 icon-vs-button; button white-vs-paper section >=3:1). */
.dp-case-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; color: var(--mute); font-size: 13px; }
.dp-case-controls button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease; }
.dp-case-controls button:hover { border-color: var(--green); color: var(--green); }
.dp-case-controls button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 599px) {
  /* round-2 item 4: the chip row scrolled already (overflow-x:auto below) but was hard-cut at the
     right edge with no hint more chips existed, and the card window showed exactly 2 full cards
     with zero affordance that a 3rd was next. mask-image fades both scroll edges without new
     markup; shrinking the card basis by a fixed peek leaves the next card's edge visible instead
     of clipping flush against the window. */
  .dp-case-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent); }
  .dp-case-filters::-webkit-scrollbar { display: none; }
  .dp-case-filters button { flex: none; }
  .dp-case-carousel .dp-case-card { flex-basis: calc((100% - 12px - 14px) / 2); }
  .dp-case-track { gap: 12px; }
  .dp-case-copy { gap: 7px; padding: 13px; }
  .dp-case-copy h3 { font-size: 16px; }
  .dp-case-copy blockquote { font-size: 14px; line-height: 1.5; }
  .dp-case-copy p, .dp-case-link { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-case-track { transition: none; }
  .dp-case-carousel.is-changing .dp-case-track { opacity: 1; }
}