/* =========================================================
   Case-study template (Wildflower, Gusto, Omaze, Therabody PDP, Therabody Cart).
   Start a new one from src/pages/_case-study-template.html.

   Page structure
     {{> breadcrumbs}}                         Home › Work › page name (crumb: in the settings block)
     <section class="section screen cs-section cs-hero">   logo, eyebrow, title, intro, details, cover
     <section class="section screen cs-section">           one per chapter: eyebrow, h2, text, images
     <section class="section keep-reading">         two other case studies (124px above, not full-screen)

   Widths
     Text, headings and lists: 700px max (--text-max), centred.
     Images, galleries, carousels, embeds: the full content width (up to 1600px, --max).
     Add cs--media-800 to a section to cap its images at 800px instead (used on Omaze and Gusto).

   Sections use the same side margins and top/bottom space as the home page (.section),
   and fill the screen on tablet and desktop (.screen) with their content centred.
   ========================================================= */


/* ---------- Sections: one centred column ---------- */
.cs-section { display: flex; flex-direction: column; align-items: center; }
.cs-section.screen { justify-content: center; }
.cs-section > * { width: 100%; max-width: var(--text-max); }
.cs-section > .cs-cover,
.cs-section > .cs-pair,
.cs-section > .cs-panels,
.cs-section > .cs-media,
.cs-section > .cs-gallery,
.cs-section > .cs-carousel,
.cs-section > .cs-embed { max-width: none; }
.cs--media-800 > .cs-cover,
.cs--media-800 > .cs-pair,
.cs--media-800 > .cs-panels,
.cs--media-800 > .cs-media,
.cs--media-800 > .cs-gallery,
.cs--media-800 > .cs-carousel,
.cs--media-800 > .cs-embed { max-width: 800px; }
.cs-section > .cs-media--wide { max-width: 1040px; }   /* wide images with small detail (e.g. side-by-side screens) get more room */
.cs-hero { padding-top: 64px; }
/* Case-study headlines stay at the tablet size (40px) on desktop too — the full 56px was too big for long titles */
@media (min-width: 1200px) { .cs-hero h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.4px; } }
/* Hero, side by side from 1200px: cover across the top, then headline + tags + intro on the left and the
   gradient details box on the right. Stacks below 1200px. */
@media (min-width: 1200px) {
  .cs-hero--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .cs-hero--split > * { grid-column: 1; max-width: none; }
  .cs-hero--split > :is(.cs-cover, .cs-cover-phones) { grid-column: 1 / -1; justify-self: center; }
  .cs-hero--split > .cs-meta { grid-column: 2; margin-top: 0; align-self: center; }
  .cs-hero--split > .cs-split__text + .cs-meta { margin-top: 0; }
}

/* Side-by-side section (cs-section--split): text on the left, images on the right on desktop,
   so a section with big media still fits on one screen. Side by side from 1200px wide; stacks below that. */
.cs-split__text { display: flex; flex-direction: column; gap: 16px; }
.cs-split__text > .cs-eyebrow + h2 { margin-top: -8px; }
.cs-split__text > .cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 16px; }   /* stats inside a side-by-side text column */
@media (min-width: 1200px) {
  .cs-section--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; align-content: center; column-gap: 64px; }
  .cs-section.cs-section--split > * { max-width: none; }
  .cs-section.cs-section--split > * + * { margin-top: 0; }
  .cs-section--split { column-gap: clamp(32px, 4vw, 64px); }   /* tighter gap on smaller laptops */
  .cs-section.cs-section--split > .cs-compare--phone { justify-self: center; width: 100%; max-width: 280px; }   /* small enough that the section fits one screen */
  .cs-section--split > .features--1 { margin-top: 0; }
}

