/* =============================================================================
   layout.css — containers, grid, section rhythm, page-level scaffolding.
   ============================================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--margin)); }
.container--full { max-width: none; }

/* 12-column grid. Children use .col-{n}, or grid-column inline for one-offs. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.grid > * { min-width: 0; }
.col-2{grid-column:span 2} .col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5} .col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8} .col-9{grid-column:span 9} .col-10{grid-column:span 10} .col-12{grid-column:span 12}
.col-start-2{grid-column-start:2} .col-start-3{grid-column-start:3} .col-start-4{grid-column-start:4} .col-start-7{grid-column-start:7} .col-start-8{grid-column-start:8}
/* Simple equal columns for card rows */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gutter); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gutter); }
/* The split: label column left, content right. Used for every "section header + body" pattern. */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section + .section { border-top: var(--rule) solid var(--color-border); }
.section--elev { background: var(--color-bg-elev); }
.section--grid { background-image: linear-gradient(var(--color-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--color-hairline) 1px, transparent 1px); background-size: var(--grid-rhythm) var(--grid-rhythm); }
.section-head { margin-bottom: var(--space-7); }
.section-head h2 { margin-bottom: 0; }
.section-head .label { margin-bottom: var(--space-4); }
.section-head p { margin-top: var(--space-4); }

/* ------------------------------------------------------------ stacks & flow */
.stack > * + * { margin-top: var(--space-4); } .stack--lg > * + * { margin-top: var(--space-6); } .stack--xl > * + * { margin-top: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* ------------------------------------------------------------- page frame */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-2) var(--space-4); z-index: var(--z-toast); font-family: var(--font-data); font-size: var(--fs-small); }
.skip-link:focus { top: var(--space-4); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .grid { gap: var(--space-4); }
}