/* ─────────────────────────────────────────────────────────────────────
   Page-level layout primitives. Newspaper-style grids — wide hero,
   three-column section, two-column body, optional sidebar.
   Cocina de Noche: pixel page heads, pixel divider under the hero.
   ───────────────────────────────────────────────────────────────────── */

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
}

.page-narrow {
    max-width: var(--reading-max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
}

/* Page heading band — section title + meta on a row, ruled below. */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 2px solid var(--surface-rule-strong);
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.page-head h1 {
    font-family: var(--pixel);
    font-size: var(--fs-h2);
    color: var(--ink-headline);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
}

.page-head-meta {
    font-family: var(--mono);
    font-size: var(--fs-meta);
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ─── Front-page grids ─── */

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

/* Hero row — single big story, closed by the pixel divider. */
.hero {
    padding-bottom: 0;
    border-bottom: 0;
}

.hero::after {
    content: "";
    display: block;
    height: 4px;
    margin-top: var(--sp-6);
    background: repeating-linear-gradient(90deg,
        var(--accent) 0 8px, transparent 8px 24px,
        #6fa05c 24px 32px, transparent 32px 48px);
    opacity: 0.55;
}

/* Three-column "Top of the news" by section. */
.columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--surface-rule);
}

.column-head {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--surface-rule);
}

/* Two-column body with sidebar for sources/sentiment filters. */
.body-with-sidebar {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-7);
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 130px;
    align-self: start;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding-right: var(--sp-2);
}

.sidebar-section {
    margin-bottom: var(--sp-5);
}

.sidebar-label {
    font-family: var(--mono);
    font-size: var(--fs-eyebrow);
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}

/* Section rule used between editorial bands. */
.rule {
    border: 0;
    border-top: 1px solid var(--surface-rule);
    margin: var(--sp-6) 0;
}

/* Two-column dashboard grid for analytics. */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
}

.dash-full { grid-column: 1 / -1; }

/* Cluster-detail comparison layout — main + adjacent outlets rail. */
.story-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-6);
}

/* ─── Mobile collapse ─── */

@media (max-width: 960px) {
    .columns-3 { grid-template-columns: 1fr 1fr; }
    .body-with-sidebar { grid-template-columns: 1fr; gap: var(--sp-5); }
    .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        padding-bottom: var(--sp-4);
        border-bottom: 1px solid var(--surface-rule);
    }
    .dash-grid { grid-template-columns: 1fr; }
    .story-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .page, .page-narrow { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
    .columns-3 { grid-template-columns: 1fr; }
}