/**
 * Blogfoto-album: selectie van slideshowfoto's uit blogartikelen.
 *
 * Fase 1 is beoordelen op beeld, dus geen enkele foto wordt bijgesneden. Een
 * kolomstroom (CSS columns) laat staande en liggende foto's naast elkaar
 * vallen op hun eigen hoogte; een views-grid zou ze in gelijke cellen dwingen.
 */

.view-blogfoto-album .view-content {
  /* Views zet hier ook Bootstrap's .row op, en die maakt er een flexbox van.
     Zonder display:block doet columns niets en vallen de foto's alsnog in
     kolommen van gelijke hoogte. */
  display: block;
  margin: 0;
  columns: 4 220px;
  column-gap: 0.75rem;
}

.view-blogfoto-album .views-row {
  position: relative;
  break-inside: avoid;
  margin: 0 0 0.75rem;
  line-height: 0;
}

.view-blogfoto-album .blogfoto__beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* Datum-overlay op de foto */
.view-blogfoto-album .blogfoto__datum {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 3;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---------------------------------------------------------------------------
 * Fase 1: de hele foto is de knop.
 *
 * Alleen op de twee fase-1-displays. In de fase-2-schermen staan twee vlaggen
 * en een bewerklink naast elkaar; daar mag de foto niet een van die acties
 * opslokken.
 * ------------------------------------------------------------------------ */

:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop {
  position: static;
}

:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .flag a {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  /* De linktekst is het klikvlak, niet het bijschrift: die verdwijnt. */
  font-size: 0;
  color: transparent;
  text-decoration: none;
}

/* Selectiecirkel rechtsboven: leeg zolang de foto er niet op staat. */
:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .flag a::after {
  content: "+";
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 2.2rem;
  text-align: center;
}

:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .flag a:hover::after,
:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .flag a:focus::after {
  background: rgba(0, 0, 0, 0.65);
}

/* Staat de foto op de lijst: oranje cirkel met vinkje. Let op de selector -
   die moet even zwaar wegen als de basisregel hierboven, anders wint het grijze
   plusje en zie je na het aanklikken geen verandering in de cirkel. */
:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .action-unflag a::after {
  content: "\2713";
  border-color: #fff;
  background: #e8590c;
}

/* De focusring van de browser is per browser een andere kleur (en soms paars).
   Op een werkscherm waar je tientallen keren klikt, hoort die bij de oranje
   markering te passen in plaats van ermee te concurreren. */
:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .flag a:focus,
:is(.view-display-id-page_grid, .view-display-id-page_swipe) .blogfoto__knop .flag a:focus-visible {
  outline: 3px solid #e8590c;
  outline-offset: -3px;
}

/* En een dik oranje kader, zodat je van een afstand ziet waar je bent.
   Oranje en niet groen: het moet opvallen tegen gras en lucht, en niet
   verward worden met de paarse accenten van het thema. */
.view-blogfoto-album:is(.view-display-id-page_grid, .view-display-id-page_swipe) .views-row:has(.action-unflag) {
  outline: 6px solid #e8590c;
  outline-offset: -6px;
}

/* ---------------------------------------------------------------------------
 * Fase 2: gewone knoppen onder de foto, want er zijn meer acties.
 * ------------------------------------------------------------------------ */

:is(.view-display-id-page_longlist, .view-display-id-page_definitief) .views-row {
  line-height: 1.3;
}

:is(.view-display-id-page_longlist, .view-display-id-page_definitief) .flag a,
:is(.view-display-id-page_longlist, .view-display-id-page_definitief) .views-field-edit-media a {
  display: inline-block;
  margin: 0.15rem 0.25rem 0 0;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  background: #eee;
  font-size: 0.85rem;
  text-decoration: none;
}

:is(.view-display-id-page_longlist, .view-display-id-page_definitief) .action-unflag a {
  background: #e8590c;
  color: #fff;
}

.view-blogfoto-album .blogfoto__titel,
.view-blogfoto-album .blogfoto__kamp {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * Swipen: een scroll-strip met scroll-snap.
 *
 * Bewust geen carrousel-bibliotheek. Slick rekende de slidebreedte bij
 * initialisatie verkeerd uit waardoor de foto klein bleef; scroll-snap doet
 * hetzelfde werk in CSS, veegt native op touch en kan niet half initialiseren.
 * Een foto per scherm, zo groot als hij past.
 * ------------------------------------------------------------------------ */

.view-blogfoto-album.view-display-id-page_swipe .view-content {
  display: flex;
  /* .row van Bootstrap zet flex-wrap: wrap; dan breekt de strip in regels. */
  flex-wrap: nowrap;
  margin: 0;
  overflow-x: auto;
  columns: auto;
  gap: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.view-blogfoto-album.view-display-id-page_swipe .views-row {
  /* Beeld en knop liggen in DEZELFDE grid-cel. Die cel is precies zo groot
     als de foto, dus de selectiecirkel valt op de foto en niet in de lege
     ruimte ernaast - bij een staande foto net zo goed als bij een liggende. */
  display: grid;
  grid-template-areas: "stapel";
  /* place-CONTENT, niet place-items: de track krijgt zo de breedte van de
     foto en wordt als geheel gecentreerd. Met place-items vulde de track de
     hele rij en viel de selectiecirkel naast het beeld (gemeten: knop 1128px
     breed tegen een foto van 984px). */
  place-content: center;
  flex: 0 0 100%;
  min-height: 82vh;
  margin: 0;
  scroll-snap-align: center;
}

.view-blogfoto-album.view-display-id-page_swipe .views-row > .views-field {
  grid-area: stapel;
}

.view-blogfoto-album.view-display-id-page_swipe .views-field-link-flag {
  position: relative;
  z-index: 2;
  align-self: stretch;
  justify-self: stretch;
}

.view-blogfoto-album.view-display-id-page_swipe .blogfoto__beeld {
  line-height: 0;
}

.view-blogfoto-album.view-display-id-page_swipe .blogfoto__beeld img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
}

/* De vlagknop dekt de foto, met een ruimere cirkel dan in het overzicht. */
.view-blogfoto-album.view-display-id-page_swipe .blogfoto__knop {
  position: absolute;
  inset: 0;
}

.view-blogfoto-album.view-display-id-page_swipe .blogfoto__knop .flag,
.view-blogfoto-album.view-display-id-page_swipe .blogfoto__knop .flag a {
  position: absolute;
  inset: 0;
}

.view-blogfoto-album.view-display-id-page_swipe .blogfoto__knop .flag a::after {
  top: 1rem;
  right: 1rem;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 2.1rem;
  line-height: 3rem;
}

.view-blogfoto-album.view-display-id-page_swipe .views-row > .views-field-created {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  pointer-events: none;
}

.view-blogfoto-album.view-display-id-page_swipe .blogfoto__datum {
  top: auto;
  left: auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.75);
}

.view-blogfoto-album.view-display-id-page_swipe .views-row:has(.action-unflag) {
  outline-offset: -10px;
}

/* ---------------------------------------------------------------------------
 * Swipen is een werkscherm: kruimelpad en paginatitel kosten alleen hoogte.
 *
 * De body heeft geen eigen klasse per views-display, vandaar :has() op de
 * display-wrapper. Zo blijven kruimelpad en titel op de andere drie schermen
 * gewoon staan.
 * ------------------------------------------------------------------------ */

body:has(.view-display-id-page_swipe) #block-bario-sub-page-title,
body:has(.view-display-id-page_swipe) #block-bario-sub-breadcrumbs,
body:has(.view-display-id-page_swipe) .block-page-title-block,
body:has(.view-display-id-page_swipe) .breadcrumb {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Leesbaarheid van de beheertabs (Weergeven / Bewerken / Verwijderen / …).
 *
 * colors.css zet `.nav-link { color: rgb(231,231,231) }` voor het donkere
 * hoofdmenu. De local tasks krijgen diezelfde Bootstrap-klasse, maar staan op
 * een witte achtergrond - en dan is bijna-wit op wit niet te lezen. Deze regels
 * raken alleen de tabs, niet het menu.
 * ------------------------------------------------------------------------ */

.tabs .nav-link,
.tabs ul.primary li a,
nav.tabs a,
.block-local-tasks-block a,
.region-content .nav-tabs .nav-link {
  color: #292929;
}

.tabs .nav-link:hover,
.tabs .nav-link:focus,
.tabs ul.primary li a:hover,
.tabs ul.primary li a:focus,
nav.tabs a:hover,
nav.tabs a:focus,
.block-local-tasks-block a:hover,
.block-local-tasks-block a:focus,
.region-content .nav-tabs .nav-link:hover,
.region-content .nav-tabs .nav-link:focus {
  color: #006E83;
}

/* ===========================================================================
 * Slideshowfoto's kiezen (/slideshowfotos en /slideshowfotos/swipe)
 *
 * Elke tegel is een grid met twee banen: de foto, en daaronder een smalle
 * balk met de ster. Zo sluit het oranje kader strak om het beeld (niet om de
 * hele tegel met knoppen erbij) en staat de ster ernaast in plaats van erin.
 *
 *   - Highlight: klikvlak over de foto, spatiebalk of muis. Oranje kader.
 *   - Frontpage: de ster onder de foto. Wit als hij uit staat, geel als hij
 *     aan staat.
 * ======================================================================== */

.view-slideshowfotos .view-content {
  display: block;
  margin: 0;
  columns: 3 320px;
  column-gap: 0.75rem;
}

.view-slideshowfotos .views-row {
  /* auto-kolom + gecentreerde inhoud: de cel krijgt de breedte van de foto,
     niet die van de kolom. Anders valt het kader met een marge om het beeld. */
  display: grid;
  /* Vier categoriekolommen: Deelnemers, Leiding, Keuken, Ouders. Keuken staat
     bewust naast Leiding - je selecteert keukenfoto's meestal terwijl je de
     leidingfoto's doorloopt. */
  /* Zes auto-kolommen (publiceren, highlight, frontpage, bewerken, roteren,
     bijsnijden) en dan pas de vier gelijke categoriekolommen. Telt dit niet op tot het aantal kolommen
     in grid-template-areas hieronder, dan schuift de 1fr-verdeling op en valt
     de laatste categorie in een impliciete auto-kolom - dat maakte Vrienden
     smaller dan de rest (gezien 23-09-2026, na het toevoegen van `pub`). */
  grid-template-columns: auto auto auto auto auto auto repeat(4, 1fr);
  grid-template-areas:
    "kop kop kop    kop    kop    kop  kop  kop  kop  kop"
    "bld bld bld    bld    bld    bld  bld  bld  bld  bld"
    "pub hl  acties bewerk roteer snij cat1 cat2 cat3 cat4";
  justify-content: center;
  break-inside: avoid;
  margin: 0 0 1rem;
  line-height: 0;
}

/* Het RASTER (/slideshowfotos): twee kolommen, en onder de foto twee rijen -
   de zes ronde knoppen verdeeld over de breedte, daaronder de vier categorieën
   even breed. In één rij paste het niet meer sinds roteren, bijsnijden en
   publiceren erbij kwamen: bij drie kolommen was de knoppenbalk breder dan de
   tegel, schoven de tegels over elkaar en viel er niets meer aan te klikken
   (Richard, 24-09-2026). Twaalf gelijke kolommen, want 6 knoppen x 2 en
   4 categorieën x 3 komen allebei op twaalf uit. minmax(0, 1fr) laat een cel
   krimpen onder zijn inhoud, zodat een lange bestandsnaam de tegel niet
   oprekt. Het swipe-scherm is breed genoeg en houdt zijn ene rij. */
.view-slideshowfotos.view-display-id-page_grid .view-content {
  columns: 2 520px;
  column-gap: 2rem;
}

.view-slideshowfotos.view-display-id-page_grid .views-row {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "kop  kop  kop  kop  kop    kop    kop    kop    kop    kop    kop  kop"
    "bld  bld  bld  bld  bld    bld    bld    bld    bld    bld    bld  bld"
    "pub  pub  hl   hl   acties acties bewerk bewerk roteer roteer snij snij"
    "cat1 cat1 cat1 cat2 cat2   cat2   cat3   cat3   cat3   cat4   cat4 cat4";
  margin: 0 0 2rem;
}

/* Een ronde knop midden in zijn cel, zonder de rechterpadding van de
   eenrijsvariant (die was de tussenruimte in de rij). */
.view-slideshowfotos.view-display-id-page_grid :is(.views-field-link-flag-publiceer, .views-field-link-flag-6, .views-field-link-flag-1, .views-field-edit-node, .views-field-nothing-1, .views-field-nothing-2) {
  justify-content: center;
  padding-right: 0;
}

/* De categorieën op hun eigen rij, met wat lucht tussen de labels. */
.view-slideshowfotos.view-display-id-page_grid :is(.views-field-link-flag-2, .views-field-link-flag-3, .views-field-link-flag-7, .views-field-link-flag-4) {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

/* De kopregel blijft op één regel, zodat elke tegel even hoog is en de twee
   kolommen gelijk oplopen (Richard, 24-09-2026). Een tweede regel bij een
   lange bestandsnaam schoof alles eronder een regel op. De bestandsnaam
   krimpt als eerste en krijgt een beletselteken; de kenmerken krimpen pas
   daarna, en de afmetingen (laatste deel) nooit. */
.view-slideshowfotos.view-display-id-page_grid .views-field-nothing {
  min-width: 0;
}

.view-slideshowfotos.view-display-id-page_grid .slidefoto__kop {
  flex-wrap: nowrap;
}

.view-slideshowfotos.view-display-id-page_grid :is(.slidefoto__titel, .slidefoto__deel) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-slideshowfotos.view-display-id-page_grid .slidefoto__titel {
  flex: 0 100 auto;
  min-width: 6em;
}

.view-slideshowfotos.view-display-id-page_grid .slidefoto__deel {
  flex: 0 1 auto;
}

.view-slideshowfotos.view-display-id-page_grid .slidefoto__kop .slidefoto__deel:last-child {
  flex-shrink: 0;
}

.view-slideshowfotos .views-field-field-slideshow-image {
  grid-area: bld;
  position: relative;
  line-height: 0;
}

.view-slideshowfotos .slidefoto__beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* Highlight ligt over de foto, in dezelfde cel. */
.view-slideshowfotos .views-field-link-flag {
  grid-area: bld;
  position: relative;
  z-index: 2;
  align-self: stretch;
  justify-self: stretch;
}

.view-slideshowfotos .slidefoto__highlight,
.view-slideshowfotos .slidefoto__highlight .flag,
.view-slideshowfotos .slidefoto__highlight .flag a {
  position: absolute;
  inset: 0;
  display: block;
}

.view-slideshowfotos .slidefoto__highlight .flag a {
  font-size: 0;
  color: transparent;
  text-decoration: none;
}

.view-slideshowfotos .slidefoto__highlight .flag a::after {
  content: "\2606";               /* open ster: highlight staat uit */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: center;
}

.view-slideshowfotos .slidefoto__highlight .action-unflag a::after {
  content: "\2605";               /* gevulde ster: highlight staat aan */
  border-color: #fff;
  background: #e8590c;
}

/* Het kader zit om de FOTO, niet om de tegel. De tweede regel is geen luxe:
   een kaderregel uit het blogfoto-album kan via een display-klasse alsnog op
   deze rij landen, en dan loopt het kader om de labels en de knoppen heen. */
.view-slideshowfotos .views-row {
  outline: none;
}

.view-slideshowfotos .views-row:has(.slidefoto__highlight .action-unflag) .views-field-field-slideshow-image {
  outline: 5px solid #e8590c;
  outline-offset: -5px;
}

/* De vier fotocategorieen als aanvinkbare labels onder de foto; ze zetten
   allemaal field_foto_categorie. Er stond tot 23-09-2026 een vijfde label
   'Vrienden' bij, maar dat was geen categorie: het zette dezelfde vlag als de
   ster ernaast. Zie scripts/blogfoto/19-vriendenknop-weg.php. */
.view-slideshowfotos .views-field-link-flag-2 { grid-area: cat1; }  /* Deelnemers */
.view-slideshowfotos .views-field-link-flag-3 { grid-area: cat2; }  /* Leiding */
.view-slideshowfotos .views-field-link-flag-7 { grid-area: cat3; }  /* Keuken */
.view-slideshowfotos .views-field-link-flag-4 { grid-area: cat4; }  /* Ouders */

.view-slideshowfotos .views-field-link-flag-2,
.view-slideshowfotos .views-field-link-flag-3,
.view-slideshowfotos .views-field-link-flag-4,
.view-slideshowfotos .views-field-link-flag-7 {
  padding: 0.5rem 0.25rem 0 0.25rem;
  line-height: 1;
}

.view-slideshowfotos .slidefoto__cat .flag a {
  /* Zelfde blokknop als a.button.grijs uit custom.css: whitesmoke met een
     lichtgrijze rand en vet schrift, met links een vinkvakje erin. Even hoog
     als de ronde knoppen ernaast, zodat de balk een rustige lijn houdt. */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 3rem;
  padding: 10px 14px 10px 42px;
  border: 1px solid lightgray;
  border-radius: 4px;
  background: whitesmoke;
  color: #3c3c3b;
  font-family: Rambla, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Het vakje voor het label. */
.view-slideshowfotos .slidefoto__cat .flag a:hover,
.view-slideshowfotos .slidefoto__cat .flag a:focus {
  opacity: 0.8;
}

/* Het vinkvakje links in de knop. */
.view-slideshowfotos .slidefoto__cat .flag a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid #8a8a8a;
  border-radius: 3px;
  background: #fff;
}

/* Het vierde label hergebruikt de Highlight-vlag, want block_vrienden filtert
   op exposure en niet op een fotocategorie. De vlag heet daardoor "Highlight
   aan"; op dit scherm hoort er Vrienden te staan. */
.view-slideshowfotos .slidefoto__cat--vrienden .flag a {
  font-size: 0;
}

.view-slideshowfotos .slidefoto__cat--vrienden .flag a::after {
  content: "Vrienden";
  position: static;
  margin: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

/* Bij Vrienden is ::after de tekst, dus het vinkje kan daar niet in. Het vakje
   zelf kleurt wel groen; dat is genoeg onderscheid. */
.view-slideshowfotos .slidefoto__cat--vrienden .action-unflag a::after {
  content: "Vrienden";
  position: static;
  margin: 0;
  color: inherit;
  font-size: 14px;
}

/* Aangevinkt: het vakje kleurt groen met een vinkje, en de knop krijgt
   dezelfde randkleur - zoals a.button.bijgewerkt in custom.css. */
.view-slideshowfotos .slidefoto__cat .action-unflag a {
  border-color: #28881e;
}

.view-slideshowfotos .slidefoto__cat .action-unflag a::before {
  border-color: #28881e;
  background: #28881e;
}

.view-slideshowfotos .slidefoto__cat .action-unflag a::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -10px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* De kopregel boven de foto: naam, kamp, jaar, type en de bronafmetingen.
   Boven en niet onder, want bij een schermvullende foto valt alles wat eronder
   staat buiten beeld. De afmetingen horen erbij omdat de headerstijlen tot
   3840 px vragen: is de bron veel smaller, dan wordt hij opgeblazen en oogt
   hij onscherp, en dat zie je aan de foto zelf niet. */
.view-slideshowfotos .views-field-nothing {
  grid-area: kop;
  padding-bottom: 0.3rem;
  color: #666;
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: left;
}

/* De flex hoort op deze wrapper en niet op de views-field eromheen: de spans
   zijn kinderen van .slidefoto__kop, en alleen hier is er breedte om de
   afmetingen naar rechts te duwen. Gemeten 23-09-2026: de wrapper was 352 px
   bij een foto van 1280 px. */
.view-slideshowfotos .slidefoto__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: 100%;
}

.view-slideshowfotos .slidefoto__titel {
  color: #3c3c3b;
  /* Zelfde maat als een h2 in dit thema: de titel is waar je op zoekt terwijl
     je doorswipet, de rest is bijvangst. */
  font-family: Rambla, "Source Sans 3", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-right: 0.15rem;
}

/* De afmetingen helemaal rechts. Het is het laatste deel in de rij en het enige
   dat je met een oogopslag wilt kunnen scannen over meerdere foto's heen: staat
   er 1600 x 1200, dan wordt hij in de header opgeblazen. */
.view-slideshowfotos .slidefoto__kop .slidefoto__deel:last-child {
  margin-left: auto;
  padding-left: 1rem;
}

.view-slideshowfotos .slidefoto__kop .slidefoto__deel:last-child::before {
  content: none;
}

/* Elk deel achter een punt, zodat een ontbrekend deel geen los teken
   achterlaat. */
.view-slideshowfotos .slidefoto__deel::before {
  content: " \00b7 ";
  color: #aaa;
}

/* De ster en de bewerkknop staan links van de categorieknoppen, op dezelfde
   lijn als die knoppen. Allebei dezelfde cel-opmaak: gecentreerd in de baan en
   zonder eigen padding, want elke losse padding kantelt er een van de twee
   uit. */
.view-slideshowfotos .views-field-edit-node,
.view-slideshowfotos .views-field-link-flag-1,
.view-slideshowfotos .views-field-link-flag-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dezelfde aanloop als de categorieknoppen ernaast: die cel heeft 8px
     padding-top van de views-veldopmaak, dus zonder dit staan de ronde knoppen
     vier pixels hoger. */
  align-self: start;
  padding: 8px 0 0;
  line-height: 1;
}

.view-slideshowfotos .views-field-edit-node {
  grid-area: bewerk;
  padding-right: 0.5rem;
}

.view-slideshowfotos .slidefoto__bewerk a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid #b9b9b9;
  border-radius: 50%;
  background: #fff;
  /* De tekst "bewerken" maakt plaats voor een potlood. Bewust een unicode-teken
     en geen Material Symbol: dat lettertype is hier een subset, en een
     ontbrekend icoon rendert als de kale naam. */
  font-size: 0;
  text-align: center;
  text-decoration: none;
}

.view-slideshowfotos .slidefoto__bewerk a::after {
  content: "\270E";
  display: block;
  color: #444;
  font-size: 1.4rem;
  line-height: 1;
}

.view-slideshowfotos .slidefoto__bewerk a:hover {
  border-color: #666;
  background: #f2f2f2;
}

/* Frontpage: de ster, buiten het beeld. */
.view-slideshowfotos .views-field-link-flag-1 {
  grid-area: acties;
  padding-right: 0.5rem;
}

/* Highlight als gewone knop, naast de ster. Dezelfde vlag als het klikvlak
   over de foto, dus beide tonen altijd dezelfde stand. */
.view-slideshowfotos .views-field-link-flag-6 {
  grid-area: hl;
  padding-right: 0.5rem;
}

.view-slideshowfotos .slidefoto__hlknop .flag a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid #b9b9b9;
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  text-decoration: none;
}

