/* =============================================================
   case-study.css — STAR case-study template
   Extends style.css (tokens, .wrap, .case-hero, .case-content,
   .case__stats, .flow, .process__row, .reveal, etc.). This file
   only adds what STAR-narrative case studies need on top of that.
   Reused across backlog-ai.html, obe-power.html, carnival-cruise.html,
   adi-green.html. Media queries live in responsive.css.
   ============================================================= */

/* ============ PROJECT HERO — descriptor, responsibilities, tags ============ */
.case-hero__descriptor{ font-size: 19px; line-height: 1.6; color: var(--text-soft); max-width: 34em; margin-top: var(--sp-5); }
.case-hero__responsibilities dd{ display: flex; flex-wrap: wrap; gap: 6px 0; }
.case-hero__responsibilities dd span:not(:last-child)::after{ content: '\00b7'; margin: 0 8px; color: var(--text-faint); }

.case-tags{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-7); }
.case-tag{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); border: 1px solid var(--line-strong); padding: 6px 13px; border-radius: 20px; }

/* ============ HERO IMAGE (project image, full-bleed within mainarea) ============ */
.case-hero-image{ max-width: 1400px; margin: var(--sp-8) auto 0; padding: 0 var(--sp-8); }
.case-hero-image .media{ aspect-ratio: 16/9; }

/* ============ CHAPTER — STAR major section shell ============ */
.chapter{ padding: var(--sp-10) 0; border-top: 1px solid var(--line); }
.chapter__head{ margin-bottom: var(--sp-8); }
.chapter__index{ font-size: 13px; display: block; margin-bottom: var(--sp-4); }
.chapter__heading{ font-size: clamp(30px, 4vw, 46px); line-height: 1.15; max-width: 16em; }
.chapter__subheading{ font-size: 17px; color: var(--text-soft); margin-top: var(--sp-4); max-width: 32em; }

.chapter h4{ font-size: 20px; font-weight: 600; margin: var(--sp-8) 0 var(--sp-4); max-width: 30em; }
.chapter h4:first-child{ margin-top: 0; }
.chapter p{ font-size: 16.5px; line-height: 1.75; color: var(--text-soft); margin-bottom: var(--sp-5); max-width: 46em; }
.chapter p strong{ color: var(--text); font-weight: 600; }

/* content-width helpers — reuse the same measures as the rest of the site */
.w-narrow{ max-width: 46em; }   /* long-form paragraphs — matches .case-content p */
.w-medium{ max-width: 34em; }   /* heading + supporting copy — matches .hero__sub */
.w-wide{ max-width: none; }     /* full .wrap width — imagery / visual storytelling */

/* subsection label, used above a group of related content within Action */
.subsection-label{ margin-bottom: var(--sp-6); }
.subsection-label h3{ font-size: 26px; font-weight: 500; }
.subsection-label span{ display: block; margin-bottom: var(--sp-3); }

/* ============ NUMBERED INSIGHT LIST — user problems / goals / learnings ============ */
.insight-list{ display: flex; flex-direction: column; margin: var(--sp-6) 0; }
.insight-row{ display: flex; gap: var(--sp-6); padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.insight-row:first-child{ padding-top: 0; }
.insight-row__num{ font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); flex-shrink: 0; padding-top: 2px; }
.insight-row__text{ font-size: 16px; line-height: 1.6; color: var(--text-soft); }
.insight-row__text strong{ color: var(--text); font-weight: 600; }

/* ============ CHECKLIST — constraints / success criteria ============ */
.checklist{ display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-6) 0; max-width: 40em; }
.checklist li{ display: flex; gap: var(--sp-3); font-size: 15.5px; color: var(--text-soft); line-height: 1.6; }
.checklist li::before{ content: '\2014'; color: var(--accent); flex-shrink: 0; }

/* ============ SIMPLE TABLE — e.g. pain point → design response ============ */
/* table-layout:fixed + an explicit first-column width keeps both
   columns' boundaries stable regardless of how long any one row's
   text runs, instead of the browser re-balancing column widths per
   the longest cell content (default table auto-layout behavior). */
.simple-table{ width: 100%; border-collapse: collapse; margin: var(--sp-6) 0; table-layout: fixed; }
.simple-table th{ text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 400; padding: 0 var(--sp-5) var(--sp-3) 0; border-bottom: 1px solid var(--line-strong); }
.simple-table td{ font-size: 14.5px; color: var(--text-soft); line-height: 1.55; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.simple-table tr:last-child td{ border-bottom: none; }
.simple-table td:first-child{ color: var(--text); }
.simple-table th:first-child, .simple-table td:first-child{ width: 42%; }

/* ============ FEATURE SHOWCASE — image(s) + short caption ============ */
/* Deliberately lighter than .decision (no Problem/Decision/Why rows) —
   for a concise "here's what shipped" grid rather than a rationale
   breakdown. .feature-card__images gets a fixed height (not just a
   max-height on the img) specifically so every card in the grid lands
   at the same height regardless of its source screenshot's shape —
   object-fit:contain then letterboxes each image to fit that box
   without cropping, whether it's a tall 375px-wide phone capture or a
   wide multi-screen flow composite. flex:1 splits paired images (e.g.
   Login + Holding) evenly; min-width:0 stops them overflowing their
   half in a flex row. */
.feature-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin: var(--sp-7) 0; }
.feature-card{ border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--sp-5); transition: border-color .3s, transform .3s var(--ease); }
.feature-card:hover{ border-color: var(--accent); transform: translateY(-4px); }
.feature-card__images{ display: flex; gap: var(--sp-3); height: 280px; margin-bottom: var(--sp-4); }
.feature-card__images img{ flex: 1; min-width: 0; height: 100%; object-fit: contain; background: var(--bg-2); border-radius: var(--radius-s); display: block; }
.feature-card h4{ font-size: 16px; font-weight: 600; margin: 0 0 var(--sp-2); }
.feature-card p{ font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin: 0; }

