/* =========================================================================
   OZK KAARTENRIJEN (.kaderwrap / .kaderbox / .kader)
   =========================================================================
   LAADT ALS LAATSTE (theme-groep, weight 101 in bario_sub.libraries.yml) en dat
   is nodig: dezelfde selectors staan óók in custom.css EN in
   ozk-d7-parity-extra.css, en daarnaast zet de Bootstrap-CDN `.container-fluid`
   (= .kaderwrap) en de `.row`/`.col`-gutters. Wie hier iets wijzigt heeft dus het
   laatste woord; regels in custom.css werden stil overschreven.

   1. UITLIJNING. De linkerrand van de eerste kaart moet exact op de tekstmarge
      liggen. Gemeten keten vóór deze fix (390px): tekst begint op 12px, de kaart
      op 29px = 12 (container-fluid padding) + 10 (kaderbox padding-left) - 5
      (rijmarge). Nu: kaderwrap zonder eigen padding/marge, rij -5px, kaderbox
      5px → kaart begint op 12px. Gemeten dx = 0 op 360/375/390/414/768/1280 en
      ook op /kampen.
   2. GELIJKE KAARTEN. Voorheen had alleen de eerste kaart van elke rij géén
      linkerpadding (via nth-child(4n+1) / (2n+1)); die kaart werd daardoor 10px
      BREDER dan zijn buren en omdat de foto 16:7 meeschaalt ook hoger — op
      mobiel zichtbaar als ongelijke kaarthoogtes in dezelfde rij. Nu heeft elke
      kaart 5px aan beide kanten (tussenruimte blijft dus 10px) en zorgen
      display:flex + height:100% dat de kaders binnen een rij even hoog zijn,
      ook als de ene kaart een tekstregel meer heeft.
   3. BINNENMARGE. 18px op desktop, 14px op mobiel — was 14/12 en daarvoor 10.
      Op 16-8-2026 nog een stap ruimer gezet voor rust in de kaart (verzoek
      Richard); de kop, de foto en de icoonregels stonden vrij dicht op de rand.
      Dit is witruimte BINNEN de kaart; de buitenmaat verandert er niet van, de
      kaart wordt er wel hoger van. Onder 385px blijft het 10px — daar is twee
      kaarten per rij al de grens (zie onderaan dit bestand).
   ========================================================================= */
.kaderwrap {
    margin-left  : 0;
    margin-right : 0;
    padding-left : 0;
    padding-right: 0;
}
.kaderwrap .view-content.row {
    margin-left  : -5px;
    margin-right : -5px;
}
.kaderbox {
    padding      : 0 5px 10px 5px;
    display      : flex;
}
/* De hele kaart is één link; die moet de kolom vullen, anders krimpt de kaart
   tot zijn tekstbreedte zodra .kaderbox een flexcontainer is. */
.kaderbox > a {
    display      : block;
    width        : 100%;
}
.kader {
    height       : 100%;
    width        : 100%;
    padding      : 18px;
}
@media (max-width: 767.98px) {
    .kader { padding: 14px; }
}

/* Reserveer de 16:7-fotoruimte op de vier homepagekaarten al voordat het beeld
   binnen is. De Views-rewrite rendert hier alleen een src zonder width/height;
   zonder deze verhouding schuift de intro tijdens het laden zichtbaar op. */
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader > div > img,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader > div > img {
    display      : block;
    width        : 100%;
    height       : auto;
    aspect-ratio : 16 / 7;
    object-fit   : cover;
}

