/* =========================================================
   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-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-media,
.cs--media-800 > .cs-gallery,
.cs--media-800 > .cs-carousel,
.cs--media-800 > .cs-embed { max-width: 800px; }
.cs-hero { padding-top: 64px; }

/* 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. Stacks like any section below 1200px. */
.cs-split__text { display: flex; flex-direction: column; gap: 16px; }
.cs-split__text > .cs-eyebrow + h2 { margin-top: -8px; }
@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; }
}

/* Spacing inside a section */
.cs-section > * + * { margin-top: 16px; }
.cs-section > .cs-eyebrow + h2,
.cs-section > .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 + * { margin-top: 40px; }

.cs-eyebrow { color: var(--gray); }
.cs-hero > .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 { width: 100%; height: 32px; object-fit: contain; object-position: left center; margin-bottom: 24px; }
.cs-section > .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-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)); }

/* 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; }
.cs-row { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; gap: 64px; }
.cs-row:nth-child(even) > :first-child { order: 2; }
.cs-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.cs-row__text { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.cs-row:nth-child(even) .cs-row__text { justify-self: end; }
.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 { 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(4, 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-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-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; }
}