/* ===========================================================================
   hsb-profiel.css — de profielpagina in de vorm van het canvas
   ===========================================================================

   Hoort bij het bord "Stap 4 — Sprekersprofiel, desktop". Laden NA de rest,
   vanuit item-profiel.php; alleen die pagina heeft het nodig.

   Twee dingen staan hierin:

     1. De opmaak van het ankermenu. Die stond als <style> midden in
        includes/item-subnav.php. Hier staat hij in een bestand, zoals
        afgesproken.

     2. De verschillen met het bord: de quote als donkerblauw paneel, het
        cijfer in een kader, en de huisvorm op de kaarten. De volgorde van de
        secties zit niet hier maar in includes/item-hero.php.

   De tokens onderaan schakelen mee met de donkere stand, net als op
   /sprekers.
   =========================================================================== */

:root {
    --pf-blauw:   #103856;
    --pf-diep:    #0b2940;
    --pf-oranje:  #f56c20;
    --pf-knop:    #c24d16;
    --pf-lijn:    #e3e8ee;
    --pf-vlak:    #f6f8fa;
    --pf-kaart:   #ffffff;
    --pf-tekst:   #1d2733;
    --pf-grijs:   #5b6b7c;
}


/* ---------------------------------------------------------------------------
   1. Het ankermenu
   ---------------------------------------------------------------------------
   Blijft plakken onder de vaste hoofdbalk. Een knop waarvan de sectie niet
   bestaat verbergt het script zelf; dat is handig, want niet elk profiel
   heeft boeken of video's.
   --------------------------------------------------------------------------- */

.item-subnav {
    display: block;
    width: 100%;
    min-height: 50px;
    position: sticky;
    top: var(--hsb-header-h, 76px);
    z-index: 1020;
    background: var(--pf-kaart);
    border-bottom: 1px solid var(--pf-lijn);
    box-shadow: 0 6px 18px rgba(16, 56, 86, .06);
}

.item-subnav-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.item-subnav-scroll::-webkit-scrollbar { display: none; }

.item-subnav-link {
    display: inline-block;
    padding: 16px 14px 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pf-blauw);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.item-subnav-link:hover { color: var(--pf-oranje); }

.item-subnav-link.actief {
    color: var(--pf-blauw);
    border-bottom-color: var(--pf-oranje);
}

/* Op het bord is deze knop donkerblauw en niet oranje. Dat is met opzet:
   oranje blijft voorbehouden aan de twee plekken waar je echt wilt dat er
   geklikt wordt -- de knop in de hero en die onder het aanvraagformulier.
   Is elke knop oranje, dan valt geen enkele knop meer op. */
.item-subnav-cta {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--pf-blauw);
    color: #fff;
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease;
}

.item-subnav-cta:hover {
    background: var(--pf-diep);
    color: #fff;
}

.item-subnav-cta svg { width: 16px; height: 16px; }

@media (max-width: 767.98px) {
    .item-subnav-link { padding: 12px 10px 10px; font-size: .875rem; }
    .item-subnav-cta  { margin-left: 6px; height: 38px; padding: 0 16px; font-size: .85rem; }
    .item-subnav-cta span { display: none; }
}


/* ---------------------------------------------------------------------------
   WAAROM HIER OVERAL `body` VOOR STAAT
   ---------------------------------------------------------------------------
   De opmaak van elke sectie staat als <style> middenin includes/item-hero.php,
   dus ná dit bestand in de pagina, en met selectors van twee klassen
   (`.lezingen-sectie .lezing-card`). Een regel van één klasse hier verloor
   dus twee keer: op gewicht en op volgorde. Dat is de reden dat er van mijn
   vorige levering niets te zien was.

   `body` ervoor maakt de selector één element zwaarder, en dan wint hij
   ongeacht de volgorde. Geen !important: dat wint ook, maar dan kun je er
   verderop niets meer overheen zetten.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   2. De quote
   ---------------------------------------------------------------------------
   Was een lichtgrijze band over de volle breedte. Op het bord is het een
   donkerblauw paneel met de huisvorm en witte tekst. Het enige donkere vlak
   midden op de pagina, en daardoor het enige dat je echt ziet -- wat voor een
   citaat de bedoeling is.
   --------------------------------------------------------------------------- */

body .hsb-quote-band {
    background: transparent;
    padding: 18px 0;
}

