/*
 * case-study.css — Amanda Morgan Portfolio: Case Study page
 * Loads after tokens.css. Forces dark-mode token values — case study is always dark.
 */

@font-face {
  font-family: 'King Basil Lite';
  src: url('assets/fonts/King-Basil-Lite.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ─── CONVENIENCE ALIASES (opacity variants of tokens) ────────────────────── */
:root {
  --cs-text-muted:   color-mix(in srgb, var(--color-text-primary) 65%, transparent);
  --cs-accent-dim:   color-mix(in srgb, var(--color-accent) 18%, transparent);
  --cs-accent-ghost: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --cs-border:       color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  padding: 0;
  background: var(--color-surface-page);
  color: var(--cs-text-muted);
  font-family: var(--font-standard);
  font-size: var(--text-body-default-size);
  line-height: var(--leading-relaxed);
  min-height: 100vh;
  overflow-x: hidden;
}


/* ─── SHARED UTILITIES ────────────────────────────────────────────────────── */
.cs-label {
  display: block;
  font-family: var(--font-standard);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-text-muted);
  margin-bottom: var(--size-8);
}
.cs-main { padding-top: var(--size-80); }

/* components.css sets section { max-width: var(--container); margin: 0 auto } — override for full-bleed case study layout */
.cs-main > section {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}


/* ─── HERO ────────────────────────────────────────────────────────────────── */
/* Override bm-body grid: text col max 528px so image col ≥752px at ≥1280px viewport */
.cs-hero.bm-body {
  grid-template-columns: minmax(300px, 528px) minmax(200px, 1fr);
  column-gap: var(--gutter);
}

.cs-hero {
  min-height: 560px;
  background: var(--color-surface-page);
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--space-section) 0 var(--space-section-large) var(--padding-section);
}
/* Diamond decorative shape — right-pinned, vertically centered, extends ~248px beyond right edge */
.cs-hero::before {
  content: '';
  position: absolute;
  width: 589px;
  height: 589px;
  border-radius: 64px;
  background: linear-gradient(160deg, var(--color-accent-tertiary) 40%, var(--color-accent-secondary) 70%);
  right: -248px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  z-index: 10000;
}
/* Unused — kept for reference */
.cs-hero::after {
  content: none;
}
.cs-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--size-20);
  position: relative;
  z-index: 10000;
}
.cs-hero__category {
  font-family: var(--font-standard);
  font-size: var(--text-overline-size);
  font-weight: var(--text-overline-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.cs-hero__category strong {
  font-weight: var(--weight-700);
}
.cs-hero__title {
  font-family: var(--font-standard);
  font-size: var(--text-h1-display-size);
  font-weight: var(--text-h1-display-weight);
  line-height: var(--text-h1-display-leading);
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}
.cs-hero__subtitle {
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--weight-300);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}
.cs-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--size-12);
}
.cs-hero__body p {
  font-size: var(--text-body-default-size);
  font-weight: var(--text-body-default-weight);
  line-height: var(--text-body-default-leading);
  color: var(--color-text-primary);
}
.cs-hero__jumps {
  display: flex;
  gap: var(--size-4);
  flex-wrap: nowrap;
}
/* Tertiary button component (Figma 181:961): text + trailing "Arrow down" icon —
   was rendered as plain text with a literal "↓" character; matches Figma's icon-mask
   pattern already used by .btn-tertiary, just with the down-arrow path instead of
   the right-chevron. Icon copied from the real in-page instance (664:65110 tree). */
.cs-hero__jumps a {
  display: inline-flex;
  align-items: center;
  gap: var(--size-4);
  font-family: var(--font-standard);
  font-size: var(--size-14);
  font-weight: var(--weight-500);
  color: var(--color-action-secondary-text);
  text-decoration: none;
  transition: opacity 0.2s;
  padding: var(--size-16) var(--size-24) var(--size-16) 0;
  white-space: nowrap;
}
.cs-hero__jumps a::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.99935 4.1665V15.8332M4.16602 9.99984L9.99935 15.8332L15.8327 9.99984' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9.99935 4.1665V15.8332M4.16602 9.99984L9.99935 15.8332L15.8327 9.99984' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}
.cs-hero__jumps a:hover { color: var(--color-action-secondary-hover); }

.cs-hero__image {
  position: relative;
  z-index: 10000;
  padding: var(--size-8) 0 0;
}


