/* OpenEvent — bewust sober: het thema bepaalt lettertype en kleuren, dit legt alleen
   de structuur vast. Alle maten in rem, zodat het meeschaalt met de themagrootte. */

:root {
  /* De kaartachtergrond. Eén plek, zodat de workshopkaart en de plaatskaart
     niet uit elkaar kunnen gaan lopen. */
  --oe-card-bg: #f6f6f8;
  --oe-card-line: rgba(0, 0, 0, .09);
}

.oe-workshops { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .oe-workshops { grid-template-columns: repeat(2, 1fr); } }

.oe-workshop { display: flex; flex-direction: column; border: 1px solid var(--oe-card-line);
  border-radius: .75rem; overflow: hidden; background: var(--oe-card-bg); }
.oe-workshop--full { opacity: .65; }
.oe-workshop__image img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.oe-workshop__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .4rem; }
.oe-workshop__city { margin: 0 0 .15rem; }
.oe-workshop__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.oe-workshop__title a { text-decoration: none; color: inherit; }
.oe-workshop__title a:hover { text-decoration: underline; }
.oe-workshop__when { margin: 0; opacity: .8; }
.oe-workshop__meta { margin: .35rem 0 .75rem; display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.oe-workshop__price { font-weight: 700; }
.oe-workshop__seats { font-size: .9rem; opacity: .8; }
.oe-workshop__seats.is-full { opacity: 1; font-weight: 600; }

.oe-button { display: inline-block; padding: .6rem 1.15rem; border-radius: .4rem;
  background: #00008B; color: #fff; text-decoration: none; font-weight: 600;
  border: 0; cursor: pointer; font-size: 1rem; align-self: flex-start; }
.oe-button:hover { background: #1e3a8a; color: #fff; }
.oe-button--disabled { background: rgba(0,0,0,.15); color: rgba(0,0,0,.55); cursor: not-allowed; }
.oe-button--primary { padding: .75rem 1.5rem; font-size: 1.05rem; }

/* Foto en het grijze blok naast elkaar op een breed scherm. */
.oe-single__top { display: grid; gap: 1.5rem; margin: 1.75rem 0; align-items: start; }
@media (min-width: 62rem) {
  /* Paneel links, de foto's daarnaast. */
  .oe-single__top { grid-template-columns: 22rem minmax(0, 1fr); gap: 2rem; }
}

/* Op een smal scherm eerst de foto's en dan pas het grijze blok: een bezoeker
   die naar beneden scrolt wil de workshop zien, niet eerst een tabel. */
@media (max-width: 61.99rem) {
  .oe-single__fotos { order: 1; }
  .oe-single__panel { order: 2; }
}

/* Drie foto's staan mooi in 4:5, twee in het vierkant, en met één foto valt hij
   terug op een liggende 3:2. De verhouding hangt dus af van het aantal, niet van
   wat er toevallig is geüpload. */
.oe-single__fotos { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.oe-single__fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oe-single__fotos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.oe-single__fotos--2 .oe-single__image img { aspect-ratio: 1 / 1; max-height: none; }
.oe-single__fotos--3 .oe-single__image img { aspect-ratio: 4 / 5; max-height: none; }
.oe-single__image { margin: 0; }

/* Een staande foto liep anders tot ver voorbij het grijze blok door: 954 breed en
   ruim 1500 hoog. Dezelfde verhouding als de workshopkaarten, met een plafond
   voor brede schermen. */
.oe-single__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;      /* geldt bij één foto; twee en drie zetten hem hieronder om */
  max-height: 30rem;
  object-fit: cover;
  object-position: center;
  border-radius: .75rem;
}

.oe-single__panel { display: flex; flex-direction: column; gap: 1rem; }

.oe-single__facts { display: grid; gap: .7rem; margin: 0; padding: 1.15rem 1.25rem;
  border-radius: .75rem; background: var(--oe-card-bg); border: 1px solid var(--oe-card-line); }
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .oe-single__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* De knop vult het blok, zodat hij niet half verloren rechts staat. */
.oe-single__cta { align-self: stretch; text-align: center; margin: 0; }
.oe-single__cta-note { margin: -.35rem 0 0; font-size: .85rem; opacity: .7; text-align: center; }
.oe-fact__label { display: block; font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; margin-bottom: .15rem; }
.oe-fact__value { display: block; font-weight: 400; font-size: .95rem; line-height: 1.4; }
.oe-fact--prijs .oe-fact__value strong, .oe-workshop__price strong { font-weight: 700; }
.oe-workshop__price { font-weight: 400; }

.oe-signup { margin: 2.5rem 0; padding: 1.5rem; border: 1px solid rgba(0,0,0,.1); border-radius: .75rem; }
.oe-signup__title { margin-top: 0; }
.oe-signup__intro { opacity: .85; }

.oe-row { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .oe-row { grid-template-columns: 1fr 1fr; } }

.oe-field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
.oe-field label { font-weight: 600; font-size: .92rem; }
.oe-field input, .oe-field select, .oe-field textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid rgba(0,0,0,.25);
  border-radius: .35rem; font: inherit; background: #fff; color: inherit; }
.oe-field input:focus, .oe-field select:focus, .oe-field textarea:focus {
  outline: 2px solid #00008B; outline-offset: 1px; border-color: #00008B; }
.oe-field.has-error input, .oe-field.has-error select { border-color: #b91c1c; }
.oe-help { font-size: .82rem; opacity: .7; }
.oe-error { font-size: .85rem; color: #b91c1c; font-weight: 600; }

.oe-attendees { margin: .25rem 0 1rem; padding: 1rem; border-radius: .5rem; background: rgba(0,0,0,.03); }
.oe-attendees__title { margin: 0 0 .75rem; font-weight: 600; }

.oe-submit { margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }

.oe-notice { padding: .85rem 1rem; border-radius: .45rem; margin: 0 0 1rem; }
.oe-notice--ok { background: #ecfdf5; border-left: 4px solid #059669; }
.oe-notice--error { background: #fef2f2; border-left: 4px solid #b91c1c; }
.oe-notice--closed { background: #fffbeb; border-left: 4px solid #d97706; }

.oe-empty { padding: 1.25rem; border-radius: .5rem; background: rgba(0,0,0,.03); }

/* Het honeypot-veld hoort onzichtbaar te zijn, maar niet met display:none —
   sommige bots slaan verborgen velden over en verraden zich dan juist niet. */
.oe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* De plaatsen waar ik workshops geef */
.oe-cities { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .oe-cities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .oe-cities { grid-template-columns: repeat(3, 1fr); } }
.oe-city { display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--oe-card-line); border-radius: .75rem; background: var(--oe-card-bg); }
.oe-city--empty { opacity: .6; }
.oe-city__name { margin: 0; font-size: 1.1rem; }
.oe-city__label { display: block; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; }
.oe-city__meeting, .oe-city__next { margin: 0; }
.oe-city__next { margin-bottom: .6rem; }
.oe-city__next--none { opacity: .75; }
.oe-city .oe-button { margin-top: auto; }

/* ---------------------------------------------------------------------------
   De plaatsbadge. Eén vorm, overal hetzelfde: op de kaart, op de workshoppagina
   en boven de plaatsenlijst. Het speldje erft de tekstkleur, dus er is maar één
   kleur te onderhouden.
   --------------------------------------------------------------------------- */

.oe-badge {
  display: inline-flex;
  align-items: center;
  gap: .34em;
  padding: .3em .68em .32em .58em;
  border: 1px solid var(--oe-badge-line, rgba(0, 0, 139, .22));
  border-radius: 999px;
  background: var(--oe-badge-bg, rgba(0, 0, 139, .06));
  color: var(--oe-badge-ink, #00008B);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.oe-badge--lg { font-size: .84rem; padding: .34em .8em .36em .66em; letter-spacing: .04em; }

.oe-badge__pin { flex: 0 0 auto; margin-top: -.08em; opacity: .85; }

/* Een volgeboekte workshop hoeft niet ook nog eens te schreeuwen. */
/* "Gaat door": groen, naast de plaatsbadge. Contrast 7,4:1 op wit. */
.oe-badge--go {
  --oe-badge-line: rgba(10, 125, 51, .35);
  --oe-badge-bg: rgba(10, 125, 51, .08);
  --oe-badge-ink: #0a6b2c;
}
.oe-workshop__city { display: flex; flex-wrap: wrap; gap: .4em; }

.oe-workshop--full .oe-badge {
  --oe-badge-line: rgba(0, 0, 0, .18);
  --oe-badge-bg: rgba(0, 0, 0, .05);
  --oe-badge-ink: rgba(0, 0, 0, .6);
}

/* In de plaatsenlijst draagt de badge de kop, dus die mag zelf geen eigen
   letterinstelling meer opdringen. */
.oe-city__name { display: flex; }
.oe-city--empty .oe-badge {
  --oe-badge-line: rgba(0, 0, 0, .16);
  --oe-badge-bg: transparent;
  --oe-badge-ink: rgba(0, 0, 0, .55);
}

/* Let op: hier staan bewust géén prefers-color-scheme-regels.
   mobilecreation.nl is een lichte site en volgt het systeemthema niet: met dark mode
   aan blijft de achtergrond wit. Donkere varianten maakten de plaatsbadge daardoor
   lichtblauw op wit — een contrast van ongeveer 2:1, onleesbaar. Kleuren horen hier
   dus bij het thema te passen, niet bij de voorkeur van het besturingssysteem. */

/* De tegel die verschijnt als er geen groepsworkshop gepland staat. Zelfde vorm
   als een workshopkaart, zodat de pagina niet ineens leeg oogt. */
.oe-workshop--private { border-style: dashed; background: var(--oe-card-bg); }
.oe-workshop--private .oe-workshop__body { gap: .5rem; }
.oe-private__text { margin: 0; opacity: .85; }
.oe-private__mail { margin: .5rem 0 0; font-size: .92rem; opacity: .85; }
.oe-private__mail a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* De melding dat een groepsworkshop vanaf twee deelnemers doorgaat. */
.oe-notice--info { background: rgba(0, 0, 139, .05); border-left: 4px solid #00008B; }

/* ---------------------------------------------------------------------------
   De kadobon-tegels op /workshops/. Stonden als twee losse plaatjes met een
   cursieve bijschrift onder elkaar, op mobiel schermvullend groot. Nu twee
   kaarten in dezelfde vorm als de workshopkaarten, ook naast elkaar op een
   telefoon (het blok draagt daarvoor `is-not-stacked-on-mobile`).
   --------------------------------------------------------------------------- */

/* Een grid in plaats van het flexblok van WordPress. Bij flex bleef één kaart
   18px lager dan de ander: het thema zet het bijschrift op `display: table-caption`
   en "Kadobon Groepsworkshop" valt over drie regels waar "Kadobon Privé-workshop"
   er twee nodig heeft. In een grid krijgen beide cellen de hoogte van de rij, wat
   er ook in staat. */
.wp-block-columns.oe-kado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  margin-top: 1.25rem;
}

/* Even groot, ongeacht hoeveel regels het bijschrift telt of hoe hoog het
   plaatje is: gelijke breedte via flex-basis 0, gelijke hoogte via stretch, en
   een vast hoog beeldvak waar het icoon midden in hangt. */
.wp-block-columns.oe-kado > .wp-block-column {
  /* Een vaste minimumhoogte in plaats van op flexstretch vertrouwen. Het thema
     zet het bijschrift op `display: table-caption`, en daardoor liepen de twee
     kaarten steeds 18px uit elkaar terwijl figuur en bijschrift wél even hoog
     waren. Dit is voorspelbaar, ook als er later een langere naam bij komt. */
  justify-content: flex-start;
  min-width: 0;
  /* De kolom vult de gridrij. Het thema geeft .wp-block-column een eigen hoogte,
     waardoor `align-items: stretch` niets deed en de kaarten 18px uit elkaar
     liepen. Met height:100% volgt de kaart altijd de hoogste van de twee. */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 1rem 1.2rem;
  background: var(--oe-card-bg);
  border: 1px solid var(--oe-card-line);
  border-radius: .75rem;
  text-align: center;
}

.oe-kado figure {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
}

/* Het beeldvak is even hoog in beide kaarten; het icoon staat er midden in,
   zodat een breder of platter icoon de kaart niet uit balans trekt. */
.oe-kado figure > a,
.oe-kado figure > img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  width: 100%;
}
.oe-kado figure img { width: auto; max-width: 104px; max-height: 104px; height: auto; object-fit: contain; }
.wp-block-columns.oe-kado figcaption { margin-top: auto; }

/* Beide bijschriften krijgen de ruimte van twee regels. Flexstretch bleek hier
   niet te winnen van het thema, en dit maakt de kaarten sowieso even hoog —
   ook als er ooit een langere naam bij komt. */
.oe-kado figcaption {
  margin: 0;
  font-style: normal;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oe-kado figcaption a { color: inherit; text-decoration: none; }
.oe-kado figcaption a:hover { text-decoration: underline; }

@media (max-width: 30rem) {
  .oe-kado { gap: .7rem; }
  .wp-block-columns.oe-kado > .wp-block-column { padding: .9rem .7rem 1rem; }
  .oe-kado figure > a { height: 76px; }
  .oe-kado figure img { max-width: 76px; max-height: 76px; }
  .oe-kado figcaption { font-size: .85rem; }
}

/* ---------------------------------------------------------------------------
   De hero op /workshops/. Op een telefoon mag het tekstblok de volle breedte
   pakken, maar op een breed scherm liep het van rand tot rand en stond de tekst
   tegen de linkerkant van de foto aan. Vanaf tabletbreedte krijgt het blok
   daarom hooguit 40% van de breedte en een inspringing, zodat de foto ernaast
   zichtbaar blijft.
   --------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .wp-block-cover .oe-hero-tekst,
  .wp-block-cover .oe-hero-actie {
    /* Meeschalend inspringen: ruim op een groot scherm, bescheiden op een tablet. */
    margin-left: clamp(1.5rem, 4%, 3.5rem);
  }

  .wp-block-cover .oe-hero-tekst {
    max-width: 40%;
    margin-right: auto;
  }
}

/* Onder de 48rem blijft het blok vol in de breedte; daar is de foto te smal om
   er nog iets naast te laten zien. */

/* De kleine lettertjes bij het aanmeldformulier: wel leesbaar, niet schreeuwerig. */
.oe-fineprint { margin: 1rem 0 0; font-size: .85rem; line-height: 1.5; opacity: .8; }

/* De meegaande personen: per persoon een blokje, zodat het bij drie plekken
   duidelijk blijft welke velden bij wie horen. */
.oe-attendees__help { margin: -.35rem 0 .9rem; font-size: .85rem; opacity: .78; }
.oe-attendee { padding: .85rem .9rem .1rem; border: 1px solid rgba(0,0,0,.09);
  border-radius: .5rem; background: rgba(255,255,255,.5); margin-bottom: .8rem; }
.oe-attendee__nr { margin: 0 0 .6rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.oe-optional { font-weight: 400; font-size: .82em; opacity: .65; }

/* Een verstreken workshop wijst door naar wat er wél gepland staat. */
.oe-verder { display: flex; flex-direction: column; gap: .65rem; }
.oe-verder__kop { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; }
.oe-verder__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.oe-verder__lijst a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem;
  border: 1px solid var(--oe-card-line); border-radius: .5rem; background: #fff;
  text-decoration: none; color: inherit; }
.oe-verder__lijst a:hover { border-color: rgba(0,0,139,.35); }
.oe-verder__lijst span { font-size: .88rem; opacity: .75; }
.oe-verder__leeg { margin: 0; font-size: .9rem; }


/* --- Stadspagina --------------------------------------------------------- */
.oe-stad__kop { font-size: 1.35rem; font-weight: 600; margin: 2rem 0 .75rem; }
.oe-stad__sub, .oe-stad__leeg { color: #555; max-width: 46rem; line-height: 1.5; margin: 0 0 1rem; }
.oe-stad__opties { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 2.5rem 0; }
.oe-stad__optie { background: var(--oe-card-bg, #f6f6f8); border-radius: 12px; padding: 1.25rem 1.4rem; }
.oe-stad__optie h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .4rem; }
.oe-stad__optie p { color: #555; line-height: 1.5; margin: 0 0 .9rem; }
.oe-stad__steden { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin: 1.5rem 0 3rem; color: #555; }
.oe-stad__steden a { color: #1e73be; text-decoration: none; border-bottom: 1px solid #c9dcee; }
.oe-city__meer { display: inline-block; margin-top: .6rem; color: #1e73be; font-size: .92rem; text-decoration: none; border-bottom: 1px solid #c9dcee; }

.oe-stad__faq { max-width: 48rem; margin: 2rem 0; }
.oe-faq { border-bottom: 1px solid #e6e6ea; padding: .35rem 0; }
.oe-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; }
.oe-faq summary::-webkit-details-marker { display: none; }
.oe-faq summary::after { content: '+'; font-size: 1.4rem; color: #1e73be; line-height: 1; }
.oe-faq[open] summary::after { content: '\2212'; }
.oe-faq summary h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.oe-faq p { color: #555; line-height: 1.55; margin: 0 0 .9rem; }

/* ---------------------------------------------------------------------------
   Stadspagina: de feitenkaart (9-9-2026, was een paginabrede stadsfoto), de
   komende data, de dag in drie stappen, het klassikale blok, de buurt,
   privé/kadobon, FAQ.
   --------------------------------------------------------------------------- */

.oe-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
@media (min-width: 48rem) { .oe-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.oe-stap { position: relative; padding: 1.25rem 1.3rem 1.3rem 1.3rem; background: var(--oe-card-bg); border: 1px solid var(--oe-card-line); border-radius: 12px; }
.oe-stap__nr { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 999px;
  background: #00008B; color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: .7rem; }
.oe-stap h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 .4rem; line-height: 1.3; }
.oe-stap p { margin: 0; color: #555; line-height: 1.55; font-size: .95rem; }

.oe-badge--vorm {
  --oe-badge-line: rgba(180, 83, 9, .35);
  --oe-badge-bg: rgba(217, 119, 6, .09);
  --oe-badge-ink: #9a3412;
}

.oe-klas { display: grid; gap: 0; text-decoration: none; color: inherit; border: 1px solid rgba(180,83,9,.25);
  border-radius: 12px; overflow: hidden; background: #fff; margin: 0 0 1rem; transition: box-shadow .15s ease; }
.oe-klas:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); color: inherit; }
@media (min-width: 48rem) { .oe-klas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.oe-klas__foto { display: block; }
.oe-klas__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 48rem) { .oe-klas__foto img { height: 100%; } }
.oe-klas__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.3rem 1.3rem; }
.oe-klas__titel { font-size: 1.15rem; line-height: 1.3; }
.oe-klas__when { opacity: .8; }
.oe-klas__meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; margin: .2rem 0 .5rem; }
.oe-klas .oe-button { align-self: flex-start; }

/* ---------------------------------------------------------------------------
   De tekst op de workshoppagina, één stramien (5-9-2026): een lede, koppen in
   één vorm, een programma als tijdlijn, de locatie als kaart, de feiten als
   tegels. De klassen zijn gewone HTML in de workshoptekst, dus elke workshop
   kan ze gebruiken; oude teksten zonder klassen blijven eruitzien zoals ze waren.
   --------------------------------------------------------------------------- */

.oe-single__content { max-width: 52rem; }
.oe-single__content p, .oe-single__content li { line-height: 1.6; }
.oe-lede { font-size: 1.12rem; line-height: 1.6; color: #333; margin: 0 0 1.5rem; }
.oe-blok { margin: 0 0 2rem; }
.oe-kop { font-size: 1.2rem; font-weight: 600; margin: 0 0 .7rem; padding-top: .9rem; border-top: 1px solid var(--oe-card-line); }
.oe-noot { font-size: .95rem; color: #555; padding: 1rem 1.15rem; background: var(--oe-card-bg); border-radius: 12px; margin: 0 0 1rem; }

.oe-programma { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.oe-programma li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .8rem; align-items: start; position: relative; padding: .55rem 0 .85rem; }
.oe-programma li + li { border-top: 1px solid var(--oe-card-line); }
.oe-programma time { font-variant-numeric: tabular-nums; font-weight: 700; color: #00008B; padding-top: .1rem; }
.oe-programma div { display: flex; flex-direction: column; gap: .15rem; }
.oe-programma strong { font-weight: 600; }
.oe-programma span { color: #555; font-size: .95rem; line-height: 1.5; }

.oe-locatie { display: grid; gap: 1rem; padding: 1.15rem 1.3rem; background: var(--oe-card-bg); border: 1px solid var(--oe-card-line); border-radius: 12px; }
@media (min-width: 48rem) { .oe-locatie { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; } }
.oe-locatie__logo { display: block; width: 7.5rem; padding: .5rem; background: #fff; border: 1px solid var(--oe-card-line); border-radius: 10px; }
.oe-locatie__logo img { display: block; width: 100%; height: auto; }
.oe-locatie__tekst { display: flex; flex-direction: column; gap: .2rem; }
.oe-locatie__tekst strong { font-weight: 600; font-size: 1.05rem; }
.oe-locatie__tekst em { font-style: normal; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #9a3412; }
.oe-locatie__tekst > span { color: #333; }
.oe-locatie__tekst p { margin: .5rem 0 0; color: #555; font-size: .95rem; }
.oe-locatie__acties { display: flex; flex-direction: column; gap: .5rem; min-width: 12rem; }
.oe-locatie__acties .oe-button { text-align: center; }
.oe-button--licht { background: #fff; color: #00008B; border: 1px solid rgba(0,0,139,.3); }
.oe-button--licht:hover { background: rgba(0,0,139,.06); color: #00008B; }

.oe-tegels { display: grid; gap: .8rem; }
@media (min-width: 40rem) { .oe-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.oe-tegel { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem 1.1rem; background: var(--oe-card-bg); border: 1px solid var(--oe-card-line); border-radius: 12px; }
.oe-tegel__label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #666; font-weight: 600; }
.oe-tegel strong { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #00008B; }
.oe-tegel span:last-child { color: #555; font-size: .92rem; line-height: 1.45; }

/* Op een telefoon is de titel van het thema erg groot voor een lange workshopnaam. */
@media (max-width: 40rem) { .oe-single__title { font-size: 1.6rem; line-height: 1.2; } }

/* Twee kolommen in de workshoptekst: links het verhaal, rechts locatie, prijs en
   doorgang. Op een telefoon gewoon onder elkaar. */
.oe-single__content:has(.oe-kolommen) { max-width: none; }
.oe-kolommen { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) {
  .oe-kolommen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
  .oe-kolommen__zij { position: sticky; top: 1.5rem; }
}
.oe-kolommen__zij .oe-kop:first-child { border-top: 0; padding-top: 0; }
/* Zijkolom: alleen de naam (en 'voorlopige locatie') rechts van het logo; adres,
   toelichting en knoppen daaronder over de volle breedte. */
.oe-kolommen__zij .oe-locatie { grid-template-columns: auto minmax(0, 1fr); grid-auto-rows: auto; align-items: center; column-gap: 1rem; row-gap: .25rem; }
.oe-kolommen__zij .oe-locatie__logo { grid-column: 1; grid-row: 1 / 3; width: 6.5rem; align-self: center; }
.oe-kolommen__zij .oe-locatie__tekst { display: contents; }
.oe-kolommen__zij .oe-locatie__tekst strong { grid-column: 2; grid-row: 1; align-self: end; }
.oe-kolommen__zij .oe-locatie__tekst em { grid-column: 2; grid-row: 2; align-self: start; }
.oe-kolommen__zij .oe-locatie__tekst > span { grid-column: 1 / -1; grid-row: 3; margin-top: .6rem; }
.oe-kolommen__zij .oe-locatie__tekst p { grid-column: 1 / -1; grid-row: 4; margin: 0; }
.oe-kolommen__zij .oe-locatie__acties { grid-column: 1 / -1; grid-row: 5; flex-direction: row; flex-wrap: wrap; margin-top: .5rem; }

.oe-kolommen__zij .oe-tegels { grid-template-columns: 1fr; }
.oe-kolommen__zij .oe-tegel { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.oe-kolommen__zij .oe-tegel__label { width: 100%; }
.oe-kolommen__zij .oe-tegel span:last-child { flex: 1 1 12rem; }

/* Spaarzaam met vet en koppen (5-9-2026): alleen bedragen zijn vet. */
.oe-kop { font-weight: 500; font-size: 1.1rem; }
.oe-programma time { font-weight: 500; }
.oe-programma strong { font-weight: 500; }
.oe-locatie__tekst strong { font-weight: 500; }
.oe-tegel strong { font-weight: 500; font-size: 1.15rem; color: inherit; }
.oe-tegel--prijs strong { font-weight: 700; font-size: 1.5rem; color: #00008B; }
.oe-tegel__label { font-weight: 500; }

/* Eén maatvoering voor de workshoppagina (5-9-2026): lopende tekst 1rem, kleine
   labels .75rem, koppen 1.05rem, en alleen het bedrag groter. Grijs geeft de
   hiërarchie, niet de lettergrootte. */
.oe-single { --oe-tekst: 1rem; --oe-klein: .75rem; --oe-kop: 1.05rem; --oe-grijs: #555; }
.oe-single__when { font-size: var(--oe-tekst); }
.oe-fact__label, .oe-tegel__label, .oe-locatie__tekst em, .oe-verder__kop { font-size: var(--oe-klein); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.oe-fact__value, .oe-single__content p, .oe-single__content li, .oe-lede, .oe-noot, .oe-programma span, .oe-programma strong, .oe-programma time,
.oe-locatie__tekst strong, .oe-locatie__tekst > span, .oe-locatie__tekst p, .oe-tegel span:last-child, .oe-single__cta-note, .oe-signup__intro, .oe-notice { font-size: var(--oe-tekst); line-height: 1.55; }
.oe-lede { color: inherit; }
.oe-kop { font-size: var(--oe-kop); font-weight: 500; }
.oe-tegel strong { font-size: var(--oe-tekst); font-weight: 500; }
.oe-tegel--prijs strong { font-size: 1.35rem; font-weight: 700; }
.oe-programma span, .oe-locatie__tekst p, .oe-tegel span:last-child, .oe-noot, .oe-single__cta-note { color: var(--oe-grijs); }
.oe-badge { font-size: var(--oe-klein); }
.oe-button { font-size: var(--oe-tekst); }
.oe-single__title { font-size: 1.75rem; line-height: 1.25; }
@media (max-width: 40rem) { .oe-single__title { font-size: 1.45rem; } }

/* "meer" in de locatiekaart: de toelichting pas na een klik. */
.oe-meer summary { list-style: none; cursor: pointer; color: #1e73be; font-size: var(--oe-tekst); margin-top: .25rem; }
.oe-meer summary::-webkit-details-marker { display: none; }
.oe-meer summary::after { content: ' \203A'; }
.oe-meer[open] summary::after { content: ' \2039'; }
.oe-meer p { margin: .4rem 0 0; }

/* Oude workshopteksten (met h3 en lege koppen) krijgen dezelfde maat als het stramien. */
.oe-single__content h2, .oe-single__content h3 { font-size: var(--oe-kop, 1.05rem); font-weight: 500; margin: 1.4rem 0 .5rem; }
.oe-single__content h3:empty, .oe-single__content h2:empty { display: none; }
.oe-single__content li strong { font-weight: 500; }

/* Tegels: alleen het bedrag is vet; "vanaf 6" en "max. 16" lopen mee met de tekst. */
.oe-tegel strong { font-weight: 400; color: inherit; }
.oe-tegel--prijs strong { font-weight: 700; color: #00008B; }

/* Tegels (6-9-2026): het getal als badge links, twee regels hoog, de tekst rechts ervan.
   Alle drie gelijk: € 69, vanaf 6, max. 16. */
.oe-single .oe-tegel, .oe-kolommen__zij .oe-tegel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; row-gap: .35rem; align-items: start; flex-direction: unset; }
.oe-single .oe-tegel__label { grid-column: 1 / -1; width: auto; }
.oe-single .oe-tegel strong, .oe-single .oe-tegel--prijs strong, .oe-kolommen__zij .oe-tegel strong { grid-column: 1; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-width: 4.6rem; padding: .35rem .7rem; border-radius: .5rem; background: rgba(0,0,139,.08); border: 1px solid rgba(0,0,139,.18); color: #00008B; font-weight: 700; font-size: 1.15rem; line-height: 1.2; white-space: nowrap; }
.oe-single .oe-tegel span:last-child, .oe-kolommen__zij .oe-tegel span:last-child { grid-column: 2; flex: none; }

.oe-fact__sub { display: block; font-size: .9rem; color: #555; margin-top: .15rem; }

/* wpautop stopt lege alinea's en <br> in de HTML-blokken van de workshoptekst; in een
   grid worden dat lege rijen met witruimte. Weg ermee. */
.oe-locatie > p:empty, .oe-locatie br, .oe-locatie__tekst > p:empty, .oe-tegel > p:empty, .oe-tegel br, .oe-tegels > p:empty, .oe-kolommen > p:empty, .oe-kolommen br, .oe-blok > p:empty, .oe-programma br { display: none; }

.oe-single__faq { max-width: 52rem; margin: 2.5rem 0; }
.oe-single__faq .oe-stad__kop { font-size: var(--oe-kop, 1.05rem); font-weight: 500; }

/* Kop van een klassikale dag: het eigen icoon links van de titel. Zonder icoon
   blijft de kop staan zoals hij was. */
.oe-single__header--icoon { display: flex; align-items: center; gap: 1rem; }
.oe-single__header--icoon .oe-single__kop { display: block; min-width: 0; }
.oe-single__icoon { flex: 0 0 auto; }
.oe-single__icoon img { display: block; width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 40rem) {
  .oe-single__header--icoon { gap: .7rem; }
  .oe-single__icoon img { width: 44px; height: 44px; }
}

/* De stadskaart: de feiten vooraan, de foto klein ernaast. Een paginabrede
   stadsfoto duwde de data onder de vouw en vertelde niets over de workshop. */
.oe-stad__kaart { display: grid; gap: 1.25rem; align-items: stretch; margin: 0 0 1.75rem;
  background: var(--oe-card-bg, #f6f6f8); border: 1px solid var(--oe-card-line, rgba(0,0,0,.09)); border-radius: 14px; overflow: hidden; }
@media (min-width: 52rem) { .oe-stad__kaart { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; } }
.oe-stad__feiten { display: flex; flex-direction: column; gap: 1rem; padding: 1.3rem 1.4rem; }
.oe-stad__lijst { display: grid; gap: .85rem; margin: 0; }
@media (min-width: 34rem) { .oe-stad__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oe-stad__lijst > div { min-width: 0; }
.oe-stad__lijst dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #666; font-weight: 600; margin: 0 0 .15rem; }
.oe-stad__lijst dd { margin: 0; color: #111; line-height: 1.4; }
.oe-stad__lijst dd strong { font-weight: 700; color: #00008B; }
.oe-stad__bij { display: block; color: #555; font-size: .88rem; margin-top: .1rem; }
.oe-stad__knop { align-self: flex-start; margin-top: auto; }
/* Twee staande foto's naast elkaar, elk 4:5. Een vaste verhouding, anders bepaalt
   de foto de hoogte van de hele kaart en duwt hij de data alsnog naar beneden. */
.oe-stad__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.oe-stad__fotos--1 { grid-template-columns: 1fr; }
.oe-stad__foto { margin: 0; min-height: 0; aspect-ratio: 4 / 5; }
.oe-stad__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Een foto met een badge zit in een inline-block houder die zich naar de foto
   voegt; die vulde het 4:5-vak niet en liet een grijze strook onderaan staan. */
.oe-stad__foto .oe-fotobadge { display: block; width: 100%; height: 100%; }
.oe-stad__foto .oe-fotobadge > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   Fotobadge: dezelfde vorm als de plaatsbadge, maar over de foto heen. Per foto
   in te stellen in de mediabibliotheek; leeg is geen badge.

   Waarom niet in het bestand gebrand: dan moet je de foto opnieuw maken om de
   tekst te wijzigen, en zit de badge ook in het origineel dat je later voor iets
   anders gebruikt.
   --------------------------------------------------------------------------- */

.oe-fotobadge {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;              /* geen witruimte onder de foto */
}

.oe-fotobadge > img { display: block; max-width: 100%; height: auto; }

.oe-badge--foto {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  line-height: 1.3;
  /* Kleiner dan de plaatsbadge: die draagt informatie, deze is een bijschrift
     over andermans beeld en hoort niet de aandacht te trekken. */
  font-size: .64rem;
  padding: .26em .58em .28em;
  /* Nadrukkelijk niet de pilvorm van .oe-badge: over een foto oogt een ronde
     bel als een sticker. Een kleine straal leest als onderschrift. */
  border-radius: 4px;
  /* Over een foto is een doorschijnende rand niet genoeg: de achtergrond kan
     alles zijn. Vandaar een dekkende ondergrond en een lichte schaduw, zodat
     hij zowel op de lucht als op donker water leesbaar blijft. */
  --oe-badge-bg: rgba(255, 255, 255, .92);
  --oe-badge-line: rgba(0, 0, 139, .28);
  background: var(--oe-badge-bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .28);
  backdrop-filter: saturate(120%) blur(2px);
  pointer-events: none;        /* een badge is geen knop */
}

/* Op een telefoon is de foto kleiner, dus de badge ook, anders beslaat hij de
   halve breedte. */
@media (max-width: 600px) {
  .oe-badge--foto { right: .5rem; bottom: .5rem; font-size: .58rem; padding: .22em .5em .24em; }
}

@media (prefers-reduced-transparency: reduce) {
  .oe-badge--foto { backdrop-filter: none; --oe-badge-bg: #fff; }
}

/* De witte knop "Stel je eigen groep samen" in de hero op /workshops/.
   Zonder terugkoppeling bij hover voelt een knop dood aan; je weet niet of hij
   klikbaar is. De kleuren van die knop staan als inline-stijl in het blok, en
   een inline-stijl wint van een stylesheet, dus dit kan alleen met !important.
   :focus-visible staat erbij zodat wie met het toetsenbord navigeert hetzelfde
   ziet als wie de muis gebruikt. */
.wp-block-button__link[href*="workshop.maarten.photos"]:hover,
.wp-block-button__link[href*="workshop.maarten.photos"]:focus-visible {
  background-color: #eceef5 !important;
  color: #00008b !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.wp-block-button__link[href*="workshop.maarten.photos"] {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}