/* ===========================================================================
   De brede hero op een profielpagina

   Wordt alleen geladen als er bij de spreker een hero-afbeelding staat. Alle
   regels hangen aan .new-speaker-hero--breed, zodat de gewone hero — die de
   meeste sprekers hebben — hier niets van merkt.

   De foto loopt door tot de rand van het scherm. Links ligt een donkerblauw
   verloop zodat de tekst leesbaar blijft, ook als de foto daar licht is.
   =========================================================================== */

.new-speaker-hero--breed {
    position: relative;
    overflow: hidden;
}

/* --- de foto ----------------------------------------------------------- */

.new-speaker-hero--breed .new-speaker-hero__beeld {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.new-speaker-hero--breed .new-speaker-hero__beeld picture,
.new-speaker-hero--breed .new-speaker-hero__beeld img {
    display: block;
    width: 100%;
    height: 100%;
}

.new-speaker-hero--breed .new-speaker-hero__beeld img {
    object-fit: cover;

    /* Iets boven het midden. Op een podiumfoto houdt dat het hoofd in beeld;
       'center' pakt het midden van de foto, en dat is meestal de borst. */
    object-position: center 25%;
}

/* Het verloop over de foto.

   Het liep eerst door tot 78% van de breedte. Bij een spreker die wat meer
   naar het midden staat, en zeker bij een lichte achtergrond, lag er dan nog
   een blauwe waas over hem heen — hij oogde dof terwijl de foto scherp was.
   Nu is de foto vanaf 64% volledig onaangeroerd.

   De tekstkolom eindigt bij de smalste desktop rond 52% van de breedte, dus
   daar moet het verloop nog dekkend genoeg zijn. Nagemeten: het contrast van
   de witte tekst blijft overal tussen 6,4 en 10,8 — ruim boven de 4,5 die
   nodig is om vlot te lezen.

   De tussenstappen staan er bewust in. Met alleen een begin- en eindkleur
   krijg je een zichtbare band waar het verloop inzet, en die band valt
   precies over het gezicht van de spreker. */
.new-speaker-hero--breed .new-speaker-hero__beeld::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        96deg,
        #002d55 0%,
        #002d55 30%,
        rgb(0 45 85 / .94) 41%,
        rgb(0 45 85 / .72) 48%,
        rgb(0 45 85 / .32) 55%,
        rgb(0 45 85 / .08) 60%,
        rgb(0 45 85 / 0) 64%
    );
}

/* --- de tekst ---------------------------------------------------------- */

/* --- de vier blokken ---------------------------------------------------- */
/*  Kop, intro, knoppen en tarief staan als losse blokken naast de foto in
    plaats van samen in één kolom. Dat is nodig omdat ze op een telefoon van
    volgorde moeten kunnen wisselen, en flexbox dat alleen kan tussen broers
    en zussen. Op een breed scherm staan ze gewoon onder elkaar en zie je er
    niets van. */

