/* ─── Homepage ────────────────────────────────────────────────────────── */


/* ── Hero banner ──────────────────────────────────────────────────────── */

.hero-banner {
    padding-block-start: clamp(2rem, 5vw, 4rem);

    & ._split {
        display: grid;
        grid-template-columns: 6fr 5fr;
        gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
        align-items: center;
    }

    & ._content {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    & ._kicker {
        font-size: var(--font-size-sm);
        font-weight: 600;
        letter-spacing: var(--letter-spacing-wide);
        text-transform: uppercase;
        color: var(--color-primary-light);
    }

    & ._title {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--color-forest-deep);

        & em {
            font-style: italic;
            font-weight: 800;
            color: var(--color-primary-light);
            position: relative;
            white-space: nowrap;

            &::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0.05em;
                height: 0.15em;
                background: var(--color-accent);
                border-radius: 999px;
                opacity: 0.55;
                z-index: -1;
            }
        }
    }

    & ._lead {
        font-size: var(--font-size-lg);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-muted);
        max-width: 56ch;
    }

    & ._actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        margin-block-start: var(--space-sm);
    }

    & ._media {
        position: relative;
        aspect-ratio: 4 / 5;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-card);
        transform: rotate(-1.5deg);
        transition: transform var(--duration-interaction) var(--ease-out-expo);

        &:hover {
            transform: rotate(0deg) scale(1.01);
        }

        & ._image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        & ._badge {
            position: absolute;
            inset-inline-start: var(--space-md);
            inset-block-end: var(--space-md);
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: 0.45rem var(--space-md);
            border-radius: 999px;
            background: var(--color-bg-card);
            color: var(--color-forest-deep);
            font-size: var(--font-size-sm);
            font-weight: 600;
            box-shadow: var(--shadow-card);

            & svg {
                width: 1em;
                height: 1em;
                color: var(--color-primary-light);
            }
        }
    }

    @media (max-width: 880px) {
        & ._split {
            grid-template-columns: 1fr;
        }

        & ._media {
            aspect-ratio: 16 / 10;
            transform: rotate(0deg);
            order: -1;
            max-height: 22rem;
        }
    }
}


/* ── About section ────────────────────────────────────────────────────── */

.about-section {

    & ._split {
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
        align-items: start;
    }

    & ._prose {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        font-size: var(--font-size-lg);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-muted);
        max-width: 65ch;

        & p {
            margin: 0;
        }
    }

    & ._pillars {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        margin: var(--space-md) 0 0;
    }

    & ._pillar {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-md);
        align-items: start;
        padding: var(--space-md);
        border-radius: var(--radius-md);
        background: var(--color-bg-card);
        box-shadow: var(--shadow-invisible);
        transition: box-shadow var(--transition-base);

        &:hover {
            box-shadow: var(--shadow-card);
        }

        & ._icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 50%;
            background: var(--color-forest-tint);
            color: var(--color-forest-deep);

            & svg {
                width: 1.4rem;
                height: 1.4rem;
            }
        }

        & ._pillar-title {
            font-size: var(--font-size-lg);
            font-weight: 700;
            color: var(--color-forest-deep);
            margin: 0 0 var(--space-xs) 0;
        }

        & ._pillar-text {
            font-size: var(--font-size-base);
            color: var(--color-text-muted);
            line-height: var(--line-height-base);
            margin: 0;
        }
    }

    @media (max-width: 880px) {
        & ._split {
            grid-template-columns: 1fr;
            gap: var(--space-xl);
        }
    }
}


/* ── Topic strip (chips above material grid) ──────────────────────────── */

.topic-strip {
    list-style: none;
    margin: 0 0 var(--space-xl) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);

    & ._chip {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem var(--space-md);
        background: var(--color-bg-card);
        color: var(--color-forest-deep);
        border: 1px solid var(--color-forest-tint);
        border-radius: 999px;
        font-size: var(--font-size-sm);
        font-weight: 600;
        text-decoration: none;
        transition: background-color var(--duration-interaction) ease, border-color var(--duration-interaction) ease;

        &:hover {
            background: var(--color-forest-tint);
            border-color: var(--color-forest-mid);
        }
    }

    & ._chip.-more {
        background: transparent;
        color: var(--color-forest-mid);
        border-style: dashed;
        font-weight: 500;
    }
}

.library-sample ._cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-xl);
}


/* ── Material grid + cards ────────────────────────────────────────────── */

.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.material-empty {
    color: var(--color-text-muted);
    font-style: italic;
}


/* ── Festival preview ─────────────────────────────────────────────────── */

.festival-preview {

    & .heading ._intro {
        margin-block-start: var(--space-md);
        font-size: var(--font-size-lg);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-muted);
        max-width: 65ch;
    }

    & ._more {
        margin-block-start: var(--space-xl);
    }
}

