/* Bestemmingen-overzicht, /bestemmingen/. Een HTML-boom voor alle breedtes. */

.bo-hero-kop { padding: 56px 0 24px; max-width: 760px; }
.bo-titel {
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 1.08;
    font-weight: 400;
    color: var(--navy);
    margin: 16px 0 22px;
    letter-spacing: -0.02em;
}

/* Zoekbalk onder de kop. De inline-variant heeft een eigen .dt-container;
   binnen de onze gaf dat dubbele zijmarge. Op brede schermen de volle rij
   zoals in een hero, de inline-variant is op twee kolommen gemaakt. */
.bo-zoek .dt-search-card > .dt-container { padding-left: 0; padding-right: 0; }
.bo-zoek .zk-balk { max-width: none; }
@media (min-width: 1101px) {
    .bo-zoek .zk-rij { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); }
    .bo-zoek .zk-zoek { grid-column: auto; }
    .bo-zoek .zk-rij-uitgebreid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bo-chips { margin-bottom: 24px; }

.bo-featured-grid { margin-top: 16px; }
.bo-featured-kaart { height: 540px; }
.bo-featured-naam { font-size: 48px; }

.bo-grid-kaart { height: 320px; }
.bo-grid-naam { font-size: 26px; }

.bo-map { height: 220px; position: relative; }
.bo-map-cta { position: absolute; bottom: 14px; right: 14px; }
.bo-map-cta .btn { padding: 10px 16px; font-size: 12.5px; }

@media (max-width: 1024px) {
    .bo-titel { font-size: 56px; }
    .bo-featured-kaart { height: 380px; }
    .bo-featured-naam { font-size: 36px; }
}

@media (max-width: 720px) {
    .bo-hero-kop { padding: 24px 0 8px; }
    .bo-titel { font-size: 38px; margin: 10px 0 14px; }

    .bo-chips { margin-bottom: 16px; }

    .bo-featured-grid { margin-top: 12px; }
    .bo-featured-kaart { height: 240px; }
    .bo-featured-naam { font-size: 32px; }

    .bo-grid-kaart { height: 180px; }
    .bo-grid-naam { font-size: 18px; }

    .bo-map { height: 200px; }
}

/* Na een klik op een werelddeel landt de pagina op de knoppen, niet onder de vaste kop. */
#vaargebieden { scroll-margin-top: 96px; }