.new-speaker-hero--breed {
    min-height: 560px;

    /* Blijft de tekst korter dan de foto hoog is, dan hangt hij zonder dit
       tegen de bovenrand in plaats van netjes in het midden. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.new-speaker-hero--breed .new-speaker-hero__blok {
    position: relative;
    z-index: 2;
}

.new-speaker-hero--breed .new-speaker-hero__blok--kop    { padding-top: 56px; }
.new-speaker-hero--breed .new-speaker-hero__blok--tarief { padding-bottom: 56px; }

/* Smaller dan de 620px van de gewone hero: de tekst moet binnen het dekkende
   deel van het verloop blijven, anders loopt de laatste regel het beeld in. */
.new-speaker-hero--breed .new-speaker-hero__content {
    max-width: 560px;
}

/* Tussen 992 en 1200px staat de tekst nog over de foto, maar is er minder
   ruimte. Smallere kolom, lagere hero. */
@media (max-width: 1199.98px) {
    .new-speaker-hero--breed { min-height: 480px; }
    .new-speaker-hero--breed .new-speaker-hero__content { max-width: 500px; }
}

/* --- telefoon en tablet --------------------------------------------------
 *
 *  Twee opstellingen, afhankelijk van of er een staande foto voor de telefoon
 *  is geüpload:
 *
 *    mét  (.heeft-klein)  de foto vult het scherm en de tekst ligt erover,
 *                         met blauw bovenaan dat naar beneden uitdooft.
 *
 *    zonder               tekst boven, foto eronder. Een liggende foto in een
 *                         hoog kader wordt links en rechts afgesneden, en de
 *                         spreker staat bijna nooit precies in het midden.
 *
 *  Grid en geen flexbox: twee onderdelen in dezelfde cel leggen is precies
 *  wat grid wel kan en flexbox niet.
 * ---------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .new-speaker-hero--breed {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .new-speaker-hero--breed .new-speaker-hero__blok--kop    { grid-row: 1; padding-top: 18px; }
    .new-speaker-hero--breed .new-speaker-hero__beeld        { grid-row: 2; }
    .new-speaker-hero--breed .new-speaker-hero__blok--lead   { grid-row: 3; padding-top: 20px; }
    .new-speaker-hero--breed .new-speaker-hero__blok--tarief { grid-row: 4; padding-bottom: 24px; }

    .new-speaker-hero--breed .new-speaker-hero__blok--kop,
    .new-speaker-hero--breed .new-speaker-hero__beeld,
    .new-speaker-hero--breed .new-speaker-hero__blok--lead,
    .new-speaker-hero--breed .new-speaker-hero__blok--tarief {
        grid-column: 1;
    }

    /* De twee knoppen vervallen op een telefoon: onderaan het scherm staat
       al een vaste balk met "Beschikbaarheid & Prijs" die altijd in beeld
       is. Twee keer dezelfde vraag boven elkaar helpt niemand.

       Let op: haal je die vaste balk ooit weg, zet deze regel dan ook weg,
       anders staat er op een telefoon geen enkele knop meer in de hero. */
    .new-speaker-hero--breed .new-speaker-hero__blok--knop {
        display: none;
    }

    .new-speaker-hero--breed .new-speaker-hero__content {
        max-width: none;
    }

    .new-speaker-hero--breed .new-speaker-hero__blok--kop {
        padding-bottom: 20px;
    }

    /* Geen staande foto: gewoon onder de tekst, op zijn eigen verhouding,
       zodat er niets wordt afgesneden. */
    .new-speaker-hero--breed:not(.heeft-klein) .new-speaker-hero__beeld img {
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center 20%;
    }

    .new-speaker-hero--breed .new-speaker-hero__beeld {
        position: relative;
        inset: auto;
        z-index: 1;
        height: auto;
    }

    /* --- mét staande foto: tekst over de foto -------------------------- */

    .new-speaker-hero--breed.heeft-klein .new-speaker-hero__beeld {
        grid-row: 1;

        /* dvh en niet vh: de adresbalk van Safari schuift in en uit. */
        height: clamp(460px, 74dvh, 660px);
    }

    .new-speaker-hero--breed.heeft-klein .new-speaker-hero__beeld img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center 15%;
    }

    .new-speaker-hero--breed.heeft-klein .new-speaker-hero__blok--kop {
        z-index: 2;
        align-self: start;
        padding-bottom: 56px;

        /* Het blauw zit op het tekstblok, niet op de foto.

           Een verloop over de hele foto moest bovenin dekkend zijn, en dan
           verdween het hoofd van de spreker erachter zodra dat hoog in de
           foto stond. Dit blok is precies zo hoog als de tekst en dooft daar
           vanzelf onder uit: de tekst heeft altijd een rustige ondergrond en
           de foto wordt niet verder aangetast dan nodig. */
        background: linear-gradient(
            180deg,
            #002d55 0%,
            #002d55 58%,
            rgb(0 45 85 / .74) 78%,
            rgb(0 45 85 / .32) 90%,
            rgb(0 45 85 / 0) 100%
        );
    }

    /* --- het verloop over de foto -------------------------------------- */
    /*  Alleen nog een lichte waas bovenin, zodat de foto aansluit op het
        blauw van het tekstblok en er geen zichtbare naad tussen zit.

        Onderaan loopt hij terug naar blauw: daar begint de introtekst, en
        zonder die overgang krijg je opnieuw een harde rand. */

    .new-speaker-hero--breed.heeft-klein .new-speaker-hero__beeld::after {
        display: block;
        background: linear-gradient(
            180deg,
            rgb(0 45 85 / .40) 0%,
            rgb(0 45 85 / .16) 20%,
            rgb(0 45 85 / 0) 38%,
            rgb(0 45 85 / 0) 86%,
            rgb(0 45 85 / .55) 96%,
            #002d55 100%
        );
    }

    /* De zoekregel boven de naam ("Spreker over ... boeken") beslaat op een
       telefoon al snel drie regels en duwt de foto naar beneden. Kleiner en
       strakker; hij blijft staan, want hij doet werk voor Google. Wil je hem
       op een telefoon helemaal weg:
           .new-speaker-hero--breed .new-speaker-hero__kop { display: none; } */
    .new-speaker-hero--breed .new-speaker-hero__kop {
        font-size: .68rem;
        letter-spacing: .1em;
        line-height: 1.35;
        margin-bottom: .4rem;
    }
}