/* case-study.css — reusable template + components for case study pages
   Tokens & textstyles come from ../tokens.css; the footer is the shared
   contact component (../contact.css + ../contact.js). */

body.cs-body {
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--black);
  overflow-x: hidden;
}

.cs-section-inner {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 20px;
}

/* BACK BUTTON — sticky, transparent bar, always on top of scrolling content. */
.cs-back {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-400) 20px;
}

/* Flat, opaque black chip behind a white icon — no transparency, no shadow.
   On dark sections it merges into the background; on light sections it reads
   as a clean solid disc. Plain solid color, no rendering risk. */
.cs-back-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: block;
}
.cs-back-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--black);
}
.cs-back-icon svg {
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--ivory);
  transition: opacity 0.2s;
}
.cs-back:hover .cs-back-icon svg { opacity: 0.6; }

/* HERO — reuses .cs-image-block, no caption */
.cs-hero { background: var(--ivory); }
/* Morph target of the HP case card (transitions.css). A shelf hero has no
   .cs-media, so the strip itself takes the name. */
.cs-hero .cs-media,
.cs-hero .shelf { view-transition-name: case-cover; }

/* The hero's own colored box stretches its background up behind the sticky
   back button (transparent), so there's no ivory seam before any scrolling
   happens. padding-top grows by the same amount the box moves up, so the
   actual content (media/shelf) stays exactly where it was — only the
   background extends. .cs-back is 72px tall (2×16px padding + 40px icon). */
.cs-hero--full .cs-image-block {
  margin-top: -72px;
  padding-top: calc(var(--space-600) + 72px);
}

/* HEADER (title + subtitle + tags) — once per page */
.cs-header { background: var(--ivory); padding: var(--space-800) 0; }
.cs-header .cs-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  font-size: var(--text-display-size);
  line-height: var(--text-display-leading);
  letter-spacing: var(--text-display-tracking);
}
.cs-header .cs-subtitle {
  font-family: var(--font-accent);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  color: var(--strong-grey);
  font-size: var(--text-display-accent-size);
  line-height: var(--text-display-accent-leading);
  letter-spacing: var(--text-display-accent-tracking);
  margin-top: 0;
}
.cs-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
  margin-top: var(--space-400);
}
.cs-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  background: var(--ivory-dark);
  padding: var(--space-100) var(--space-300);
  border-radius: var(--radius-sm);
  font-size: var(--text-md-size);
  line-height: var(--text-md-leading);
  letter-spacing: var(--text-md-tracking);
  color: var(--black);
}
.cs-tag svg { width: 16px; height: 16px; flex-shrink: 0; }

/* SECTION (eyebrow-title + subtitle + body) — reused for Problem / Solution / Approach intro / Impact */
.cs-section { background: var(--ivory); padding: var(--space-1600) 0; }
.cs-section .cs-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--black);
  font-size: var(--text-headline-size);
  line-height: var(--text-headline-leading);
  letter-spacing: var(--text-headline-tracking);
}
.cs-section .cs-subtitle {
  font-family: var(--font-accent);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  color: var(--strong-grey);
  font-size: var(--text-headline-accent-size);
  line-height: var(--text-headline-accent-leading);
  letter-spacing: var(--text-headline-accent-tracking);
  margin-top: 0;
}
.cs-section .cs-body {
  margin-top: var(--space-400);
  font-size: var(--text-md-size);
  line-height: var(--text-md-leading);
  letter-spacing: var(--text-md-tracking);
  color: var(--strong-grey);
}
.cs-section .cs-body strong { font-weight: 600; }
.cs-section .cs-intro-list {
  margin-top: var(--space-400);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}
.cs-section .cs-intro-list p { font-size: var(--text-md-size); line-height: var(--text-md-leading); letter-spacing: var(--text-md-tracking); color: var(--strong-grey); }
.cs-section .cs-intro-list strong { font-weight: 600; }

/* IMAGE BLOCK — full-bleed band on mobile (no radius, edge to edge);
   becomes an inset rounded card on desktop (Figma), see the 768px query. */
.cs-image-block { background: var(--ivory-dark); padding: var(--space-600) 0; }
.cs-image-block .cs-section-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}
/* 64px rhythm between consecutive image cards (the dark approach series) */
.cs-image-block + .cs-image-block { margin-top: var(--space-1600); }
/* Media is capped in height and shrinks to its image, centered in the card.
   Wide screenshots (16/10) fill the 800px content at 500px tall; narrower
   images (the cards fan) stay delicate with ivory breathing room around them
   — never blown up to fill the block, matching the mockup. */
.cs-image-block .cs-media {
  align-self: center;
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--screencap-shadow);
  position: relative;
}
.cs-image-block img,
.cs-image-block video {
  display: block;
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
}
/* Flat: no shadow — for images whose own background matches the block
   (e.g. the cards fan), where the box shadow would draw an ugly frame. */
