/* ============================================================
   layout.css — layout primitives (mobile-first)

   Defines reusable, framework-agnostic layout building blocks:
     .container  — horizontal page wrapper with max-width
     .section    — vertical rhythm wrapper (top/bottom padding)
     .stack      — vertical spacing between adjacent siblings
     .row        — horizontal flex row with gap
     .grid       — CSS Grid wrapper
       .grid--2    — 2-column grid at >= md
       .grid--3    — 3-column grid at >= md (with 2-col step at sm)
       .grid--4    — 4-column grid at >= lg (with 2-col step at sm)
       .grid--auto — auto-fit columns with min-width track size

   Mobile-first: the default styles target the smallest viewport
   (single column). Wider layouts are layered on with
   @media (min-width: ...) overrides. No max-width: queries.

   Breakpoints (documented; CSS custom properties are not
   permitted inside @media queries, so the values are inlined):
     sm:  480px
     md:  768px
     lg: 1024px
     xl: 1280px

   Tokens consumed (from tokens.css):
     --space-2 .. --space-12  (spacing scale, 4px grid)
     --container-max          (max-width of .container)
   Fallback values are provided so this file remains usable
   before tokens.css lands and is robust to token additions.
   ============================================================ */

/* ---------- .container ---------- */
/* Horizontal page wrapper. Centered, max-width-capped, with
   responsive horizontal padding. */
.container {
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin-inline: auto;
    padding-inline: var(--space-4, 16px);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-6, 24px);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-inline: var(--space-8, 32px);
    }
}

/* ---------- .narrow ---------- */
/* Width-cap modifier for long-form text pages (Privacy, Terms, Support,
   Pricing, Account, Activate, Success, Error). Combine with .container:
       <article class="container narrow">...</article>
   The narrower max-width wins via specificity tie-break (later rule). */
.narrow {
    max-width: var(--container-narrow, 760px);
}

/* ---------- .section ---------- */
/* Vertical rhythm wrapper for top-level page sections. */
.section {
    padding-block: var(--space-8, 32px);
}

@media (min-width: 768px) {
    .section {
        padding-block: var(--space-10, 64px);
    }
}

@media (min-width: 1024px) {
    .section {
        padding-block: var(--space-12, 96px);
    }
}

/* ---------- .stack ---------- */
/* Vertical spacing utility: adds margin-top to every direct
   child after the first. Use on any container that holds a
   vertical flow of blocks. The owl selector keeps the first
   child flush with the top of the container. */
.stack > * + * {
    margin-top: var(--space-4, 16px);
}

/* Density modifiers. */
.stack--tight > * + * {
    margin-top: var(--space-2, 8px);
}

.stack--loose > * + * {
    margin-top: var(--space-6, 24px);
}

/* ---------- .row ---------- */
/* Horizontal flex row with gap. Wraps by default so it stays
   safe on narrow viewports without media queries. */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
    align-items: center;
}

.row--tight {
    gap: var(--space-2, 8px);
}

.row--loose {
    gap: var(--space-6, 24px);
}

/* Common alignment modifiers. */
.row--start { justify-content: flex-start; }
.row--center { justify-content: center; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

/* ---------- .grid ---------- */
/* CSS Grid wrapper. Defaults to a single column at all
   viewport widths; modifiers add columns at wider breakpoints. */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4, 16px);
}

.grid--tight { gap: var(--space-2, 8px); }
.grid--loose { gap: var(--space-6, 24px); }

/* .grid--2 — 1 col mobile, 2 cols >= md (768px). */
@media (min-width: 768px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* .grid--3 — 1 col mobile, 2 cols >= sm (480px), 3 cols >= md (768px). */
@media (min-width: 480px) {
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* .grid--4 — 1 col mobile, 2 cols >= sm (480px), 4 cols >= lg (1024px). */
@media (min-width: 480px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* .grid--auto — auto-fit columns with a minimum track size.
   Lets the grid choose the column count based on viewport
   without explicit breakpoints; safe on any width. */
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}