/*
 * Guifi Content Builder — het responsive contract van de bands.
 *
 * Dit bestand IS de bron van waarheid voor hoe een band zich gedraagt per breakpoint.
 * components/acf-registry.yml beschrijft datzelfde gedrag machine-leesbaar, en
 * playbooks/responsive-qa toetst of de gerenderde DOM het daadwerkelijk doet.
 * Wijkt er iets af, dan is één van de drie fout — niet "het valt wel mee".
 *
 * Regels die hier hard in zitten:
 *   RULE WP-003  structurele spacing via parent padding/gap, geen spacers of negatieve marges
 *   RULE WP-004  kleur op de buitenste BEM-class, niet op inner <p>/heading
 *   RULE WP-006  typografie-ondergrenzen, ongeacht wat het design zegt
 */

/* Expliciet, niet vertrouwen op wat het theme toevallig instelt: zonder border-box telt de
   horizontale padding bij max-width op, en is de container 1248px waar 1200px is ontworpen.
   Dat verschil is door figma-correctness-qa gevonden op de render-fixture. */
.guifi-rijen,
.guifi-rijen *,
.guifi-rijen *::before,
.guifi-rijen *::after { box-sizing: border-box; }

.guifi-rijen {
  --guifi-rij-bg: #ffffff;

  /* Spacing-schaal — de ACF-velden geen/s/m/l/xl mappen 1-op-1 op deze waarden. */
  --guifi-space-geen: 0;
  --guifi-space-s: 24px;
  --guifi-space-m: 48px;
  --guifi-space-l: 80px;
  --guifi-space-xl: 128px;

  /* --guifi-container is de CONTENTbreedte, net als in Figma: de breedte van de kolom waarin
     tekst en media staan. De gutter komt daar buiten, anders valt de content smaller uit dan
     ontworpen — met border-box scheelde dat 2×24px op elke sectie.

     Hier bewust NIET gedefinieerd: de waarde komt uit tokens.css (per project uit Figma) op
     :root. Een definitie op .guifi-rijen zou die token voor alles eronder overschrijven. De
     standaard van 1200px staat daarom als terugvalwaarde bij het gebruik. */
  --guifi-gutter: 24px;
  --guifi-gap: 48px;

  --guifi-kleur-tekst: #1a1a1a;
  --guifi-kleur-tekst-op-donker: #ffffff;
}

/* --- Sectie-basis -------------------------------------------------------- */

.guifi-rij {
  background: var(--guifi-rij-bg);
  /* Kleur staat hier, op de buitenste class, zodat Elementor's klant-gekozen
     tekstkleur op de widget-container hier via specificity overheen kan (RULE WP-004). */
  color: var(--guifi-kleur-tekst);
}

.guifi-rij__inner {
  max-width: calc(var(--guifi-container, 1200px) + 2 * var(--guifi-gutter));
  margin-inline: auto;
  padding-inline: var(--guifi-gutter);
  /* Voorkomt dat grid/flex-kinderen hun container oprekken — de meest voorkomende
     oorzaak van horizontale overflow tussen breakpoints. */
  min-width: 0;
}

/* Breedte-varianten.
 * vol    — rand tot rand, zonder gutter: een HERO-foto van 1920 in een ontwerp van 1920.
 * paneel — het achtergrondvlak is breder dan de content (Sportfondsen: vlak 1440, content 1280).
 *          De achtergrond verhuist van de sectie naar het vlak; de padding van de sectie blijft
 *          de ruimte eromheen. Maten uit tokens.css, met terugvalwaarden. */