/* =========================================================================
   ICOONKOLOM: één maatvoering voor de kaartregels én de knop onderin
   =========================================================================
   De kaartregels (kadericon + .indent7) en de knop onderin (buttonicon +
   .h4heading) komen uit twee verschillende stukken D7-markup en hadden daardoor
   elk hun eigen inspringing: het knopicoon stond 12px rechts van de icoonkolom
   erboven (3px .boxbig-padding + 1px knoprand + 5px knoppadding + 3px
   icoonmarge) en de knoptekst 4,5 tot 6px rechts van de kaarttekst. Hieronder
   staat de maatvoering daarom één keer in custom properties, die zowel de rijen
   als de knop voeden — wijzig je de gap of de icoonbreedte, dan bewegen beide
   mee en blijft de verticale lijn staan.
   De waarden zijn de bestaande: 18px icoon (16px onder 768px), 3px tussen icoon
   en tekst, 4px gap (2px onder 385px), 7% text-indent op de tekst (0 op mobiel,
   waar elke pixel tekstbreedte telt). De regels hieronder overschrijven bewust
   de oudere tweelingregels in custom.css/ozk-porto-port.css — dit bestand laadt
   als laatste en is de eigenaar van de kaartlayout.
   ========================================================================= */
.kader {
    --ozk-icoon       : 18px;   /* breedte én font-size van het symbool */
    --ozk-icoonmarge  : 3px;    /* icoon -> tekst binnen de rij            */
    --ozk-icoongap    : 4px;
    --ozk-tekstindent : 7%;
}
@media (max-width: 767.98px) {
    .kader {
        --ozk-icoon       : 16px;
        --ozk-tekstindent : 0;
    }
}
@media (max-width: 384.98px) {
    .kader { --ozk-icoongap: 2px; }
    /* Zelfde stap terug als de kaartregels hieronder maken: op 360px is de
       tekstruimte in de knop ~109px en vraagt "Nog niet geopend" er 110 — één
       pixel tekort, waardoor de knop over twee regels ging (ook al vóór deze
       ronde). Op 13px vraagt hij ~102px en blijft hij één regel. Op ~320px
       past het nog steeds niet; dat is dezelfde geaccepteerde ondergrens als
       bij de kaartregels. */
    .kader .boxbig .h4heading { font-size: 13px; }
}
.kader > div:has(.kadericon) { gap: var(--ozk-icoongap); }
.kader .kadericon {
    font-size    : var(--ozk-icoon);
    width        : var(--ozk-icoon);
    min-width    : var(--ozk-icoon);
    margin-right : var(--ozk-icoonmarge) !important;
}
.kader .indent7 { text-indent: var(--ozk-tekstindent) !important; }

/* De knop krijgt exact dezelfde kolomindeling. Alle horizontale inspringing
   links gaat naar 0 (boxbig-padding, knoppadding, icoonmarge) en de knop
   schuift 1px naar links, zodat niet de rand maar de INHOUD van de knop op de
   tekstmarge van de kaart uitkomt. Het icoon staat in een even breed vak als de
   kadericons, gecentreerd — zo valt de inktrand van het symbool op dezelfde
   lijn zonder tegen de knoprand te plakken. De tekstspan vult de rest van de rij
   (flex-grow) en krijgt dezelfde text-indent, dus hij springt evenveel in als de
   kaartregels erboven; de knop zelf moet die indent daarom kwijt (hij draagt in
   de markup zelf de class .indent7). */
.kader .boxbig {
    padding-left : 0 !important;
    padding-right: 0 !important;
}
.kader .boxbig .button {
    display      : flex;
    align-items  : center;
    gap          : var(--ozk-icoongap);
    width        : auto;
    margin-left  : -1px;
    padding-left : 0;
    padding-right: 5px;
    text-indent  : 0 !important;
}
.kader .boxbig .buttonicon {
    float        : none !important;
    width        : var(--ozk-icoon);
    min-width    : var(--ozk-icoon);
    margin       : 0 var(--ozk-icoonmarge) 0 0 !important;
    text-align   : center !important;
    line-height  : 1;
}
.kader .boxbig .h4heading {
    flex-grow    : 1;
    text-indent  : var(--ozk-tekstindent);
}

