/*
 * Corpus Phase 2 — FORECAST page type. 10,804 pages: horoscope, weekly-horoscope, rashifal,
 * transit, today, daily, retrograde, predictions-2026, gochar, eclipse-2026 — dated, recurring
 * documents. Self-contained (does not require Group 1's css/corpus-article.css to exist),
 * because forecast is a distinct `[data-gg-page-type="forecast"]` scope with its own spine.
 *
 * Contract: docs/handoff/CORPUS-PHASE2-DESIGN-20260903.md §4.3 — "same spine as article, plus a
 * date capsule, a period rail, and a 21/9 hero (a forecast hero is a band, not a card)."
 */

[data-gg-page-type="forecast"] .gg-corpus-forecast {
    width: min(100% - 64px, 676px);
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width: 760px) {
    [data-gg-page-type="forecast"] .gg-corpus-forecast { width: 100%; padding: 0 20px; }
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 40px 0 20px;
    font: 400 11.9px/1.2 Simplon, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gg-muted);
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--gg-accent);
}

[data-gg-page-type="forecast"] .gg-corpus-forecast h1 { color: var(--gg-ink); }

/* 1. Date capsule, above the H1 — the page's own period string, never invented. */
[data-gg-page-type="forecast"] .gg-corpus-forecast__capsule {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 14px;
    padding: 0 18px;
    border-radius: 30px;
    background: var(--gg-blush);
    color: var(--gg-ink);
    font: 400 11.9px Simplon, monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* hero — 21/9 band, not a card; one section illustration, not two. */
[data-gg-page-type="forecast"] .gg-corpus-forecast__hero {
    aspect-ratio: 21 / 9;
    width: 100%;
    margin: 28px 0 0;
    overflow: hidden;
    border-radius: 40px;
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__dek {
    margin: 24px 0 0;
    /* 1.6, not Cleo's measured 1.27: the owner rubric requires >= 1.6 on Indic body
       text and 1.27 clips Devanagari and Tamil matras. Same call, same selector role
       and same rationale as `.gg-corpus-dek` in css/corpus-article.css. */
    font: 400 22px/1.6 PPNeue, Arial, sans-serif;
    color: var(--gg-muted);
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__body h2 {
    margin: 62px 0 20px;
    font: 350 clamp(2rem, 4.5vw, 3.75rem)/0.98 PPNeue, Arial, sans-serif;
    letter-spacing: -0.055em;
    color: var(--gg-ink);
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__body p {
    margin: 0;
    color: color-mix(in srgb, var(--gg-ink) 80%, transparent);
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__body p + p { margin-top: 16px; }

[data-gg-page-type="forecast"] .gg-corpus-forecast__illustration {
    aspect-ratio: 4 / 3;
    width: 100%;
    margin: 40px 0;
    overflow: hidden;
    border-radius: 28px;
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2. Period rail — previous / next, only when the page's own DOM already has those links. */
[data-gg-page-type="forecast"] .gg-corpus-forecast__period-rail {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 48px 0 64px;
}

[data-gg-page-type="forecast"] .gg-corpus-forecast__period-rail .cleo-pill--quiet {
    border: 1px solid var(--gg-line);
    background: transparent;
    color: var(--gg-ink);
}

@media (max-width: 760px) {
    [data-gg-page-type="forecast"] .gg-corpus-forecast__hero { border-radius: 28px; }
    [data-gg-page-type="forecast"] .gg-corpus-forecast__illustration { border-radius: 20px; }
    [data-gg-page-type="forecast"] .gg-corpus-forecast__period-rail { flex-direction: column; }
}