/* ═══════════════════════════════════════════════════════════════════════════
   CMS Layout — Reusable layout classes for admin-authored HTML.
   Admin adds these classes to structure content without writing any CSS.
   All values reference design tokens from base/variables.css + base/themes.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Containers ───────────────────────────────────────────────────────────── */

/* Outer wrapper mirrors navbar__inner exactly: 1440px + --site-gutter padding.
   Content left edge always aligns with the navbar at every viewport width. */
.cms-container {
    width: 100%;
    max-width: var(--width-full);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
    box-sizing: border-box;
}

/* Inner content width — applied to the direct child (article, nav, etc.) */
.cms-container > * {
    max-width: var(--width-content);
    margin-inline: auto;
}

.cms-container.cms-container--wide > * {
    max-width: none;
    margin-inline: 0;
}

.cms-container.cms-container--narrow > * {
    max-width: var(--width-narrow);
    margin-inline: auto;
}

.cms-container.cms-container--full > * {
    max-width: none;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.cms-section {
    padding-block: var(--space-16);
}

.cms-section--sm { padding-block: var(--space-8); }
.cms-section--lg { padding-block: calc(var(--space-16) * 1.5); }

.cms-section--bg    { background-color: var(--bg-tertiary); }
.cms-section--card  { background-color: var(--surface-card); }
.cms-section--dark  {
    background-color: var(--accent-dark);
    color: var(--bg-primary);
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.cms-grid {
    display: grid;
    gap: var(--space-8);
}

/* Mobile-first: single column base */
.cms-grid--2,
.cms-grid--3,
.cms-grid--4 {
    grid-template-columns: 1fr;
}

.cms-grid--gap-sm { gap: var(--space-4); }
.cms-grid--gap-lg { gap: var(--space-12); }

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

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

/* ── Split layout (50/50 image + text) ───────────────────────────────────── */

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

.cms-split__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    .cms-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .cms-split--reverse .cms-split__image { order: 2; }
    .cms-split--reverse .cms-split__content { order: 1; }
}

/* ── Centered content block ───────────────────────────────────────────────── */

.cms-center {
    text-align: center;
    max-width: var(--width-narrow);
    margin-inline: auto;
}

/* ── Sidebar layout (2/3 + 1/3) ──────────────────────────────────────────── */

.cms-sidebar-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (min-width: 1024px) {
    .cms-sidebar-wrap {
        grid-template-columns: 1fr var(--width-sidebar);
    }
}

/* ── Typography helpers ───────────────────────────────────────────────────── */

.cms-lead {
    font-size: var(--text-xl);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-8);
}

.cms-caption {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.cms-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-gold);
}