/* ============================================================================
   STAGE 3 — CASE STUDIES
   /case-studies.php (index, filters, cards) and /case-study.php (one study).
   Loaded only when published studies exist; the empty-state index uses the
   shared stylesheets alone. Composed from tokens.css — no raw values.
   ========================================================================= */

/* ------------------------------------------------------------ shared bits */

.cs-band--white{ background:var(--white); }

.cs-label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-faint);
}

/* ----------------------------------------------------------------- FILTERS */

.cs-filters{
  display:flex; flex-direction:column; gap:var(--space-5);
  padding-block:var(--space-6);
  border-block:var(--border) solid var(--line);
  margin-bottom:var(--space-6);
}
.cs-filters__group{
  display:grid;
  grid-template-columns:minmax(9rem,12rem) minmax(0,1fr);
  gap:var(--space-3) var(--space-6);
  align-items:baseline;
}
.cs-filters__label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.cs-filters__list{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cs-filters__clear{ padding-top:var(--space-2); }
@media (max-width:640px){
  .cs-filters__group{ grid-template-columns:1fr; }
}

/* Filter option — a real link, so it is sized as a touch target */
.cs-chip{
  display:inline-flex; align-items:center;
  min-height:40px;
  padding:var(--space-2) var(--space-4);
  border:var(--border) solid var(--line-strong);
  border-radius:var(--radius-pill);
  background:var(--bg-raised);
  color:var(--text-muted);
  font-size:var(--fs-sm);
  line-height:var(--lh-ui);
  transition:border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.cs-chip:hover{ border-color:var(--accent); color:var(--accent); }
.cs-chip[aria-current="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--white);
  font-weight:var(--fw-medium);
}
.cs-chip[aria-current="true"]:hover{ background:var(--burgundy); border-color:var(--burgundy); color:var(--white); }

/* ----------------------------------------------------------------- RESULTS */

.cs-results__count{ margin-bottom:var(--space-6); }
.cs-grid{ row-gap:var(--space-6); }

.cs-empty{
  padding:var(--space-8) var(--space-6);
  border:var(--border) dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--bg-raised);
}
.cs-empty__title{ font-size:var(--fs-h4); }

/* -------------------------------------------------------------------- CARD */
/* Builds on .card / .card--link from components.css. */

.cs-card{ height:100%; }

.cs-card__media{
  margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-bottom:var(--border) solid var(--line);
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--bg);
}
.cs-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--dur-3) var(--ease);
}
.cs-card:hover .cs-card__media img{ transform:scale(1.02); }

.cs-card__client{
  margin-top:calc(var(--space-2) * -1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--text);
}
.cs-card__summary{ font-size:var(--fs-sm); }

.cs-card__result{
  padding-left:var(--space-3);
  border-left:2px solid var(--accent);
  font-family:var(--font-display);
  font-size:var(--fs-body);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
}
.cs-card__result strong{ font-weight:var(--fw-semi); }

.cs-card__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cs-card__tags .tag{ white-space:normal; }

.cs-card__more{
  margin-top:auto;
  padding-top:var(--space-2);
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
  transition:color var(--dur-1) var(--ease);
}
.cs-card:hover .cs-card__more{ color:var(--accent); }
.cs-card:hover .cs-card__more .btn__arrow{ transform:translateX(4px); }

/* The stretched title link is the card's only focus target; ring the card too */
.cs-card:has(.card__title a:focus-visible){
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* ============================================================ SINGLE STUDY */

/* Breadcrumb */
.cs-crumbs{
  margin-bottom:var(--space-7);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--text-faint);
}
.cs-crumbs ol{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cs-crumbs li{ display:inline-flex; align-items:baseline; gap:var(--space-2); min-width:0; }
.cs-crumbs li + li::before{ content:"/"; color:var(--line-strong); }
.cs-crumbs a{ color:var(--text-muted); transition:color var(--dur-1) var(--ease); }
.cs-crumbs a:hover{ color:var(--accent); }
.cs-crumbs [aria-current="page"]{
  display:inline-block;
  max-width:44ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  vertical-align:bottom;
}

/* Hero */
.cs-hero__client{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--space-2) var(--space-3);
  margin-top:var(--space-5);
  font-size:var(--fs-lead);
  font-weight:var(--fw-medium);
}

