/* ============================================================
   Attieh & Chebli — layout.css
   Containers, sections, the 12-col grid, the 5/6 split,
   stacks, and rules (§3.2).
   Breakpoints: 640 / 900 / 1200 / 1440.
   ============================================================ */

/* ---- Responsive gutter/pad tiers ---- */

:root {
  --gutter: 1.25rem;   /* 20 below 640 */
  --side-pad: 1.25rem; /* 20 below 640 */
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;  /* 24 */
    --side-pad: 2rem;  /* 32 */
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 2rem;    /* 32 */
    --side-pad: 3rem;  /* 48 */
  }
}

/* ---- Containers: 1240 primary / 1440 imagery+footer / 760 reading ---- */

.container,
.container-wide,
.container-narrow {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

.container        { max-inline-size: calc(var(--container) + 2 * var(--side-pad)); }
.container-wide   { max-inline-size: calc(var(--container-wide) + 2 * var(--side-pad)); }
.container-narrow { max-inline-size: calc(var(--container-narrow) + 2 * var(--side-pad)); }

/* ---- Section rhythm: from .section only, never ad-hoc margins ---- */

.section       { padding-block: var(--space-9); }
.section-tight { padding-block: var(--space-7); }

@media (min-width: 900px) {
  .section       { padding-block: var(--space-10); }
  .section-tight { padding-block: var(--space-8); }
}

/* ---- Grids ---- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

.grid-cards,
.grid-cards-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

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

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

/* ---- The 5/6 split: the default editorial composition ----
   Intro cols 1–5, body cols 7–12; col 6 is the gutter column.
   Profile inverted variant: main 1–6, rail 8–12.            */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
  }

  .split-intro     { grid-column: 1 / 6; }
  .split-body      { grid-column: 7 / 13; }
  .split-body-wide { grid-column: 6 / 13; }
  .split-main      { grid-column: 1 / 7; }
  .split-rail      { grid-column: 8 / 13; }
}

/* .split-founder override: the generic 1–7/8–13 split (~50/42) reads
   as narrow biography copy squeezed beside a dominant portrait. Widen
   the text column to ~64/36 and open the gutter to --space-8 so the
   portrait reads as supporting evidence rather than co-equal with the
   copy. Scoped to .split-founder only — other split-main/split-rail
   consumers (Carl's profile) keep the 12-col default. */
@media (min-width: 900px) {
  .split-founder {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
    gap: var(--space-8);
  }

  .split-founder .split-main,
  .split-founder .split-rail {
    grid-column: auto;
  }
}

/* .split-continuity override (owner task, 2026-08-23, Leadership
   page): the generic .split defaults to align-items: stretch, which
   keeps split-intro/split-body top-aligned in practice (each column's
   own content sits at the top of its stretched box) -- centered here
   instead so this section's right-column text stays vertically
   centered against the left column, matching the same correction
   made to .leadership-section for the Carl/Maguy/Cynthia profiles
   just below it on the same page. Scoped to .split-continuity only --
   the generic .split default is unchanged for every other consumer.

   Owner task, 2026-08-24: the right-column paragraph didn't line up
   with the Maguy/Carl/Cynthia paragraphs below it. Root cause: the
   generic .split is a 12-column grid with .split-intro at columns
   1/6 and .split-body at 7/13 -- column 6 is left empty as a gap, on
   top of the grid's own column-gap, so .split-body starts a full
   extra column further right than it needs to. .leadership-section
   below has no such reserved gap column (its two children are plain
   auto-placed items in a 2-column 5fr/6fr grid), so its right column
   starts noticeably to the left of .split-body. Overriding the
   column template to that same 5fr/6fr + column-gap pattern, and
   letting split-intro/split-body auto-place into it instead of their
   explicit 1/6 and 7/13 spans, makes the two column boundaries
   match exactly. */
@media (min-width: 900px) {
  .split-continuity {
    align-items: center;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-7);
  }

  .split-continuity .split-intro,
  .split-continuity .split-body {
    grid-column: auto;
  }
}

/* .split-network override (owner task): widened from the generic
   1–7/8–13 split (~50/42) to ~48/52 so the enlarged illustration
   (see components.css) has room to grow without exceeding its
   column. Rail is now marginally the wider side -- intentional, so
   the bigger image can occupy more of the section's right-hand
   blank space while the text column stays at a comfortable reading
   width. */
