/**
 * Kamplocatieblok: accommodatie, adres met routelink, de kampweken en de
 * breng-, ophaal- en presentatietijden.
 *
 * Eén opmaak voor twee plekken: het overzicht op /kamplocaties (de display
 * kamplocatie_alles, één blok per kamp) en de routepagina per kampweek
 * (schema_perkamp, één blok). De inhoud komt uit de view event_kenmerken; hier
 * staat alleen hoe het blok eruitziet.
 *
 * Het blok is één grid van drie kolommen — label, dag, tijd — waarin zowel de
 * weekregels als de tijden staan. Daardoor lijnen ze uit, ook al rendert views
 * de kop (met de tijden) vóór de rijen (de weekregels): de leesorde
 * accommodatie -> adres -> weken -> tijden -> kaartje komt van de
 * order-eigenschappen hieronder. Zonder deze CSS staat alles onder elkaar in
 * de DOM-volgorde — dan staan de tijden boven de weekregels, wat leesbaar is
 * maar niet de bedoelde volgorde.
 */

/* Het thema zet .row op elke .view-content, en die klasse heeft negatieve
   marges van 12px. Zonder deze regel steekt het blok links en rechts een halve
   gutter buiten zijn kolom — op mobiel het duidelijkst, maar het gebeurt op
   elke breedte. */
.view-display-id-kamplocatie_perkamp .view-content {
  margin: 0;
}

/* Het overzicht: twee blokken naast elkaar vanaf tablet, zoals de kaarten
   ervoor (col-md-6). Bij drie kolommen wordt elk blok zo smal dat de kamptitel,
   het adres én de kampperiode allemaal over twee regels breken. De .row-klasse
   die het thema op .view-content zet is bootstrap-flex; die zetten we hier
   opzij. */
.view-display-id-kamplocatie_alles .view-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
}

