/* position.css - page structure in normal document flow.

   This file used to hold absolute coordinates on a fixed artboard that JS
   scaled to the viewport. That is gone. Content is laid out by the browser:
   heights come from content, one thing follows another, and nothing has to be
   measured and stacked by script. Desktop composition is unchanged at 1440.

   Two breakpoints only: >= 900px is the desktop composition, below that the
   same components stack where a row cannot hold them at readable type. */

:root {
  --maxw: 1440px;   /* the design width; the page centres inside it */
  --pad: 48px;      /* the page buffer, left and right */
}

/* ==========================================================================
   HEADER - row 1 is brand | text size | CTA, row 2 is the tab band.
   A two-row grid replaces the four absolute boxes. The band is a grid item
   spanning every column, so it still runs the full width while row 1 keeps
   the page buffer.
   ========================================================================== */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "brand ts cta"
    "nav   nav nav";
  align-items: center;
}

.brand {
  grid-area: brand;
  width: 307px; max-width: 100%; height: 55px;
  margin: 20px 0 20px var(--pad);
}
/* the text-size panel opens absolutely against this box */
.text-size {
  grid-area: ts; position: relative;
  display: block; width: 42px; height: 42px;
  margin-right: 22px;
}
/* min-width rather than width: the label must be able to grow with the
   text-size control without being clipped by its own box */
.cta {
  grid-area: cta;
  min-width: 168px; height: 55px; padding: 0 20px;
  margin-right: var(--pad);
}

/* min-width:0 is load-bearing. The band spans every column, so its automatic
   minimum size is the full width of eight tabs: without this the grid grows to
   fit them and the whole page scrolls sideways, instead of the tab row
   scrolling inside itself. */
.site-nav  { grid-area: nav; min-width: 0; }
.nav-track { padding: 0 var(--pad); min-width: 0; }
.nav-link  { min-height: 53px; padding: 0 10px; }

/* ==========================================================================
   MAIN
   ========================================================================== */
/* the last block's buffer before the footer */
#main { padding-bottom: 40px; }

.page-title { max-width: 900px; margin: 84px var(--pad) 0; }

/* --- home hero: full-bleed image band, headline overlapping its faded foot --
   The overlap was two absolute tops 64px apart. In flow it is a negative
   margin, which keeps the effect without pinning either box to a coordinate. */
.hero {
  position: relative;
  width: 100%; height: 440px;
  overflow: hidden;
}
.hero-title {
  position: relative; z-index: 1;
  margin: -64px 0 0;
}
.hyena { margin-top: 32px; }

.content-panel { margin: 20px var(--pad) 0; min-height: 292px; }

/* Section scaffold. 40px below whatever the page already holds, 28px between
   consecutive sections, matching the artboard's spacing. */
.section-block { margin: 40px var(--pad) 0; min-height: 200px; }
.section-block + .section-block { margin-top: 28px; }

/* ==========================================================================
   FOOTER - after the content, always. It used to ride a scripted canvas
   height, which is how it ended up over the content or clipped off it.
   ========================================================================== */
.site-footer { width: 100%; }
.footer-rule { width: 100%; height: 1px; }
.entity-card { margin: 20px var(--pad); }


/* ==========================================================================
   BELOW 900px - the same components, stacked where a row cannot hold them.
   Nothing here shrinks type to force a desktop row onto a phone.
   ========================================================================== */
@media (max-width: 899px) {
  :root { --pad: 16px; }

  .brand     { width: 167px; height: 30px; margin: 12px 0 12px var(--pad); }
  .text-size { width: 36px; height: 36px; margin-right: 10px; }
  /* min-width:auto, never 0: the column is content-sized, and letting it go
     below min-content shrank the button under its own label, which then
     painted 26px past the page edge at 320px. The brand column is
     minmax(0,1fr) so the lockup yields instead. */
  .cta       { min-width: auto; height: 40px; padding: 0 14px; }

  /* the tab row stays one row and scrolls sideways; see components.css */
  .nav-link  { min-height: 44px; padding: 0 11px; }

  .page-title { margin-top: 28px; }

  .hero       { height: 200px; }
  .hero-title { margin-top: -34px; }
  .hyena      { margin-top: 20px; }

  .content-panel { margin-top: 20px; min-height: 0; }

  .section-block { margin-top: 24px; min-height: 0; }
  .section-block + .section-block { margin-top: 20px; }

  /* card width calc(100% - 32px), centred */
  .entity-card { margin: 16px; }
}