/* ccshan · case pages (SIMAGIC / AEKE / XWOW) — Figma 868:6536 boards 03–05
 * Built on tokens.css + ui.css. Desktop values are Figma's; tablet/mobile follow the 768 / 375 boards.
 */

.gap-16{gap:var(--space-16)}
.case-pad-bottom{padding-bottom:var(--space-48)}
.case-tight-bottom{padding-bottom:var(--space-48)}
@media (max-width:767px){.case-pad-bottom,.case-tight-bottom{padding-bottom:var(--space-32)}}

/* Case-specific colours from Figma (collection「ccshan / BASIC / approved」: ink, paper; plus page tints) */
:root{--case-ink:#252422;--case-paper:#f4f4f4}
.bg-aeke-tint{background:#f5f7f5}
.bg-xwow-tint{background:#f7f4ef}
.case-accent-text{color:#21704d}

/* ---------- Chapter nav (sticky under the header; js/spy.js sets aria-current="location") ---------- */
.case-subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(245,245,247,.94);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(0,0,0,.06)}
.case-subnav nav a{position:relative;transition:color var(--motion-duration-fast) var(--ease-emphasized)}
.case-subnav nav a::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:1px;background:var(--color-text-primary);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--motion-duration-base) var(--ease-emphasized)}
@media (hover:hover){.case-subnav nav a:hover{color:var(--color-text-primary)}}
.case-subnav nav a:active{opacity:.72;transition-duration:var(--motion-duration-instant)}
.case-subnav nav a[aria-current="location"]{color:var(--color-text-primary);font-weight:700}
.case-subnav nav a[aria-current="location"]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.case-subnav nav a::after{transition:none}}
.case-subnav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);min-height:var(--case-subnav-h);padding-block:0;font:var(--type-caption)}
.case-subnav .case-name{font:var(--type-label-strong);white-space:nowrap}
.case-subnav .case-name a{color:var(--color-text-secondary)}
.case-subnav nav{display:flex;gap:var(--space-24);flex-wrap:nowrap}
.case-subnav nav a{white-space:nowrap;padding:16px 0;color:var(--color-text-secondary)}
.case-subnav nav a::after{bottom:10px}
@media (max-width:1199px){
  .case-subnav nav{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .case-subnav nav::-webkit-scrollbar{display:none}
}
@media (max-width:767px){.case-subnav .case-name{display:none}}

/* ---------- Hero ---------- */
.case-hero{background:var(--color-bg-inverse);color:var(--color-text-on-inverse);padding-top:var(--section-pad);padding-bottom:var(--space-48);text-align:center}
.case-hero__name{font:var(--type-h4);margin:0;color:var(--case-accent,var(--color-text-on-inverse))}
.case-hero__sub{color:var(--color-text-on-inverse-muted)}
.case-cover{overflow:hidden;background:var(--color-bg-inverse)}
.case-cover img{width:100%;height:100%;object-fit:cover}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .case-cover img{animation:hero-parallax linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}

/* ---------- Metrics ---------- */
.case-metrics{padding-bottom:var(--section-pad);text-align:left}
.case-metrics--dark{background:var(--color-bg-inverse);color:var(--color-text-on-inverse);padding-top:var(--section-pad);padding-bottom:var(--space-48);text-align:center}
.case-metrics__eyebrow{color:var(--color-text-on-inverse-muted);margin-bottom:var(--space-32)}
.case-metrics__row{display:flex;justify-content:space-between;gap:var(--space-24);max-width:1040px;margin-inline:auto;text-align:left}
.case-metric{display:flex;flex-direction:column;gap:var(--space-12)}
.case-metric__num{margin:0;font-variant-numeric:tabular-nums}
.case-metric__label{margin:0;color:var(--color-text-secondary)}
.case-metrics--dark .case-metric__label{color:var(--color-text-on-inverse-muted)}
@media (max-width:1199px){.case-metrics__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-32)}}

/* ---------- Hints ---------- */
.case-hint{font:var(--type-caption);color:var(--color-text-hint);margin:0}

