/* ============================================
   CASE STUDY TEMPLATE
   Reusable across all case studies (Care Hack, NYC DoE, Olive)
   ============================================ */

.cs-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* literal ratio 288:864:288 = 1:3:1, resolves to exact px values at the 1440px design width via max-width below */
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}

/* ---- Side nav ---- */
.cs-sidenav {
  position: sticky;
  top: 96px;
  /* Figma: pt-72, so the first nav item is level with the H1 (both at abs y=136).
     But position:sticky offsets this box down by top:96px (64px fixed header + 32px)
     which Figma's static layout doesn't have — that pushed the first item 31px below
     the H1. Compensating: 72 − 31 = 41px top so the first item aligns with the H1,
     matching Figma's intent. Horizontal/bottom padding unchanged (literal 48/64). */
  padding: 41px 48px 64px;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
/* When a full-bleed asset scrolls into the sidenav's band, site.js adds .is-hidden so
   the nav disappears behind the asset and reappears once it has passed. Not a Figma
   interaction — fixes a real collision between the sticky nav and bleed assets. */
.cs-sidenav.is-hidden { opacity: 0; visibility: hidden; }
.cs-sidenav ul { display: flex; flex-direction: column; gap: 2px; } /* literal: gap-2 */
.cs-sidenav a {
  display: flex;
  align-items: center;
  min-height: 44px; /* literal touch-target size */
  padding: 4px 16px; /* literal: py-4 px-16 */
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.cs-sidenav a:hover { color: var(--color-accent-primary-hover); }
.cs-sidenav a.active {
  color: var(--color-accent-primary);
  border-left-color: var(--color-accent-primary);
  font-weight: 500;
}

.cs-center {
  padding: 72px 0 64px; /* literal: matches sidenav's pt-72/pb-64; center column itself is already 864px wide, no horizontal padding needed */
}

.cs-delight { min-height: 1px; }

/* ---- Hero ---- */
.cs-hero { display: flex; flex-direction: column; gap: 32px; margin-bottom: var(--space-48); } /* literal: 32px title-to-subtitle gap */
.cs-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, var(--font-size-61));
  line-height: 1.508; /* literal: 92/61 */
  color: var(--color-text-primary);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  text-box-trim: trim-both; /* removes invisible leading space above/below glyphs — matches how Figma measures text boxes, which is why gaps were reading larger than their literal value */
  text-box-edge: cap alphabetic;
}
.cs-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--font-size-20);
  line-height: var(--line-height-30);
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-secondary, #333230);
  max-width: 60ch;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ---- Mockup placeholders (real assets to be swapped in) ---- */