@media (min-width: 768px) {
  .view-display-id-kamplocatie_alles .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Vanaf de brede contentkolom alle vier de kampen op één rij (verzoek Richard,
   06-09-2026). Dat gaat ten koste van breedte per blok: de kamptitel loopt over
   twee regels en de labels mogen afbreken, anders duwt "Slotpresentatie" de
   tijdkolom buiten het blok. */
@media (min-width: 1200px) {
  .view-display-id-kamplocatie_alles .view-content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .view-display-id-kamplocatie_alles .ozk-locblok {
    grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr);
    column-gap: 0.6rem;
    padding: 1.15rem;
  }

  .view-display-id-kamplocatie_alles .ozk-locblok__wlabel,
  .view-display-id-kamplocatie_alles .ozk-locblok__tlabel {
    white-space: normal;
  }

  /* De badge onder de titel: naast een titel van twee regels blijft er anders
     te weinig over voor de titel zelf. */
  .view-display-id-kamplocatie_alles .ozk-locblok__kamptitel {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .view-display-id-kamplocatie_alles .ozk-locblok__kamp {
    font-size: 1.1rem;
  }
}

.ozk-locblok {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  align-content: start;
  column-gap: 1rem;
  row-gap: 0.2rem;
  /* De rand van 2px in het huisstijlgrijs: de kleur voor neutrale feiten, en
     een adres en een tijd zijn precies dat. */
  border: 2px solid var(--ozk-grijs, #3c3c3b);
  border-radius: 0.5rem;
  background: #fff;
  padding: 1.5rem;
  /* Ruimte onder het blok, zodat het op de routepagina niet tegen de tekst
     eronder aan zit. */
  margin: 0 0 1.5rem;
}

/* Kop, adres en kaartje lopen over alle drie de kolommen. */
.ozk-locblok__kamptitel,
.ozk-locblok__accommodatie,
.ozk-locblok__adres,
.ozk-locblok__kaart {
  grid-column: 1 / -1;
}

/* Kamptitel met de badge in de kleur van het kamptype; alleen op /kamplocaties,
   want op de routepagina staat de kamp al in de paginatitel. */
.ozk-locblok__kamptitel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ozk-locblok__kamp {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
}

/* De badge staat in de kleur van het kamptype: palet C uit ozk-knoppen.css,
   oplopend met de leeftijd (groen, blauw, oranje, roze). Alle vier halen met
   witte tekst minimaal 4,5:1. Paars is de linkkleur van de site en daarmee de
   terugval voor een kamptype zonder eigen baan in het palet (Topkamp).
   De kleur staat hier en niet in de views-rewrite omdat views een
   style-attribuut uit een rewrite weghaalt (Xss::filterAdmin). */
.ozk-locblok__badge {
  flex-shrink: 0;
  border-radius: 50rem;
  padding: 0.35rem 0.9rem;
  background-color: #663399;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.ozk-locblok__badge--kinderkamp {
  background-color: #28881e;
}

.ozk-locblok__badge--brugkamp {
  background-color: #006e83;
}

.ozk-locblok__badge--tienerkamp {
  background-color: #cc4d00;
}

.ozk-locblok__badge--jeugdkamp {
  background-color: #c13c61;
}

.ozk-locblok__accommodatie {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #212529;
}

.ozk-locblok__adres {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  color: #6c757d;
}

.ozk-locblok__route {
  white-space: nowrap;
}

/* Weekregels (order 3) en tijden (order 4) staan ná de kop. De tijden zitten in
   een eigen div in de kop; display:contents haalt die div uit het grid, zodat
   de spans erin gewone grid-items worden en in dezelfde kolommen vallen als de
   weekregels. */
.ozk-locblok__wlabel,
.ozk-locblok__wperiode {
  order: 3;
}

.ozk-locblok__tijden {
  display: contents;
}

.ozk-locblok__tlabel,
.ozk-locblok__tdag,
.ozk-locblok__ttijd {
  order: 4;
}

.ozk-locblok__wlabel,
.ozk-locblok__tlabel {
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
}

.ozk-locblok__wperiode,
.ozk-locblok__tdag,
.ozk-locblok__ttijd {
  color: #6c757d;
}

.ozk-locblok__tdag,
.ozk-locblok__ttijd {
  white-space: nowrap;
}

/* De periode van een kampweek heeft geen dagkolom nodig en loopt door. */
.ozk-locblok__wperiode {
  grid-column: 2 / -1;
}

/* De tekst-display (schema_perkamp) houdt alleen de intro- en uitlegteksten;
   haar velden zijn allemaal verborgen omdat de footertekst hun tokens nodig
   heeft. Views rendert dan per kampweek een lege rij — die hoort niet in beeld
   te komen. */
.view-display-id-schema_perkamp .views-row {
  display: none;
}

/* Kaartje van de locatie. Het kaartvlak wordt door
   js/ozk-kamplocatie-kaartje.js gevuld met een Leaflet-kaart; de link eronder
   is er ook zonder JavaScript. */
.ozk-locblok__kaart {
  order: 5;
  margin-top: 1rem;
}

.ozk-locblok__kaartvlak {
  height: 220px;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
}

/* De marker: een ronde pin met een sterretje in het huisstijlpaars (#663399,
   dezelfde kleur als .ozkpaars in custom.css) — één locatie per kaartje, dus
   geen kleur per kamptype zoals de overzichtskaart die wel heeft. Leaflet zet
   zelf een witte achtergrond en rand op een divIcon; zonder die twee regels
   zit er een vierkant om de ronde marker. */
.ozk-locblok__pin {
  background: transparent;
  border: 0;
}

.ozk-locblok__pin span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  background-color: #663399;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

.ozk-locblok__kaartlink {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
}

.ozk-locblok__faq {
  margin: 0;
  font-size: 0.875rem;
}

/* Smalle schermen: de drie kolommen blijven, maar de labels mogen afbreken
   ("Slotpresentatie" past anders niet naast de dag en de tijd) en het blok
   krijgt minder lucht. */
@media (max-width: 575.98px) {
  .ozk-locblok {
    column-gap: 0.75rem;
    padding: 1.15rem;
    font-size: 0.9375rem;
  }

  .ozk-locblok__wlabel,
  .ozk-locblok__tlabel {
    white-space: normal;
  }

  /* De routelink op een eigen regel; het scheidingsteken kan dan weg, anders
     staat er een losse punt aan het begin van die regel. */
  .ozk-locblok__route {
    display: block;
  }

  .ozk-locblok__punt {
    display: none;
  }

  .ozk-locblok__kaartvlak {
    height: 180px;
  }
}