@media (min-width: 900px) {
  .split-network {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .split-network .split-main,
  .split-network .split-rail {
    grid-column: auto;
  }
}

/* Below 900px, .split-founder's split-main children are promoted
   to direct grid items of .split (display:contents) so the rail
   image can be interleaved between the heading and the body text
   via `order`, without duplicating markup. Desktop is untouched —
   the rule above already restores split-main as a normal grid
   item at 900px+. Scoped to .split-founder (the About page's
   Founder section) because other split-main/split-rail consumers
   (e.g. Carl's profile) want a plain whole-block DOM-order swap
   instead — that needs no CSS at all, since explicit desktop
   grid-column placement is independent of source order. */
@media (max-width: 899.98px) {
  .split-founder .split-main { display: contents; }
  .split-founder .split-rail { order: 2; }
  .split-founder .split-main .stack-5 { order: 3; }
}

/* Same interleaving technique for the U.S. Market Entry "Scope"
   illustration (owner task): below 900px the image should sit
   between the heading and the list, not after both. split-main's
   two direct children (.section-header, the <ul>) are promoted via
   display:contents so split-rail's image can be ordered between
   them -- header keeps its default order (0), rail is 2, the list
   is 3. The .split gap (--space-7) between promoted siblings already
   supplies the heading->image and image->list spacing, so no extra
   margin is needed on the image at this breakpoint. */
@media (max-width: 899.98px) {
  .split-scope .split-main { display: contents; }
  .split-scope .split-rail { order: 2; }
  .split-scope .split-main .list-ruled { order: 3; }

  /* .section-header's own trailing margin (--space-7, 48px) is
     meant for its normal in-flow heading->content relationship; once
     promoted to a grid item here, the .split gap (also --space-7)
     supplies that same space, so the two would otherwise add up to
     96px. Zero it here so only the grid gap applies. */
  .split-scope .split-main .section-header {
    margin-block-end: 0;
  }
}

/* Same interleaving technique for the Alliances "The Network"
   illustration (owner task): below 900px the image should sit
   between the heading and the rest of the content, not after all of
   it. split-main's two direct children (.section-header, .stack-5)
   are promoted via display:contents; header keeps its default order
   (0), rail is 2, the body stack is 3. .section-header's own
   trailing margin is zeroed for the same reason as .split-scope
   above -- it would otherwise double up with the .split gap. */
@media (max-width: 899.98px) {
  .split-network .split-main { display: contents; }
  .split-network .split-rail { order: 2; }
  .split-network .split-main .stack-5 { order: 3; }

  .split-network .split-main .section-header {
    margin-block-end: 0;
  }
}

/* Fix: overline/rule-accent/h2 in .split-founder's .split-main had no
   established rule->heading or heading->body gap -- they were plain
   siblings, so the gaps were 0. Wrapping them in .split-founder-header
   gives the group its own trailing margin, matched to .section-header's
   own heading->body value (--space-7, the Ethics & Standards benchmark)
   rather than the smaller --space-5 first used here, and its own
   .rule-accent the same rule->heading value every other heading
   pattern already uses. This wrapper also fixes a second,
   related bug: at <900px, .split-main's children are promoted via
   display:contents (above) so the image can interleave via `order`
   -- without this wrapper, that promotion put the overline/rule/h2
   in as three SEPARATE grid items, so the grid's own 48px gap
   inserted between each of them individually (on top of
   rule-accent's own 16px), inflating overline->rule to 64px. With
   the wrapper, only one item (the whole header group) is promoted,
   so the internal 16px/24px rhythm stays intact at every width. */
.split-founder-header .rule-accent {
  margin-block-end: var(--space-5);
}

.split-founder-header {
  margin-block-end: var(--space-7);
}

/* At <900px, .split-founder-header becomes a promoted grid item (see
   above) sitting directly beside .stack-5 as a grid sibling -- the
   base .split rule's own gap (var(--space-7), 48px) already supplies
   that item-to-item space, so the header's own trailing margin would
   stack on top and double the H2->body gap to 96px. Zero it here;
   the grid gap alone already equals the target --space-7 value. */
@media (max-width: 899.98px) {
  .split-founder-header {
    margin-block-end: 0;
  }
}

/* ---- Stacks: vertical rhythm helpers ---- */

.stack-2 > * + * { margin-block-start: var(--space-2); }
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-5 > * + * { margin-block-start: var(--space-5); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
.stack-7 > * + * { margin-block-start: var(--space-7); }

/* ---- Rules ---- */

.rule {
  border: 0;
  block-size: var(--rule-width);
  background-color: var(--rule);
}

/* The monogram: 48px bronze detail rule under overlines */
.rule-accent {
  border: 0;
  inline-size: var(--rule-accent-length);
  block-size: var(--rule-accent-thickness);
  background-color: var(--accent-detail);
  margin-block: var(--space-4) 0;
}

/* Full-width gold rule — exactly two homes:
   under the header (dark pages) and above the footer. */
.rule-gold-full {
  border: 0;
  inline-size: 100%;
  block-size: var(--rule-width);
  background-color: var(--accent-detail);
}