.cs-facts{
  align-self:end;
  padding-top:var(--space-5);
  border-top:2px solid var(--line);
}
.cs-facts__result{
  margin-top:var(--space-2);
  font-family:var(--font-display);
  font-size:var(--fs-h4);
  font-weight:var(--fw-semi);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  text-wrap:balance;
}
.cs-facts__result + .cs-facts__list{ margin-top:var(--space-5); }
.cs-facts__list{ margin:0; }
.cs-facts__list > div{
  padding-block:var(--space-3);
  border-top:var(--border) solid var(--line);
}
.cs-facts__list > div:first-child{ border-top:0; padding-top:0; }
.cs-facts__list dd{ margin:var(--space-2) 0 0; font-size:var(--fs-sm); }

.cs-svc{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cs-svc .tag{
  white-space:normal;
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cs-svc .tag:hover{ border-color:var(--accent); color:var(--accent); }

@media (max-width:1024px){
  .cs-hero__grid > .cs-facts{ grid-column:1 / -1; margin-top:var(--space-5); }
}

/* Featured image — directly under the hero copy, so it loads eagerly */
.cs-feature{ margin:var(--space-8) 0 0; }
.cs-feature img{
  width:100%;
  max-height:80vh;
  object-fit:cover;
  border:var(--border) solid var(--line);
  border-radius:var(--radius-media);
  background:var(--bg-raised);
}

/* Stats row */
.cs-stats-wrap{ margin-top:var(--space-9); }
.cs-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:var(--space-6) var(--grid-gap);
  margin:var(--space-5) 0 0;
}
.cs-stats > div{
  padding-top:var(--space-5);
  border-top:2px solid var(--line);
}
.cs-stats dt{ color:var(--accent); overflow-wrap:anywhere; }
.cs-stats dd{ margin:var(--space-3) 0 0; max-width:32ch; }

/* The story — one row per part: label left, prose right */
.cs-part{
  padding-block:var(--space-8);
  border-top:var(--border) solid var(--line);
}
.cs-part:first-child{ padding-top:0; border-top:0; }
.cs-part__head{
  align-self:start;
  position:sticky;
  top:calc(var(--header-h-sm) + var(--space-6));
}
.cs-part__title{ margin-top:var(--space-2); font-size:var(--fs-h3); }
.cs-part__sub{
  margin-top:var(--space-7);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.cs-part__sub:first-child{ margin-top:0; }
.cs-part__sub + .prose{ margin-top:var(--space-4); }
.prose.cs-method{ font-size:var(--fs-body); }

.cs-part--question .prose{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-medium);
  line-height:1.3;
  letter-spacing:var(--ls-heading);
}

@media (max-width:1024px){
  .cs-part__head{ position:static; }
}
@media (max-width:640px){
  .cs-part{ padding-block:var(--space-7); }
  .cs-part--question .prose{ font-size:var(--fs-h4); }
}

/* Client quote */
.cs-quote-row:not(:first-child){ margin-top:var(--space-8); }
.cs-quote{
  grid-column:5 / span 8;
  margin:0;
  padding-left:var(--space-6);
  border-left:2px solid var(--accent);
}
.cs-quote blockquote{ margin:0; }
.cs-quote blockquote p{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-medium);
  line-height:1.28;
  letter-spacing:var(--ls-heading);
}
.cs-quote figcaption{
  margin-top:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-1);
  font-size:var(--fs-sm);
}
.cs-quote__by{ font-weight:var(--fw-semi); }
.cs-quote__role{ color:var(--text-muted); }
@media (max-width:1024px){
  .cs-quote{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .cs-quote{ padding-left:var(--space-5); }
  .cs-quote blockquote p{ font-size:var(--fs-h4); }
}

/* Gallery — two up; an odd count lets the first image run full width */
.cs-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-7) var(--grid-gap);
}
.cs-gallery > li:first-child:nth-last-child(odd){ grid-column:1 / -1; }
.cs-gallery figure{ margin:0; }
.cs-gallery img{
  width:100%;
  border:var(--border) solid var(--line);
  border-radius:var(--radius-media);
  background:var(--bg-raised);
}
.cs-gallery figcaption{
  margin-top:var(--space-3);
  max-width:60ch;
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
@media (max-width:640px){
  .cs-gallery{ grid-template-columns:1fr; }
}