.view-slideshowfotos .slidefoto__hlknop .flag a::after {
  content: "\2606";               /* open ster: highlight staat uit */
  display: block;
  color: #444;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.view-slideshowfotos .slidefoto__hlknop .action-unflag a {
  border-color: #e18a1e;
  background: #e18a1e;
}

.view-slideshowfotos .slidefoto__hlknop .action-unflag a::after {
  content: "\2605";                 /* gevulde ster zodra highlight aan staat */
  color: #fff;
}

.view-slideshowfotos .slidefoto__hlknop .flag a:hover {
  border-color: #666;
}

.view-slideshowfotos .slidefoto__frontpage .flag a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 0;
  text-decoration: none;
}

.view-slideshowfotos .slidefoto__frontpage .flag a::after {
  /* Bokaal = winnen = deze foto haalt de voorpagina. De ster is verhuisd naar
     highlight, zodat de twee vlaggen niet langer hetzelfde symbool delen.
     'trophy' zit in de Material Symbols-subset van dit thema (zie
     fonts/MATERIAL-SYMBOLS.md); een naam die er niet in staat rendert als kale
     tekst, dus niet zomaar een ander icoon invullen. */
  content: "trophy";
  font-family: 'Material Symbols Outlined', sans-serif;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: block;
  color: #fff;                      /* uit: wit */
  font-size: 2.1rem;
  line-height: 1;
  /* Een dunne contour, anders is een witte ster op wit onzichtbaar. */
  text-shadow:
     1px 0 0 #8a8a8a, -1px 0 0 #8a8a8a,
     0 1px 0 #8a8a8a, 0 -1px 0 #8a8a8a;
}