/* Spacing inside a section */
.cs-section > * + * { margin-top: 16px; }
.cs-section > .cs-eyebrow + h2,
.cs-section > .cs-eyebrow + h1,
.cs-hero .cs-split__text > .cs-eyebrow + h1 { margin-top: 8px; }
.cs-section > h3, .cs-section > h4, .cs-section > h5 { margin-top: 40px; }
.cs-section > h2 + *, .cs-section > h3 + *, .cs-section > h4 + *, .cs-section > h5 + * { margin-top: 16px; }
.cs-section > .cs-media, .cs-section > .cs-pair, .cs-section > .cs-gallery, .cs-section > .cs-carousel, .cs-section > .cs-embed { margin-top: 40px; }
.cs-section > .cs-media + *, .cs-section > .cs-pair + *, .cs-section > .cs-gallery + *, .cs-section > .cs-carousel + *, .cs-section > .cs-embed + *, .cs-section > .cs-panels + *, .cs-section > .cs-compare + *, .cs-section > .cs-comments + *, .cs-section > .cs-stats + * { margin-top: 40px; }

.cs-eyebrow { color: var(--gray); }
.cs-hero > .cs-eyebrow, .cs-hero .cs-split__text > .cs-eyebrow { font-size: 16px; }   /* the short line above the hero headline */

/* The hero always leads with the cover image; the company logo sits above the title */
.cs-section > .cs-logo, .cs-hero .cs-split__text > .cs-logo { width: 100%; height: 32px; object-fit: contain; object-position: left center; margin-bottom: 24px; }
.cs-section > .cs-logo--wide, .cs-hero .cs-split__text > .cs-logo--wide { height: 21px; }   /* long, flat wordmarks (Wildflower): shorter so they read the same size as the others */
.cs-cover { height: auto; border-radius: var(--radius-lg); margin-bottom: 24px; }

/* Cards (personas, mental models, key points): side by side, tinted pink, purple, green at 25%; stack on phones */
.cs-section > .cs-cards { max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; }
.cs-section > .cs-cards + * { margin-top: 40px; }   /* same space after the cards as before them */
.cs-card { display: flex; flex-direction: column; gap: 8px; padding: var(--card-pad); border-radius: var(--radius-lg); }
.cs-card:nth-child(3n+1) { background: rgba(var(--pink-rgb), var(--tint)); }
.cs-card:nth-child(3n+2) { background: rgba(var(--purple-rgb), var(--tint)); }
.cs-card:nth-child(3n) { background: rgba(var(--green-rgb), var(--tint)); }
/* Body copy inside the tinted cards is smaller (13px) than page text */
.cs-card p { font-size: 13px; line-height: 20px; }

/* Rows (cs-rows): an image with its caption beside it, sides alternating each row; stacks on phones */
.cs-section > .cs-rows { max-width: 1040px; display: flex; flex-direction: column; gap: 64px; margin-top: 40px; }
/* Phone and caption sit together as one centred pair (no empty space off to one side) */
.cs-row { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 420px); justify-content: center; align-items: center; gap: 64px; }
.cs-row:nth-child(even) > :first-child { order: 2; }
.cs-row:nth-child(even) { grid-template-columns: minmax(0, 420px) minmax(0, 320px); }
.cs-row__text { display: flex; flex-direction: column; gap: 8px; }
.cs-row .phone { width: 100%; }
.cs-row .phone__screen { position: absolute; top: 2.25%; left: 5.26%; width: 89.62%; height: 95.5%; object-fit: cover; object-position: top; border-radius: 9% / 4.2%; }
.cs-row .phone__frame { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }

/* Text that points down at the image below it (cs-pointer): a curved lavender arrow like the one in the screens */
.cs-pointer__arrow { display: inline-block; vertical-align: top; width: 48px; height: 42px; margin: 10px 0 0 8px; fill: none; stroke: var(--purple); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cs-section > .cs-pointer + .cs-media { margin-top: 8px; }

/* Work-type tags under the hero headline */
.cs-section > .cs-tags, .cs-hero .cs-split__text > .cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--block-gap); margin-bottom: 8px; }
.cs-tags .tag { height: 20px; padding: 0 14px; border-radius: 6px; }   /* compact: 20px tall, roomier sides */

/* Role / Timeframe / Team … */
/* Project details in a gradient box: 4 across, 2×2 on small tablets (under 810px), stacked on phones (under 600px) */
.cs-section > .cs-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; padding: var(--card-pad); border-radius: var(--radius-lg); background: var(--band); }
.cs-meta dt { color: var(--gray); }
.cs-meta dd { margin: 4px 0 0; }