/* ---------- Decision cards ---------- */
.choice-grid{display:grid;gap:var(--layout-gutter);align-self:stretch;text-align:left}
.choice-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px;margin-inline:auto;width:100%}
.choice-grid--1{grid-template-columns:minmax(0,620px);justify-content:center}
.choice-card{display:flex;flex-direction:column;gap:var(--space-24);padding:40px 32px;border-radius:var(--radius-md);background:var(--color-bg-subtle)}
.choice-card > *{margin:0}
@media (max-width:1199px){.choice-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .choice-grid--3,.choice-grid--2,.choice-grid--1{grid-template-columns:1fr}
  .choice-card{padding:32px 24px}
}

/* ---------- Figures ---------- */
.case-figure{margin:0;display:flex;flex-direction:column;gap:var(--space-12)}
.case-figure__media{position:relative;overflow:hidden;background:var(--color-bg-subtle)}
.case-figure__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-figure--fit .case-figure__media{background:transparent}
.case-figure--fit .case-figure__media img{object-fit:contain}
.case-figure__media--r{border-radius:var(--radius-md)}
.case-figure__cap{margin:0}
.case-figure--full .case-figure__cap{padding-top:0}
.case-wide{display:grid;gap:var(--layout-gutter)}
.case-wide--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-two-up{align-self:stretch}
@media (max-width:767px){.case-wide--2,.case-two-up{grid-template-columns:1fr}}

/* 70 / 20 / 10 colour proportion */
.color-split{display:grid;grid-template-columns:70fr 20fr 10fr;gap:0}
.color-split__item{position:relative;overflow:hidden;min-height:249px;padding:36px 17px;border-radius:var(--radius-md)}
.color-split__item > p{position:relative;z-index:1;margin:0}
.color-split__item--black{background:#000;color:var(--color-text-on-inverse)}
.color-split__item--black img{position:absolute;right:0;bottom:-24px;width:min(60%,521px);height:auto;border-radius:var(--radius-md)}
.color-split__item--white{background:var(--color-bg-subtle)}
.color-split__item--red{background:var(--color-brand-accent);color:var(--color-text-on-inverse)}
.color-split__item--red .t-eyebrow{color:inherit}                     /* white on brand red: 5.9:1 */
@media (max-width:767px){
  .color-split{grid-template-columns:1fr;gap:var(--space-8)}
  .color-split__item{min-height:120px}
}

/* ---------- Horizontal track (js/carousel.js) ---------- */
.track-section{display:flex;flex-direction:column}
.track-section--dark{background:var(--case-ink);color:var(--color-text-on-inverse);padding-top:var(--space-48)}
.track-section--dark .carousel-hint__label,.track-section--dark .track__cap{color:var(--color-text-on-inverse-muted)}
.track-section--dark .carousel-hint__btn{color:var(--color-text-on-inverse);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.track-section--paper{background:var(--case-paper);padding-top:var(--space-48)}
.track__eyebrow{margin:0 0 var(--space-24);color:inherit}
.track{
  --th:calc(var(--track-h) * 1px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-inline:0;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;outline-offset:6px;
}
.track::-webkit-scrollbar{display:none}
.track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.track.is-dragging *{pointer-events:none}
.track__rail{display:flex;gap:var(--layout-gutter);width:max-content}
.track__item{flex:0 0 auto;width:calc(var(--th) * var(--r));margin:0;display:flex;flex-direction:column;gap:var(--space-12);scroll-snap-align:start}
.track__media{position:relative;height:var(--th);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-subtle)}
.track-section--dark .track__media{background:transparent}
.track__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.track__cap{margin:0;color:var(--color-text-primary)}
@media (max-width:1199px){.track{--th:calc(var(--track-h) * .75px)}}
@media (max-width:767px){.track{--th:min(calc(var(--track-h) * .6px), 58svh)}}
.track--phones .track__media{border-radius:20px}

/* Photography tiles (SIMAGIC 社媒卡片) */
.track--tiles .track__rail{gap:16px}
.tile-card{flex:0 0 384px;display:flex;align-items:center;gap:var(--space-24);padding:var(--space-24);border-radius:var(--radius-md);background:var(--color-bg-subtle);scroll-snap-align:start}
.tile-card__thumb{flex:0 0 120px;height:120px;border-radius:var(--radius-md);overflow:hidden;position:relative}
.tile-card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-card h4,.tile-card p{margin:0}
@media (max-width:767px){.tile-card{flex-basis:300px}.tile-card__thumb{flex-basis:88px;height:88px}}

/* ---------- Key actions (SIMAGIC 双展) ---------- */
.key-actions__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-gutter)}
.key-actions__grid > div{display:flex;flex-direction:column;gap:var(--space-24)}
.key-actions__grid h3,.key-actions__grid p{margin:0}
@media (max-width:1199px){.key-actions__grid{grid-template-columns:1fr;gap:var(--space-32)}}