.view-slideshowfotos .slidefoto__frontpage .flag a:hover::after,
.view-slideshowfotos .slidefoto__frontpage .flag a:focus::after {
  color: #ffe9a8;
}

/* Aan: geel en gevuld. */
.view-slideshowfotos .slidefoto__frontpage .action-unflag a::after {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  color: #ffc400;
  text-shadow:
     1px 0 0 #b07d00, -1px 0 0 #b07d00,
     0 1px 0 #b07d00, 0 -1px 0 #b07d00;
}

/* Het swipescherm is een werkscherm: laat de contentkolom zelf breed worden,
   zodat de foto vrijwel het hele beschikbare vlak vult. Bewust geen uitbraak
   met 100vw: dat telt het gebied onder de admin-sidebar mee en schuift het
   beeld links uit beeld. */
body:has(.view-slideshowfotos.view-display-id-page_swipe) .container,
body:has(.view-slideshowfotos.view-display-id-page_swipe) .container-sm,
body:has(.view-slideshowfotos.view-display-id-page_swipe) .container-md,
body:has(.view-slideshowfotos.view-display-id-page_swipe) .container-lg,
body:has(.view-slideshowfotos.view-display-id-page_swipe) .container-xl {
  max-width: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* De foto zo hoog mogelijk op de pagina: dit scherm heeft geen kop en geen
   kruimelpad meer, dus de ruimte daarboven mag weg. */
body:has(.view-slideshowfotos.view-display-id-page_swipe) .region-content,
body:has(.view-slideshowfotos.view-display-id-page_swipe) .main-content,
body:has(.view-slideshowfotos.view-display-id-page_swipe) main {
  padding-top: 0;
  margin-top: 0;
}

body:has(.view-slideshowfotos.view-display-id-page_swipe) .view-filters {
  margin: 0 0 0.4rem;
}

body:has(.view-slideshowfotos.view-display-id-page_swipe) .view-filters .form-item,
body:has(.view-slideshowfotos.view-display-id-page_swipe) .view-filters .form-actions {
  margin-bottom: 0;
}

/* Swipen: een foto per scherm, de ster ernaast. */
.view-slideshowfotos.view-display-id-page_swipe .view-content {
  display: flex;
  flex-wrap: nowrap;
  columns: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.view-slideshowfotos.view-display-id-page_swipe .views-row {
  flex: 0 0 100%;
  align-content: start;
  min-height: 78vh;
  margin: 0;
  scroll-snap-align: center;
}

.view-slideshowfotos.view-display-id-page_swipe .slidefoto__beeld img {
  width: 100%;
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

.view-slideshowfotos.view-display-id-page_swipe .views-row {
  padding: 0 1rem;
}



.view-slideshowfotos.view-display-id-page_swipe .slidefoto__frontpage .flag a::after {
  font-size: 2.6rem;
}

/* Soepeler mikken: de hele knoppenbalk is 3rem hoog. Een onzichtbaar vergroot
   klikvlak via een pseudo-element leek eleganter, maar dat werkt maar aan een
   kant: de cel ernaast komt later in de DOM en vangt de klik af zodra het vlak
   eronder schuift. Een knop die echt zo groot is als zijn doel heeft dat
   probleem niet. */
.view-slideshowfotos .slidefoto__hlknop .flag a,
.view-slideshowfotos .slidefoto__frontpage .flag a,
.view-slideshowfotos .slidefoto__bewerk a {
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

/* Zichtbare reactie op aanwijzen, zodat duidelijk is dat je goed zit. */
.view-slideshowfotos .slidefoto__frontpage .flag a:hover::after {
  color: #f5c518;
}


/* ========================================================================
   FILTERBALK van de fotokiezer (23-09-2026)

   Met één filter viel het niet op, met twee wel: het Kamp-filter draait op
   Chosen en is daardoor hoger dan een gewone select, het label van de een stond
   ernaast en van de ander erboven, en de knoppen Toon en Alles stapelden.
   Hieronder krijgt elk filter dezelfde vorm - label boven het veld - en liggen
   alle onderkanten op één lijn.
   ======================================================================== */
:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form {
  margin-bottom: 1.5rem;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form > div,
:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form > .d-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 0.75rem 1rem !important;
  margin: 0 !important;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .js-form-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form label {
  display: block !important;
  margin: 0 0 0.2rem 0 !important;
  color: #555 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Chosen en gewone select: exact dezelfde hoogte, breedte en uitlijning */
:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .chosen-container,
:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form select.form-select {
  min-width: 10rem !important;
  height: 2.4rem !important;
  margin: 0 !important;
  font-size: 0.88rem !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .chosen-container .chosen-single {
  height: 2.4rem !important;
  line-height: 2.3rem !important;
  padding: 0 0.75rem !important;
  font-size: 0.88rem !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #ced4da !important;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .chosen-container .chosen-single div {
  top: 3px !important;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .form-actions {
  display: flex !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .form-actions .button,
:is(.view-slideshowfotos, .view-blogfoto-album) .views-exposed-form .form-actions .btn {
  height: 2.4rem !important;
  padding: 0 1.2rem !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* De publiceerknop (vlag slideshow_publiceren, 24-09-2026): vooraan in het
   rijtje, in de kolom `pub`. Dezelfde ronde vorm en celopmaak als ster, beker
   en potlood. Het symbool is de aan/uit-knop: grijs = concept, wit op groen =
   gepubliceerd. Getekend als SVG-masker en niet als teken: U+23FB ontbreekt in
   de meeste lettertypen en power_settings_new zit niet in de Material
   Symbols-subset. Een masker neemt de kleur van background-color over, dus de
   stand stuurt de kleur zoals bij een teken. */
.view-slideshowfotos .views-field-link-flag-publiceer {
  grid-area: pub;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  padding: 8px 0.5rem 0 0;
  line-height: 1;
}

.view-slideshowfotos .slidefoto__pubknop .flag a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid #b9b9b9;
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

.view-slideshowfotos .slidefoto__pubknop .flag a::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #9a9a9a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.6 6.6a7.5 7.5 0 1 0 10.8 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v8'/%3E%3Cpath d='M6.6 6.6a7.5 7.5 0 1 0 10.8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.view-slideshowfotos .slidefoto__pubknop .flag a:hover {
  border-color: var(--ozk-groen, #28881e);
}

.view-slideshowfotos .slidefoto__pubknop .flag a:hover::after {
  background-color: var(--ozk-groen, #28881e);
}

.view-slideshowfotos .slidefoto__pubknop .action-unflag a {
  border-color: var(--ozk-groen, #28881e);
  background: var(--ozk-groen, #28881e);
}

.view-slideshowfotos .slidefoto__pubknop .action-unflag a::after,
.view-slideshowfotos .slidefoto__pubknop .action-unflag a:hover::after {
  background-color: #fff;
}

/* De conceptbadge: in een gemengde lijst (statusfilter op "Alles") moet je in
   één oogopslag zien welke foto nog niet gepubliceerd is. Hij ligt over het
   beeld, linksboven, tegenover de highlight-ster rechtsboven. Gepubliceerde
   foto's renderen dit veld niet (hide_empty), dus er is dan ook geen vlak. */
.view-slideshowfotos .views-field-status {
  grid-area: bld;
  align-self: start;
  justify-self: start;
  z-index: 3;
  margin: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #e8710a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  pointer-events: none;
}