/* ─── WAVE DIVIDER ────────────────────────────────────────────────────────── */
.cs-wave {
  width: 100%;
  height: 131px;
  overflow: hidden;
  display: block;
  line-height: 0;
  background: transparent;
}
.cs-wave__img {
  display: block;
  width: auto;
  height: 131px;
  min-width: 2041px;
  max-width: none;
}


/* ─── PROJECT AT-A-GLANCE ─────────────────────────────────────────────────── */
/* Section: full bleed left/right/top; bottom padding from Figma Context-PainPoints paddingBottom */
.cs-glance {
  position: relative;
  z-index: 2;
  /* Updated 2026-09-25 per Figma (484:2807) — was Accent/Secondary→Accent/Tertiary,
     now Accent/Subtle 30% → Surface/Tertiary 100%. Direction (top→bottom) confirmed
     unchanged via exported SVG gradient coordinates. */
  background: linear-gradient(to bottom, var(--color-accent-subtle) 30%, var(--color-surface-tertiary) 100%);
  padding: 0 0 var(--space-section-large);
}
/* Wave flipped: flat edge at top, peaks face into section */
.cs-glance .cs-wave__img {
  transform: scaleY(-1);
}
/* Figma "All" container: horizontal padding only */
.cs-glance__inner {
  padding: 0 var(--padding-section);
}
.cs-glance__heading {
  font-family: var(--font-standard);
  font-size: var(--text-h2-size);
  font-weight: var(--weight-700);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  padding-top: var(--space-list-gap);
  padding-bottom: var(--size-40);
}
.cs-glance__meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--padding-section);
  column-gap: var(--layout-ata-glance-gap);
  padding-bottom: var(--size-56);
  border-bottom: 1px solid var(--cs-border);
  margin-bottom: var(--size-56);
}
/* No max-width — confirmed via the Plugin API that Figma's own Col 1/2/3
   frames (and the value Typography inside them) are all layoutSizingHorizontal:
   HUG, i.e. auto-width-to-content with no wrap, not a fixed 206–300px slot.
   The 206/224px column widths in the reference instance are just this
   particular content's resolved hug-width, not a real constraint — a
   max-width here was forcing longer values ("Enabled 100% On-Time Delivery")
   to wrap where Figma never does. min-width kept as a reasonable floor for
   short values. */
.cs-glance__meta-col {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  min-width: var(--layout-ata-glance-min);
  color: var(--color-text-tertiary);
}
/* Scoped override — .cs-label is shared sitewide (e.g. "More Case Studies"); this only
   applies tertiary color to the ROLE/TYPE/IMPACT labels within At-A-Glance. */
.cs-glance__meta-col .cs-label {
  color: var(--color-text-tertiary);
  letter-spacing: 0.1em;
}
.cs-glance__meta-value {
  font-size: var(--text-body-default-size);
  font-weight: var(--text-body-default-weight);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
}


/* ─── CONTEXT ─────────────────────────────────────────────────────────────── */
/* sm/md: auto-fill wraps columns; lg+: forced 4-column row via min-width query below.
   Threshold corrected 2026-09-25: was 1440px (the pre-correction "lg" number); lg's
   real min-width is 1024px — see the responsive-breakpoint-thresholds fix in tokens.css. */
.cs-context {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-list-gap);
  align-items: start;
}
@media (min-width: 1024px) {
  .cs-context { grid-template-columns: repeat(4, 1fr); }
}
.cs-context__heading {
  grid-column: 1 / -1;
  font-family: var(--font-standard);
  font-size: var(--text-h1-size);
  font-weight: var(--weight-700);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--size-8);
}
.cs-context__intro {
  grid-column: 1 / -1;
  margin-bottom: var(--size-8);
}
.cs-context__intro-body p {
  font-size: var(--text-body-default-size);
  font-weight: var(--weight-300);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}
.cs-context__block { margin-bottom: 0; }
.cs-context__sub {
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  color: var(--color-text-primary);
  margin-bottom: var(--size-8);
}
.cs-context__block p {
  font-size: var(--text-body-default-size);
  font-weight: var(--weight-300);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
}


/* ─── BRINGING IT ALL TOGETHER ────────────────────────────────────────────── */
.cs-bringing {
  background: linear-gradient(198deg, var(--color-accent-secondary) 8%, var(--color-surface-tertiary));
  padding: 0; /* full bleed — overrides inherited `section { padding: var(--space-section) 40px }` */
}
.cs-bringing > .cs-wave { background: transparent; }
/* Wave flipped: flat edge at top, peaks face into section (matches .cs-glance treatment) */
.cs-bringing .cs-wave__img { transform: scaleY(-1); }

