/* =============================================================================
   GlobalGate Homes — projects.css
   Page-specific rules for projects.php. Loaded after main.css. Tokens only:
   no raw hex, no new font, radius only var(--r-0)/var(--r-1), no shadow,
   no colour ramps, nothing centered.

   The no-JS filter rule and the bleed row pin live in main.css.
   Components introduced here (same BEM-ish naming as main.css; move to
   main.css if a second page needs them):
     .cases            the list of case studies (grid, one column, 96px gaps)
     .case             one case study — a .bleed, or a .container > .cols spread
     .case__head       hairline, sheet numeral, type eyebrow, title
     .case__no         Newsreader 300 numeral, Graphite (as .step__no, muted)
     .case__title      Newsreader 500, one step below the section H2, on an <h3>
     .case__story      <dl> — three labelled passages (brief / did / handover)
     .case__facts      .ledger--kv spacing hook
     .case__sticky     portrait plate that stays in view beside a long column
   ============================================================================= */

/* ---------------------------------------------------------------------------
   List of case studies
   --------------------------------------------------------------------------- */
.cases{display:grid;row-gap:var(--s-9);margin-top:var(--s-8)}
.cases > *{min-width:0}
@media (max-width:767px){.cases{row-gap:var(--s-8)}}

/* Spread layouts keep the 48px row gap even when a marginal note is present
   (main.css tightens .cols:has(> .margin-note) to 24px below 1280 for section
   heads; here the note is followed by a hairline head, so it gets its own gap). */
.case .cols{row-gap:var(--s-7)}
@media (max-width:1279px){.case .cols > .margin-note{margin-bottom:calc(-1 * var(--s-5))}}

/* ---------------------------------------------------------------------------
   Head — a ledger row scaled up: hairline, numeral, eyebrow, title
   --------------------------------------------------------------------------- */
.case__head{padding-top:var(--s-5);border-top:1px solid var(--rule)}
.case__no{
  display:block;
  font:300 var(--fs-numeral)/var(--lh-numeral) var(--f-serif);font-optical-sizing:auto;
  color:var(--graphite);font-variant-numeric:tabular-nums;
  margin-bottom:var(--s-4);
}
.case__head .eyebrow{display:flex}
/* The tag line is one flex item so it wraps as running text beside the Oxide hairline. */
.case__tags{min-width:0}
/* Its own step between H3 and H2, so the section heading above stays dominant */
.case__title{
  font:500 clamp(1.625rem,1.45rem + .55vw,1.875rem)/1.2 var(--f-serif);font-optical-sizing:auto;
  letter-spacing:-0.005em;max-width:var(--measure-h2);
  margin:var(--s-4) 0 var(--s-3);
}

/* ---------------------------------------------------------------------------
   Story — three labelled passages; labels share the ledger-label style
   --------------------------------------------------------------------------- */
.case__story{margin:var(--s-6) 0 0;display:grid;row-gap:var(--s-5)}
.case__story--flush{margin-top:0}
.case__story dt{
  font:500 var(--fs-eyebrow)/var(--lh-eyebrow) var(--f-sans);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--graphite);margin-bottom:var(--s-2);
}
.case__story dd{margin:0;font-size:var(--fs-body-sm);line-height:1.5;color:var(--ink);max-width:var(--measure-prose);text-wrap:pretty}

/* Facts ledger under the story (portrait layout) */
.case__text .case__facts{margin-top:var(--s-6)}

/* Bleed layouts: the facts sit under the plate, inset to the page padding on
   the bleed side, so the two columns finish at roughly the same height */
.bleed > .media .case__facts{margin-top:var(--s-7)}
.bleed:not(.is-mirrored) > .media .case__facts{margin-right:var(--pad)}
.bleed.is-mirrored > .media .case__facts{margin-left:var(--pad)}
@media (max-width:1023px){
  .bleed > .media .case__facts,.bleed.is-mirrored > .media .case__facts{margin-inline:var(--pad)}
}

/* ---------------------------------------------------------------------------
   Portrait plate beside a long text column: stays in view while the text
   scrolls (≥1024 only; below that everything stacks in DOM order)
   --------------------------------------------------------------------------- */
@media (min-width:1024px){
  .case__sticky{align-self:start;position:sticky;top:calc(var(--header-h) + var(--s-6))}
}