/*
  CASE STUDY TEMPLATE STYLES
  Shared by all four /work/*.html pages. Keep this file generic — page-specific
  tone comes from copy and accent color choice (data-accent on <body>), not
  bespoke CSS per case study.
*/

/* Case-study accent hook: data-accent="green" | "amber" on <body> currently
   only affects .cs-divider below (blue-500 vs blue-400) — every other color
   it used to switch (eyebrow, meta value, link) converged to the shared
   blue-800 during the site-wide text-color unification, so those branches
   were removed as redundant. Kept in place as a starting point for a
   planned per-project accent system: each case study may eventually run
   its own full text-color family (e.g. Guidance Builder → green, same
   rest/hover/disabled convention as blue on Home) as a wayfinding cue,
   while global nav stays blue-800/900 regardless of which project page
   you're on. That likely means widening this attribute beyond green/amber
   to cover all four projects — not done here. */
[data-accent="amber"] .cs-divider {
  background: var(--color-accent-blue-400);
}

.cs-divider {
  width: 64px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-blue-500);
  margin-block: var(--space-4);
}

/* ---------- HERO ---------- */

.cs-hero {
  padding-block-start: var(--space-6);
  padding-block-end: var(--space-5);
}

/* Opt-in full-bleed photo background for a case study's own hero (e.g.
   work/sfe-work-survey.html) — same mechanism as home.css's .hero: a
   plain gradient below 600px (no image request on mobile), then the
   photo layered under a translucent cream scrim so header text stays
   legible over it. Needs the .cs-hero/.wrap split (outer full-width
   section for the background, inner .wrap div for the constrained
   text) since plain .cs-hero is normally combined with .wrap on one
   element and would otherwise never bleed past the content max-width. */
.cs-hero--photo {
  position: relative;
  background: linear-gradient(160deg, var(--color-accent-green-200), var(--color-accent-amber-100));
}