.cs-bringing__inner {
  padding: var(--space-section-large) var(--padding-button-horizontal) var(--size-96);
}
.cs-bringing__heading {
  font-family: var(--font-standard);
  font-size: var(--text-h1-size);
  font-weight: var(--weight-700);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--size-20);
}
.cs-bringing__body {
  font-size: var(--text-body-lg-size);
  font-weight: var(--weight-300);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  margin-bottom: var(--size-56);
}

/* Masonry: 5 flat flex children — Col1[pair], bare card, Col3[wide pair], bare card, Col5[pair] (Figma FinalFinalMod) */
.cs-bringing__masonry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--size-8);
  align-items: stretch;
  min-height: var(--img-bento-col-max-height);
  max-width: var(--img-bento-masonry-max-width);
}
/* FinalFinalMod>Default: primaryAxisAlignItems is CENTER at sm, reverts to MIN (left) at lg+ —
   this is a deliberate exception to the site's usual left-aligned convention, sm-only. Comment
   corrected 2026-09-25 (was "md+") — the 1024px threshold itself was already correct, it's
   actually lg's real min-width, not md's (which is 600px) — see the responsive-breakpoint-
   thresholds fix in tokens.css. */
@media (min-width: 1024px) {
  .cs-bringing__masonry {
    justify-content: flex-start;
  }
}
.cs-bringing__col {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  flex: 1 1 0;
  min-width: var(--img-bento-col-min);
  max-width: var(--img-bento-col-max);
}
/* Col 1 only — Figma sets min-height here; Col 3/5 get max-height instead (see below) */
.cs-bringing__masonry > .cs-bringing__col:first-child {
  min-height: var(--img-bento-col-max-height);
}
/* Col 3 (wide pair) — was bound to the shared Col 2/4 variables; user rebound both
   the wrapper and its BaseModule=Final card instances directly to the Wide IMG
   variables instead (2026-09-30), matching the wide image inside each card rather
   than a separate column-group spec. */
.cs-bringing__col--wide {
  min-width: var(--img-bento-wide-img-min-width);
  max-width: var(--img-bento-wide-img-max-width);
  max-height: var(--img-bento-col-max-height);
}
/* Col 5 — holds 2 cards, side by side or stacked depending on how much space is left
   on its particular masonry row. Every previous attempt at this left max-width
   unscoped (none) and only adjusted justify-content, because no fixed formula could
   reproduce Col 5's genuine flex-math-driven wrap point across widths — capping it
   at a fixed 2-card width fixed some widths while breaking others.
   Real fix (2026-09-29): the user added an actual Figma variable for this
   (IMG Size/Bento col5 Max-Wid — 600 at sm, 656 at md+), bound directly to Col 5's
   own max-width in FinalFinalMod>Default, replacing the previous "no cap" spec.
   This is a deliberate design decision, not a derived formula — bringing it into
   code as --img-bento-col5-max. justify-content is center at sm — tried flex-start
   first with the new cap and it just relocated the leftover slack to the trailing
   side instead of removing it (e.g. 205px gap after the content at 725px); center
   splits that same slack evenly on both sides instead. User explicitly asked for
   left alignment at md/lg/xl/2xl (2026-09-30) instead, so center is sm-only and
   flex-start takes over at the md threshold (600px) and up. */
.cs-bringing__col--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  min-width: var(--img-bento-col5-min);
  max-width: var(--img-bento-col5-max);
  max-height: var(--img-bento-col-max-height);
}
.cs-bringing__col--row .cs-bringing__item {
  max-height: var(--img-bento-col5-item-max-height);
}
@media (min-width: 600px) {
  .cs-bringing__col--row {
    justify-content: flex-start;
  }
}
/* Col 2 — the tall single card that used to sit as a bare, unwrapped .cs-bringing__item
   directly between Col 1 and the Col 3 wide pair. Figma wrapped it in its own "Col2"
   frame (2026-09-30), bound to the same Col 2/4 min-max variables the wide pair uses
   (--img-bento-col2-min/max, already in tokens.css) — so this card now matches the
   wide pair's width progression instead of the plain single-card one. The second bare
   item (before Col 5) is untouched in Figma — still a lone, unwrapped card — so it
   keeps using the rule below. */