.guifi-rij--breedte-vol .guifi-rij__inner {
  max-width: none;
  padding-inline: 0;
}
.guifi-rij--breedte-vol .guifi-rij__figuur img,
.guifi-rij--breedte-vol .guifi-rij__figuur video {
  display: block;
  width: 100%;
  height: auto;
}
.guifi-rij.guifi-rij--breedte-paneel { background: none; }
.guifi-rij--breedte-paneel .guifi-rij__inner {
  max-width: var(--guifi-container-paneel, 1440px);
  padding-block: var(--guifi-paneel-padding, 64px);
  padding-inline: max(var(--guifi-gutter), calc((var(--guifi-container-paneel, 1440px) - var(--guifi-container, 1200px)) / 2));
  background: var(--guifi-rij-bg);
}

/* blok — een gekleurd vlak zo breed als de container, met de inhoud erin ingesprongen
 * (Sportfondsen: "Zwemveilig volgens de landelijke norm"). Radius en binnenruimte uit design.css. */
.guifi-rij.guifi-rij--breedte-blok { background: none; }
.guifi-rij--breedte-blok .guifi-rij__inner {
  max-width: var(--guifi-container, 1200px);
  box-sizing: border-box;
  padding: var(--guifi-space-m);
  background: var(--guifi-rij-bg);
}
@media (max-width: 1247px) {
  .guifi-rij--breedte-blok .guifi-rij__inner { margin-inline: var(--guifi-gutter); }
}

/* Overlap: de sectie valt over de vorige heen (kaartenpaneel over een HERO-foto). Alleen op
 * desktop — gestapeld op mobiel zou de overlap inhoud van de vorige sectie afdekken. */
@media (min-width: 1025px) {
  /* Twee classes: .guifi-rij--mt-geen (margin-top: 0) staat verderop en won anders. */
  .guifi-rij.guifi-rij--overlap {
    margin-top: calc(-1 * var(--guifi-overlap, 0px));
    position: relative;
    z-index: 1;
  }
}

/* Achtergrondvarianten. Donker keert de tekstkleur om; nooit één hex site-wide forceren. */
.guifi-rij--bg-wit { --guifi-rij-bg: #ffffff; }
/* Geen eigen achtergrond: de paginakleur laten zien in plaats van wit erover schilderen. */
.guifi-rij--bg-erven { --guifi-rij-bg: transparent; }
.guifi-rij--bg-zwart {
  --guifi-rij-bg: #111111;
  color: var(--guifi-kleur-tekst-op-donker);
}
/* bij --bg-custom levert de template --guifi-rij-bg aan via een inline custom property */

/* Beeld — het achtergrondbeeld vult de band van rand tot rand met de tekst eroverheen (een hero).
 * Geen aparte band: dit is de vierde keuze bij Achtergrond type, met een beeldveld eronder.
 * De URL en de verdonkering komen als custom property uit de template (helpers.php).
 * De verdonkering is in het ontwerp gemeten (normalize.mjs) en houdt lichte tekst leesbaar; hij
 * staat als eigen laag over het beeld, zodat de inhoud zelf niet meedimt.
 * Terugvalkleur donker: zolang het beeld laadt staat de lichte tekst niet op wit. */
.guifi-rij--bg-beeld {
  --guifi-rij-bg: #111111;
  color: var(--guifi-kleur-tekst-op-donker);
  position: relative;
  isolation: isolate;
  background-image: var(--guifi-rij-bg-beeld, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.guifi-rij--bg-beeld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--guifi-rij-bg-verdonkering, 0));
}
.guifi-rij--bg-beeld > * { position: relative; z-index: 1; }

.guifi-rij--align-links { text-align: left; }
.guifi-rij--align-midden { text-align: center; }
.guifi-rij--align-rechts { text-align: right; }

/* Spacing-schaal toegepast op de sectie zelf (RULE WP-003). */
.guifi-rij--pt-geen { padding-top: var(--guifi-space-geen); }
.guifi-rij--pt-s    { padding-top: var(--guifi-space-s); }
.guifi-rij--pt-m    { padding-top: var(--guifi-space-m); }
.guifi-rij--pt-l    { padding-top: var(--guifi-space-l); }
.guifi-rij--pt-xl   { padding-top: var(--guifi-space-xl); }

