/* Block «columns» — loaded only when the block is on the page. Curated ratios as
   fixed classes (CSP, no style=); in a container under 760px (the viewport's
   800px at the top level) the columns stack. minmax(0, …) prevents overflow from
   long content. */

.block-columns { display: grid; gap: var(--size-6); align-items: start; }

/* Every column is a query container: a child block's `@container` rule measures
   the column, not the screen — a form in a 25 % column is ~330px wide on a
   1400px screen and takes its narrow layout.
   ⚠️ `container-type` brings layout containment: the column becomes the
   containing block of a `position: fixed` descendant. The lightbox is a
   `<dialog>` in the top layer and does not care; a new fixed element in a child
   block would be pinned to the column, not the screen. */
.block-columns > .col { min-width: 0; container-type: inline-size; }

/* Child blocks: the column rhythm takes over the spacing. */
.block-columns .block { margin-bottom: var(--size-5); }
.block-columns .col > .block:last-child { margin-bottom: 0; }

@container (min-width: 760px) {
    .cols--50-50    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols--33-66    { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .cols--66-33    { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .cols--25-75    { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
    .cols--33-33-33 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cols--50-25-25 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .cols--25-50-25 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}