.cs-bringing__col--solo {
  min-width: var(--img-bento-col2-min);
  max-width: var(--img-bento-col2-max);
  max-height: var(--img-bento-col-max-height);
}
/* Bare standalone single-item cards (direct children of masonry, not wrapped in .cs-bringing__col).
   min-width/max-width removed 2026-09-25 — they were previously re-declared here using the wrong
   ("IMG Size/Bento Col 1 and 3", unused by anything in the live Figma masonry) variable group,
   which — via this selector's higher specificity — was actively overriding the CORRECT value
   .cs-bringing__item's own base rule already sets (components.css: min-width/max-width var(--img-
   bento-col-min/max), matching FinalFinal's real Figma component-level binding exactly). That
   override was both redundant when right and actively wrong when it drifted; removed rather than
   re-corrected, since the card's own width is intrinsic to it (Figma binds min/maxWidth on the
   FinalFinal/Final components themselves, not on a masonry-specific frame) regardless of where in
   the masonry it's placed. Only max-height stays here — Figma's FinalFinal component itself has no
   bound maxHeight (confirmed null at the component level), so this really is masonry-specific,
   not an intrinsic card property. */
.cs-bringing__masonry > .cs-bringing__item {
  max-height: var(--img-bento-col-max-height);
}
/* .cs-bringing__item card styling lives in components.css — "BaseModule > FinalFinal / Final" */


/* .cs-footer styling moved to components.css — it's shared across every template now,
   not case-study-specific. See components.css, near the generic `footer` rule. */


/* .cs-scroll-top styling moved to components.css — it's shared across case-study
   pages and about.php now, not case-study-specific. See components.css. */


/* ─── MORE CASE STUDIES (Figma "Case-Study" page) ──────────────────────────── */
/* Section wrapper + carousel container are this page's own layout (Figma 268:7902/
   836:107056's "Horizontal List" frame lives on the Case-Study page, not the
   Components page) — moved here from components.css during the 2026-09-11
   architecture cleanup (see feedback_css_file_by_figma_page memory). The
   BaseModule=Feature 1 cards themselves are the shared global component and stay
   in components.css; only this page's own placement of them lives here. */
/* Overrides the generic `section { max-width: var(--container); margin: 0 auto; }`
   rule in components.css — that rule only left padding actually overridden since
   class specificity beats the bare type selector there, but max-width/margin were
   never contested. This section should fill its full parent width, not cap/center. */
.cs-more-studies {
  background: var(--color-surface-primary);
  padding: var(--space-section-large) var(--padding-section);
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
}
/* Figma 268:7902: "More Case Studies" label — color/letter-spacing diverge from the
   shared .cs-label base (above in this file), which is also used for several other
   labels (ROLE/TYPE/IMPACT, Likes/Dislikes/Needs, KEY CONSIDERATIONS) that Figma
   did NOT change — scoped here rather than touching the base rule. */
.cs-more-studies .cs-label {
  margin-bottom: 0;
  color: var(--color-text-primary);
  letter-spacing: 0.06em;
}
/* Left edge keeps the normal inset from .cs-more-studies's own left padding
   (--padding-section) — left-aligned throughout, carousel start shouldn't move.
   Only the right side breaks out (negative right margin matching the section's own
   right padding, plus a matching padding-right to preserve the trailing inset when
   not scrolled) so cards can bleed to the actual viewport edge as the user scrolls —
   same fix as front-page's .work-grid in surrealism.css, same underlying bug (the
   section's padding was acting as an unintended second clip boundary). */
.cs-more-studies .work-grid {
  display: flex;
  flex-direction: row;
  gap: var(--size-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-right: calc(-1 * var(--padding-section));
  padding-right: var(--padding-section);
}
.cs-more-studies .work-grid::-webkit-scrollbar { display: none; }
.cs-more-studies .work-grid .base-module {
  flex-shrink: 0;
  width: var(--size-264); /* BaseModule=Feature 1's own minWidth — same value front-page's Featured Work carousel uses, both driven by the component's own Figma minWidth */
  scroll-snap-align: start;
}


/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .cs-hero::before { top: 50%; right: -300px; transform: translateY(-50%) rotate(45deg); }
.cs-bringing__inner { padding: var(--size-48) var(--padding-button-horizontal) var(--size-72); }
}

/* ≤530px: second column wraps below first — single-column hero */
/* .cs-hero.bm-body specificity (2 classes) must override the grid override above */
@media (max-width: 530px) {
  .cs-hero.bm-body { grid-template-columns: 1fr; }
  .cs-hero { min-height: auto; padding: 0 0 var(--space-section-large); }
  .cs-hero__text { padding: 0 var(--padding-section); }
  .cs-hero__jumps a { padding-right: var(--size-8); white-space: nowrap; }
}