/* ============================================================
   COLUMNS BLOCK — parts/blocks/columns.php
   ------------------------------------------------------------
   One to four WYSIWYG columns in six ratios. Every value comes from a
   token (see tokens-m434.css); nothing here hardcodes a colour or a
   measure, so a re-skin stays a token edit.

   MOBILE FIRST. The base rules are the phone layout — a single stacked
   column for every ratio — and the ratios only appear at the md
   breakpoint. That is the whole mobile story: no ratio survives a 375px
   viewport, and a 30/70 split at phone width is two unreadable measures
   rather than one good one.

   768px is written literally because custom properties cannot be used in
   @media queries. It is --m434-bp-md; change both together.
   ============================================================ */

/* ---- Header ---- */
.m434-cols__head {
  max-width: var(--m434-measure-wide);
  margin-bottom: 32px;
}

.m434-cols__head h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 22ch;
}

/* The intro sits under the heading, so it needs its own top gap only when a
   heading is actually present — an intro-only header should not open with a
   blank line. */
.m434-cols__head h2 + .m434-cols__intro { margin-top: 16px; }

/* .prose caps itself at --m434-measure; inside the header the wider measure
   is the intended one, and the header element already constrains it. */
.m434-cols__intro { max-width: 100%; }

/* ---- Grid ----
   Single column on phones for every ratio. `gap` handles both axes, so the
   stacked state gets vertical rhythm from the same declaration that gives the
   desktop state its gutter. */
.m434-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* A column is a prose container, so it must not also impose the prose measure —
   the grid cell is the measure here. */
.m434-cols__col { max-width: 100%; }

/* First child inside a column should not push the column off its own top edge;
   .prose > * + * handles the rest. */
.m434-cols__col > :first-child { margin-top: 0; }

/* ---- Ratios: md and up ---- */
@media (min-width: 768px) {
  .m434-cols {
    gap: var(--gutter, 24px);
    column-gap: 44px;
  }

  .m434-cols--fifty-fifty    { grid-template-columns: 1fr 1fr; }
  .m434-cols--thirty-seventy { grid-template-columns: 3fr 7fr; }
  .m434-cols--seventy-thirty { grid-template-columns: 7fr 3fr; }
  .m434-cols--thirty-three   { grid-template-columns: repeat(3, 1fr); }
  .m434-cols--twenty-five    { grid-template-columns: repeat(4, 1fr); }

  /* full-width has no rule: it is the single-column base, and giving it one
     would mean two selectors to keep in step for no behaviour. */

  /* Opt-in vertical centring. `align-items` rather than `align-self` on the
     children so a column added later inherits it without extra markup.
     Suppressed below md, where every column is full width and centring is
     meaningless. */
  .m434-cols--va-center { align-items: center; }
}

/* NO tablet 2x2 rule for four columns, deliberately.
   Four equal columns at 768-1023px give roughly 150px each, which is below a
   readable measure for prose, and a 2x2 grid was offered as an alternative and
   declined: every ratio stacks below md and goes full at md, with no third
   state to reason about. Noted rather than implemented — if four-column blocks
   turn out to read badly on tablets in practice, that is the evidence to
   revisit it with. */