/* Beschikbaarheid jongens/meisjes als gekleurd symbool rechts van de kaarttitel
   (displays blocks_aanbod en block_perkamp). Verving de twee onderste
   kaartregels, waar de status als tekst stond ("nog plek", "helaas vol").
   De CiviCRM-optiegroep 414 heeft ZEVEN statussen; die gaan hier op drie kleuren,
   met de kleuren die de rest van de site al voor deze begrippen gebruikt (zie
   ozk-d7-parity-extra.css: div.wachtlijst oranje, div.vol bordeaux,
   div.Geannuleerd grijs):
     nog plek / bijna vol            → #28881e = .ozkgroen  (er kan nog iemand bij)
     wachtlijst                      → #cc4d00 = .ozkoranje
     helaas vol                      → #c13c61 = .ozkroze
     nog niet open / geannuleerd /
     gepauzeerd                      → dimgray (geen van de drie; neutraal)
   Dit zijn de benoemde huisstijlkleuren uit custom.css r840-843. Die classes
   zetten `background` en zijn hier dus niet herbruikbaar (een symbool vraagt
   `color`), maar de codes zijn identiek — bij een huisstijlwijziging moeten deze
   vier regels mee.
   De classes komen uit het CiviCRM-label via Twig's |clean_class, dus een nieuwe
   optie in die optiegroep krijgt automatisch de neutrale kleur in plaats van een
   verkeerde. Betekenis staat in het title-attribuut ("Jongens: nog plek"), want
   een kleur alleen is niet zelfverklarend. */
