/* ═══════════════════════════════════════════════════════════════════
   GAME DAY RECIPES — seasonal landing page
   Scoped with .gd- so it can be deleted wholesale when the season ends.
   Tokens and buttons come from styles.css; nothing is redefined here.
   ═══════════════════════════════════════════════════════════════════ */

.gd-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 768px) {
    .gd-wrap { padding: 0 20px; }
}

/* ─── Hero ─────────────────────────────────────────────────────── */
/* 200px top clears the announcement bar plus the fixed header, which sit over
   the hero on dark-header pages. Same figure the state fair hero uses.
   The photo carries its spread on the right, so the wash is heaviest on the
   left and the copy sits in the space the shot already leaves empty. */
.gd-hero {
    color: var(--off-white);
    padding: 200px 0 110px;
    background:
        linear-gradient(90deg, rgba(28, 56, 50, .94) 0%, rgba(28, 56, 50, .82) 38%, rgba(28, 56, 50, .28) 72%, rgba(28, 56, 50, .12) 100%),
        var(--forest) url('https://cdn.livea.com/game-day-2026/hero.jpg') center right / cover no-repeat;
}
.gd-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}
.gd-hero-copy { max-width: 540px; }
.gd-eyebrow {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-light);
    margin: 0 0 18px;
}
.gd-hero h1 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.08;
    margin: 0 0 20px;
    color: var(--off-white);
}
.gd-hero h1 em {
    font-style: italic;
    color: var(--teal-light);
}
.gd-hero p {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: rgba(253, 250, 247, 0.9);
    margin: 0 0 32px;
}
.gd-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ─── Sections ─────────────────────────────────────────────────── */
.gd-section { padding: 96px 0; }
.gd-section--alt { background: var(--section-alt, #F7F4F0); }
@media (max-width: 768px) {
    .gd-section { padding: 64px 0; }
    /* Narrow, the food is off-frame behind the copy, so the wash goes
       top-to-bottom and the text centres over it. */
    .gd-hero {
        padding: 150px 0 72px;
        text-align: center;
        background:
            linear-gradient(180deg, rgba(28, 56, 50, .82) 0%, rgba(28, 56, 50, .94) 55%),
            var(--forest) url('https://cdn.livea.com/game-day-2026/hero.jpg') center / cover no-repeat;
    }
    .gd-hero-inner { padding: 0 20px; }
    .gd-hero-copy { max-width: none; }
    .gd-hero-btns { justify-content: center; }
}

.gd-label {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 14px;
    text-align: center;
}
.gd-h2 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(32px, 4.4vw, 46px);
    line-height: 1.15;
    color: var(--text-dark);
    margin: 0 0 16px;
    text-align: center;
}
.gd-h2 em { font-style: italic; color: var(--primary); }
.gd-lede {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-medium);
    max-width: 620px;
    margin: 0 auto 48px;
    text-align: center;
}

/* ─── Recipe cards ─────────────────────────────────────────────── */
.gd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 900px) { .gd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gd-grid { grid-template-columns: 1fr; } }

.gd-card {
    display: block;
    text-decoration: none;
    background: var(--card-bg, #fff);
    border-radius: var(--radius-md, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.gd-card:hover,
.gd-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.gd-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--sand-mid, #EFE9E2);
}
.gd-card-body { padding: 22px 24px 26px; }
.gd-card-kicker {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 8px;
}
.gd-card h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    color: var(--text-dark);
    margin: 0 0 10px;
}
.gd-card p {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-medium);
    margin: 0 0 14px;
}
.gd-card-meta {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}
.gd-card-meta::after {
    content: ' \2192';
    transition: transform .2s ease;
}

/* ─── Guide download ───────────────────────────────────────────── */
.gd-guide {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 320px);
    gap: 48px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}
@media (max-width: 780px) {
    .gd-guide { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .gd-guide-shot { order: -1; }
}
.gd-guide h2 {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    color: var(--text-dark);
    margin: 0 0 16px;
}
.gd-guide p {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-medium);
    margin: 0 0 14px;
}
.gd-guide-list {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-medium);
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.gd-guide-list li { padding-left: 26px; position: relative; }
.gd-guide-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}
.gd-guide-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(26, 36, 32, 0.18);
}

/* ─── Closing note ─────────────────────────────────────────────── */
.gd-note {
    max-width: 760px;
    margin: 56px auto 0;
    padding: 24px 28px;
    border-left: 3px solid var(--primary);
    background: var(--sand, #FDFAF7);
    border-radius: 0 12px 12px 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-medium);
}
.gd-note strong { color: var(--text-dark); }