@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --teal: #089396;
    --teal-dark: #06777a;
    --red: #ab2218;
    --white: #fff;
    --gap: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--white);
    color: #222;
    font-family: 'Euclid Circular A', system-ui, sans-serif;
    font-weight: 500;
}

img { display: block; max-width: 100%; height: auto; }

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 64px;
}

/* Bovenbalk in html; maten in % / cqw zodat alles meeschaalt zoals de oude afbeelding (3236x706) */
.topbar {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 3236 / 706;
    margin: 24px 0 var(--gap);
    background: url('../img/hout_balk.jpg') center 40% / cover no-repeat;
}
.topbar__logo {
    position: absolute;
    left: 3.4%;
    top: 28%;
    width: 22%;
}
/* Staat op de onderkant, de oren steken boven de balk uit */
.topbar__chiel {
    position: absolute;
    left: 25.6%;
    width: 18.9%;
    bottom: 0;
}
.topbar__chiel img { width: 100%; }
.topbar__title {
    position: absolute;
    left: 47%;
    width: 51%;
    top: 14%;
    margin: 0;
    color: var(--white);
    font-weight: 700;
    font-size: 6.4cqw;
    line-height: 1;
    letter-spacing: .01em;
    text-align: center;
}
.topbar__intro {
    position: absolute;
    left: 47%;
    width: 51%;
    top: 46.5%;
    margin: 0;
    color: #111;
    font-weight: 700;
    font-size: 1.33cqw;
    line-height: 1.25;
    text-align: center;
}

/* Afleveringen */
.episode { margin-bottom: var(--gap); }

.episode__heading { margin: 0; }

.episode__bar {
    display: block;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.episode__bar img {
    width: 100%;
    transition: filter .2s ease, transform .3s ease;
}
.episode__bar:hover img,
.episode__bar:focus-visible img { filter: brightness(1.06); }
.episode__bar:focus-visible { outline: 4px solid var(--teal); outline-offset: 2px; }

/* Openklappen met grid-rows-truc, animeert naar de echte hoogte */
.episode__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s ease;
}
.episode.is-open .episode__panel { grid-template-rows: 1fr; }

.episode__inner {
    overflow: hidden;
    background: var(--red);
}

.episode__content {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding: 48px 48px 52px;
    opacity: 0;
    transition: opacity .3s ease;
}
.episode.is-open .episode__content { opacity: 1; transition-delay: .15s; }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: var(--white);
    text-decoration: none;
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.tile__label {
    font-weight: 700;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.2;
    text-align: center;
}

.tile__media {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tile__media img {
    width: 100%;
    aspect-ratio: 800 / 531;
    object-fit: cover;
    border-radius: inherit;
}
.tile__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
    transition: transform .2s ease;
}
.tile__play svg { display: block; width: 100%; height: auto; }
.tile__play circle { fill: transparent; stroke: var(--white); stroke-width: 4; }
.tile__play path { fill: var(--white); }
.tile--video:hover .tile__media,
.tile--video:focus-visible .tile__media { transform: scale(1.04); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.tile--video:hover .tile__play,
.tile--video:focus-visible .tile__play { transform: translate(-50%, -50%) scale(1.12); }
.tile--video.is-soon { cursor: default; }

.episode__watch {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.episode__text {
    margin: 30px 0 0;
    color: var(--white);
    font-weight: 600;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.35;
    text-align: center;
    max-width: 30em;
}

.tile__paper {
    display: block;
    width: 100%;
    max-width: 310px;
    background: var(--white);
    padding: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tile--doc:hover .tile__paper,
.tile--doc:focus-visible .tile__paper { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.tile:focus-visible { outline: 3px solid var(--white); outline-offset: 6px; }

/* Kerstspel-balk */
.kerstspel { display: block; }
.kerstspel img { width: 100%; transition: filter .2s ease; }
.kerstspel:hover img,
.kerstspel:focus-visible img { filter: brightness(1.1); }
.kerstspel:focus-visible { outline: 4px solid var(--teal-dark); outline-offset: 2px; }

/* Video-popup */
.video-modal {
    width: min(1100px, 94vw);
    padding: 0;
    border: 0;
    background: #000;
    border-radius: 12px;
    overflow: visible;
}
.video-modal::backdrop { background: rgba(0,0,0,.8); }
.video-modal__frame { aspect-ratio: 16 / 9; }
.video-modal__frame video,
.video-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.video-modal__close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* Bovenbalk op smalle schermen: logo + titel links, Chiel rechts, tekst eronder */
@media (max-width: 720px) {
    .topbar {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 42%;
        grid-template-rows: auto auto auto;
        padding: 20px 16px 0;
        margin-top: 32px;
    }
    .topbar__logo,
    .topbar__chiel,
    .topbar__title,
    .topbar__intro { position: static; width: auto; }
    .topbar__logo { grid-area: 1 / 1; width: 82%; justify-self: center; align-self: end; }
    .topbar__title { grid-area: 2 / 1; font-size: 10cqw; margin-top: 10px; }
    .topbar__chiel {
        grid-area: 1 / 2 / 3 / 3;
        position: relative;
        margin-top: -52px;
        height: calc(100% + 52px);
    }
    .topbar__chiel img { position: absolute; top: 0; left: 0; }
    .topbar__intro {
        grid-area: 3 / 1 / 4 / 3;
        font-size: 15px;
        line-height: 1.4;
        margin: 0 -16px;
        padding: 16px;
        background: rgba(255, 255, 255, .35);
    }
}

@media (max-width: 900px) {
    .page { padding-top: 24px; }
    .episode__content {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
        padding: 32px 24px 36px;
    }
    .episode__watch { grid-column: 1 / -1; }
    .tile__media { max-width: 240px; }
}

@media (max-width: 480px) {
    .page { padding-left: 0; padding-right: 0; }
    .episode__content { gap: 28px 16px; padding: 28px 16px 32px; }
    .episode__text { margin-top: 20px; }
    .tile { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}