/* ===========================================================================
   hero-tarief.css — de tarief- en beschikbaarheidsregel in de hero
   ===========================================================================
   Deze regels stonden als <style>-blok midden in includes/item-hero.php, en
   dus op elke profielpagina opnieuw in de HTML. Hier staan ze één keer, en
   de browser kan het bestand bewaren.
   =========================================================================== */

.new-speaker-hero .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.new-speaker-hero .hero-fact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-speaker-hero .hero-fact > i {
    font-size: 1.5rem;
    color: #f56c20;
    flex: 0 0 auto;
}

.new-speaker-hero .hero-fact__label {
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .6);
}

.new-speaker-hero .hero-fact__value {
    display: block;
    font-size: 1.05rem;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .new-speaker-hero .hero-facts { gap: 22px; }
}