/* ---------- Images, galleries, embeds ---------- */
.cs-media img, .cs-media video, .cs-gallery img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
/* Screenshots get a thin gray outline so white screens don't melt into the page. Not for phone mockups or transparent images. */
img.cs-screen { box-sizing: border-box; border: 1px solid var(--screen-stroke); border-radius: var(--radius-md); }
/* cs-pair: two labelled screens side by side (e.g. Mobile next to Desktop, Control next to Variation).
   The first one is the narrow mobile screen; add cs-pair--even for two equal columns. They stack on phones only. */
.cs-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.cs-pair--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-pair figcaption { margin-bottom: 16px; }
.cs-pair img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
/* cs-stats: big result numbers with a label under each (and an optional sentence), three across until phones */
.cs-section > .cs-stats { max-width: 800px; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.cs-stats > div { display: flex; flex-direction: column; gap: 8px; }
.cs-stats dd { margin: 0; }
.cs-stats__value { order: -1; font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-track); }   /* number shows first, label under it */
.cs-section > .cs-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two (or four) numbers: two across */
/* cs-section--center: for a section whose heading and short intro sit right above wide, centred visuals
   (phones, galleries, cards, big images). The heading and intro are centred to line up with them;
   lists and text after the visuals stay left-aligned. */
@media (min-width: 600px) { .cs-section--center > :is(.cs-eyebrow, h2, p):has(~ :is(.cs-rows, .cs-gallery, .cs-cards, .cs-carousel, .cs-media, .cs-pair, .cs-panels, .cs-quotes, .cs-comments)) { text-align: center; } }   /* phones: everything stays left-aligned */

/* cs-panels: several images in one gallery cell, side by side and top-aligned.
   Give each <img> style="flex-grow:<its width>" so they keep their relative sizes. */
.cs-panels { display: flex; align-items: flex-start; gap: 12px; }
.cs-panels img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; border-radius: var(--radius-md); }
.cs-section > .cs-panels { margin-top: 40px; }
/* Device mockups (laptop + phone on transparent backgrounds): more space between, no rounded clipping */
.cs-panels--devices { gap: clamp(16px, 4vw, 40px); align-items: center; }
.cs-panels--devices img { border-radius: 0; }

/* cs-compare: before/after slider — core styles are shared in components.css; these are the case-study placements */
.cs-section > .cs-compare { margin-top: 40px; }
.cs--media-800 > .cs-compare { max-width: 800px; }
/* Phone-sized slider (the shared .cs-compare--bare styles live in components.css) */
.cs-section > .cs-compare--phone { max-width: 360px; }
.cs-compare .cs-placeholder--alt { background: color-mix(in srgb, var(--placeholder) 55%, var(--white)); color: var(--black); }

/* cs-cover-phones: a hero cover made of phone mockups side by side (transparent backgrounds), three across on every screen */
.cs-section > .cs-cover-phones { max-width: 800px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 32px); margin-bottom: 24px; }
.cs-cover-phones img { width: 100%; height: auto; }

/* cs-comments: real comment threads (screenshots) side by side; they fade in one after another */
.cs-section > .cs-comments { max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 40px; }
.cs-comments img { width: 100%; height: auto; box-sizing: border-box; border: 1px solid var(--screen-stroke); border-radius: var(--radius-md); }   /* gray outline like other screenshots */
.cs-comments img:nth-child(2) { transition-delay: 0.3s; }
.cs-comments img:nth-child(3) { transition-delay: 0.6s; }
@media (max-width: 599px) {
  .cs-section > .cs-comments { grid-template-columns: 1fr; max-width: 360px; }
  .cs-comments img:nth-child(n) { transition-delay: 0s; }   /* stacked: each one fades in as you reach it */
}