.cs-image-block .cs-media--flat { box-shadow: none; }

/* Fit: for media whose aspect ratio doesn't match the rest of the series
   (e.g. a portrait video among landscape screenshots). The container is
   forced to the SAME box other cards naturally land on (1600×1000, capped
   at 500px tall) so every card in the row reads as the same size; the media
   itself scales down to fit inside without cropping (object-fit: contain),
   letterboxed on the block's own background. */
.cs-image-block .cs-media--fit {
  width: 100%;
  aspect-ratio: 1600 / 1000;
  max-height: 500px;
}
.cs-image-block .cs-media--fit img,
.cs-image-block .cs-media--fit video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.cs-image-block .cs-caption {
  font-size: var(--text-md-size);
  line-height: var(--text-md-leading);
  letter-spacing: var(--text-md-tracking);
  color: var(--black);
}
.cs-image-block .cs-caption strong { font-weight: 600; }

/* Dark variant (CS02): black band, light caption (becomes a black card on desktop) */
.cs-image-block--dark { background: var(--black); }
.cs-image-block--dark .cs-caption { color: var(--grey-over-black); }
.cs-image-block--dark .cs-caption strong { color: #ffffff; }

/* STEPS — row of dark circles (icon + label + sublabel). Always a single
   row: below the width where all 5 fit at full size, the whole row scales
   down together instead of wrapping onto a second line. 664px is the row's
   natural width: 5 × 120px circles + 4 × 16px gaps. */
.cs-steps {
  --steps-scale: min(1, calc((100vw - 40px) / 664px));
  width: 100%;
  height: calc(120px * var(--steps-scale));
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Centers even when the row overflows its container — the child's own
     margin:auto (from .cs-section-inner) can't, since auto margins resolve
     to 0 once there's no free space left to absorb. */
  justify-content: center;
}
.cs-steps-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-400);
  transform: scale(var(--steps-scale));
}
.cs-step {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  padding: var(--space-200);
  text-align: center;
  flex-shrink: 0; /* the row scales as a whole; circles never shrink individually */
}
.cs-step img { width: 16px; height: 16px; }
.cs-step-label {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.011em;
  color: #ffffff;
}
.cs-step-sub {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.011em;
  color: var(--grey-over-black);
}

/* Impact stats: the bold figures read in ink, not grey */
#impact .cs-intro-list strong { color: var(--black); }

.cs-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-play svg {
  width: 48px;
  height: 48px;
  color: var(--ivory);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.cs-dots {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  justify-content: center;
}
.cs-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--strong-grey);
}
.cs-dots span.is-active { background: var(--black); border-color: var(--black); }

/* DESKTOP — shared textstyles switch in tokens.css at the same breakpoint */
@media (min-width: 768px) {
  .cs-section-inner { padding: 0 32px; }

  .cs-back { padding: var(--space-600) 32px; }

  .cs-header { padding: var(--space-1600) 0; }
  .cs-tag-list { margin-top: var(--space-600); }

  .cs-section { padding: var(--space-1600) 0; }
  .cs-section .cs-body,
  .cs-section .cs-intro-list { max-width: 640px; }

  .cs-steps-inner { justify-content: space-between; }

  /* Image block becomes an inset rounded card (Figma) — see the mobile
     full-bleed band rules above. */
  .cs-image-block { background: transparent; padding: 0; }
  .cs-image-block .cs-section-inner {
    gap: var(--space-400);
    background: var(--ivory-dark);
    border-radius: var(--radius-lg);
    padding: 20px 20px var(--space-600);
  }
  .cs-image-block--dark { background: transparent; }
  .cs-image-block--dark .cs-section-inner { background: var(--black); }
  /* Hero card uses the smaller 8px radius (Figma) */
  .cs-hero .cs-image-block .cs-section-inner { border-radius: var(--radius-sm); }

  /* Full-width hero variant: skip the inset-card treatment entirely, back to
     the mobile full-bleed band (edge-to-edge, square corners, no side
     padding). Toggle via `heroFullWidth: true` in the case-study data file. */
  .cs-hero--full .cs-image-block {
    background: var(--ivory-dark);
    padding: var(--space-800) 0;
    /* Extend the background up behind .cs-back (88px tall here: 2×24px
       padding + 40px icon), compensated by the same amount of extra
       padding-top so the content doesn't shift — see the base rule above. */
    margin-top: -88px;
    padding-top: calc(var(--space-800) + 88px);
    padding-bottom: var(--space-1600); /* 64px, desktop only */
  }
  .cs-hero--full .cs-image-block--dark { background: var(--black); }
  .cs-hero--full .cs-image-block .cs-section-inner {
    background: transparent;
    border-radius: 0;
    padding: 0;
    max-width: none;
  }
  /* shelf.css's own -20px bleed assumes a 20px-padded parent (see its
     comment); neutralize it since this parent now has no padding at all. */
  .cs-hero--full .shelf { margin-inline: 0; }
}