.guifi-rij--pb-geen { padding-bottom: var(--guifi-space-geen); }
.guifi-rij--pb-s    { padding-bottom: var(--guifi-space-s); }
.guifi-rij--pb-m    { padding-bottom: var(--guifi-space-m); }
.guifi-rij--pb-l    { padding-bottom: var(--guifi-space-l); }
.guifi-rij--pb-xl   { padding-bottom: var(--guifi-space-xl); }

.guifi-rij--mt-geen { margin-top: var(--guifi-space-geen); }
.guifi-rij--mt-s    { margin-top: var(--guifi-space-s); }
.guifi-rij--mt-m    { margin-top: var(--guifi-space-m); }
.guifi-rij--mt-l    { margin-top: var(--guifi-space-l); }
.guifi-rij--mt-xl   { margin-top: var(--guifi-space-xl); }

.guifi-rij--mb-geen { margin-bottom: var(--guifi-space-geen); }
.guifi-rij--mb-s    { margin-bottom: var(--guifi-space-s); }
.guifi-rij--mb-m    { margin-bottom: var(--guifi-space-m); }
.guifi-rij--mb-l    { margin-bottom: var(--guifi-space-l); }
.guifi-rij--mb-xl   { margin-bottom: var(--guifi-space-xl); }

/* --- Typografie (RULE WP-006) -------------------------------------------- */

.guifi-rij__titel {
  margin: 0 0 16px;
  overflow-wrap: anywhere;
  /* Maximale grootte en regelhoogte uit de designtokens (Figma), met veilige terugvalwaarden. */
  font-size: clamp(28px, 4vw, var(--guifi-titel-grootte, 48px));
  line-height: var(--guifi-titel-regelhoogte, 1.15);
}
.guifi-rij__bovenkop { margin: 0 0 8px; font: inherit; color: inherit; }

/* Variant titel_grootte = groot: voor HERO-achtige secties. Het ontwerp gebruikt twee kopmaten
   (atmoce: 64px voor HERO en FAQ, 48px voor de rest) — één vaste maat gaf blocking afwijkingen. */
.guifi-rij--titel-groot .guifi-rij__titel {
  font-size: clamp(32px, 5vw, var(--guifi-titel-groot-grootte, 64px));
  line-height: var(--guifi-titel-groot-regelhoogte, 1.1);
}

.guifi-rij__tekst {
  /* max(): de token kan uit Figma kleiner komen, maar nooit onder 16px (RULE WP-006). */
  font-size: max(16px, var(--guifi-tekst-grootte, 16px));
  line-height: var(--guifi-tekst-regelhoogte, 1.6);
}
.guifi-rij__tekst > :first-child { margin-top: 0; }
.guifi-rij__tekst > :last-child { margin-bottom: 0; }
.guifi-rij__tekst ul {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guifi-rij__tekst li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.guifi-rij__tekst li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-top: 8px;
  background: #f7f4f1;
  color: currentColor;
  font-size: 9px;
  line-height: 1;
}
.guifi-rij__tekst li > strong,
.guifi-rij__tekst li > span { display: block; grid-column: 2; }
.guifi-rij__tekst li > strong + span { margin-top: .25em; }

.guifi-rij__caption,
.guifi-galerij__caption {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.75;
}

/* --- Knoppen ------------------------------------------------------------- */

.guifi-rij__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.guifi-rij--align-midden .guifi-rij__knoppen { justify-content: center; }
.guifi-rij--align-rechts .guifi-rij__knoppen { justify-content: flex-end; }

.guifi-knop {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 16px; /* CTA nooit onder 14px, we houden 16px aan */
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid currentColor;
}
/* Basisknop voor als het project geen eigen knopstijl heeft (design.css overschrijft dit). De vulling
   was currentColor en de tekst inherit: vlak en label dezelfde kleur, dus een leeg blok (Vandaglas
   "Klantportaal", 2026-09-19). Vulling en label krijgen daarom elk hun eigen kleur. */
