/*! © Bij Hoge Nood B.V. — bijhogenood.nl. Alle rechten voorbehouden. */

/* 3D-animatie v25 — licht, in de huisstijl van de site (kleuren uit public/css/shared.css) */
@font-face {
    font-family: "Agrandir Wide";
    src: url("/fonts/agrandir-wide-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

:root {
    --display: "Agrandir Wide", system-ui, sans-serif;
    --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ink:       #2A2622;
    --ink-muted: #6B6358;
    --rule:      #E4E4E4;
    --frame:     #1F5063;
    --accent:    #E32511;
    --tick-idle: #E4E4E4;
}

.wrap, .wrap *, .wrap *::before, .wrap *::after { box-sizing: border-box; }
.wrap ol, .wrap li, .wrap h2, .wrap p { margin: 0; padding: 0; }

body {
    margin: 0;
    background: transparent;   /* in de iframe: de blauwe titelband van de pagina loopt door achter de tabs */
    color: var(--ink);
    font-family: var(--body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wrap { display: flex; flex-direction: column; gap: 1rem; }

/* ---- beeld: zo groot als de pagina toelaat ---- */
.view { position: relative; container-type: inline-size; }   /* cqw = procent van de beeldbreedte */
.stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #dfe7ea;
    overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: 100%; }

/* bijschrift: titel en één zin, linksonder in beeld; schaalt mee met het beeld, zodat het in een klein
   liggend beeld (tablet, kleine laptop) niet over wat er gebeurt valt */
.caption {
    position: absolute;
    left: clamp(0.5rem, 2cqw, 1.5rem);
    bottom: clamp(0.5rem, 2cqw, 1.5rem);
    max-width: min(26rem, 40cqw);
    padding: clamp(0.5rem, 1.2cqw, 0.9rem) clamp(0.7rem, 1.4cqw, 1.1rem) clamp(0.55rem, 1.3cqw, 1rem);
    background: rgba(255, 255, 255, 0.92);
    border-left: 4px solid var(--accent);
    pointer-events: none;
}
.kicker {
    font-family: var(--display);
    font-size: clamp(0.58rem, 0.9cqw, 0.68rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.chap { color: var(--accent); }
.caption h2 {
    margin-top: 0.3rem;
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    font-size: clamp(0.95rem, 2.2cqw, 1.6rem);
    color: var(--frame);
    text-wrap: balance;
}
.caption .body { margin-top: 0.35rem; font-size: clamp(0.8rem, 1.35cqw, 1rem); line-height: 1.4; }

/* ---- bediening: afspelen en hoofdstukken ---- */
.play {
    flex: none;
    width: 48px;
    height: 48px;
    border: 0;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 160ms ease;
}
.play:hover { background: #AB1B0B; }
.play svg { width: 17px; height: 17px; fill: currentColor; }
.play .ico-pause { display: none; }
.play[data-playing="1"] .ico-play  { display: none; }
.play[data-playing="1"] .ico-pause { display: block; }



.play:focus-visible, 
.fallback { padding: 1.2rem; font-size: 0.95rem; }

/* ============================================================
   Speler: hoofdstuk-tabs boven het beeld, tijdbalk eronder (v15)
   ============================================================ */
.speler { display: grid; gap: 0; }   /* tabs direct tegen het beeld */

/* grote afspeelknop midden in beeld, en "Volgende" aan het eind van een hoofdstuk */
.bigplay {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: clamp(60px, 11cqw, 84px); height: clamp(60px, 11cqw, 84px); border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(227, 37, 17, 0.92); color: #fff; display: grid; place-items: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, background 0.15s ease;
}
.bigplay:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--accent); }
.bigplay svg { width: 40%; height: 40%; fill: currentColor; margin-left: 5%; }
.bigplay[hidden], .einde[hidden] { display: none; }
.einde {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; width: max-content; max-width: 90%;
}
.next, .naar-shop {
    padding: 0.9rem 1.4rem; border: 0; cursor: pointer; background: var(--frame); color: #fff; text-decoration: none;
    font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.naar-shop { background: var(--accent); }
.next:hover { background: var(--accent); }
.naar-shop:hover { background: #AB1B0B; }

/* bedieningsbalk onder het beeld */
.bediening { display: flex; align-items: center; gap: 0.9rem; padding-top: 0.75rem; }
.time { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--ink-muted); white-space: nowrap; }
.scrub { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
/* één balk over de hele animatie, per hoofdstuk een deel; gap = GAP in de JS */
.scrub__track { position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; display: flex; gap: 3px; transition: height 0.12s, margin-top 0.12s; }
.scrub__deel { position: relative; background: var(--tick-idle); border-radius: 3px; overflow: hidden; }
.scrub:hover .scrub__track, .scrub.is-dragging .scrub__track { height: 8px; margin-top: -4px; }
.scrub__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); }
.scrub__knob { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.25); pointer-events: none; }
.scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* hoofdstuk-tabs: rechts naast het beeld, op de telefoon als rij erboven */
.tabs { order: -1; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.tab {
    width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center;
    padding: 0.75rem 0.9rem; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid var(--rule); border-bottom: 3px solid transparent; color: var(--ink);
    font: inherit; transition: border-color 0.15s, background 0.15s;
}
.tab:hover { background: #fafafa; }
.tab[aria-current="true"] { border-bottom-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.tab__nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f1f1f1; font-family: var(--display); font-size: 0.85rem; color: var(--frame); }
.tab[aria-current="true"] .tab__nr { background: var(--accent); color: #fff; }
.tab__txt { display: flex; flex-direction: column; min-width: 0; }
.tab__naam { font-family: var(--display); text-transform: uppercase; font-size: 0.9rem; color: var(--frame); letter-spacing: 0.02em; }
.tab__blurb { font-size: 0.82rem; color: var(--ink-muted); line-height: 1.35; margin-top: 0.15rem; }
.tab__duur { font-size: 0.8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (width < 900px) {
    .tabs { gap: 0.35rem; }
    .tab { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.3rem; padding: 0.55rem 0.2rem; }
    .tab__blurb, .tab__duur { display: none; }
    .tab__nr { width: 24px; height: 24px; font-size: 0.75rem; }
    .tab__naam { font-size: 0.6rem; letter-spacing: 0; }
}

/* snelheid */
.speed { display: flex; gap: 2px; }
.speed button { border: 1px solid var(--rule); background: #fff; color: var(--ink-muted); font: inherit; font-size: 0.78rem; padding: 0.3rem 0.45rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.speed button[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: #fff; }
.speed button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* titelkaart tussen twee hoofdstukken; de staptekst wijkt zolang */
.kaart {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max-content; max-width: min(30rem, 84%);
    padding: clamp(0.9rem, 2.4cqw, 1.5rem) clamp(1.1rem, 3cqw, 2rem);
    background: rgba(31, 80, 99, 0.94); border-top: 4px solid var(--accent); color: #fff; text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.is-kaart .kaart { opacity: 1; }
.caption { transition: opacity 0.35s ease; }
.is-kaart .caption { opacity: 0; }
.kaart__kicker { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9ED1DF; }
.kaart__titel { margin-top: 0.35rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1.1; font-size: clamp(1.4rem, 4cqw, 2.4rem); }
.kaart__tekst { margin-top: 0.5rem; font-size: clamp(0.9rem, 1.6cqw, 1.05rem); line-height: 1.4; text-wrap: balance; }

/* ============================================================
   Staand scherm (telefoon, tablet rechtop; klasse "staand" uit de JS): staand beeld 4:5,
   tekst over het beeld onderin, tik = pauze of verder, alleen een dunne tijdbalk over de
   onderrand van het beeld, met de hoofdstuknamen eronder.
   ============================================================ */
.staand .stage { aspect-ratio: 4 / 5; cursor: pointer; }

/* tijdbalk zoals YouTube: dun over de onderrand van het beeld, terugslepen kan altijd */
.staand .bediening { position: relative; z-index: 2; padding: 0; margin-top: -14px; height: 28px; }
.staand .bediening .play, .staand .bediening .time, .staand .bediening .speed { display: none; }
.staand .scrub { flex-basis: 100%; height: 28px; }
.staand .scrub__track { height: 4px; margin-top: -2px; }
.staand .scrub__deel { border-radius: 0; background: rgba(255, 255, 255, 0.35); }
.staand .scrub:hover .scrub__track, .staand .scrub.is-dragging .scrub__track { height: 6px; margin-top: -3px; }
.staand .scrub__knob { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.staand .scrub.is-dragging .scrub__knob { width: 20px; height: 20px; margin: -10px 0 0 -10px; }

/* tekst over het beeld, onderin op een donkere strook: bij staand scherm en bij een smal liggend beeld
   (liggende telefoon), waar het losse tekstvak over het midden zou vallen (klasse "strook" uit de JS) */
.strook .caption { left: 0; right: 0; bottom: 0; max-width: none; padding: 2.4rem 1rem 1rem; border-left: 0; background: linear-gradient(rgba(20, 38, 46, 0), rgba(20, 38, 46, 0.82) 38%); }
.strook .kicker { font-size: 0.68rem; }
.strook .kicker, .strook .kicker .chap { color: rgba(255, 255, 255, 0.85); }
.strook .caption h2 { color: #fff; font-size: clamp(1.15rem, 3cqw, 1.6rem); }
.strook .caption .body { color: #fff; font-size: clamp(0.92rem, 2cqw, 1.1rem); line-height: 1.4; }
.strook:not(.staand) .caption { padding: 1.6rem 1rem 0.75rem; }
.strook:not(.staand) .caption h2 { font-size: 1rem; }
.strook:not(.staand) .caption .body { font-size: 0.85rem; margin-top: 0.15rem; }

/* slanke tabs onder de tijdbalk: elke naam onder zijn eigen deel van de balk (staand vier gelijke delen, zie de JS).
   Ondergrond in de tint van de tekststrook, zodat beeld, balk en namen één blok zijn; actief wit, de rest half. */
.staand .speler { background: #2E3A40; }
.staand .tabs { order: 0; gap: 0; }
.staand .tab, .staand .tab:hover, .staand .tab[aria-current="true"] { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0.2rem 0.2rem 0.75rem; border: 0; box-shadow: none; background: transparent; }
.staand .tab__nr, .staand .tab__blurb, .staand .tab__duur { display: none; }
.staand .tab__naam { font-size: clamp(0.64rem, 1.4vw, 0.85rem); letter-spacing: 0; color: #fff; }
.staand .tab:not([aria-current="true"]) .tab__naam { color: rgba(255, 255, 255, 0.5); }