/* ===========================================================================
   hsb-overzicht-hero.css — het blauwe hero-paneel van de overzichten
   ===========================================================================
   Voor dagvoorzitters.php, presentatoren.php en performers.php: hetzelfde
   paneel als bovenaan /sprekers. De regels zijn overgenomen uit
   hsb-sprekers.css, met de kleuren voluit in plaats van als variabele,
   omdat die variabelen alleen op /sprekers bestaan. Hoort bij
   includes/overzicht-hero.php.
   =========================================================================== */

.sb-hero--paneel {
    background: transparent;
    border-bottom: 0;
    padding: 20px 0 0;
}

.sb-hero__paneel {
    border-radius: 48px 2px 48px 2px;
    background: #103856;
    color: #fff;
    padding: 46px 48px 52px;
}

/* Het kruimelpad in gedempt wit; links worden wit zodra je eroverheen gaat. */
.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap,
.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap *,
.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap a {
    color: rgba(255, 255, 255, .72);
    border-color: rgba(255, 255, 255, .22);
}

.sb-hero--paneel .sb-hero__paneel .sb-breadcrumb-wrap a:hover {
    color: #fff;
}

/* Het kruimelpad staat op deze pagina's normaal buiten de hero met zijn
   eigen witruimte; in het paneel mag die eraf. */
.sb-hero--paneel .sb-breadcrumb-wrap { margin-bottom: 14px; }
.sb-hero--paneel .sb-breadcrumb-wrap nav,
.sb-hero--paneel .sb-breadcrumb-wrap ol,
.sb-hero--paneel .sb-breadcrumb-wrap .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
}

/* h1.sb-h1 in de selector (en niet alleen .sb-h1): elders op de site staan
   zwaardere selectors op h1, en deze moet daarvan winnen. */
.sb-hero--paneel .sb-hero__paneel h1.sb-h1 {
    color: #fff;
    margin: 0 0 14px;
    max-width: 16em;
}

/* De ondertitel (h2_titel uit het CMS), als die er is. */
.sb-hero--paneel .sb-hero__paneel .sb-hero__sub {
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    font-size: 1.15rem;
    margin: -6px 0 14px;
    max-width: 30em;
}

.sb-hero--paneel .sb-hero__paneel .sb-hero-intro,
.sb-hero--paneel .sb-hero__paneel .sb-hero-intro p,
.sb-hero--paneel .sb-hero__paneel .sb-hero-intro li,
.sb-hero--paneel .sb-hero__paneel .sb-hero-intro strong {
    color: rgba(255, 255, 255, .8);
    max-width: 38em;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .sb-hero__paneel {
        border-radius: 32px 2px 32px 2px;
        padding: 32px 28px 34px;
    }
}

@media (max-width: 575.98px) {
    .sb-hero__paneel {
        border-radius: 24px 2px 24px 2px;
        padding: 26px 20px 28px;
    }
}