/**
 * css/core/layout.css
 * ====================
 * Structural layout classes -- container, section rhythm, grid utilities.
 * Engine-level -- applies to every page, every brand.
 * Values come from design-tokens.css via var(--space-*) etc.
 */

/* -- Container ------------------------------------------------------------- */

.container,
.layout-container {
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 768px) {
    .container,
    .layout-container {
        padding: 0 1.25rem;
    }
}

/* -- Sections -------------------------------------------------------------- */

/*
 * .layout-section -- legacy name, kept for backward compatibility
 * .section       -- preferred name going forward
 * Both consume --section-spacing so themes override from one place.
 */
.layout-section {
    padding: var(--layout-section-padding, 5rem 0);
}

.section {
    padding: var(--section-spacing, 5rem) 0;
}

section {
    background-color: var(--theme-bg);
}

section:nth-child(even) {
    background-color: var(--theme-bg-alt);
}

.section-title {
    font-family: var(--theme-font-display);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--theme-text);
}

.section-subtitle {
    color: var(--theme-text-muted);
}

/* -- Grid utilities -------------------------------------------------------- */
/*
 * .grid is a base class -- display + gap only, no column definition.
 * .grid-2/3/4 are standalone: they own display, gap, and column definition.
 * Using both (e.g. class="grid grid-3") is valid -- properties are identical.
 */

.grid {
    display: grid;
    gap: var(--grid-gap, 2.5rem);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap, 2.5rem);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap, 2.5rem);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap, 2.5rem);
}

/* Responsive -- mid: 3/4-col grids become 2-col */
@media (max-width: 1024px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive -- mobile: all grids become single column */
@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Flexible tile grid -- auto-fills columns, min 260px each */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--grid-gap, 2.5rem);
}

/* -- Media frame utility --------------------------------------------------- */

.frame {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame-square {
    aspect-ratio: 1 / 1;
}

.frame-portrait {
    aspect-ratio: 3 / 4;
}

/* -- Section layout patterns ----------------------------------------------- */
/*
 * Composable modifiers for section-level layout variety.
 * Apply to a wrapping <section> or <div class="layout-section">.
 * These touch only alignment and container width -- never card, tile,
 * border, shadow, or spacing token values.
 */

/* Centered -- text-align center with readable paragraph width */
.section-centered {
    text-align: center;
}

.section-centered .section-subtitle,
.section-centered > .layout-container > p,
.section-centered > .container > p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Section header alignment bridge */
.section-header.section-centered {
    text-align: center;
}

/* Narrow -- editorial column, constrains container to 720px */
.section-narrow .layout-container,
.section-narrow .container {
    max-width: 720px;
}

/* Split -- two-column image/text layout */
.section-split .layout-container,
.section-split .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: center;
}

@media (max-width: 768px) {
    .section-split .layout-container,
    .section-split .container {
        grid-template-columns: 1fr;
    }
}

/* -- Spacing utilities ----------------------------------------------------- */

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* -- Narrow container utility ---------------------------------------------- */
/*
 * Direct use on .container / .layout-container elements.
 * .section-narrow scopes this inside a section wrapper instead.
 */
.container-narrow {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* -- Section band backgrounds ---------------------------------------------- */
/*
 * Explicit background control, independent of nth-child alternation.
 * Apply to a <section> when DOM order cannot be relied on.
 * Never touches card/tile padding, border, or shadow.
 */
.section-band-light {
    background: var(--theme-bg);
}

.section-band-muted {
    /* Subtle tint ensures cards don't visually merge into the page background */
    background: var(--theme-bg-alt, rgba(0, 0, 0, 0.02));
}

.section-band-dark {
    background: var(--theme-primary);
    color: #ffffff;
}

.section-band-dark .section-title,
.section-band-dark .section-subtitle {
    color: #ffffff;
}

/* -- Section header -------------------------------------------------------- */

.section-header {
    margin-bottom: var(--space-xl, 4rem);
}

.section-header .section-subtitle {
    max-width: 640px;
}

.section-header.section-centered {
    text-align: center;
}

.section-header.section-centered .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* -- Section pattern: feature grid ---------------------------------------- */
/*
 * Card/tile grid with centered header.
 * Direct-child selectors prevent affecting card-level titles/subtitles.
 */
.section-feature-grid > .layout-container > .section-title,
.section-feature-grid > .container > .section-title {
    text-align: center;
}

.section-feature-grid > .layout-container > .section-subtitle,
.section-feature-grid > .container > .section-subtitle {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* -- Section pattern: editorial band -------------------------------------- */
/*
 * Centered text column, constrained to readable width.
 * Works for intros, quotes, and standalone text blocks.
 */
.section-editorial-band {
    text-align: center;
}

.section-editorial-band .layout-container,
.section-editorial-band .container {
    max-width: 720px;
}

.section-editorial-band > .layout-container > p,
.section-editorial-band > .container > p {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* -- Section pattern: media highlight ------------------------------------- */
/*
 * Image-weighted split (60/40).
 * Use when image should dominate over text block.
 */
.section-media-highlight .layout-container,
.section-media-highlight .container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-lg, 2.5rem);
    align-items: center;
}

@media (max-width: 768px) {
    .section-media-highlight .layout-container,
    .section-media-highlight .container {
        grid-template-columns: 1fr;
    }
}

/* -- Stack utilities ------------------------------------------------------- */
/*
 * Lobotomised owl pattern: applies margin only between siblings.
 * Never modifies the first child's top margin or any element in isolation.
 * Safe to nest inside grids, cards, and tile components.
 */

.stack > * + * {
    margin-top: var(--space-md);
}

.stack-sm > * + * {
    margin-top: var(--space-sm);
}

.stack-md > * + * {
    margin-top: var(--space-md);
}

.stack-lg > * + * {
    margin-top: var(--space-lg);
}

.stack-xl > * + * {
    margin-top: var(--space-xl);
}

/* -- Cluster utility ------------------------------------------------------- */
/*
 * Horizontal flex group with wrapping. Use for button rows, tag lists,
 * nav links, or any inline collection that should wrap gracefully.
 * Size variants modify gap only -- no other property is touched.
 */

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.cluster-sm {
    gap: var(--space-sm);
}

.cluster-lg {
    gap: var(--space-lg, 2.5rem);
}