/* ==========================================================================
   Project Carnation — Layout primitives
   Grid columns, margins, and gutters come from tokens.css and change at
   the tablet (768px) and desktop (1200px) breakpoints:
     mobile 4 cols / 1rem margin / 1rem gutter
     tablet 8 cols / 2rem margin / 1.5rem gutter
     desktop 12 cols / 3rem margin / 1.5rem gutter
   ========================================================================== */

/* Page container: centred, max width, responsive outer margin */
.container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--page-margin));
    margin-inline: auto;
    padding-inline: var(--page-margin);
}

/* Readable narrative width (~720px) */
.container--narrow {
    max-width: calc(var(--measure) + 2 * var(--page-margin));
}

/* Vertical section rhythm */
.section {
    padding-block: var(--space-2xl);
}

@media (min-width: 1200px) {
    .section {
        padding-block: var(--space-3xl);
    }
}

.section--recessed {
    background-color: var(--color-surface-recessed);
}

.section--keyline {
    border-top: var(--keyline);
}

/* Stack: consistent vertical spacing between children */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-md));
}

.stack--sm { --stack-gap: var(--space-sm); }
.stack--lg { --stack-gap: var(--space-lg); }
.stack--xl { --stack-gap: var(--space-xl); }

/* Cluster: wrapping horizontal group (button rows, meta rows) */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-md));
}

/* Responsive column grid.
   Children span the full row by default. Span classes are mobile-first:
   .span-{1-4} (all sizes), .span-md-{1-8} (768px+), .span-lg-{1-12} (1200px+). */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-row-gap, var(--grid-gutter));
}

.grid > * {
    grid-column: 1 / -1;
}

.grid > .span-1 { grid-column: span 1; }
.grid > .span-2 { grid-column: span 2; }
.grid > .span-3 { grid-column: span 3; }
.grid > .span-4 { grid-column: span 4; }

@media (min-width: 768px) {
    .grid > .span-md-1 { grid-column: span 1; }
    .grid > .span-md-2 { grid-column: span 2; }
    .grid > .span-md-3 { grid-column: span 3; }
    .grid > .span-md-4 { grid-column: span 4; }
    .grid > .span-md-5 { grid-column: span 5; }
    .grid > .span-md-6 { grid-column: span 6; }
    .grid > .span-md-7 { grid-column: span 7; }
    .grid > .span-md-8 { grid-column: span 8; }
}

@media (min-width: 1200px) {
    .grid > .span-lg-1 { grid-column: span 1; }
    .grid > .span-lg-2 { grid-column: span 2; }
    .grid > .span-lg-3 { grid-column: span 3; }
    .grid > .span-lg-4 { grid-column: span 4; }
    .grid > .span-lg-5 { grid-column: span 5; }
    .grid > .span-lg-6 { grid-column: span 6; }
    .grid > .span-lg-7 { grid-column: span 7; }
    .grid > .span-lg-8 { grid-column: span 8; }
    .grid > .span-lg-9 { grid-column: span 9; }
    .grid > .span-lg-10 { grid-column: span 10; }
    .grid > .span-lg-11 { grid-column: span 11; }
    .grid > .span-lg-12 { grid-column: span 12; }
}