/**
 * Layout-sectie met een breed vak rechtsboven.
 *
 * Sectie 0 van de kamp-layout heeft vier regio's: de contentkolom (6/12), twee
 * smalle kolommen rechts (3/12 elk) en sinds 07-09-2026 een vierde regio die
 * zo breed is als die twee samen en erboven staat. Op de 134 pagina's die deze
 * layout gebruiken is die vierde regio leeg; Bootstrap Layout Builder rendert
 * er dan geen div voor.
 *
 * Waarom een grid en niet gewoon bootstrap-kolommen: een .row is één flexrij
 * met wrap. Zet je daar 6 + 6 + 3 + 3 in, dan wrappen de twee smalle kolommen
 * naar een volgende regel — die begint pas ónder de contentkolom, en die is op
 * deze pagina's ruim duizend pixels hoog. Nesten (de twee smalle kolommen in
 * een eigen row binnen een col-lg-6) lost dat op, maar dan verliezen ze hun
 * .col-lg-3 en daarmee de blokvorm uit ozk-blokken.css en de menumarges uit
 * superfish-ozk.css. Een grid plaatst de vier regio's zonder dat hun klassen
 * of hun plek in de HTML veranderen.
 *
 * Het grid gaat alleen aan als de brede regio er daadwerkelijk staat
 * (`:has(> .ozk-region-breed > *)`). Zonder die voorwaarde zou het ook gelden op
 * elke pagina waar die regio leeg is, en daar hoort de flexrij te blijven:
 * ozk-d7-parity-extra.css laat de contentkolom naar 2/3 groeien zodra een
 * zijkolom leeg is, en dat gedrag is er bewust. In een grid werkt flex-grow
 * niet en zou die 2/3 stil verdwijnen.
 *
 * De plaatsing gaat op klassenaam en niet op positie: een lege regio mag de
 * indeling niet verschuiven.
 */

/* Staat er een blok in de brede regio dat op deze pagina niets rendert, dan
   houdt Layout Builder de (lege) regio-div wél in de HTML. Die mag geen ruimte
   pakken — vandaar dat de voorwaarde overal op de inhoud kijkt
   (`> .ozk-region-breed > *`) en niet op de div zelf. Zelfde patroon als
   ozk-d7-parity-extra.css gebruikt voor een lege zijkolom. */
.ozk-layout-breed > .ozk-region-breed:not(:has(*)) {
  display: none;
}

@media (min-width: 992px) {
  .ozk-layout-breed:has(> .ozk-region-breed > *) {
    display: grid;
    /* Dezelfde verhouding als de bootstrap-kolommen: 6/3/3 van twaalf. De
       negatieve marges van .row en de padding van de kolommen doen het werk,
       dus geen gap. */
    grid-template-columns: 50% 25% 25%;
    align-items: start;
  }

  /* Bootstrap zet width, flex-basis en max-width op elke kolom, en
     ozk-d7-parity-extra.css zet daar `max-width: 66.667%` bovenop met vier
     klassen in de selector. In een grid bepaalt de kolomdefinitie de breedte,
     dus dat moet hier allemaal wijken — vandaar dezelfde vier klassen plus de
     eigen klasse, anders wint die andere regel en wordt de contentkolom 2/3
     van zijn cel. */
  .ozk-layout-breed.layout.row.layout-builder__layout:has(> .ozk-region-breed > *) > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
  }

  .ozk-layout-breed:has(> .ozk-region-breed > *) > .ozk-region-content {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  /* Het brede vak: over beide smalle kolommen, in de bovenste rij. */
  .ozk-layout-breed > .ozk-region-breed {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .ozk-layout-breed:has(> .ozk-region-breed > *) > .ozk-region-zij-1 {
    grid-column: 2;
    grid-row: 2;
  }

  .ozk-layout-breed:has(> .ozk-region-breed > *) > .ozk-region-zij-2 {
    grid-column: 3;
    grid-row: 2;
  }
}

/* Tablet en mobiel: alle regio's staan onder elkaar (col-md-12 / col-12). Het
   brede vak staat in de HTML als laatste, ná de smalle kolommen, maar hoort
   direct onder de contentkolom — dus na de paginatitel en de tekst, en vóór de
   zijkolommen. De .row is daar nog gewoon flex, dus order werkt. */
@media (max-width: 991.98px) {
  .ozk-layout-breed > .ozk-region-content {
    order: 0;
  }

  .ozk-layout-breed > .ozk-region-breed {
    order: 1;
  }

  /* Routepagina's (/…kamp/route/<kamp>): staat het kamplocatieblok met de breng-,
     haal- en presentatietijden in de brede kolom, dan komt die kolom op mobiel
     bovenaan. Ouders zoeken op de telefoon vooral de tijden (Richard 30-09-2026). */
  .ozk-layout-breed > .ozk-region-breed:has(.ozk-locblok__kop) {
    order: -1;
  }

  .ozk-layout-breed > .ozk-region-zij-1 {
    order: 2;
  }

  .ozk-layout-breed > .ozk-region-zij-2 {
    order: 3;
  }
}