@media (min-width: 600px) {
  .cs-hero--photo {
    background-image:
      linear-gradient(160deg, rgba(250, 246, 239, 0.78), rgba(250, 246, 239, 0.6)),
      url('../assets/images/Backgrounds/Slide-background-green6.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

.cs-hero__eyebrow {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.cs-hero__title {
  font-size: var(--fs-display);
  max-width: 18ch;
}

.cs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.cs-hero__summary {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: var(--prose-max-width);
}

/* Pull-forward statement opening each survey-format mini case study
   (work/sfe-work-survey.html) — serif, a step up from body text, so it
   reads distinctly from the Problem/Process/Outcomes copy beneath it. */
.cs-lede {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
}

/* ---------- META ROW (role / timeline / tools) ---------- */

.cs-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  margin-block: var(--space-5);
}

.cs-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cs-meta__label {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-muted);
}

.cs-meta__value {
  font-weight: 600;
}

@media (min-width: 600px) {
  .cs-meta {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .cs-meta {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- HERO / SECTION MEDIA PLACEHOLDER ---------- */

.cs-media {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--border-hairline);
}

/* Empty-state treatment only — applied to placeholder divs that don't have
   a real image yet. Never combine with an actual <img>: the padding insets
   the image from its own border, and the striped background/centered label
   styling only makes sense for the placeholder text itself. */
.cs-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
  padding: var(--space-3);
  /* Green tint, not blue — keeps the placeholder visually distinct from
     text and echoes the glass tones in the real background photography.
     Purely cosmetic: once a real image replaces it, this never shows. */
  background:
    repeating-linear-gradient(
      45deg,
      var(--color-accent-green-100),
      var(--color-accent-green-100) 12px,
      var(--color-accent-green-200) 12px,
      var(--color-accent-green-200) 24px
    );
}

.cs-media--wide {
  aspect-ratio: 21 / 9;
}

.cs-media--square {
  aspect-ratio: 1 / 1;
}

/* Overrides the fixed-ratio cropping from .cs-media/.cs-media--wide for
   media that must show its full natural proportions instead — e.g. a
   diagram whose LR/TD crops aren't 21:9, so forcing that ratio would clip
   or stretch it. Height follows the image's own intrinsic aspect ratio. */
.cs-media--intrinsic {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Standalone media placed directly in a section (not inside .cs-media-grid,
   which already gets this same margin-block on the grid itself) — e.g. the
   Problem section's image below its prose — needs the matching top/bottom
   spacing applied per-element instead. */
.cs-media--section {
  margin-block: var(--space-5);
}

/* For real inline content (e.g. an SVG diagram) that should float free of
   the placeholder frame — no border, no background, no fixed aspect-ratio
   box — while keeping the same top/bottom rhythm as .cs-media--section. */
.cs-media--floating {
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-block: var(--space-5);
}

/* Opt-in: rotates a wide (landscape) inline SVG to portrait so it fits the
   narrow second column of .cs-section__body--split, at that same split's
   own 1024px breakpoint. The SVG's viewBox stays untouched — sizing and
   rotation are done entirely in CSS. The wrapper is given the POST-rotation
   footprint via aspect-ratio (its dimensions transposed), then the SVG
   itself is sized to the PRE-rotation transposed dimensions (width/height
   swapped relative to the wrapper) so that after rotate(90deg) it lands
   back at exactly the wrapper's own size — calc() keeps the 641:300 ratio
   exact instead of drifting from a rounded percentage. Below 1024px none
   of this applies, so the SVG stays unrotated at its normal full width. */
@media (min-width: 1024px) {
  .cs-media--rotate-90 {
    position: relative;
    aspect-ratio: 300 / 641;
    /* Height, not width, is the driving dimension: match the prose
       column's own rendered height rather than exceeding it, with width
       derived from that height via aspect-ratio. Grid's default
       justify-self: stretch would otherwise force this item's width to
       the full column track *before* the row's auto-height is settled —
       and since aspect-ratio then derives a height from that stretched
       width, the item's own (often taller) intrinsic size gets fed back
       into the row's auto-sizing, inflating the row past the prose
       column's actual height at wide viewports. justify-self: start
       keeps the item unstretched during that pass, so the row's auto
       height is driven by the prose column alone, and height: 100% then
       resolves against that — self-consistently, since deriving width
       from a height that itself came from prose can never re-inflate
       the row. */
    justify-self: start;
    width: auto;
    height: 100%;
    overflow: hidden;
    /* .cs-media--floating's margin-block: var(--space-5) exists for when
       this diagram stacks below full-width prose. At this breakpoint it's
       a grid sibling beside the prose column instead, so that top margin
       only misaligns it from the prose column's top edge — drop it here. */
    margin-block: 0;
  }

  .cs-media--rotate-90 .fragmentation-web {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% * 641 / 300);
    height: calc(100% * 300 / 641);
    /* The global img/svg reset (reset.css) caps every svg at
       max-width: 100%, which silently clamped this element's
       calc()'d width back down to its containing block's width —
       collapsing the intended tall rectangle into a square. Only
       this rotated instance needs the cap lifted. */
    max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
}

.cs-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

@media (min-width: 600px) {
  .cs-media-grid--2up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cs-media-grid--3up {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Second column of a .cs-section__body--split (survey format's mini case
   studies, work/sfe-work-survey.html) — the 3 project images stacked
   vertically, each keeping its own aspect ratio, with a "View gallery"
   button below the last one. Triggers the shared lightbox in gallery
   mode (see scripts/main.js / .cs-gallery-trigger). */
.cs-gallery-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- CONTENT SECTIONS (Problem / Process / Outcome) ---------- */

.cs-section {
  padding-block: var(--space-6);
}

.cs-section + .cs-section {
  border-top: var(--border-hairline);
}

/* Survey format (work/sfe-work-survey.html): full-width, full-bleed
   alternating backgrounds — same .section--alt convention as index.html
   — replace the hairline as the divider between projects, so the shared
   rule above is overridden here rather than removed globally. Matching
   selector shape (two classes) plus later source order wins over it. */
.cs-section--project + .cs-section--project {
  border-top: none;
}

/* 2x the previous value (--space-7, 72px) — no single spacing-scale step
   lands on 144px (--space-7 is 72px, --space-8 is 112px), so this stays
   anchored to the scale via calc() rather than hardcoding 144px/9rem.
   Scoped to the survey format's project blocks only; other case studies'
   .cs-section padding is untouched. */
.cs-section--project {
  padding-block: calc(var(--space-7) * 2);
}

.cs-section__heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.cs-section__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .cs-section__body--split {
    grid-template-columns: minmax(0, var(--prose-max-width)) 1fr;
    align-items: start;
  }
}

/* ---------- PROCESS STEPS ---------- */

.cs-steps {
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}

.cs-step {
  position: relative;
  padding-left: var(--space-5);
}

.cs-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ---------- SURVEY / HIGHLIGHTS FORMAT (used by SFE case study) ---------- */
/* Multiple discrete proof points instead of one narrative arc. */

.cs-proof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .cs-proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cs-proof-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-hairline);
  background: var(--color-bg-alt);
}

.cs-proof-card__stat {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--color-heading);
}

/* ---------- BULLETED LISTS (survey format's Process / Outcomes) ---------- */
/* reset.css strips list-style/padding from every ul/ol site-wide; this is
   the one context that needs real bullets back, scoped rather than
   reversing the reset globally. */

.cs-list {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.25em;
  /* Plain <p> elements get this cap from base.css's p{} rule, but a <ul>
     doesn't match that selector — without it, the list had no width
     ceiling at all and could run wider than the prose paragraphs above
     it. The left padding for bullet markers still lives inside this same
     ceiling, so the list's own right edge lines up with the paragraphs'. */
  max-width: var(--prose-max-width);
}

.cs-list li {
  list-style: disc;
}

/* Extra breathing room before each labeled sub-group (Problem / Process /
   Outcomes) inside a survey-format mini case study's .flow block — about
   one body line-height (--lh-body * --fs-body) more than .flow's default
   --space-3 gap, so a new group reads as a real break rather than just
   another paragraph. Scoped to the group-label h3s specifically: the gap
   *after* each label (down to its own paragraph/list) is untouched,
   still governed by .flow's normal spacing. */
.flow > h3.eyebrow {
  margin-top: var(--space-6);
}

/* ---------- MEDIA CAPTIONS ---------- */

.cs-media-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
}

/* ---------- PULL QUOTE / REFLECTION ---------- */

.cs-pullquote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  border-left: 3px solid var(--color-accent-blue-500);
  padding-left: var(--space-4);
  margin-block: var(--space-5);
  max-width: 36ch;
}

/* Narrower second column (cs-section__body--split) needs a smaller
   ceiling so long quotes don't wrap into a tall, cramped stack. */
.cs-section__body--split .cs-pullquote {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  padding-left: var(--space-3);
  max-width: none;
}

/* ---------- CASE STUDY FOOTER NAV ---------- */

.cs-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: var(--border-hairline);
}

@media (min-width: 600px) {
  .cs-next {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}