/* cs-cards--2: two cards per row. cs-swap: "what was proposed (struck through) → what we did" inside a card */
.cs-section > .cs-cards--2 { max-width: 800px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-swap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0; }
.cs-swap__arrow { padding-left: 10px; transform: rotate(90deg); line-height: 1; }   /* the → points down: before, then after */
.cs-swap s, .cs-swap span:not(.cs-swap__arrow) { padding: 4px 10px; border-radius: 6px; background: var(--white); }
.cs-swap s { color: var(--gray); }
.cs-swap span:not(.cs-swap__arrow) { font-weight: 600; }
@media (max-width: 599px) { .cs-section > .cs-cards--2 { grid-template-columns: 1fr; } }

/* cs-scrollshot: a very tall image (e.g. a full component sheet) inside a screen-shaped (16:10) scrollable window with the gray outline */
.cs-section > .cs-scrollshot { max-width: 720px; aspect-ratio: 16 / 10; min-height: 320px; overflow-y: auto;   /* window shaped like a laptop screen: shorter, more to scroll */
   overscroll-behavior: contain; border: 1px solid var(--screen-stroke); border-radius: var(--radius-md); background: var(--white); }
.cs-scrollshot img { width: 100%; height: auto; border-radius: 0; }

/* cs-note: a small gray caption sentence (a disclaimer under quotes or stats) */
.cs-note { color: var(--gray); font-size: 12px; line-height: 18px; }

/* cs-steps: a caption under each phone in a row-of-phones image (columns line up with the phones in gusto/05.png);
   on phones the captions become a simple numbered list */
.cs-steps { list-style: none; margin: 16px 0 0; padding: 0 0.6%; display: grid; grid-template-columns: repeat(4, 18.9%); justify-content: space-between; text-align: center; font-size: 13px; line-height: 18px; font-weight: 600; }
.cs-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cs-steps__num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: rgba(var(--pink-rgb), var(--tint)); font-family: var(--font-mono); font-size: 12px; font-weight: 400; }
@media (max-width: 599px) {
  .cs-steps { grid-template-columns: 1fr; gap: 12px; padding: 0; text-align: left; font-size: 15px; }
  .cs-steps li { flex-direction: row; gap: 12px; }
}

/* cs-mark: a highlight box drawn over part of a screenshot to point out the key difference
   (position it with inline left/top/width/height percentages) */
.cs-mark-wrap { position: relative; }
.cs-mark { position: absolute; border: 2.5px solid var(--pink-hover); border-radius: 10px; box-shadow: 0 0 0 4px rgba(var(--pink-rgb), 0.35); pointer-events: none; }
.cs-section > .cs-pair--stack { grid-template-columns: 1fr; row-gap: 40px; }   /* labelled screens one under another */

/* Draft helpers: a grey box where an image will go, and a highlighted note for copy still to write */
.cs-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: var(--card-pad); border-radius: var(--radius-md); background: var(--placeholder); color: var(--white); font-family: var(--font-mono); font-size: var(--caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.cs-todo { background: rgba(var(--pink-rgb), 0.5); color: var(--black); padding: 0 4px; border-radius: 4px; }

/* cs-quotes: client quotes as tinted cards side by side (stack on phones) */
.cs-section > .cs-quotes { max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.cs-section > .cs-quotes + * { margin-top: 40px; }
.cs-section > .cs-quotes--single { max-width: var(--text-max); grid-template-columns: 1fr; }   /* one quote: a single card at text width */
.cs-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: var(--card-pad); border-radius: var(--radius-lg); }
.cs-quote:nth-child(odd) { background: rgba(var(--purple-rgb), var(--tint)); }
.cs-quote:nth-child(even) { background: rgba(var(--green-rgb), var(--tint)); }
.cs-quote blockquote { margin: 0; font-size: var(--h4-size); line-height: var(--h4-line); }
.cs-quote figcaption { display: flex; align-items: center; gap: 12px; }
.cs-quote figcaption img { width: 52px; height: 52px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.cs-quote figcaption > span { display: flex; flex-direction: column; gap: 2px; }
.cs-gallery { display: grid; gap: 16px; align-items: start; }
.cs-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.cs-gallery--3 { grid-template-columns: repeat(3, 1fr); }
/* cs-gallery--stack-tablet: side by side on desktop, one under another below 1200px (for wide images) */
@media (max-width: 1199px) {
  .cs-gallery--stack-tablet { grid-template-columns: 1fr; }
}
/* Phone mockup: the screenshot sits in the frame's transparent screen area, the frame goes on top */
.phone { position: relative; aspect-ratio: 722 / 1470; margin: 0; }
.cs-gallery .phone__screen { position: absolute; top: 2.25%; left: 5.26%; width: 89.62%; height: 95.5%; object-fit: cover; object-position: top; border-radius: 9% / 4.2%; }
.cs-gallery .phone__frame { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 0; }
.cs-section > .cs-phones { max-width: 1040px; }   /* phones read best a bit smaller */
.cs-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-md); }

