/* Grainpress — Layout. Reusable layout primitives: containers, reading columns, grids. Implementation: Phase 2. */

/* ----------------------------------------
   Main content area
   Prevents footer from floating on short pages
---------------------------------------- */

main {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* ----------------------------------------
   Responsive layout foundations
   --page-margin-fluid is the outer margin the layout actually consumes. It
   holds the locked desktop --page-margin (120px) until roughly 1138px, where
   the measurement pass showed the fixed margin starting to cost shared
   structures and reading measure more than it returns, then ramps
   continuously to --space-5 (24px) at about 400px. Expressed as one clamp so
   there is no step at any width; the locked token remains the ceiling, so
   1440 stays exactly 120 + 1200 + 120.

   The article reading measure is column arithmetic again: placement is the
   12-column span and --reading-measure caps it at the 790px masthead axis,
   which is that span's own width to within a pixel. The outer canvas still
   grows past it — the canvas and the reading column are different questions —
   but the reading column is no longer a second system with its own idea of
   where the page begins. See tokens.css.
---------------------------------------- */

:root {
  --page-margin-fluid: clamp(var(--space-5), 13vw - 28px, var(--page-margin));

  /* EXPERIMENT — wide editorial canvas.
     Below the desktop design width the canvas is unchanged: the 1200px
     container inside the fluid outer margin. Above it the two terms swap to
     the 1440 proportion itself (8.333% margin / 83.333% canvas) so extra
     viewport keeps being divided the way 1440 divides it, instead of piling
     up as outer margin around a fixed 1200px island.

     Each term is written as the accepted desktop value plus whatever the 1440
     proportion adds *beyond* 1440, clamped at zero. That form is an exact
     identity below the design width -- the added term is literally 0px, not
     merely smaller -- so no width from 320 up to 1440 can move. A plain
     max() is not equivalent and was measurably wrong: --page-margin-fluid
     bottoms out at 24px while 8.3333vw keeps falling more slowly, so below
     about 576px the viewport term would win and widen the phone margin.

       margin: 120px at 1440, 8.3333vw  ( = 133px at 1600, 160px at 1920)
       canvas: 1200px at 1440, 83.3333vw ( = 1333px at 1600, 1600px at 1920)

     Continuous at the handover in both directions, so there is no step. */
  --canvas-margin: calc(
    var(--page-margin-fluid) + max(0px, 8.3333vw - var(--page-margin))
  );
  --canvas-width: calc(
    var(--container) + max(0px, 83.3333vw - var(--container))
  );

  /* Wide media tracks the canvas on the same 1440 proportion (1120/1440),
     so photography keeps growing while the reading measure does not. */
  --media-width-fluid: calc(
    var(--media-width) + max(0px, 77.7778vw - var(--media-width))
  );
}

/* ----------------------------------------
   Main container
   Owns the shared editorial content width: the locked 1200px container
   inside the responsive outer margin. Templates must not reconstruct this
   measure; component-level sub-widths nest inside it.
---------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--canvas-width) + 2 * var(--canvas-margin));
  margin: 0 auto;
  padding: 0 var(--canvas-margin);
}

/* ----------------------------------------
   Reading and media width columns
   Centered within their parent container
---------------------------------------- */

.reading-col {
  width: 100%;
  max-width: var(--reading-width);
  margin-left: auto;
  margin-right: auto;
}

.wide-col {
  width: 100%;
  max-width: var(--wide-reading-width);
  margin-left: auto;
  margin-right: auto;
}

.media-col {
  width: 100%;
  max-width: var(--media-width-fluid);
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------
   Section spacing
   Vertical rhythm between major editorial modules
---------------------------------------- */

.section {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.section--sm {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.section--lg {
  padding-top: var(--space-11);
  padding-bottom: var(--space-11);
}

/* ----------------------------------------
   Editorial grid
   Reusable grid foundation for card and module composition
---------------------------------------- */

/* Component/module card spacing — deliberately the 32px module step, not the
   24px structural grid gutter. These cards are not laid out on the global
   12-column grid. */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}