.cs-hero-mockups { display: flex; gap: clamp(16px, 5.06vw, 43.628px); flex-wrap: wrap; margin-top: 16px; } /* literal: 32px flex-gap + 16px margin = 48px subtitle-to-mockups gap */
.phone-mock {
  flex: 1 1 0;
  max-width: 258.581px; /* literal: matches the design's hero-image width */
  aspect-ratio: 1049 / 2140; /* real asset's own dimensions — the phone frame is baked into the image itself */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ba-mock, .wide-mock {
  background: var(--color-background-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  overflow: hidden;
}
/* anim-mock: the Figma "animation" is a bare 400x400 element on the page background,
   no surface/border/radius — the Lottie (transparent) sits directly on the page. */
.anim-mock {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.browser-mock {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 3300 / 1759; /* real asset's own dimensions — the Dell laptop frame is baked into the image itself */
  margin-top: 1rem;
}
.browser-mock img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show the full laptop mockup complete, don't crop like a photo */
  display: block;
}
.ba-mock img, .wide-mock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phone-mock img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* real asset includes its own phone frame — show it complete, don't crop */
  display: block;
}
.anim-mock dotlottie-wc, .anim-mock img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.chat-pair { display: flex; flex-direction: column; gap: 0.75rem; }
.chat-pair .ba-mock { min-height: 0; }
.chat-pair .ba-mock img { object-fit: contain; height: auto; } /* full UI screenshots — show complete, don't crop like a photo */
.anim-mock {
  width: 400px; /* literal: the "animation" element in Figma is a standalone 400x400px image, not a small circular badge */
  height: 400px;
  flex-shrink: 0;
}
.wide-mock { min-height: 320px; margin-top: 1rem; }
.dark-mock { background: #2a2a28; border-color: #2a2a28; }
.dark-mock .mock-label { color: #c9c6c0; }
.mock-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0 1rem;
}

.cs-flow-split { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); padding-top: 18px; margin: 24px 0 0; } /* literal: items-start justify-between pt-18; 24px gap from the phones above */
.cs-flow-split-text { max-width: 444px; display: flex; flex-direction: column; gap: 27px; } /* literal: 444.027px text column; both sentences stacked, blank-line gap ≈ one line (27px) */
.cs-flow-split-text p { margin: 0; }
.cs-flow-split > p { margin: 0; max-width: 444px; } /* literal: text container width 444.027px */

.before-after, .two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  margin: 1rem 0;
}
.ba-block, .tu-block { display: flex; flex-direction: column; gap: 0.5rem; }
.ba-tag {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ba-mock { min-height: 260px; }

/* ---- Dashboard redesign: literal Figma layout (node 2180:4604) ----
   Vertical Before-then-After stack, NOT a 1fr/1fr before-after grid.
   Group gap 40px (space/40); each labelled block gap 6px (space/6).
   Shadow is baked into the assets themselves, so NO CSS box-shadow here —
   adding one would draw a rectangle around the artwork. Each image sizes to
   its own intrinsic dimensions so nothing letterboxes into a visible box. */
.dash-redesign { display: flex; flex-direction: column; gap: 40px; margin: 1rem 0 2rem; }
.dash-block { display: flex; flex-direction: column; gap: 6px; }

/* Before: single full-width image, real asset ratio 3456/1580 (= Figma 4096/1872 box) */
.dash-before-img { width: 100%; line-height: 0; }
.dash-before-img img { width: 100%; height: auto; display: block; }

/* After: desktop + phone at opposite ends of the 864 column (Figma justify-between).
   Figma widths: Dashboard_1 = 645.548px, Dashboard_50 = 143.709px (literal).
   Each image sets its own height from its intrinsic ratio — no aspect-ratio or
   object-fit forced on the container, so the box always equals the artwork. */
.dash-after-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}
.dash-after-desktop { flex: 0 1 645.548px; line-height: 0; }
.dash-after-phone   { flex: 0 0 143.709px; line-height: 0; }
.dash-after-desktop img,
.dash-after-phone img { width: 100%; height: auto; display: block; }

@media (max-width: 720px) {
  .dash-after-row { gap: 16px; }
  .dash-after-phone { flex: 0 0 22%; }
}

/* ---- Chat flow redesign: literal Figma layout (node 2511:11341) ----
   One row holds both user groups: New-user pair (left, Figma 382.06w) and
   Returning-user pair (right, 395.59w), ~86px between groups. Within each group
   the plain screen + drawer-overlay screen sit SIDE BY SIDE (~32px apart), not
   stacked. Screens are pre-rendered images — no surface frame, each sized by its
   own intrinsic ratio. Wide desktop view spans the full 864 column below. */
.chat-flow-pairs {
  display: flex;
  align-items: flex-start;
  gap: 86px; /* literal: Frame 20 x(468.41) − Frame 18 end(382.06) */
  margin: 24px 0 0; /* literal Figma: 24px from intro text to the paired screens */
}
.cf-group { display: flex; flex-direction: column; gap: 6px; flex: 0 1 auto; }
/* label: literal Figma "Body Large - Bold" (node 2511:11353) — Jakarta Bold 20/30,
   tracking 0.45px, text/secondary #333230, sentence case. NOT the .ba-tag treatment
   (13px uppercase oxblood) the build was reusing. */
.cf-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--font-size-20);
  line-height: var(--line-height-30);
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-secondary, #333230);
}
.cf-group:first-child { flex-basis: 382.06px; }
.cf-group:last-child  { flex-basis: 395.59px; }
.cf-pair { display: flex; align-items: flex-start; gap: 32px; } /* literal: 207.03 − 175.03 */
.cf-screen { flex: 1 1 0; min-width: 0; line-height: 0; }
.cf-screen img { width: 100%; height: auto; display: block; }

