/*Nato summit*/

body {

    &.homepage,
    &.events,
    &.contributors,
    &.themes,
    &.stories,
    &.event,
    &.contributor,
    &.theme,
    &.story,
    &.page,
    &.agenda-item,
    &.search,
    &.speakers,
    &.speaker,
    &.venues,
    &.venue {
        display: flex;
        flex-direction: column;
        margin-top: 0;

        & .body {
            display: grid;
            grid: [stack] 1fr / min-content [stack] 1fr;
        }

        @media (min-width: 640px) {

            & .introduction p {
                font-size: 22px;
            }
        }

        & .festival-banner img {
            width: 100%;
            max-height: 200px;

            @media (max-width: 639px) {
                max-height: 150px;
            }
        }

        .page-header {
            position: relative;
            width: 100%;
            aspect-ratio: 3358 / 1226;
            background-image: url(/theme/just-peace-2022/assets/img/windmolen_liggend.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-top: 2rem;

            .header-content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }

            .text-container {
                width: 30%;
                padding: 0 2rem;
                position: absolute;
                top: 2rem;

                & p {
                    color: white;
                    hyphens: auto;
                }

                @media (max-width: 768px) {
                    width: 90%;
                    margin-left: 2rem;
                    padding: 2rem;
                }

                h2 {
                    color: #fff;
                    margin-bottom: 2rem;
                }
            }
        }

        .header-big-title {
            text-align: left;
            padding: 0;
        }

        @media (max-width: 639px) {
            .body > aside,
            .body > main {
                grid-area: stack;
            }
        }

        .homepage--agenda-event {
            display: flex;
            gap: 1rem;
        }
    }

    &.events .archief .event.card, .related .event {
        grid-column: span 1;
        grid-row: span 1;
        background-color: hsl(93deg 34% 78%);
    }

    &.events .event {
        position: relative;
        width: 100%;
        height: 100%;
    }

    &.events .event figure {
        position: absolute;
        min-width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @container gridview (min-width: 640px) {
        :has(.spotlight, .events) .event:nth-child(2) h3,
        :has(.spotlight, .events) .event:nth-child(8) h3,
        :has(.spotlight, .events) .event:nth-child(14) h3,
        :has(.spotlight, .events) .event:nth-child(20) h3,
        :has(.spotlight, .events) .event:nth-child(24) h3,
        :has(.spotlight, .events) .event:nth-child(32) h3 {
            font-size: max(2.5rem, 2.6cqi - 1rem);
        }
    }

    & .first-nav {
        padding: 0 1rem;
    }

    & .festival-banner {
        padding: 0;
        margin-bottom: 1rem;
    }

    & .header-mobile {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0 0 1rem 0;

        @media (min-width: 640px) {
            display: none;
        }
    }

    & .header-title-mobile {
        font-weight: bold;
        display: none;

        @media (max-width: 639px) {
            display: block;
        }
    }

    & .festival-banner {
        width: 100%;
        display: none;

        @media (min-width: 640px) {
            display: block;
        }
    }

    & .festival-banner.mobile {
        display: none;

        @media (max-width: 639px) {
            display: block;
        }
    }

    .homepage-link {
        font-size: clamp(1rem, 1rem + 0.2vw, 1.25rem);
        text-decoration: none;
        list-style: none;
        margin-bottom: 2rem;
    }
}

/* Alternatieve flexbox oplossing voor gelijke breedte knoppen */

.program-categories {
    margin-bottom: var(--space-xl);
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Deze aanpak zorgt ervoor dat alle knoppen even breed zijn binnen één rij */
.category-button {
    flex: 1 0 0; /* flex-grow: 1, flex-shrink: 0, flex-basis: 0 */
    display: inline-block;
    background-color: #f5634a;
    color: #fff;
    padding: 1rem;
    font-family: var(--text);
    font-size: clamp(1rem, 1rem + 0.2vw, 1.25rem);
    text-decoration: none;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
    white-space: nowrap; /* Voorkomt dat tekst naar een nieuwe regel gaat */
}

.category-button:hover {
    background-color: #e54e34;
    transform: translateY(-2px);
}

.category-button.active {
    background-color: #d8392a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .category-buttons {
        gap: 0.5rem;
    }

    .category-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
        flex-basis: calc(50% - 0.25rem); /* Twee knoppen per rij op kleinere schermen */
    }
}