/* ===========================================================================
   hsb-hero-profiel.css — de hero van het sprekersprofiel, zoals op het canvas
   ===========================================================================

   WAT ER VERANDERT

   De hero stond als een donkerblauwe band over de volle breedte van het
   scherm, met de tekst links en de foto rechts in een afgerond kadertje.

   Op het canvas is het een paneel: het blauw loopt niet door tot de rand van
   het scherm maar houdt op bij 1240 px, met de asymmetrische hoeken van de
   huisstijl. De foto staat links en loopt door tot de rand van dat paneel,
   waar hij in het blauw oplost. De tekst staat rechts.

   Dat verschil is groter dan het klinkt. Een band over de volle breedte leest
   als een kop boven de pagina; een paneel leest als een kaart die bij deze
   ene persoon hoort. En doordat de foto de rand raakt in plaats van in een
   kadertje te zitten, wordt hij onderdeel van het vlak in plaats van een
   plaatje erin.

   WAAROM DIT EEN APART BESTAND IS

   De opmaak van de hero staat als <style> in item-profiel.php, tussen regel
   322 en 448. Daar zit meer in dan de indeling: het kruimelpad, de koppen,
   de knoppen, de tariefregel. Door die niet aan te raken en er alleen deze
   laag overheen te leggen, blijft al dat werk staan en is dit in één regel
   terug te draaien.

   Laden in item-profiel.php, NA het style-blok:
       <link rel="stylesheet" href="/assets/css/hsb-hero-profiel.css">

   WERKT MET EN ZONDER FOTO

   393 van de 718 zichtbare sprekers hebben een profielfoto. Staat er geen,
   dan vult de tekst het hele paneel en klopt het nog steeds — er ontstaat
   geen leeg gat waar de foto hoorde.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Van band naar paneel
   ---------------------------------------------------------------------------
   Het blauw verhuist van de buitenste laag naar de binnenste. Die binnenste
   is tegelijk een Bootstrap-container, dus die had al een maximale breedte;
   nu krijgt hij ook de kleur, de hoeken en de uitsnede.
   --------------------------------------------------------------------------- */

.new-speaker-hero {
    background: transparent;
    overflow: visible;
    padding: 20px 0 0;
}

.new-speaker-hero__inner {
    position: relative;
    z-index: 2;
    border-radius: 48px 2px 48px 2px;
    background: #103856;
    overflow: hidden;

    /* 1240 px, net als op het canvas. Dit staat er expliciet omdat de
       Bootstrap-container 1140 aanhoudt op een breed scherm en 1320 op een
       heel breed scherm. Het paneel zou dan per schermbreedte van maat
       veranderen, en de hero is het eerste wat je ziet. */
    width: 100%;
    max-width: var(--hsb-breedte, 1440px);
    margin-inline: auto;

    /* Een ondergrens, want de hoogte wordt bepaald door de tekst. Bij een
       spreker met twee regels introductie zou het paneel anders een brede,
       lage strook worden en het portret een letterbox. 420 px is ongeveer
       de hoogte die het op het canvas heeft. */
    min-height: 420px;

    /* De container-padding eraf: de foto moet de rand kunnen raken. De tekst
       krijgt hieronder zijn eigen ruimte terug. */
    padding: 0;
    gap: 0;
    align-items: stretch;
}


/* ---------------------------------------------------------------------------
   De foto naar links, tot aan de rand
   ---------------------------------------------------------------------------
   `order: -1` zet hem vóór de tekst zonder dat de opmaak in item-hero.php
   hoeft te veranderen. Voor een schermlezer blijft de vololgorde zoals hij
   was: eerst de tekst, dan de foto. Dat is ook de goede volgorde om te
   horen — de foto heeft een leeg alt en zegt niets.
   --------------------------------------------------------------------------- */

.new-speaker-hero__foto {
    order: -1;
    position: relative;
    flex: 0 0 auto;
    width: 42%;
    max-width: none;
    align-self: stretch;
}