/* ---------- Content map (AEKE) ---------- */
.content-map__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32)}
.content-map__grid p{margin:0}
.content-map__grid > div{display:flex;flex-direction:column;gap:var(--space-24)}
@media (max-width:767px){.content-map__grid{grid-template-columns:1fr;gap:var(--space-24)}}

/* ---------- Crowdfunding entry (AEKE) ---------- */
.crowd-entry__panel{display:flex;align-items:center;gap:var(--space-96);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-subtle)}
.crowd-entry__media{position:relative;flex:0 0 420px;height:302px;overflow:hidden}
.crowd-entry__media img{position:absolute;left:0;top:0;width:100%;height:auto}
.crowd-entry__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-24);padding-right:var(--space-48)}
.crowd-entry__body > *{margin:0}
@media (max-width:1199px){.crowd-entry__panel{gap:var(--space-48)}.crowd-entry__media{flex-basis:320px}}
@media (max-width:767px){
  .crowd-entry__panel{flex-direction:column;align-items:stretch;gap:var(--space-24)}
  .crowd-entry__media{flex-basis:auto;height:240px}
  .crowd-entry__body{padding:0 var(--space-24) var(--space-32)}
}

/* ---------- Concept band (XWOW 静 精 净 劲) ---------- */
.concept-band{background:var(--case-ink);text-align:center}
.concept-band__words{word-spacing:.5em}
.concept-band p{margin:0}

/* ---------- Results grid (XWOW) ---------- */
.results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-32) var(--layout-gutter);max-width:1000px;width:100%;margin-inline:auto;text-align:left}
.results-grid p{margin:0}
.results-grid > div{display:flex;flex-direction:column;gap:var(--space-8)}
@media (max-width:1199px){.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Next case ---------- */
.case-next__title{color:inherit;transition:color var(--motion-duration-fast) var(--ease-standard)}
@media (hover:hover){.case-next__title:hover{color:var(--color-text-brand)}}
.case-next:has(.case-next__title:hover) .link{color:var(--color-text-brand);text-decoration-color:currentColor}

/* ---------- Lightbox (js/lightbox.js) ---------- */
.lightbox{width:min(560px,100vw);max-width:100vw;max-height:100svh;height:100svh;margin:0 auto;padding:0;border:0;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(9,9,10,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:72px 16px 32px}
.lightbox__scroll img{width:100%;height:auto;border-radius:var(--radius-md)}
.lightbox__close{position:fixed;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:var(--radius-full);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.lightbox__close svg{width:18px;height:18px}
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{animation:lightbox-in var(--motion-duration-spring-gentle) var(--ease-spring-gentle)}
  .lightbox[open]::backdrop{animation:fade-in var(--motion-duration-base) var(--ease-standard)}
}
@keyframes lightbox-in{from{opacity:0;transform:translate3d(0,24px,0) scale(.98)}to{opacity:1;transform:none}}
.carousel-hint[hidden]{display:none}

/* ---------- Video (js/video.js) ---------- */
.case-cover video,.case-figure__media video,.track__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-cover{position:relative}
.case-cover > img,.case-cover > video{position:absolute;inset:0}
.bg-paper{background:var(--case-paper)}