.cf-desktop { width: 100%; line-height: 0; margin: 40px 0 0; } /* literal Figma: 40px from paired screens to the wide desktop */
.cf-desktop img { width: 100%; height: auto; display: block; }

@media (max-width: 820px) {
  /* keep each pair intact but let the two groups stack so phones stay legible */
  .chat-flow-pairs { flex-direction: column; gap: 2rem; }
  .cf-group:first-child, .cf-group:last-child { flex-basis: auto; }
  .cf-pair { gap: 16px; }
}

/* ---- Implementing design ops ----
   First block: mobile "as designed" phone + "as shipped" panel, side by side and
   height-matched so they read as a tidy pair. Height capped so they don't dominate
   the section (departs from the literal Figma 143.7/211.9 sizing at the user's
   request — they wanted them smaller and side by side). Each keeps its own aspect
   ratio, no frame. Second block: q1 redline artifact, full column, rounded corners. */
.dops-compare {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  margin: 32px 0; /* literal Figma: 32px above (from intro) and 32px below (to middle text) */
}
.dops-block { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* height-match the two screens via a shared cap; widths follow each asset's ratio */
.dops-designed, .dops-shipped { line-height: 0; }
.dops-designed img, .dops-shipped img {
  height: 480px;        /* shared height so the pair aligns; larger per user request */
  width: auto;
  display: block;
}

.dops-redline { width: 100%; line-height: 0; margin: 32px 0 2rem; } /* literal Figma: 32px from middle text to redline */
.dops-redline img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;  /* rounded corners — reinstated for the redline image only */
}

@media (max-width: 720px) {
  .dops-compare { gap: 24px; }
  .dops-designed img, .dops-shipped img { height: 340px; }
}

/* ---- Overview / quick facts ---- */
.cs-overview-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--space-48);
  align-items: start;
}
.cs-overview-text h2 { margin-bottom: var(--space-24); }
.cs-overview-text p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 27px;
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-secondary, #333230);
  margin-bottom: 1.25rem;
}
.cs-overview-text a { color: var(--color-accent-primary-hover); text-decoration-thickness: 1px; }

.cs-quickfacts { display: flex; flex-direction: column; gap: var(--space-24); padding-top: 4rem; }
.cs-quickfacts .qf-item h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.cs-quickfacts .qf-item p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* ---- General section rhythm ---- */
.cs-section { margin-top: var(--space-128); scroll-margin-top: 96px; } /* literal Figma: 128px between major sections */

/* literal Figma: 192px between the last section (impact) and the footer.
   Scoped to case-study pages via the .cs-layout sibling so home/about are unaffected.
   84px already exists from .cs-center's pb-64 + the section's trailing space, so the
   remaining 108px is added here to reach the literal 192px total. */
main:has(.cs-layout) + footer { margin-top: 108px; }
.cs-overview { scroll-margin-top: 96px; }
.cs-section h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--font-size-39);
  line-height: var(--line-height-59);
  color: var(--color-text-primary);
  margin-bottom: var(--space-24);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.cs-section p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 27px;
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-secondary, #333230);
  margin-bottom: 1.25rem;
}
.cs-subhead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--font-size-31);
  line-height: var(--line-height-47);
  color: var(--color-text-secondary, #333230);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-secondary);
  text-decoration-thickness: 12.5%;
  margin: 2rem 0 1rem;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.cs-flow { margin-bottom: 96px; } /* literal Figma: 96px between subsections (flow 1-4) */
.cs-flow:last-child { margin-bottom: 0; }

.cs-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; padding-left: 0; }
.cs-list li {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 27px;
  letter-spacing: var(--tracking-body-large);
  color: var(--color-text-secondary, #333230);
  padding-left: 1.5rem;
  position: relative;
}
.cs-list li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-accent, #773c29);
}
.cs-list strong { font-weight: 700; }

@media (max-width: 1100px) {
  .cs-layout { grid-template-columns: 1fr; }
  .cs-sidenav { position: static; display: none; }
  .cs-delight { display: none; }
}
@media (max-width: 720px) {
  .cs-overview-grid { grid-template-columns: 1fr; }
  .cs-quickfacts { padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
  .before-after, .two-up { grid-template-columns: 1fr; }
  .cs-flow-split { flex-direction: column; align-items: flex-start; }
}