/* Carousel: one slide at a time, swipe or use the buttons. Square corners so slide edges aren't cut off. */
.cs-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.cs-carousel__track::-webkit-scrollbar { display: none; }
.cs-carousel__track img { flex: 0 0 100%; width: 100%; height: auto; scroll-snap-align: start; border-radius: 0; }
.cs-carousel__track img.cs-screen { border-radius: var(--radius-md); }   /* outlined screenshots keep their rounded corners */
/* Arrows sit to the left and right of the slides; the count sits 16px below them */
.cs-carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev track next" ". count ."; align-items: center; column-gap: 16px; }
.cs-carousel__track { grid-area: track; }
.cs-carousel__nav { display: contents; }
.cs-carousel__btn[data-carousel-prev] { grid-area: prev; }
.cs-carousel__btn[data-carousel-next] { grid-area: next; }
.cs-carousel__count { grid-area: count; justify-self: center; margin-top: 16px; }
.cs-carousel__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1.5px solid var(--black); background: var(--white); color: var(--black); }
.cs-carousel__btn:hover { background: var(--hover-gray); }
.cs-carousel__btn:disabled { opacity: 0.35; cursor: default; background: var(--white); }
.cs-carousel__count { color: var(--gray); text-align: center; }
.icon.flip { transform: scaleX(-1); }

/* Links inside case-study text */
.cs-section a:not(.text-link):not(.btn) { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---------- Keep reading ---------- */
/* Gray divider above "Keep reading": 124px below the callout, then 124px down to the heading (less on tablet/phone) */
.keep-reading::before { content: ""; display: block; max-width: var(--max); margin: 0 auto var(--section-pad); border-top: 1px solid var(--line); }
.keep-reading .cases { margin-top: 48px; }

/* Tablet: a little less room for the media */
@media (max-width: 1199px) {
  .cs-hero { padding-top: 40px; }
}

/* Phone */
@media (max-width: 809px) {
  .cs-hero { padding-top: 32px; }
  .cs-section > .cs-meta { grid-template-columns: repeat(2, 1fr); }
  .cs-gallery--3 { grid-template-columns: repeat(2, 1fr); }
  .cs-gallery--3.cs-phones { grid-template-columns: repeat(3, 1fr); }   /* phone mockups stay three across until phones */
  .keep-reading .cases { margin-top: 32px; }
}

/* Phones under 600px: project details stack */
@media (max-width: 599px) {
  .cs-section > .cs-meta { grid-template-columns: 1fr; }
  .cs-pair, .cs-pair--even { grid-template-columns: 1fr; row-gap: 40px; }
  .cs-section > .cs-stats, .cs-section > .cs-stats--2 { grid-template-columns: 1fr; }
  .cs-section > .cs-quotes { grid-template-columns: 1fr; }
  .cs-pair:not(.cs-pair--even) > :first-child { max-width: 375px; }   /* mobile screens stay phone-sized */
  .cs-row, .cs-row:nth-child(even) { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .cs-row:nth-child(even) > :first-child { order: 0; }
  .cs-row .phone { max-width: 260px; }
  .cs-row__text, .cs-row:nth-child(even) .cs-row__text { justify-self: stretch; max-width: none; }
  .cs-gallery--3.cs-phones { grid-template-columns: 1fr; justify-items: center; }
  .cs-phones .phone { width: 100%; max-width: 280px; }
  .cs-carousel { column-gap: 8px; }
  .cs-carousel__btn { width: 36px; height: 36px; }
}