/*
 * ═══════════════════════════════════════════════════════════════
 * SAINT CLAIR · SG GATEWAY — site-specific overrides
 * ═══════════════════════════════════════════════════════════════
 *
 * Site:     saintclair.sg (the Gateway)
 * Author:   Diane — 3 May 2026
 *
 * Loaded after platform CSS (saint-clair-tokens.css, saint-clair-web.css).
 * Activated by `body.lang.lang--gateway` (set via $bodyClasses in index.php).
 *
 * Extends The Language for the gateway's three-column table layout —
 * narrative · channels · intelligence · footer — with Belleville-register
 * thumbnail rendering, dilettante-variation widths, and full-window canvas.
 *
 * ═══════════════════════════════════════════════════════════════
 */


/* ── GATEWAY CANVAS — full window width ───────────────────────────── */
body.lang.lang--gateway {
  max-width: none;
}


/* ── THE TABLE → CSS GRID ─────────────────────────────────────────── */
/* HTML stays semantic <table>; layout is a CSS Grid via display:contents
   on tbody/tr so each <td> becomes a grid item. The original gold borders
   stay on cells; <table>'s native border-spacing is replaced by grid `gap`. */
body.lang.lang--gateway .gw-table {
  display: grid;
  grid-template-columns: 40fr 30fr 30fr;
  gap: var(--lang-bdr-sp);
  width: 100%;
  margin: 0;
  /* Remove the outer table frame — cells' own borders form the perimeter,
     so the page edges show one line, not two. Internal cell boundaries
     keep the double-border + gap (the database-dump aesthetic). */
  border: 0;
}
body.lang.lang--gateway .gw-table tbody,
body.lang.lang--gateway .gw-table tr {
  display: contents;
}
body.lang.lang--gateway .gw-table td {
  --gw-pad-x: clamp(16px, 2.4vw, 56px);
  --gw-pad-y: clamp(20px, 3vw, 64px);
  display: block;
  padding: var(--gw-pad-y) var(--gw-pad-x);
  border: var(--lang-bdr) solid var(--sc-gold);
  vertical-align: top;
}


/* ── PLACEMENT — three-column desktop ──────────────────────────────── */
body.lang.lang--gateway .gw-cell--narrative    { grid-row: 1 / 5; grid-column: 1; }
body.lang.lang--gateway .gw-cell--channel      { grid-column: 2; }
body.lang.lang--gateway .gw-cell--intelligence { grid-row: 1 / 5; grid-column: 3; }
body.lang.lang--gateway .gw-cell--footer       { grid-row: 5; grid-column: 1 / -1; }


/* ── NARRATIVE CELL ─────────────────────────────────────────────── */
body.lang.lang--gateway .gw-cell--narrative .lang-mark {
  width: clamp(10px, 1.3vw, 22px);
}
/* Direction 2 — "The Statement" (16 Jun 2026, Diane; Coco tone-approved).
 * The hero is a sentence, not a label, so it is set in sentence case at
 * editorial scale. The all-caps weight-900 monolith is reserved for the
 * channel handles (CAPITAL · ASIA · GLOBAL · MARKETS) — labels shout, the
 * thesis speaks. Weight 500 = GT Sectra Display Medium (a real cut; the face
 * ships 300/400/500/700/900, no 600) — authority without the brick. */
body.lang.lang--gateway .gw-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--sc-lavender);
  margin: 0;
}
/* Gateway top breathing-room: the shared --lang-sp-xl is clamp(48px,15.16vw,216px),
 * a 216px void on large displays that pushed the cell below the fold. Scope-trim
 * it on the narrative cell only — generous, not cavernous. */
body.lang.lang--gateway .gw-cell--narrative .lang-sp-xl {
  height: clamp(24px, 4vw, 80px);
}
/* Hero thesis + axiom subline.
 * Shared declaration enforces Coco's discipline (30 May 2026): same prose
 * register for both sentences, only a small spatial break between them, no
 * visual differentiation — no gold rule, no italic, no colour shift, no
 * smaller typesize. Default is silence. */
body.lang.lang--gateway .gw-thesis,
body.lang.lang--gateway .gw-axiom {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(15px, 1.7vw, 30px);
  line-height: 1.45;
  color: var(--sc-lavender);
  margin: 0;
}
/* Signature line — "Read. Build. Proceed." governs the first surface as a
 * Space Mono accessory to the mark + wordmark (Carl, 17 Jun 2026). Cream, so
 * it reads as the firm's voice, distinct from the gold system label above it
 * and from the noun-bylines. Not a byline. Pending Coco voice review. */
body.lang.lang--gateway .gw-signature {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: clamp(13px, 1.35vw, 18px);
  letter-spacing: 0.18em;
  color: var(--sc-cream);
  margin: 0;
}


