/* Havendetail, /havens/<slug>/. Een HTML-boom voor alle breedtes. */

/* Fact-strip bovenaan: het aantal kolommen hangt af van het aantal
   facts (--haven-fact-count), niet van een vast getal. Stond eerst als
   inline grid-template-columns/font-size op het element zelf, wat de
   mobiele kolomregel uit responsief.css overschreef. */
.haven-facts-bar {
    grid-template-columns: repeat(var(--haven-fact-count, 4), 1fr);
}
.haven-facts-bar .haven-facts-num {
    font-size: 22px;
}

/* Buurhavens: op desktop twee kolommen naast elkaar, op mobiel een
   lijst onder elkaar (zoals de oude mobiele versie). */
.haven-buurhavens-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 40px;
    max-width: 900px;
}

@media (max-width: 720px) {
    .haven-facts-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .haven-buurhavens-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }
}