body .hsb-quote-band .hsb-quote {
    border-radius: 40px 2px 40px 2px;
    background: var(--pf-blauw);
    padding: 44px 48px;
    gap: 26px;
}

body .hsb-quote-band .hsb-quote__text {
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
    max-width: 30em;
}

body .hsb-quote-band .hsb-quote__cite  { color: rgba(255, 255, 255, .72); }
body .hsb-quote-band .hsb-quote__mark  { color: var(--pf-oranje); align-self: flex-start; }
body .hsb-quote-band .hsb-quote__rule  { display: none; }

@media (max-width: 767.98px) {
    body .hsb-quote-band .hsb-quote {
        border-radius: 28px 2px 28px 2px;
        padding: 28px 22px;
        gap: 14px;
    }
}


/* ---------------------------------------------------------------------------
   3. De lezingen
   ---------------------------------------------------------------------------
   Drie dingen weken af van het bord: er was geen knop "Alle lezingen", de
   pijlen waren grijze schijfjes in plaats van open rondjes, en de kaarten
   waren aan vier kanten rond.
   --------------------------------------------------------------------------- */

body .lezingen-sectie .lez-kop-acties {
    display: flex;
    align-items: center;
    gap: 14px;
}

body .lezingen-sectie .lez-alle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid var(--pf-lijn);
    border-radius: 16px 2px 16px 2px;
    background: var(--pf-kaart);
    color: var(--pf-blauw);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}

body .lezingen-sectie .lez-alle:hover {
    background: var(--pf-vlak);
    border-color: #c6d0da;
    color: var(--pf-blauw);
}

/* Open rondjes met een randje, niet gevuld grijs. */
body .lezingen-sectie .lez-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid var(--pf-lijn);
    background: var(--pf-kaart);
    color: var(--pf-blauw);
}

body .lezingen-sectie .lez-arrow:hover:not(:disabled) {
    background: var(--pf-vlak);
    border-color: #c6d0da;
}

body .lezingen-sectie .lezing-card {
    border-radius: 24px 2px 24px 2px;
    border-color: var(--pf-lijn);
    background: var(--pf-kaart);
}


/* ---------------------------------------------------------------------------
   4. De video's
   ---------------------------------------------------------------------------
   Stonden als drie gelijke tegels naast elkaar. Op het bord is het één grote
   speler met de lijst ernaast: je ziet meteen wát je afspeelt en kunt daarna
   doorklikken. De eerste video is de grote.

   Dit kan met alleen opmaak. De kaarten blijven precies zoals ze zijn -- ook
   de knop die de YouTube-speler inlaadt -- ze worden alleen anders gelegd.
   De eerste kaart vult de linkerkolom over de volle hoogte, de rest stapelt
   rechts.
   --------------------------------------------------------------------------- */

body .hsb-video__grid {
    display: grid;
    /* minmax(0, ...) en niet 1.65fr: een rasterkolom is standaard minstens zo
       breed als zijn inhoud, en een titel die niet afbreekt duwt de kolom dan
       duizenden pixels uit beeld. */
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    align-items: start;
    /* Alleen ruimte TUSSEN de kolommen, niet tussen de regels. De grote
       speler beslaat 99 (meestal lege) rasterregels, en een regelafstand zou
       daar 98 keer bij opgeteld worden -- dat gaf een gat van anderhalve
       meter onder de sectie. De ruimte tussen de regels rechts komt van hun
       eigen ondermarge. */
    gap: 0 24px;
}

body .hsb-video__grid > .hsb-video__card { min-width: 0; }

body .hsb-video__grid > .hsb-video__card:first-child {
    grid-column: 1;
    /* Eén kolom links, hoe veel regels er rechts ook staan. align-self: start
       is nodig: zonder dat rekt de kaart mee met de hele rasterhoogte en wordt
       de speler een meter hoog. */
    grid-row: 1 / span 99;
    align-self: start;
    position: relative;
}

body .hsb-video__grid > .hsb-video__card:first-child .hsb-video__media {
    border-radius: 24px 2px 24px 2px;
    aspect-ratio: 16 / 9;
}

/* De titel van de grote video ligt over de speler, zoals op het bord. De
   omschrijving valt weg: daar is het beeld al. */
body .hsb-video__grid > .hsb-video__card:first-child .hsb-video__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 26px;
    border-radius: 0 0 24px 2px;
    background: linear-gradient(to top, rgba(8, 18, 28, .88), rgba(8, 18, 28, 0));
    pointer-events: none;
}

