/* ==========================================================
   LAYOUT
   Containers · Sections · Grid · Stack · Media
   BEM naming. Mobile-first.
   ========================================================== */

/* ---------- Page Shell ---------- */

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

.page__main {
    flex: 1 0 auto;
    width: 100%;
}

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

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

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

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

.container--full {
    max-width: none;
}

.container--flush {
    padding-inline: 0;
}

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

.section {
    position: relative;
    padding-block: var(--section-padding-y);
    width: 100%;
}

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

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

.section--flush {
    padding-block: 0;
}

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

.section--off-white {
    background-color: var(--color-off-white);
}

.section--accent-soft {
    background-color: var(--color-accent-soft);
}

.section--primary {
    background-color: var(--color-primary);
    color: var(--color-inverse);
}

.section--primary .section__title,
.section--primary .section__eyebrow,
.section--primary h1,
.section--primary h2,
.section--primary h3 {
    color: var(--color-inverse);
}

.section--primary .section__text,
.section--primary p {
    color: rgba(255, 255, 255, 0.85);
}

/* Section header block */

.section__header {
    margin-bottom: var(--space-7);
}

.section__header--center {
    text-align: center;
    margin-inline: auto;
    max-width: 40rem;
}

.section__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}

.section__title {
    margin-bottom: var(--space-4);
}

.section__title:last-child {
    margin-bottom: 0;
}

.section__text {
    margin-bottom: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
}

.section__header--center .section__text {
    margin-inline: auto;
}

.section__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.section__header--center .section__actions {
    justify-content: center;
}

/* ---------- Stack (vertical rhythm) ---------- */

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.stack > * {
    margin-block: 0;
}

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

.stack--xs > * + * { margin-top: var(--space-2); }
.stack--sm > * + * { margin-top: var(--space-3); }
.stack--md > * + * { margin-top: var(--space-5); }
.stack--lg > * + * { margin-top: var(--space-6); }
.stack--xl > * + * { margin-top: var(--space-8); }

/* ---------- Cluster (inline wrap) ---------- */

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

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

.cluster--center {
    justify-content: center;
}

.cluster--between {
    justify-content: space-between;
}

.cluster--end {
    justify-content: flex-end;
}

/* ---------- Grid ---------- */

.grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: 1fr;
}

.grid--sm { gap: var(--grid-gap-sm); }
.grid--lg { gap: var(--grid-gap-lg); }

/* Auto-fit cards — min column width via modifier */
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

.grid--auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.grid--auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Explicit column counts — activated at md+ in responsive.css */
.grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
}

/* ---------- Split (two-column content + media) ---------- */

.split {
    display: grid;
    gap: var(--grid-gap-lg);
    align-items: center;
    grid-template-columns: 1fr;
}

.split__content,
.split__media {
    min-width: 0;
}

.split__media img,
.split__media picture {
    width: 100%;
    border-radius: var(--radius-lg);
}

.split--reverse .split__media {
    order: -1;
}

/* ---------- Media Object ---------- */

.media {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.media__figure {
    flex-shrink: 0;
}

.media__body {
    flex: 1 1 auto;
    min-width: 0;
}

.media--center {
    align-items: center;
}

/* ---------- Cover (full-bleed visual plane) ---------- */

.cover {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(70vh, 40rem);
    overflow: hidden;
}

.cover__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.cover__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(15, 46, 77, 0.45),
        rgba(15, 46, 77, 0.72)
    );
    pointer-events: none;
}

.cover__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ---------- Frame (aspect-ratio media wrapper) ---------- */

.frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-light);
}

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

.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--4x3  { aspect-ratio: 4 / 3; }
.frame--3x2  { aspect-ratio: 3 / 2; }
.frame--1x1  { aspect-ratio: 1 / 1; }
.frame--3x4  { aspect-ratio: 3 / 4; }

.frame--rounded-sm { border-radius: var(--radius-sm); }
.frame--rounded-md { border-radius: var(--radius-md); }
.frame--rounded-xl { border-radius: var(--radius-xl); }
.frame--rounded-none { border-radius: 0; }

/* ---------- Divider ---------- */

.divider {
    border: none;
    border-top: var(--border-width) solid var(--color-border);
    margin-block: var(--space-7);
}

.divider--light {
    border-color: rgba(255, 255, 255, 0.2);
}