/* Bestemmingspagina's: land (/cruises/<land>/), rivier (/cruises/<rivier>/)
   en soort cruise (/cruise-types/<type>/). Een HTML-boom voor alle breedtes. */

/* Havens- en vertrekhavenkaarten iets lager dan de standaard dt-dest-card
   (360px), op elke breedte hetzelfde. Stond eerst als inline style op twee
   plekken; nu een keer hier. */
.bd-havenkaart { height: 260px; }

/* Rederijkaart: logo, naam en cijfer. Verving een blok pure inline styles
   (zie git-historie) dat op mobiel niet kon meekrimpen. */
.bd-rederij-kaart {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    display: block;
    color: inherit;
}
.bd-rederij-kop { display: flex; align-items: center; gap: 14px; }
.bd-rederij-logo {
    width: 88px;
    height: 48px;
    flex: 0 0 88px;
    border-radius: var(--r-sm);
    background: #fff;
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    overflow: hidden;
}
.bd-rederij-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bd-rederij-monogram {
    background: var(--gold-tint);
    color: #8a6e2e;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
}
.bd-rederij-naamblok { flex: 1; min-width: 0; }
.bd-rederij-naamblok h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--navy);
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bd-rederij-naamblok .text-meta-sm { margin-top: 3px; }

@media (max-width: 1024px) {
    .bd-rederij-kaart { padding: 18px 20px; }
}

@media (max-width: 720px) {
    .bd-havenkaart { height: 220px; }
    .bd-rederij-kaart { padding: 16px 18px; }
    .bd-rederij-kop { gap: 10px; }
    .bd-rederij-logo { width: 72px; height: 44px; flex-basis: 72px; }
    .bd-rederij-naamblok h3 { white-space: normal; font-size: 18px; }
}