.guifi-knop--primair {
  background: var(--guifi-kleur-accent, #101012);
  border-color: transparent;
  color: #ffffff;
}
.guifi-knop--primair::after { content: none; }
.guifi-rij--bg-zwart .guifi-knop--primair { color: #ffffff; }

.guifi-knop--secundair { background: transparent; }

/* --- Media --------------------------------------------------------------- */

.guifi-rij__media { min-width: 0; }

.guifi-rij__media img,
.guifi-galerij img {
  display: block;
  max-width: 100%;
  height: auto; /* behoudt ratio, voorkomt vervorming bij schalen */
}

.guifi-rij__media--video { position: relative; }
.guifi-rij__media--video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.guifi-rij__figuur { margin: 0; }

/* --- Dynamische inhoud ---------------------------------------------------
 * Veilige basisvormgeving uit de sitetokens. Projecttokens mogen deze waarden
 * verfijnen; een redacteur hoeft nooit classes of CSS mee te geven.
 * ------------------------------------------------------------------------ */
.guifi-dynamic { width: min(100% - 32px, var(--guifi-container, 1200px)); margin-inline: auto; }
.guifi-dynamic__filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-block: 24px; }
.guifi-dynamic__filters label { display: block; font-weight: 600; }
.guifi-dynamic__filters input,
.guifi-dynamic__filters select,
.guifi-dynamic__filters button { min-height: 44px; padding: 10px 14px; font: inherit; }
.guifi-dynamic__results,
.guifi-dynamic__terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--guifi-gap, 24px); padding: 0; list-style: none; }
.guifi-dynamic__item,
.guifi-dynamic__terms > li { min-width: 0; }
.guifi-dynamic__item img { display: block; width: 100%; height: auto; }
.guifi-dynamic[data-guifi-kind="download_list"] .guifi-dynamic__results { grid-template-columns: 1fr; }
.guifi-dynamic__download { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; border-bottom: 1px solid currentColor; }
.guifi-dynamic__download h3, .guifi-dynamic__download p { margin-block: 0 4px; }
.guifi-dynamic__download-link { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; }
.guifi-dynamic__details { display: grid; gap: 12px; }
.guifi-dynamic__details > div { display: grid; grid-template-columns: minmax(120px, .4fr) 1fr; gap: 16px; }
.guifi-dynamic__details dt { font-weight: 700; }
.guifi-dynamic__details dd { margin: 0; }
@media (max-width: 767px) {
  .guifi-dynamic__filters > * { width: 100%; }
  .guifi-dynamic__results,
  .guifi-dynamic__terms { grid-template-columns: 1fr; }
  .guifi-dynamic__details > div { grid-template-columns: 1fr; gap: 4px; }
  .guifi-dynamic__download { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* --- Band: media + content ----------------------------------------------
 * Contract: desktop 2 kolommen · tablet 2 kolommen · mobiel gestapeld,
 * afbeelding vóór de tekst.
 * ------------------------------------------------------------------------ */

.guifi-rij--media-content .guifi-rij__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--guifi-gap);
  align-items: center;
}
.guifi-rij--media-content .guifi-rij__content { min-width: 0; }

.guifi-rij--v-boven .guifi-rij__inner { align-items: start; }
.guifi-rij--v-midden .guifi-rij__inner { align-items: center; }
.guifi-rij--v-onder .guifi-rij__inner { align-items: end; }

/* media_positie bepaalt alleen de kolomvolgorde op desktop/tablet. */
.guifi-rij--media-links .guifi-rij__media { order: 1; }
.guifi-rij--media-links .guifi-rij__content { order: 2; }
.guifi-rij--media-rechts .guifi-rij__media { order: 2; }
.guifi-rij--media-rechts .guifi-rij__content { order: 1; }

/* --- Band: titel + tekst ------------------------------------------------- */