.term-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.term-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base);

    &:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px);
    }

    & > ._when {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 4.5rem;
        padding: var(--space-sm) var(--space-md);
        background: var(--color-forest-tint);
        border-radius: var(--radius-sm);
        line-height: 1.1;

        & ._day {
            font-size: 2rem;
            font-weight: 800;
            color: var(--color-forest-deep);
            letter-spacing: var(--letter-spacing-tight);
        }

        & ._month {
            font-size: var(--font-size-sm);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: var(--letter-spacing-wide);
            color: var(--color-forest);
            margin-block-start: 0.1em;
        }

        & ._year {
            font-size: 0.75rem;
            color: var(--color-forest-mid);
            margin-block-start: 0.1em;
        }
    }

    & > ._what {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        min-width: 0;

        & ._season {
            font-size: var(--font-size-sm);
            font-weight: 600;
            letter-spacing: var(--letter-spacing-wide);
            text-transform: uppercase;
            color: var(--color-primary-light);
        }

        & ._location {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            font-size: var(--font-size-xl);
            font-weight: 700;
            color: var(--color-forest-deep);
            line-height: var(--line-height-tight);
            margin: 0;

            & svg {
                width: 1em;
                height: 1em;
                flex-shrink: 0;
                color: var(--color-forest-mid);
            }
        }

        & ._range {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
        }
    }

    & > ._arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: var(--color-forest-tint);
        color: var(--color-forest-deep);
        transition: transform var(--duration-interaction) var(--ease-out-expo);

        & svg {
            width: 1.1rem;
            height: 1.1rem;
        }
    }

    &:hover > ._arrow {
        transform: translate(4px, -4px);
        background: var(--color-forest);
        color: var(--color-on-forest);
    }

    @media (max-width: 600px) {
        grid-template-columns: auto 1fr;
        gap: var(--space-md);

        & > ._arrow {
            display: none;
        }
    }
}

.term-empty {
    padding: var(--space-xl);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}


/* ── Contact section ──────────────────────────────────────────────────── */

.contact-section {

    & ._split {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
        align-items: start;
    }

    & ._info {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    & ._kicker {
        font-size: var(--font-size-sm);
        font-weight: 600;
        letter-spacing: var(--letter-spacing-wide);
        text-transform: uppercase;
        color: var(--color-primary-light);
    }

    & ._title {
        font-size: clamp(2rem, 4vw, 2.75rem);
        font-weight: 800;
        line-height: var(--line-height-tight);
        letter-spacing: var(--letter-spacing-tight);
        color: var(--color-forest-deep);
        margin: 0;
    }

    & ._lead {
        font-size: var(--font-size-base);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-muted);
        max-width: 42ch;
    }

    & ._channels {
        list-style: none;
        margin: var(--space-md) 0 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    & ._channel {
        display: inline-flex;
        align-items: center;
        gap: var(--space-md);
        font-size: var(--font-size-base);
        color: var(--color-forest-deep);

        & ._icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            background: var(--color-bg-card);
            color: var(--color-forest);

            & svg {
                width: 1.1rem;
                height: 1.1rem;
            }
        }

        & a {
            color: inherit;
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color var(--duration-interaction) ease;

            &:hover {
                border-bottom-color: var(--color-forest-mid);
            }
        }
    }

    & ._form-panel {
        padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
        background: var(--color-bg-card);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
    }

    & ._flash {
        display: flex;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
        margin-block-end: var(--space-lg);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);

        & svg {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            margin-block-start: 0.1rem;
        }

        &.-success {
            background: var(--color-primary-bg);
            color: var(--color-forest-deep);
        }

        &.-error {
            background: oklch(94% 0.03 20);
            color: oklch(38% 0.1 20);
        }
    }

    & ._submit {
        display: flex;
        justify-content: flex-end;
        margin-block-start: var(--space-md);
    }

    @media (max-width: 880px) {
        & ._split {
            grid-template-columns: 1fr;
            gap: var(--space-xl);
        }
    }
}


/* ── Newsletter section ───────────────────────────────────────────────── */

.newsletter-section {

    & .heading ._intro {
        margin-block-start: var(--space-md);
        font-size: var(--font-size-lg);
        line-height: var(--line-height-relaxed);
        color: var(--color-text-muted);
        max-width: 65ch;
    }

    & ._form-wrapper {
        max-width: 42rem;
        margin-inline: auto;
        margin-block-start: var(--space-xl);
    }
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    & #newsletter-flash:not(:has(*)) {
        /* Hide the div when empty, so the flex gap isn't applied */
        display: none;
    }

    padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);

    & ._row {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    & ._input {
        flex: 1;
        min-width: 12rem;
        padding: 0.6rem var(--space-md);
        border: var(--border-width-ui) solid var(--color-border);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-base);
        font-family: inherit;
        color: var(--color-text-main);
        background: var(--color-bg-main);
        transition:
            border-color var(--duration-interaction) ease,
            box-shadow var(--duration-interaction) ease;

        &:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px oklch(52% 0.14 152 / 0.15);
        }
    }

    & ._flash {
        display: flex;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);

        & svg {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            margin-block-start: 0.1rem;
        }

        &.-success {
            background: var(--color-primary-bg);
            color: var(--color-forest-deep);
        }

        &.-error {
            background: oklch(94% 0.03 20);
            color: oklch(38% 0.1 20);
        }
    }
}


/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hero-banner ._media,
    .material-card,
    .term-card,
    .term-card ._arrow {
        transition: none;
        transform: none;
    }

    .hero-banner ._media:hover {
        transform: none;
    }

    .term-card:hover > ._arrow {
        transform: none;
    }
}