/* =====================================================================
   Elphinston Wells — Grid & module system  (Build Brief §3–4)
   --------------------------------------------------------------------
   Reusable primitives for the body. Every body section is a MODULE
   (full-width row) holding BLOCKS that align to a 12-column grid.

   - Page margin: 30px each side
   - Gutter: 30px
   - Columns: fluid (scale with width); margins/gutters fixed
   - 2 across = 6 cols, 3 across = 4 cols, 4 across = 3 cols, 6 across = 2 cols

   Block defaults (Brief §4): content stacked vertically, 30px gap,
   right-aligned horizontally, top-aligned vertically, 30px padding
   on top and sides. Any deviation is set per block with a modifier.
   ===================================================================== */

/* MODULE: full-width row, carries the 30px page margins. */
.module {
  width: 100%;
  padding: 0 var(--page-margin);        /* 30px each side */
}

/* The grid inside a module: 12 fluid columns, 30px gutters. */
.module__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);   /* 12 */
  column-gap: var(--gutter);            /* 30px between columns/blocks */
  align-items: stretch;                 /* blocks share equal row height */
}

/* BLOCK: aligns to the 12-col grid. Defaults per Brief §4. */
.block {
  display: flex;
  flex-direction: column;               /* stacked vertically */
  gap: var(--gutter);                   /* 30px between items */
  padding: var(--gutter) var(--gutter) 0;  /* 30px top + sides (Brief §3) */
  align-items: flex-end;                /* default: right-aligned */
  justify-content: flex-start;          /* default: top-aligned */
  text-align: right;                    /* default: right-aligned text */
}

/* HEIGHT THEORY (Brief §3, clarified): inside body modules a block is as
   tall as it is wide by default — square. (The hero is the deliberate
   exception where blocks hug their content; the hero is not a .module.)
   Blocks share the row height, so a square is enforced via aspect-ratio
   and the row stretches to the tallest. Opt out with .block--auto-h. */
.module .block {
  aspect-ratio: 1 / 1;
}
.module .block--auto-h {
  aspect-ratio: auto;                   /* hug content instead of squaring */
}

/* Column spans (the "across" counts from Brief §3). */
.block--12 { grid-column: 1 / -1; }     /* full-width */
.block--6  { grid-column: span 6; }     /* 2 across */
.block--4  { grid-column: span 4; }     /* 3 across */
.block--3  { grid-column: span 3; }     /* 4 across */
.block--2  { grid-column: span 2; }     /* 6 across */

/* Alignment modifiers (deviations from the global default). */
.block--left   { align-items: flex-start; text-align: left; }
.block--center-h { align-items: center; text-align: center; }
.block--center-v { justify-content: center; }
.block--middle { align-items: center; justify-content: center; text-align: center; }

/* A block whose inset content should align to the grid's own columns.
   Uses subgrid so nested elements line up to the same 12-col lines. */
.block--subgrid {
  display: grid;
  grid-template-columns: subgrid;
  padding: 0;                           /* the inset carries its own padding */
}

/* =====================================================================
   RESPONSIVE — Round 1
   The "across" system folds down by breakpoint, then everything stacks.
   12-col grid stays the engine; only spans + the square default change.
   ===================================================================== */

/* Phone: single-column stack. Every block in a module grid goes full width,
   in source order, so an image-left / text-right row becomes image over text.
   The square block default is relaxed so blocks hug their content. */
@media (max-width: 481px) {
  .module .block { aspect-ratio: auto; }
  .module__grid > * { grid-column: 1 / -1; }
  /* Spacer / decorative empty blocks add nothing once stacked. */
  .module__grid > [aria-hidden="true"] { display: none; }
}