/* ============ MEDIA / PLACEHOLDER SYSTEM ============ */
.media{ border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.media--placeholder{ aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--sp-3); text-align: center; padding: var(--sp-6); }
.media--placeholder .placeholder-icon{ width: 100%; max-width: 220px; height: auto; opacity: .9; }
.media--placeholder--square{ aspect-ratio: 1/1; }
/* for a source screenshot with an extreme aspect ratio (e.g. a full,
   very tall page capture) — caps it to a fixed height so it reads as
   a legible excerpt instead of an unusably long strip; combined with
   object-fit:cover this crops to the top of the image (see the img's
   own object-position:top). The height itself shrinks at narrower
   widths (below) — at a fixed px height, object-fit:cover's effective
   "zoom" is tied to the image's rendered width, so on a narrow phone
   viewport the same 640px would show a much more zoomed-out (harder
   to read) slice of the original than it does on desktop; a shorter
   mobile height keeps what's visible closer to actually legible. */
.media--capped-crop{ height: 640px; }
.media__label{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); max-width: 22em; }
.media-caption{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); letter-spacing: .05em; margin-top: var(--sp-4); text-align: center; }

/* full-bleed visual, breaks out of the 1080px .wrap for impact */
.case-study-media--full{ max-width: 1400px; margin: var(--sp-8) auto; padding: 0 var(--sp-8); }
.case-study-media--full .media{ aspect-ratio: 21/9; }

/* wide but contained within the standard text column width */
.case-study-media--wide{ margin: var(--sp-8) 0; }

/* full-bleed "big moment" visual, but uncropped (unlike --full) — for a
   gallery-style image whose natural aspect ratio must stay intact */
.case-study-media--gallery{ max-width: 1400px; margin: var(--sp-8) auto; padding: 0 var(--sp-8); }

/* two / three column visual grids */
.case-study-grid--two{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin: var(--sp-8) 0; }
.case-study-grid--three{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-8) 0; }
.case-study-grid--two .media, .case-study-grid--three .media{ aspect-ratio: 4/3; }
/* opt-out modifier, additive only (adi-green.html/po-cruises.html's
   existing --three usage is untouched since they don't carry this
   class) — for real screenshots where a forced 4:3 crop would cut
   into the UI rather than just trimming empty space. */
.case-study-grid--uncropped .media{ aspect-ratio: auto; }

/* image + text split (add --reverse to flip on desktop) */
.case-study-media-text{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: center; margin: var(--sp-8) 0; }
.case-study-media-text--reverse .media{ order: 2; }
.case-study-media-text h4{ margin-top: 0; }

/* ============ KEY DESIGN DECISION ============ */
.decision{ border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--sp-7); margin: var(--sp-8) 0; }
.decision__title{ font-size: 23px; font-weight: 600; margin-bottom: var(--sp-6); max-width: 26em; }
.decision__row{ display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-5); padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.decision__row:first-of-type{ border-top: none; padding-top: 0; }
.decision__label{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding-top: 2px; }
.decision__value{ font-size: 15.5px; color: var(--text-soft); line-height: 1.65; }
.decision__value strong{ color: var(--text); font-weight: 600; }
.decision__media{ margin-top: var(--sp-3); }

/* ============ INTERACTION STATES — flexible tile grid ============ */
.states-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-4); margin: var(--sp-7) 0; }
.state-tile{ border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--bg-2); }
.state-tile .media--placeholder{ aspect-ratio: 1/1; padding: var(--sp-4); border: none; border-radius: 0; }
.state-tile__label{ font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: var(--sp-3); border-top: 1px solid var(--line); color: var(--text-soft); background: var(--surface); }

/* ============ IMPACT — result chapter card grid ============ */
.impact-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin: var(--sp-7) 0; }
/* 3-column variant — reuses .impact-card as-is (same border/radius/
   hover-lift), just a different column count, for compact 3-way
   comparisons like the Benchmarking subsection. */
.impact-grid--three{ grid-template-columns: repeat(3, 1fr); }
.impact-card{ border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--sp-6); transition: border-color .3s, transform .3s var(--ease); }
.impact-card:hover{ border-color: var(--accent); transform: translateY(-4px); }
.impact-card h4{ font-size: 17px; font-weight: 600; margin: 0 0 var(--sp-3); }
.impact-card p{ font-size: 13.5px; color: var(--text-soft); line-height: 1.6; margin: 0; }

/* tight number+label pairing for .case__stats — base rule leaves the
   number to inherit body line-height (1.5), which reads as a large gap
   under a 32px number; this modifier groups each pair visually */
.case__stats--tight div b{ line-height: 1.1; margin-bottom: var(--sp-1); }

/* ============ LEARNINGS ============ */
.learnings{ padding: var(--sp-10) 0; border-top: 1px solid var(--line); }
.learnings__list{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.learnings__item{ border-top: 2px solid var(--text); padding-top: var(--sp-5); }
.learnings__item span{ font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); display: block; margin-bottom: var(--sp-3); }
.learnings__item p{ font-size: 15.5px; line-height: 1.65; color: var(--text-soft); margin: 0; }

/* ============ STAR SUMMARY — compact recap ============ */
.star-summary{ padding: var(--sp-9) 0; border-top: 1px solid var(--line); background: var(--bg-2); }
.star-summary__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.star-summary__item dt{ font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: var(--sp-3); }
.star-summary__item dd{ margin: 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.55; }

/* ============ NEXT PROJECT — single-target variant of .case-nextprev ============ */
.case-nextprev--single{ grid-template-columns: 1fr; }
.case-nextprev--single a{ border-right: none; }