.guifi-rij--titel-tekst .guifi-rij__tekst { columns: 1; }
.guifi-rij--titel-tekst.guifi-rij--kolommen-2 .guifi-rij__tekst { columns: 2; column-gap: var(--guifi-gap); }
.guifi-rij--titel-tekst.guifi-rij--kolommen-3 .guifi-rij__tekst { columns: 3; column-gap: var(--guifi-gap); }

/* --- Band: media galerij ------------------------------------------------- */

.guifi-galerij {
  display: grid;
  gap: var(--guifi-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.guifi-rij--kolommen-2 .guifi-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guifi-rij--kolommen-3 .guifi-galerij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Vier tot zes kolommen: een logowolk. Een fotogalerij blijft op twee of drie staan. */
.guifi-rij--kolommen-4 .guifi-galerij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guifi-rij--kolommen-5 .guifi-galerij { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guifi-rij--kolommen-6 .guifi-galerij { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .guifi-rij--kolommen-4 .guifi-galerij,
  .guifi-rij--kolommen-5 .guifi-galerij,
  .guifi-rij--kolommen-6 .guifi-galerij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* Logo's blijven op halve breedte leesbaar; één per rij maakt er een eindeloze lijst van. */
  .guifi-rij--kolommen-4 .guifi-galerij,
  .guifi-rij--kolommen-5 .guifi-galerij,
  .guifi-rij--kolommen-6 .guifi-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.guifi-galerij__item { min-width: 0; }
.guifi-galerij__link { color: inherit; text-decoration: none; }

/* box_verhouding — 'origineel' laat de afbeelding zijn eigen ratio houden. */
.guifi-rij--ratio-vierkant .guifi-galerij img { aspect-ratio: 1 / 1; }
.guifi-rij--ratio-liggend .guifi-galerij img { aspect-ratio: 4 / 3; }
.guifi-rij--ratio-breed .guifi-galerij img { aspect-ratio: 16 / 9; }

.guifi-rij--fit-cover .guifi-galerij img { object-fit: cover; width: 100%; }
.guifi-rij--fit-contain .guifi-galerij img { object-fit: contain; width: 100%; }
/* Niet bijsnijden betekent: ook geen opgelegde verhouding. Logo's hebben elk hun eigen vorm, en een
   vaste 4/3 maakte er dertien grote, halfleeg ogende vlakken van. */
.guifi-rij--fit-contain .guifi-galerij img { aspect-ratio: auto; max-height: 96px; height: auto; }


/* --- Band: kaarten / stappen --------------------------------------------
 * Contract: desktop volgt `kolommen` (2/3/4) · tablet max 2 · mobiel 1.
 * ------------------------------------------------------------------------ */

.guifi-kaarten {
  display: grid;
  /* --guifi-kaart-gap komt uit tokens.css (afstand tussen kaarten in het ontwerp). */
  gap: var(--guifi-kaart-gap, var(--guifi-gap));
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.guifi-rij--kaarten.guifi-rij--kolommen-1 .guifi-kaarten { grid-template-columns: minmax(0, 1fr); }
.guifi-rij--kaarten.guifi-rij--kolommen-2 .guifi-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guifi-rij--kaarten.guifi-rij--kolommen-3 .guifi-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guifi-rij--kaarten.guifi-rij--kolommen-4 .guifi-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guifi-rij--kaarten.guifi-rij--kolommen-5 .guifi-kaarten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.guifi-rij--kaarten.guifi-rij--kolommen-6 .guifi-kaarten { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Feature + kaarten: één beheersbare band, zodat redacteuren geen technische classes of
   geneste losse rijen hoeven te onderhouden. */
.guifi-rij--feature-kaarten .guifi-rij__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--guifi-gap);
}
.guifi-rij--feature-kaarten.guifi-rij--feature-rechts .guifi-feature { order: 2; }
.guifi-rij--feature-kaarten.guifi-rij--feature-rechts .guifi-kaarten { order: 1; }
.guifi-rij--feature-kaarten .guifi-feature { position: relative; min-width: 0; overflow: hidden; }
.guifi-rij--feature-kaarten .guifi-feature__afbeelding { width: 100%; height: 100%; object-fit: cover; display: block; }
.guifi-rij--feature-kaarten .guifi-feature__inhoud { position: absolute; inset: auto 0 0; padding: var(--guifi-space-l); z-index: 1; }
.guifi-rij--feature-kaarten .guifi-kaarten { align-content: start; }
.guifi-rij--feature-kaarten.guifi-rij--kolommen-1 .guifi-kaarten { grid-template-columns: minmax(0, 1fr); }
.guifi-rij--feature-kaarten.guifi-rij--kolommen-2 .guifi-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guifi-rij--feature-kaarten.guifi-rij--kolommen-3 .guifi-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.guifi-kaart {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 8px;
}
.guifi-rij--kaart-vlak .guifi-kaart { padding: 0; }
.guifi-rij--kaart-omlijnd .guifi-kaart { border: 1px solid currentColor; }
.guifi-rij--kaart-schaduw .guifi-kaart {
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.08);
  background: var(--guifi-rij-bg);
}

.guifi-kaart__link { color: inherit; text-decoration: none; display: contents; }

/* Kaartbeeld tot de rand van de kaart, zoals het gangbare kaartpatroon in de ontwerpen: het beeld
   vult de kaart, alleen de tekst krijgt binnenruimte. */
.guifi-rij--kaart-omlijnd .guifi-kaart,
.guifi-rij--kaart-schaduw .guifi-kaart { overflow: hidden; }
.guifi-rij--kaart-omlijnd .guifi-kaart__beeld,
.guifi-rij--kaart-schaduw .guifi-kaart__beeld { margin: -24px -24px 8px; }
.guifi-kaart__beeld img { width: 100%; }

.guifi-kaart__beeld img,
.guifi-kaart__icoon img { display: block; max-width: 100%; height: auto; }
.guifi-kaart__icoon img { width: 48px; height: 48px; object-fit: contain; }

.guifi-kaart__nummer {
  font-size: 14px;
  line-height: 1.2;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.guifi-kaart__titel {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}

.guifi-kaart__tekst {
  font-size: 16px; /* RULE WP-006 */
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
}
.guifi-kaart__tekst > :first-child { margin-top: 0; }
.guifi-kaart__tekst > :last-child { margin-bottom: 0; }

/* --- Band: accordeon / FAQ ----------------------------------------------
 * Contract: altijd één kolom. Op <details>/<summary> gebouwd: toetsenbord en
 * ctrl-F werken zonder JavaScript.
 * ------------------------------------------------------------------------ */

.guifi-accordeon {
  margin-top: 32px;
  border-top: 1px solid currentColor;
}

.guifi-accordeon__item { border-bottom: 1px solid currentColor; }

.guifi-accordeon__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.4;
  list-style: none; /* verbergt de standaard driehoek */
}
.guifi-accordeon__vraag::-webkit-details-marker { display: none; }

/* Zichtbare focus is hier niet optioneel: dit is het enige bedienbare element van de band. */
.guifi-accordeon__vraag:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.guifi-accordeon__teken {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  position: relative;
}
.guifi-accordeon__teken::before,
.guifi-accordeon__teken::after {
  content: "";
  position: absolute;
  background: currentColor;
  inset-block-start: 9px;
  inset-inline-start: 0;
  width: 20px;
  height: 2px;
}
.guifi-accordeon__teken::after { transform: rotate(90deg); transition: transform 0.15s ease; }
.guifi-accordeon__item[open] .guifi-accordeon__teken::after { transform: rotate(0deg); }

.guifi-accordeon__antwoord {
  padding: 0 0 20px;
  font-size: 16px; /* RULE WP-006 */
  line-height: 1.6;
  max-width: 72ch; /* leesbare regellengte, ook op brede schermen */
}
.guifi-accordeon__antwoord > :first-child { margin-top: 0; }
.guifi-accordeon__antwoord > :last-child { margin-bottom: 0; }

/* --- Formulier ----------------------------------------------------------- */
.guifi-formulier { max-width: 760px; margin-top: var(--guifi-gap); }
.guifi-formulier .gform_fields { display: grid; gap: 20px; }
.guifi-formulier label { font-weight: 600; }
.guifi-formulier input:not([type="checkbox"]):not([type="radio"]),
.guifi-formulier select,
.guifi-formulier textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid currentColor;
  border-radius: var(--guifi-radius, 0);
  font: inherit;
}
.guifi-formulier textarea { min-height: 144px; resize: vertical; }
.guifi-formulier .gfield_error input,
.guifi-formulier .gfield_error select,
.guifi-formulier .gfield_error textarea { border-width: 2px; }
.guifi-formulier .gform_button { min-height: 48px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .guifi-accordeon__teken::after { transition: none; }
}

/* --- Tablet: ≤1024px ----------------------------------------------------- */

/* Tussen tablet en de volle desktopbreedte passen vier of meer kaarten nog niet: bij 1025px bleef er
   198px per kaart over en liep de titel 148px buiten de kaart ("Sportfondsen Van Maanenbad"). Onder
   1248px blijven het er twee, net als op tablet. */
@media (min-width: 1025px) and (max-width: 1247px) {
  .guifi-rij--kaarten.guifi-rij--kolommen-4 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-5 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-6 .guifi-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .guifi-rijen { --guifi-gap: 32px; }

  /* Een paneel met 80px zijruimte past niet meer; het vlak blijft, de ruimte wordt de gutter. */
  .guifi-rij--breedte-paneel .guifi-rij__inner { padding-inline: var(--guifi-gutter); }

  /* Drie kolommen worden er twee — nooit drie op tablet. */
  .guifi-rij--kolommen-3 .guifi-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guifi-rij--kaarten.guifi-rij--kolommen-3 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-4 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-5 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-6 .guifi-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guifi-rij--titel-tekst.guifi-rij--kolommen-3 .guifi-rij__tekst { columns: 2; }
  .guifi-rij--feature-kaarten .guifi-rij__inner { grid-template-columns: minmax(0, 1fr); }
  .guifi-rij--feature-kaarten .guifi-feature,
  .guifi-rij--feature-kaarten .guifi-kaarten { order: initial; }
}

/* --- Mobiel: ≤767px ------------------------------------------------------ */

@media (max-width: 767px) {
  .guifi-rijen {
    --guifi-gutter: 16px;
    --guifi-gap: 24px;
    /* Spacing schaalt mee terug, anders wordt verticale ruimte op mobiel absurd. */
    --guifi-space-l: 48px;
    --guifi-space-xl: 64px;
  }

  /* media + content stapelt, met de afbeelding altijd eerst — ongeacht media_positie. */
  .guifi-rij--media-content .guifi-rij__inner { grid-template-columns: minmax(0, 1fr); }
  .guifi-rij--media-content .guifi-rij__media { order: 1; }
  .guifi-rij--media-content .guifi-rij__content { order: 2; }

  /* Alles wordt één kolom.
     Let op de selector-zwaarte: de desktop-regels zijn `.guifi-rij--titel-tekst.guifi-rij--kolommen-N`
     (twee classes op hetzelfde element). Een enkelvoudige `.guifi-rij--titel-tekst`-regel verliest
     daarvan óók binnen een media query — media queries verhogen specificity niet. */
  .guifi-rij--kolommen-2 .guifi-galerij,
  .guifi-rij--kolommen-3 .guifi-galerij { grid-template-columns: minmax(0, 1fr); }
  .guifi-rij--titel-tekst.guifi-rij--kolommen-1 .guifi-rij__tekst,
  .guifi-rij--titel-tekst.guifi-rij--kolommen-2 .guifi-rij__tekst,
  .guifi-rij--titel-tekst.guifi-rij--kolommen-3 .guifi-rij__tekst { columns: 1; }
  .guifi-rij--kaarten.guifi-rij--kolommen-1 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-2 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-3 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-4 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-5 .guifi-kaarten,
  .guifi-rij--kaarten.guifi-rij--kolommen-6 .guifi-kaarten { grid-template-columns: minmax(0, 1fr); }
  .guifi-rij--feature-kaarten.guifi-rij--kolommen-1 .guifi-kaarten,
  .guifi-rij--feature-kaarten.guifi-rij--kolommen-2 .guifi-kaarten,
  .guifi-rij--feature-kaarten.guifi-rij--kolommen-3 .guifi-kaarten { grid-template-columns: minmax(0, 1fr); }
  .guifi-rij--feature-kaarten .guifi-feature__inhoud { padding: 24px; }
  .guifi-rij--feature-kaarten .guifi-kaart__titel { overflow-wrap: anywhere; }

  /* Beide selectors: de groot-variant weegt zwaarder (twee classes) en zou deze regel anders
     ook op mobiel verslaan — een media query verhoogt geen specificity. */
  .guifi-rij__titel,
  .guifi-rij--titel-groot .guifi-rij__titel { font-size: clamp(24px, 7vw, 32px); }
  .guifi-rij--titel-groot .guifi-rij__titel { font-size: clamp(28px, 8vw, 40px); }

  /* Knoppen op volle breedte, anders staan ze op smalle schermen te dicht op elkaar
     en levert dat overlappende raakvlakken op. */
  .guifi-rij__knoppen { flex-direction: column; align-items: stretch; }
  .guifi-knop { text-align: center; }
}

/* iOS Safari zoomt in bij focus op inputs onder 16px (RULE WP-006). */
@media (max-width: 767px) {
  .guifi-rij input,
  .guifi-rij select,
  .guifi-rij textarea { font-size: 16px; }
}

/* <picture> met mobiele uitsnede: geen eigen box, de img blijft het element dat opgemaakt wordt. */
.guifi-rij__picture { display: contents; }

/* --- Kaartstijl: titel over het beeld ------------------------------------
 * Een beeldkaart waarbij de titel op de foto ligt in plaats van eronder. Zonder deze stijl kwam
 * de titel onder het beeld en werd elke kaart een kop hoger dan het ontwerp.
 * ------------------------------------------------------------------------ */
.guifi-rij--kaart-overlay .guifi-kaart {
  position: relative; overflow: hidden; border: 0; border-radius: 12px; padding: 0; background: none;
}
.guifi-rij--kaart-overlay .guifi-kaart__link { display: block; position: relative; }
.guifi-rij--kaart-overlay .guifi-kaart__beeld { margin: 0; }
.guifi-rij--kaart-overlay .guifi-kaart__afbeelding { display: block; width: 100%; height: 100%; object-fit: cover; }
/* De sluier loopt van niets naar donker, zodat het beeld bovenin open blijft. */
.guifi-rij--kaart-overlay .guifi-kaart::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}
.guifi-rij--kaart-overlay .guifi-kaart__titel,
.guifi-rij--kaart-overlay .guifi-kaart__tekst {
  position: absolute; z-index: 2; left: 20px; right: 20px; margin: 0; color: #fff;
}
.guifi-rij--kaart-overlay .guifi-kaart__titel { bottom: 20px; }
.guifi-rij--kaart-overlay .guifi-kaart:has(.guifi-kaart__tekst) .guifi-kaart__titel { bottom: 56px; }
.guifi-rij--kaart-overlay .guifi-kaart__tekst { bottom: 18px; font-size: 14px; }
.guifi-rij--kaart-overlay .guifi-kaart__nummer { position: absolute; z-index: 2; top: 16px; left: 20px; color: #fff; }