body .hsb-video__grid > .hsb-video__card:first-child .hsb-video__t { color: #fff; margin: 0; }
body .hsb-video__grid > .hsb-video__card:first-child .hsb-video__d { display: none; }

/* De rest: een regel met een klein beeldje links en de titel ernaast. */
body .hsb-video__grid > .hsb-video__card:nth-child(n+2) {
    grid-column: 2;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid var(--pf-lijn);
    border-radius: 16px 2px 16px 2px;
    background: var(--pf-kaart);
    transition: border-color .2s ease, background-color .2s ease;
}

body .hsb-video__grid > .hsb-video__card:nth-child(n+2):hover {
    border-color: #c6d0da;
    background: var(--pf-vlak);
}

body .hsb-video__grid > .hsb-video__card:nth-child(n+2) .hsb-video__media {
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: 16 / 10;
    border-radius: 12px 2px 12px 2px;
}

body .hsb-video__grid > .hsb-video__card:nth-child(n+2) .hsb-video__play { transform: scale(.6); }
body .hsb-video__grid > .hsb-video__card:nth-child(n+2) .hsb-video__body { padding: 0; }

body .hsb-video__grid > .hsb-video__card:nth-child(n+2) .hsb-video__t {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.35;
}

body .hsb-video__grid > .hsb-video__card:nth-child(n+2) .hsb-video__d { display: none; }

/* De knop rechtsboven in dezelfde vorm als "Alle lezingen". */
body .hsb-video__allbtn {
    border-radius: 16px 2px 16px 2px;
    border-color: var(--pf-lijn);
    background: var(--pf-kaart);
    height: 48px;
    padding: 0 22px;
}

@media (max-width: 991.98px) {
    /* Onder deze breedte wordt de linkerkolom te smal voor een speler en de
       rechter te smal voor een titel. Dan gewoon weer onder elkaar. */
    body .hsb-video__grid { grid-template-columns: 1fr; }
    body .hsb-video__grid > .hsb-video__card:first-child,
    body .hsb-video__grid > .hsb-video__card:nth-child(n+2) { grid-column: 1; grid-row: auto; }
}


/* ---------------------------------------------------------------------------
   5. Het cijfer bij de ervaringen
   --------------------------------------------------------------------------- */

body .hsb-te__rating {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: 1px solid var(--pf-lijn);
    border-radius: 24px 2px 24px 2px;
    background: var(--pf-kaart);
}

body .hsb-te__score { line-height: 1; }


/* ---------------------------------------------------------------------------
   6. De huisvorm op de overige kaarten
   --------------------------------------------------------------------------- */

body .hsb-pub__card,
body .hsb-blog__card,
body .hsb-gr__card,
body .hsb-te__card {
    border-radius: 24px 2px 24px 2px;
    overflow: hidden;
}

body .hsb-gr__band,
body .lead-band-wrap .lead-band {
    border-radius: 40px 2px 40px 2px;
}


/* ---------------------------------------------------------------------------
   7. De donkere stand
   ---------------------------------------------------------------------------
   Alleen de tokens; aan de regels hierboven verandert niets. Zwart, wit en
   oranje, gelijk aan /sprekers.
   --------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]) {
        --pf-blauw:  #17181c;
        --pf-diep:   #22242a;
        --pf-oranje: #ed6e26;
        --pf-knop:   #ed6e26;
        --pf-lijn:   #2b2d33;
        --pf-vlak:   #0f1012;
        --pf-kaart:  #17181c;
        --pf-tekst:  #f2f3f5;
        --pf-grijs:  #a3a8b0;
    }
    :root:not([data-thema="licht"]) body .hsb-quote-band .hsb-quote { border: 1px solid var(--pf-lijn); }
}

:root[data-thema="donker"] {
    --pf-blauw:  #17181c;
    --pf-diep:   #22242a;
    --pf-oranje: #ed6e26;
    --pf-knop:   #ed6e26;
    --pf-lijn:   #2b2d33;
    --pf-vlak:   #0f1012;
    --pf-kaart:  #17181c;
    --pf-tekst:  #f2f3f5;
    --pf-grijs:  #a3a8b0;
}

:root[data-thema="donker"] body .hsb-quote-band .hsb-quote { border: 1px solid var(--pf-lijn); }