.kader h3:has(.ozk-vrijgroep) {
    display     : flex;
    align-items : center;
    gap          : 4px;
}
.ozk-vrijgroep {
    margin-left : auto;      /* duwt de symbolen naar de rechterrand */
    display     : inline-flex;
    gap         : 1px;
    flex        : 0 0 auto;  /* mag nooit krimpen ten koste van de symbolen */
}
.ozk-vrij {
    font-size   : 20px;
    line-height : 1;
    color       : dimgray;
}
.ozk-vrij-nog-plek,
.ozk-vrij-bijna-vol  { color: #28881e; }
.ozk-vrij-wachtlijst { color: #cc4d00; }
.ozk-vrij-helaas-vol { color: #c13c61; }

/* Dichte aanmeldknop op de weekkaarten (display block_perkamp): zolang
   event_status vóór 'open' zit (nogniet/presale) rendert de views-rewrite een
   <span> "Nog niet geopend" (presale-deelnemers krijgen hun persoonlijke
   aanmeldlink per mail, niet via deze knop); bij pauze/geannuleerd e.d.
   "Aanmelden gesloten". De geometrie komt sinds 15-09-2026 uit de gedeelde
   regel `a.button, span.button` in ozk-porto-port.css (daarvóór stond hier een
   kopie, omdat a.button alleen <a> matchte); hier blijft alleen de eigen
   kleur over, zonder link-affordance. */
span.button.ozk-btn-dicht {
    color        : dimgray;
}
/* Diezelfde a-only-valkuil zit ook in de mobiele stap: custom.css r906 zet
   `.kader .indent7 { font-size: 13px }` onder 768px, wat de actieve knop (a.button,
   specificiteit 0,1,1) wél verkleint maar de span hierboven (0,2,1) niet. De
   knoptekst is .h4heading op 1.1em en erft dat, dus de dichte knop kwam op
   15,4px uit tegen 14,3px voor de actieve — gemeten zichtbaar tussen 385 en
   767,98px. Onder 385px maakt de absolute 13px op .h4heading (r92 hierboven)
   ze vanzelf weer gelijk; deze regel dekt de band daarboven. */
@media (max-width: 767.98px) {
    span.button.ozk-btn-dicht { font-size: 13px; }
}

/* CONTRAST VAN DE KNOP TEGEN DE KAART. De knopmarkup draagt de D7-class
   .whitesmoke (#F5F5F5) en de kaart heeft rgba(192,192,192,0.1) = #F7F7F7 op
   wit: twee tinten die 2 stappen uit elkaar liggen, dus het knopvlak was
   nagenoeg onzichtbaar en alleen de rand deed het werk. De kaart wordt bij hover
   bovendien rgba(192,192,192,0.5) = #DFDFDF, dus één vaste tint volstaat niet —
   een vulling die in rust afsteekt, valt in hover-staat juist weg.
   Daarom twee tinten, die de knop in beide staten los van de kaart zetten:
     kaart in rust  #F7F7F7  -> knop #E4E4E4 (donkerder)
     kaart bij hover #DFDFDF -> knop #F1F1F1 (lichter; de knop 'licht op')
   Alleen vulling en rand; de tekst blijft zoals hij is. Die is in de praktijk
   ZWART, niet dimgray: .whitesmoke zet `color: black !important` en dat verslaat
   de color-regel van span.button.ozk-btn-dicht hierboven (die is daardoor dode
   code). Zwart op #E4E4E4 geeft ~12:1, ruim boven de WCAG-AA-eis — de tekst
   dempen zou het contrast juist weer verlagen.
   De !important is nodig om diezelfde .whitesmoke-regel te verslaan; die staat
   in ozk-d7-parity-extra.css en wordt sitebreed gebruikt, dus overschrijven
   gebeurt hier gescoped op de kaart. Geldt voor beide knopvarianten: de actieve
   Aanmelden-/Meer info-knop en de dichte span. */
.kader .boxbig .button {
    background   : #E4E4E4 !important;
    border-color : #9E9E9E !important;
}
.kader:hover .boxbig .button {
    background   : #F1F1F1 !important;
    border-color : #8F8F8F !important;
}

/* De vier kamptype-kaarten op de frontpage (displays blocks_kamptype en
   blocks_kamptype_pre) zijn breder dan de andere kaderkaarten en hun titel is
   daar de belangrijkste ingang naar de kamppagina — die mag groter en zwaarder
   dan de 18px hierboven. Bewust op de blok-class gescoped en NIET op .kader h3
   zelf: dezelfde CSS bedient ook de smalle kaarten van blocks_aanbod, waar 28px
   juist de overlap gaf die 18px oploste.
   Deze regel zet alléén de maat (22px = de h3-maat uit de schaal) en de kleur;
   font en gewicht komen uit css/ozk-typografie.css (Open Sans 600), zodat de
   kaarttitel niets anders is dan een h3 op zijn eigen maat.
   HISTORIE: hier stond kort Rambla 700 — het merkfont, gekozen uit drie geteste
   varianten (27-07-2026). Zodra de typografische schaal er lag, was dat de enige
   plek op de pagina met een tweede lettertype en viel het uit de toon; Rambla
   blijft nu beperkt tot de footer en de intranet-dashboards, zones met een eigen
   achtergrond buiten de tekstflow.
   Kleur #343a40 = de themakleur van alle andere koppen; zonder deze regel erven
   titel en regels puur zwart van de kaartlink (color:inherit in
   ozk-d7-parity-extra.css). */
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader h3,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader h3 {
    font-size     : 22px;
    line-height   : 28px;
    font-weight   : 600;
    color         : #343a40;
    margin-bottom : 8px;
}
/* De kaartregels (leeftijd/locatie/plaats) staan hier op 14px omdat dat de
   D7-maat is; in deze vier bredere kaarten mag dat ruimer. 16px is de grootste
   maat die "Costa del Zeumeren" (de langste locatienaam) op desktop nog op één
   regel houdt; op mobiel zijn de kaarten col-6 (~130px tekstruimte) en past
   alleen 15px, zie de media query hieronder. */
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader .indent7,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader .indent7 {
    font-size   : 16px;
    line-height : 24px;
    color       : #343a40;
}
/* Mobiel staan deze kaarten 2-per-rij. De maten zijn uitgemeten op de langste
   locatienaam ("Costa del Zeumeren": 122px nodig op 13px), door de nowrap-breedte
   van de tekst te vergelijken met de beschikbare kolombreedte.
   Wat de ruimte oplevert ondanks de ruimere 12px binnenmarge: een smallere
   icoonkolom (16px i.p.v. de 24px die het Material-Symbols-grid bij font-size
   18px in beslag neemt) en gap 2px. Gemeten marge: +21px op 414, +9px op 390,
   +2px op 375 — allemaal 0 afbrekingen. Alleen voor deze vier kaarten;
   blocks_aanbod heeft meer regels per kaart en houdt zijn eigen maten. */
@media (max-width: 767.98px) {
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader {
        padding : 12px;
    }
    /* Via de custom properties uit de icoonkolom-sectie hierboven, zodat de knop
       onderin dezelfde smallere maatvoering meekrijgt en uitgelijnd blijft. */
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader {
        --ozk-icoon    : 16px;
        --ozk-icoongap : 2px;
    }
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader .indent7,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader .indent7 {
        font-size : 13px;
    }
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader h3,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader h3 {
        font-size   : 20px;
        line-height : 26px;
    }
}
/* Onder 385px komt 13px tekort (gemeten -6px op 360px). Eén stap terug in zowel
   binnenmarge als tekst. Op 320px past het nog steeds niet — dat was vóór deze
   ronde ook zo en is de grens van twee kaarten per rij. */
@media (max-width: 384.98px) {
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader {
        padding : 10px;
    }
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader .indent7,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader .indent7 {
        font-size : 12px;
    }
}

/* =========================================================================
   KAMPKAARTEN IN DE BLOKVORM, PAARSE KOPBALK — proef 16-8-2026
   =========================================================================
   Verzoek Richard (16-8-2026): de kampkaarten in dezelfde vorm als de navigatieblokken, maar
   met paars als balk. Dat klopt ook met de kleurbanen: élke kampkaart is één
   grote link naar de kamppagina, dus navigatie — en die baan is paars #663399
   (zie huisstijl-kleursemantiek-banen). Blauw blijft daarmee voor de
   informatieblokken, wat de twee soorten kaarten op /kampen onderscheidt: de
   CTA-strook onderaan heeft een blauwe kopbalk, deze een paarse.

   Wit op paars haalt 8,41:1 — het ruimste contrast van alle vijf de banen.

   NOG TE BESLISSEN: de ♂♀-symbolen in de titel dragen de beschikbaarheid in
   KLEUR (groen = nog plek, oranje = wachtlijst, roze = helaas vol, grijs = nog
   niet open). Op een gekleurde balk werkt geen van die kleuren, dus staan ze hier
   wit. Die status staat óók in de balk onderaan de kaart, maar niet per geslacht:
   zaten jongens vol en meisjes op de wachtlijst, dan was dat alléén aan deze twee
   icoontjes te zien. Alternatief is de ♂♀-groep uit de titel halen en onder de
   foto zetten — dat vraagt een wijziging in de view, niet in CSS.

   Dit blok staat onderaan het bestand en kan er in z'n geheel weer uit.
   ========================================================================= */
.kader {
    background-color : whitesmoke;
    border           : none;
}
.kader:hover {
    background-color : #ececec;
}
/* De titel wordt de kopbalk: tegen de binnenmarge van .kader op (18px, zie
   sectie 3 bovenaan), zodat hij van rand tot rand loopt en de bovenkant afsluit.
   Zelfde maten als de blokkopbalk in ozk-blokken.css — Rambla als chrome. */
/* Ook de twee kamptype-blokken van de frontpage expliciet noemen: die hebben
   verderop in dit bestand (r.269) een eigen regel met een langere selector
   (blokklasse + .kader h3 = specificiteit 0,3,0) die font-size, gewicht én
   `color:#343a40` zet. Zonder die selectors hier erbij won die regel van
   `.kader h3` (0,2,0) en stond op de homepage donkere tekst op de paarse balk —
   gemeten 1,37:1, volstrekt onleesbaar (feedback Richard 16-8-2026). Nu gelijke
   specificiteit én later in het bestand, dus deze wint. */
.kader h3,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader h3,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader h3 {
    background      : #663399;
    color           : #ffffff;
    font-family     : Rambla, Arial, Helvetica, sans-serif;
    font-size       : 1.05rem;
    font-weight     : 400;
    line-height     : 1.3;
    margin          : -18px -18px 14px;
    padding         : .55rem 18px;
}
.kader h3 .ozk-vrij,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader h3 .ozk-vrij,
.block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader h3 .ozk-vrij {
    color : #ffffff;
}
@media (max-width: 767.98px) {
    .kader h3 {
        margin  : -14px -14px 12px;
        padding : .5rem 14px;
    }
}
@media (max-width: 384.98px) {
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype .kader h3,
    .block-views-blockbeschikbaarheid-zomerkampen-blocks-kamptype-pre .kader h3 {
        margin  : -10px -10px 10px;
        padding : .45rem 10px;
    }
}

/* ── Fase-knop in de kampkaarten van de aanmeldpagina's (block_perkamp) ──
   05-08-2026, besluit Richard.

   1. FULL-BLEED: de knop onderin de kaart loopt over de volle kaartbreedte
      tegen de onderrand aan — zelfde negatieve-marge-patroon als de paarse
      kaarttitel bovenaan (zie .kader h3 hierboven: 18px desktop, 14px
      mobiel). De inhoud (icoon + tekst) blijft via padding op de knop zelf
      op de tekstmarge van de kaart staan. Geldt voor alle knopvarianten
      (Aanmelden / Nog niet geopend / Presale gestart / Aanmelden gesloten).
      De margin-shorthand draagt !important om de D7-utilityclass
      .marginbottom op dezelfde div te verslaan.

   2. TEAL INFO-KNOP (.ozk-btn-info): de klikbare "Nog niet geopend"- en
      "Presale gestart"-knop linkt naar /presale en krijgt de teal van de
      paneel-kopbalk (#006E83, zie ozk-blokken.css). De regels verslaan
      bewust de generieke #E4E4E4 !important + de :hover-variant hierboven;
      wit op #006E83 haalt ~5,9:1 (AA). */
.view-display-id-block_perkamp .kader .boxbig {
    margin : 12px -18px -18px !important;
}
.view-display-id-block_perkamp .kader .boxbig .button {
    width         : 100%;
    margin-left   : 0;
    padding-left  : 18px;
    padding-right : 18px;
    border-left   : 0;
    border-right  : 0;
    border-bottom : 0;
}
@media (max-width: 767.98px) {
    .view-display-id-block_perkamp .kader .boxbig {
        margin : 10px -14px -14px !important;
    }
    .view-display-id-block_perkamp .kader .boxbig .button {
        padding-left  : 14px;
        padding-right : 14px;
    }
}

.kader .boxbig .button.ozk-btn-info {
    background   : #006E83 !important;
    border-color : #006E83 !important;
    color        : #ffffff !important;
}
.kader:hover .boxbig .button.ozk-btn-info,
.kader .boxbig .button.ozk-btn-info:hover,
.kader .boxbig .button.ozk-btn-info:focus {
    background   : #00596B !important;
    border-color : #00596B !important;
}

/* De kaartfoto in de block_perkamp-kaarten ook full-bleed (06-08-2026,
   verzoek Richard) — net als de kopbalk en de fase-knop. De foto zit in een
   kale wrapper-div direct onder .kader; max-width:none is nodig omdat de
   globale .kader img { max-width:100% } de bredere maat anders clampt. */
.view-display-id-block_perkamp .kader > div > img {
    display      : block;
    width        : calc(100% + 36px);
    max-width    : none;
    height       : auto;
    margin-left  : -18px;
    margin-right : -18px;
}
@media (max-width: 767.98px) {
    .view-display-id-block_perkamp .kader > div > img {
        width        : calc(100% + 28px);
        margin-left  : -14px;
        margin-right : -14px;
    }
}