/* ==========================================================================
   Layout — containers, section rhythm and flow primitives
   Depends on tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   One horizontal gutter rule for the whole site. Sections that deliberately
   break out of the container (full-bleed photography, DESIGN.md 9) simply do
   not use it.
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-default);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.container--wide {
    max-width: var(--container-max);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* Reading measure for long property descriptions and editorial copy. */
.container--prose {
    max-width: var(--container-prose);
}

/* --------------------------------------------------------------------------
   Sections
   Pages alternate the three rhythms rather than repeating one, so the page
   reads as composed instead of stacked (DESIGN.md 40).
   -------------------------------------------------------------------------- */

.section {
    padding-block: var(--section-spacing-md);
}

.section--sm {
    padding-block: var(--section-spacing-sm);
}

.section--lg {
    padding-block: var(--section-spacing-lg);
}

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

/* --------------------------------------------------------------------------
   Page scaffold
   -------------------------------------------------------------------------- */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.site__main {
    flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   Flow primitives
   -------------------------------------------------------------------------- */

/* Vertical rhythm between siblings, overridable per instance with --stack-gap. */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
}

/* Horizontal group that wraps instead of overflowing on narrow screens. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
}