/* ── CHANNEL CELLS ──────────────────────────────────────────────── */
body.lang.lang--gateway .gw-cell--channel a.gw-channel,
body.lang.lang--gateway .gw-cell--channel a.gw-channel:hover {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}
body.lang.lang--gateway .gw-channel { display: block; }
body.lang.lang--gateway .gw-channel__handle {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.8vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: var(--sc-lavender);
  text-transform: uppercase;
  margin: 0 0 clamp(8px, 1.1vw, 18px) 0;
  transition: color 200ms ease;
}
body.lang.lang--gateway .gw-channel__url {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(13px, 1.45vw, 24px);
  letter-spacing: 0.02em;
  color: var(--sc-gold);
  margin: 0 0 clamp(8px, 1.1vw, 16px) 0;
  transition: color 200ms ease;
}
body.lang.lang--gateway .gw-channel__url-addr {
  color: var(--sc-lavender);
  transition: color 200ms ease;
}
body.lang.lang--gateway .gw-channel__aud {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(13px, 1.45vw, 24px);
  line-height: 1.4;
  color: var(--sc-muted);
}
body.lang.lang--gateway .gw-channel:hover .gw-channel__handle,
body.lang.lang--gateway .gw-channel:hover .gw-channel__url,
body.lang.lang--gateway .gw-channel:hover .gw-channel__url-addr {
  color: var(--sc-cream);
}


/* ── INTELLIGENCE CELL ──────────────────────────────────────────── */
body.lang.lang--gateway .gw-cell--intelligence .lang-feed__item {
  padding-top: clamp(16px, 2.4vw, 40px);
  padding-bottom: clamp(16px, 2.4vw, 40px);
}
body.lang.lang--gateway .gw-cell--intelligence .lang-feed__item:first-child {
  padding-top: clamp(12px, 1.8vw, 28px);
}
body.lang.lang--gateway .gw-cell--intelligence .lang-feed__thumb-link {
  display: block;
  margin: 0 0 clamp(10px, 1.6vw, 24px) calc(var(--gw-pad-x) * -1);
  /* Negative margin escapes cell padding — thumbnail flush to cell border. */
}
body.lang.lang--gateway .gw-cell--intelligence .lang-feed__thumb {
  display: block;
  width: clamp(150px, 17vw, 380px);
  height: auto;
  margin: 0;
}
body.lang.lang--gateway .gw-cell--intelligence .lang-feed__item:nth-child(2) .lang-feed__thumb {
  width: clamp(110px, 12vw, 240px);
}
body.lang.lang--gateway .gw-cell--intelligence .lang-feed__item:nth-child(4) .lang-feed__thumb {
  width: clamp(240px, 27vw, 580px);
}
body.lang.lang--gateway .lang-feed__date {
  text-transform: uppercase;
}
body.lang.lang--gateway .sc-feed-empty,
body.lang.lang--gateway .sc-feed-error {
  font-family: var(--font-mono);
  font-size: var(--lang-sys);
  color: var(--sc-muted);
  letter-spacing: 0.05em;
  font-style: normal;
  padding: var(--lang-sp-md) 0;
}


/* ── FOOTER CELL ────────────────────────────────────────────────── */
body.lang.lang--gateway .gw-cell--footer .lang-contact {
  margin: 0 0 var(--lang-sp-12) 0;
}
body.lang.lang--gateway .gw-cell--footer .lang-caption {
  display: block;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   DEGRADATION STAGE 1 — Tablet (720–1199px)
   Intelligence column flips below as a full-width row.
   Narrative still rowspans the four channels; layout becomes 2-col.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  body.lang.lang--gateway .gw-table {
    grid-template-columns: 40fr 60fr;
  }
  body.lang.lang--gateway .gw-cell--intelligence {
    grid-row: 5;
    grid-column: 1 / -1;
  }
  body.lang.lang--gateway .gw-cell--footer {
    grid-row: 6;
    grid-column: 1 / -1;
  }
}


/* ════════════════════════════════════════════════════════════════
   DEGRADATION STAGE 2 — Phone (≤720px)
   Single-column stack. Reading order: narrative → channels I–IV →
   intelligence → footer. Achieved via grid auto-flow + CSS order.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body.lang.lang--gateway .gw-table {
    grid-template-columns: 1fr;
  }
  body.lang.lang--gateway .gw-table td {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  /* Default order=0 for narrative and channels (auto-flow in DOM order).
     Push intelligence and footer past them. */
  body.lang.lang--gateway .gw-cell--intelligence { order: 1; }
  body.lang.lang--gateway .gw-cell--footer       { order: 2; }
  /* Reduce the hero scale on small viewports so the sentence-case statement
     does not overflow the narrow column (Direction 2, 16 Jun 2026). */
  body.lang.lang--gateway .gw-hero {
    font-size: clamp(26px, 7.5vw, 46px);
  }
  body.lang.lang--gateway .gw-channel__handle {
    font-size: clamp(28px, 9vw, 56px);
  }
}