/* ===========================================================================
   De witte feitenbalk onder de hero

   Wordt alleen geladen als er bij de spreker feiten staan. Staat er niets,
   dan komt dit bestand niet op de pagina.
   =========================================================================== */

/* De balk schuift over de onderkant van de hero heen. De hero krijgt daarom
   wat extra ruimte onderin, zodat het tarief eronder niet half wegvalt.

   Twee selectors, omdat de twee hero's anders in elkaar zitten: de brede
   hero heeft losse blokken, de gewone één kolom. */
.new-speaker-hero--breed.heeft-feiten .new-speaker-hero__blok--tarief,
.new-speaker-hero.heeft-feiten .new-speaker-hero__inner {
    padding-bottom: 104px;
}

.hsb-feiten-band {
    position: relative;
    z-index: 3;
    margin-top: -56px;
    margin-bottom: 10px;
}

.hsb-feiten {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgb(16 56 86 / .14);
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    /* De scheidingslijnen lopen tot de rand; zonder dit steken ze buiten de
       afgeronde hoeken uit. */
    overflow: hidden;
}

.hsb-feiten--1 { grid-template-columns: 1fr; }
.hsb-feiten--2 { grid-template-columns: repeat(2, 1fr); }
.hsb-feiten--3 { grid-template-columns: repeat(3, 1fr); }

.hsb-feit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px;
    border-left: 1px solid #e9edf2;
    min-width: 0;
}

.hsb-feit:first-child {
    border-left: 0;
}

.hsb-feit__icoon {
    flex: 0 0 auto;
    color: #103856;
    line-height: 0;
    margin-top: 1px;
}

.hsb-feit__tekst {
    min-width: 0;
}

.hsb-feit__kop {
    display: block;
    color: #103856;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
}

.hsb-feit__regel {
    display: block;
    margin-top: 2px;
    color: #6e6e73;
    font-size: .88rem;
    line-height: 1.45;
}

/* --- tablet en telefoon: geen kaart meer -------------------------------- */
/*  Op een telefoon is de witte kaart met randen en schaduw te veel. Hij nam
    een half scherm in beslag voor vier regels tekst. Hier blijft alleen de
    inhoud over: twee naast elkaar, op de witte pagina, met één lijn erboven
    om hem van de foto te scheiden. Op een breed scherm blijft de kaart. */

@media (max-width: 991.98px) {
    .new-speaker-hero--breed.heeft-feiten .new-speaker-hero__blok--tarief,
    .new-speaker-hero.heeft-feiten .new-speaker-hero__inner {
        padding-bottom: 24px;
    }

    .hsb-feiten-band {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .hsb-feiten {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }

    .hsb-feit {
        /* Icoon naast de tekst, zoals in het ontwerp. Geen kaderlijnen meer:
           die hoorden bij de kaart. */
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 0;
        border: 0;
    }

    /* Eén lijn tussen de twee rijen, zodat het geen losse zwevende blokjes
       worden. */
    .hsb-feit:nth-child(n+3) {
        border-top: 1px solid #e9edf2;
    }

    .hsb-feit__icoon svg {
        width: 22px;
        height: 22px;
    }

    .hsb-feit__kop   { font-size: .9rem; }
    .hsb-feit__regel { font-size: .8rem; }
}

/* --- hele smalle telefoon ------------------------------------------------ */
/*  Onder de 360px is een kolom van 160px te krap voor een icoon plus tekst.
    Dan maar onder elkaar; dat zijn de iPhone SE en wat oudere Androids. */
@media (max-width: 359.98px) {
    .hsb-feiten,
    .hsb-feiten--2,
    .hsb-feiten--3 {
        grid-template-columns: 1fr;
    }

    .hsb-feit:nth-child(n+2) {
        border-top: 1px solid #e9edf2;
    }
}