.new-speaker-hero__foto img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    object-position: center 22%;
}

/* Het verloop waarmee de foto in het blauw oplost. Zonder dit staat er een
   harde verticale lijn tussen foto en tekst, en dan is het weer een plaatje
   naast een vlak in plaats van één geheel.

   Het begint op 55% van de foto, niet op 0: anders ligt er een waas over het
   gezicht. */
.new-speaker-hero__foto::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 55%;
    background: linear-gradient(to right, rgba(16, 56, 86, 0), #103856);
    pointer-events: none;
}


/* ---------------------------------------------------------------------------
   De tekst
   --------------------------------------------------------------------------- */

.new-speaker-hero__content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 46px 52px 50px;
    align-self: center;
}

/* Staat de foto er wel, dan hoeft de tekst links nauwelijks eigen ruimte:
   het verloop geeft die al. Zonder foto houdt hij zijn volle padding.

   Dit moet met :has() en niet met een buur-selector. In de opmaak staat de
   tekst namelijk VÓÓR de foto — die staat alleen visueel links door
   `order: -1`. Er bestaat geen selector voor "heeft een broer ná zich",
   dus kijken we of het paneel een foto bevat.

   Kent een browser :has() niet, dan valt hij terug op de volle padding
   hierboven. Dat is een paar tientallen pixels ruimer dan bedoeld, en
   verder niets. */
.new-speaker-hero__inner:has(.new-speaker-hero__foto) .new-speaker-hero__content {
    padding-left: 8px;
}


/* ---------------------------------------------------------------------------
   De feitenbalk eronder
   ---------------------------------------------------------------------------
   Die schuift met een negatieve marge over de onderrand van de hero heen.
   Nu de hero geen volle band meer is maar een paneel met ronde hoeken, moet
   de balk iets smaller zijn dan het paneel — anders steekt hij links en
   rechts buiten de hoeken uit.
   --------------------------------------------------------------------------- */

.new-speaker-hero.heeft-feiten .new-speaker-hero__inner {
    padding-bottom: 64px;
}


/* ---------------------------------------------------------------------------
   Smallere schermen
   ---------------------------------------------------------------------------
   Onder 992 px past een foto van 42% niet meer naast een lopende tekst: de
   regels worden dan vier, vijf woorden lang. De foto gaat daarom boven de
   tekst staan, over de volle breedte, met een vaste hoogte zodat hij de
   pagina niet wegduwt.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .new-speaker-hero__inner {
        /* display: flex staat hier expliciet. Het blok in item-profiel.php
           zet onder 767 px `display: block`, en dan doet `order: -1` niets
           meer: de foto zakt terug naar waar hij in de opmaak staat, onder
           de tekst. Op het canvas staat hij juist bovenaan — daar zie je op
           een telefoon als eerste wie het is. */
        display: flex;
        flex-direction: column;
        border-radius: 32px 2px 32px 2px;
        min-height: 0;
    }

    .new-speaker-hero__foto {
        width: 100%;
        height: 320px;
    }

    /* Het verloop van links naar rechts klopt niet meer zodra de foto boven
       de tekst staat; dan moet het van boven naar beneden. */
    .new-speaker-hero__foto::after {
        left: 0;
        top: 55%;
        background: linear-gradient(to bottom, rgba(16, 56, 86, 0), #103856);
    }

    .new-speaker-hero__content,
    .new-speaker-hero__foto + .new-speaker-hero__content {
        padding: 0 28px 36px;
    }
}

@media (max-width: 575.98px) {
    .new-speaker-hero {
        padding-top: 12px;
    }

    .new-speaker-hero__inner {
        border-radius: 24px 2px 24px 2px;
    }

    .new-speaker-hero__foto {
        height: 260px;
    }

    .new-speaker-hero__content,
    .new-speaker-hero__foto + .new-speaker-hero__content {
        padding: 0 20px 28px;
    }
}