/* ============================================================
   VOZIQA V2 — Layout (grid, containers, section rhythm)
   Editorial asymmetry. See DESIGN_V2.md §4.
   ============================================================ */

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

/* 12-column grid for asymmetric splits (7/5, 8/4) */
.grid12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-5);
}
.col-7 { grid-column: span 7; }
.col-5 { grid-column: span 5; }
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: 1 / -1; }

/* ─── Section rhythm ─── */
.section {
    padding-block: clamp(3.5rem, 7vw, 7rem);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* A full-bleed plum "room" — one per page */
.room-plum {
    background: var(--vz-plum);
    color: var(--vz-on-plum);
}
.room-plum h1, .room-plum h2, .room-plum h3 { color: var(--vz-on-plum); }
.room-plum p { color: var(--vz-on-plum-muted); }

/* ─── Section header — left-aligned with gold thread rule ─── */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.section-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--vz-ink-muted); }

/* Centered variant — reserve for ceremonial moments only */
.section-head--center {
    align-items: center;
    text-align: center;
}

/* ─── Product rail that bleeds off the right edge ─── */
.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ─── Responsive collapse ─── */
@media (max-width: 900px) {
    .grid12 { gap: var(--sp-4); }
    .col-7, .col-5, .col-8, .col-4, .col-6 {
        grid-column: 1 / -1;
    }
}