/**
 * Mymmo Events
 *
 * Alle kleuren en maten staan als custom properties op .mymmo-ev, zodat het
 * thema ze kan overschrijven zonder deze file aan te raken.
 *
 * Typografie wordt BEWUST geërfd van het thema (Rethink Sans voor tekst,
 * Gelica voor koppen op openvme.be). De plugin laadt zelf geen fonts: dan
 * blijft de site consistent en scheelt het requests.
 *
 * Geen framework, geen buildstap, geen jQuery.
 */

.mymmo-ev {
  /* Afgeleid van openvme.be */
  --mymmo-ev-ink: #1f2937;
  --mymmo-ev-text: #4b5563;
  --mymmo-ev-muted: #6b7280;
  --mymmo-ev-faint: #9ca3af;

  --mymmo-ev-surface: #ffffff;
  --mymmo-ev-subtle: #f8fafc;
  --mymmo-ev-line: #e5e7eb;
  --mymmo-ev-line-soft: #f1f5f9;

  --mymmo-ev-accent: #0d9488;
  --mymmo-ev-accent-soft: #99f6e4;
  --mymmo-ev-accent-ink: #0369a1;
  --mymmo-ev-danger: #b91c1c;
  --mymmo-ev-danger-soft: #fee2e2;
  --mymmo-ev-success: #047857;
  --mymmo-ev-success-soft: #d1fae5;

  --mymmo-ev-radius: 10px;
  --mymmo-ev-radius-sm: 6px;
  --mymmo-ev-gap: 1rem;
  --mymmo-ev-maxw: 46rem;

  color: var(--mymmo-ev-text);
  font-family: inherit;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mymmo-ev *,
.mymmo-ev *::before,
.mymmo-ev *::after { box-sizing: border-box; }

.mymmo-ev h1, .mymmo-ev h2, .mymmo-ev h3 {
  color: var(--mymmo-ev-ink);
  font-family: inherit;
  text-wrap: balance;
}

.mymmo-ev-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

.mymmo-ev a { color: inherit; }

.mymmo-ev-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--mymmo-ev-accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.mymmo-ev-link:hover { text-decoration: underline; }
.mymmo-ev-link .mymmo-ev-icon { transition: transform 0.15s ease; }
.mymmo-ev-link:hover .mymmo-ev-icon { transform: translateX(2px); }

/* Defensief tegen thema's die `button` op display:block of width:100% met
   gecentreerde tekst zetten — daardoor viel het pijltje op een tweede regel. */
.mymmo-ev-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius-sm);
  background: var(--mymmo-ev-surface);
  color: var(--mymmo-ev-ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.mymmo-ev-btn:hover { background: var(--mymmo-ev-subtle); }
.mymmo-ev-btn:active { transform: translateY(1px); }

.mymmo-ev-btn--primary {
  background: var(--mymmo-ev-accent-soft);
  border-color: transparent;
  color: var(--mymmo-ev-accent-ink);
}
/* De verzendknop mag de volle breedte hebben, maar op ÉÉN regel. */
.mymmo-ev-form .mymmo-ev-btn--primary {
  width: 100%;
  padding: 0.75rem 1.25rem;
}
.mymmo-ev-btn--primary:hover { background: #7ce9d4; }

.mymmo-ev :focus-visible {
  outline: 2px solid var(--mymmo-ev-accent-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */

.mymmo-ev-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mymmo-ev-pill-color, #475569) 12%, white);
  color: color-mix(in srgb, var(--mymmo-ev-pill-color, #475569) 88%, black);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.mymmo-ev-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mymmo-ev-pill-color, #475569);
}

.mymmo-ev-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mymmo-ev-muted);
  white-space: nowrap;
}
.mymmo-ev-tag--muted { color: var(--mymmo-ev-faint); font-weight: 500; }
.mymmo-ev-tag--urgent { color: var(--mymmo-ev-danger); }

/* ── Meldingen ───────────────────────────────────────────────────────────── */

.mymmo-ev-notice,
.mymmo-ev-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius);
  background: var(--mymmo-ev-subtle);
  color: var(--mymmo-ev-muted);
  font-size: 0.9375rem;
}

.mymmo-ev-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: var(--mymmo-ev-radius);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}
.mymmo-ev-alert--success { background: var(--mymmo-ev-success-soft); color: var(--mymmo-ev-success); }
.mymmo-ev-alert--error { background: var(--mymmo-ev-danger-soft); color: var(--mymmo-ev-danger); }
.mymmo-ev-alert .mymmo-ev-icon { width: 1.2em; height: 1.2em; margin-top: 0.15em; }

/* ── Lijst ───────────────────────────────────────────────────────────────── */

.mymmo-ev-list__month {
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--mymmo-ev-line);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mymmo-ev-faint);
}
.mymmo-ev-list__month:first-child { margin-top: 0; }

.mymmo-ev-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--mymmo-ev-line-soft);
}
.mymmo-ev-card:last-child { border-bottom: 0; }
.mymmo-ev-card.is-past { opacity: 0.62; }

.mymmo-ev-card__date {
  flex: 0 0 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
}
.mymmo-ev-card__dow,
.mymmo-ev-card__month {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mymmo-ev-faint);
}
.mymmo-ev-card__day {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--mymmo-ev-ink);
  font-variant-numeric: tabular-nums;
}

.mymmo-ev-card__body { min-width: 0; flex: 1 1 auto; }
.mymmo-ev-card__when {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--mymmo-ev-muted);
}
.mymmo-ev-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
}
.mymmo-ev-card__title a { text-decoration: none; }
.mymmo-ev-card__title a:hover { color: var(--mymmo-ev-accent-ink); }

.mymmo-ev-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 0.6rem;
}
.mymmo-ev-card__summary {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  max-width: var(--mymmo-ev-maxw);
}
.mymmo-ev-card__cta { margin: 0; font-size: 0.9375rem; }

/* Kaartweergave */
.mymmo-ev-list--cards .mymmo-ev-list__items {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.mymmo-ev-card--cards {
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.15rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius);
  background: var(--mymmo-ev-surface);
}
.mymmo-ev-card--cards .mymmo-ev-card__date { flex-direction: row; gap: 0.4rem; align-items: baseline; }
.mymmo-ev-card--cards .mymmo-ev-card__day { font-size: 1.25rem; }

.mymmo-ev-calendar [hidden],
.mymmo-ev-list [hidden] {
  display: none !important;
}

/* ── Kalender ────────────────────────────────────────────────────────────── */

.mymmo-ev-calendar__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.mymmo-ev-calendar__nav { display: flex; gap: 0.35rem; }
.mymmo-ev-calendar__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
}

/* Lijstweergave: zelfde balk-opzet als de kalender (navigatie + titel +
   filter), zodat je ook hier per maand kan bladeren. */
.mymmo-ev-list__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1.25rem;
}
.mymmo-ev-list__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.mymmo-ev-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius-sm);
  background: var(--mymmo-ev-surface);
  color: var(--mymmo-ev-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.mymmo-ev-navbtn:hover { background: var(--mymmo-ev-subtle); }
.mymmo-ev-navbtn--text { font-size: 0.8125rem; }
.mymmo-ev-navbtn--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Type-filter chips (kalender + lijst) ───────────────────────────────── */

.mymmo-ev-calendar__bar .mymmo-ev-typefilter,
.mymmo-ev-list__bar .mymmo-ev-typefilter {
  margin-left: auto;
  margin-bottom: 0;
}
.mymmo-ev-typefilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

/* Op smalle schermen is er geen ruimte om nav + titel + alle chips op
   dezelfde regel te houden -- flex-wrap liet de chips dan over meerdere
   regels vallen, wat veel hoogte kostte. Compacter: nav+titel blijven
   samen op regel 1 (de chips krijgen expliciet een eigen volle breedte),
   en de chips zelf scrollen op regel 2 horizontaal in plaats van te
   wrappen -- herkenbaar mobiel patroon, en kost een vaste, voorspelbare
   hoogte ongeacht het aantal event-types. */
@media (max-width: 40rem) {
  .mymmo-ev-calendar__bar .mymmo-ev-typefilter,
  .mymmo-ev-list__bar .mymmo-ev-typefilter {
    margin-left: 0;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
  }
  .mymmo-ev-calendar__bar .mymmo-ev-typefilter::-webkit-scrollbar,
  .mymmo-ev-list__bar .mymmo-ev-typefilter::-webkit-scrollbar {
    display: none;
  }
  .mymmo-ev-typefilter .mymmo-ev-chipfilter {
    flex: 0 0 auto;
  }
}
.mymmo-ev-chipfilter {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 35%, white);
  background: var(--mymmo-ev-surface);
  color: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 82%, black);
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.mymmo-ev-chipfilter:hover {
  background: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 10%, white);
}
.mymmo-ev-chipfilter.is-active {
  background: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 22%, white);
  border-color: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 55%, white);
  color: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 82%, black);
}

.mymmo-ev-grid {
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius);
  overflow: hidden;
  background: var(--mymmo-ev-surface);
}

.mymmo-ev-grid__head,
.mymmo-ev-grid__body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mymmo-ev-grid__head {
  background: var(--mymmo-ev-subtle);
  border-bottom: 1px solid var(--mymmo-ev-line);
}
.mymmo-ev-grid__head span {
  padding: 0.55rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mymmo-ev-faint);
  text-align: center;
}

.mymmo-ev-day {
  min-height: 6.25rem;
  padding: 0.35rem;
  border-right: 1px solid var(--mymmo-ev-line-soft);
  border-bottom: 1px solid var(--mymmo-ev-line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mymmo-ev-day:nth-child(7n) { border-right: 0; }
.mymmo-ev-day:nth-last-child(-n+7) { border-bottom: 0; }

.mymmo-ev-day__num {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mymmo-ev-muted);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding: 0.1rem 0.3rem;
  border-radius: var(--mymmo-ev-radius-sm);
}

/* Buiten de maand */
.mymmo-ev-day.is-outside { background: var(--mymmo-ev-subtle); }
.mymmo-ev-day.is-outside .mymmo-ev-day__num { color: var(--mymmo-ev-faint); }

/* Voorbij */
.mymmo-ev-day.is-past { background: #fbfcfd; }
.mymmo-ev-day.is-past .mymmo-ev-day__num { color: var(--mymmo-ev-faint); }
.mymmo-ev-day.is-past .mymmo-ev-chip { opacity: 0.6; }

/* Vandaag */
.mymmo-ev-day.is-today { background: color-mix(in srgb, var(--mymmo-ev-accent) 4%, white); }
.mymmo-ev-day.is-today .mymmo-ev-day__num {
  background: var(--mymmo-ev-accent);
  color: #fff;
  font-weight: 700;
}

.mymmo-ev-chip {
  display: block;
  padding: 0.3rem 0.4rem;
  border-radius: var(--mymmo-ev-radius-sm);
  background: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 13%, white);
  color: color-mix(in srgb, var(--mymmo-ev-chip-color, #475569) 82%, black);
  text-decoration: none;
  line-height: 1.25;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mymmo-ev-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgb(15 23 42 / 0.12);
}
.mymmo-ev-chip__type {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mymmo-ev-chip__time {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.mymmo-ev-chip__time em { font-style: normal; font-weight: 700; }
.mymmo-ev-chip.is-full { text-decoration: line-through; }

/* Op smalle schermen wordt de maand een dagenlijst: een raster van zeven
   kolommen is op een telefoon onleesbaar, en horizontaal schuiven is erger. */
@media (max-width: 46rem) {
  .mymmo-ev-grid__head { display: none; }
  .mymmo-ev-grid { border: 0; border-radius: 0; }
  .mymmo-ev-grid__body { display: block; }
  .mymmo-ev-day {
    min-height: 0;
    border: 0;
    border-bottom: 1px solid var(--mymmo-ev-line-soft);
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    background: none !important;
  }
  /* Lege dagen weglaten: dat is de hele winst op mobiel. */
  .mymmo-ev-day:not(.has-events) { display: none; }
  .mymmo-ev-day__num { flex: 0 0 2rem; text-align: center; }
  .mymmo-ev-day > .mymmo-ev-chip { flex: 1 1 auto; }
}

/* ── Eventpagina ─────────────────────────────────────────────────────────── */

.mymmo-ev-single { display: flex; flex-direction: column; gap: 1.5rem; }
.mymmo-ev-single > *:first-child { margin-top: 0; }

/* Hero met een vaste verhouding: zonder die box rekt een brede afbeelding
   het blok op en loopt hij buiten de kolom. */
.mymmo-ev-hero {
  margin: 0;
  border-radius: var(--mymmo-ev-radius);
  overflow: hidden;
  background: var(--mymmo-ev-subtle);
  aspect-ratio: 16 / 7;
  max-height: 20rem;
}
.mymmo-ev-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mymmo-ev-single__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
}

/* Feitenblokken: bewust geen <dl>. Thema's stylen dt/dd met eigen grid- of
   float-regels, en dat zette de labels naast in plaats van boven de waarde. */
.mymmo-ev-facts {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius);
  background: var(--mymmo-ev-subtle);
}
.mymmo-ev-fact { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* Bewust GEEN flex en geen icoon. Het thema zette deze span op volle
   breedte met de inhoud uit elkaar: icoon links, "WANNEER" rechts. Een
   gewone block met tekst kan geen thema meer verkeerd uitlijnen. */
.mymmo-ev-fact__label {
  display: block;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mymmo-ev-faint);
}
.mymmo-ev-fact__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mymmo-ev-ink);
  line-height: 1.35;
}
.mymmo-ev-fact__sub { font-size: 0.8125rem; color: var(--mymmo-ev-muted); }

.mymmo-ev-nowrap { white-space: nowrap; }

.mymmo-ev-panel {
  padding: 1.25rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius);
  background: var(--mymmo-ev-surface);
}
.mymmo-ev-panel--accent {
  border-left: 3px solid var(--mymmo-ev-accent);
  background: var(--mymmo-ev-subtle);
}
.mymmo-ev-panel__title { margin: 0 0 0.6rem; font-size: 1.125rem; font-weight: 700; }
.mymmo-ev-panel__cta { margin: 0 0 0.75rem; }

.mymmo-ev-prose > *:first-child { margin-top: 0; }
.mymmo-ev-prose > *:last-child { margin-bottom: 0; }
.mymmo-ev-prose img { max-width: 100%; height: auto; border-radius: var(--mymmo-ev-radius); }
.mymmo-ev-prose h2 { font-size: 1.375rem; margin: 1.75rem 0 0.5rem; }
.mymmo-ev-prose h3 { font-size: 1.125rem; margin: 1.5rem 0 0.4rem; }
.mymmo-ev-prose a { color: var(--mymmo-ev-accent-ink); }
.mymmo-ev-prose blockquote {
  margin: 1.25rem 0;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid var(--mymmo-ev-accent-soft);
  color: var(--mymmo-ev-muted);
}

.mymmo-ev-speakers__list { margin: 0; padding-left: 1.1rem; }

.mymmo-ev-single__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--mymmo-ev-line-soft);
  font-size: 0.9375rem;
}
.mymmo-ev-single__back { color: var(--mymmo-ev-muted); text-decoration: none; }
.mymmo-ev-single__back:hover { color: var(--mymmo-ev-accent-ink); }

/* ── Formulier ───────────────────────────────────────────────────────────── */

.mymmo-ev-register {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius);
  background: var(--mymmo-ev-surface);
  scroll-margin-top: 6rem;
}
.mymmo-ev-register__title { margin: 0 0 0.35rem; font-size: 1.375rem; font-weight: 700; }
.mymmo-ev-register__intro { margin: 0 0 1.25rem; font-size: 0.9375rem; }

.mymmo-ev-form { display: flex; flex-direction: column; gap: 0.9rem; }
.mymmo-ev-form__row { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.mymmo-ev-field { display: block; }
.mymmo-ev-field__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mymmo-ev-ink);
}
.mymmo-ev-field__label em { color: var(--mymmo-ev-danger); font-style: normal; }

.mymmo-ev-field input,
.mymmo-ev-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius-sm);
  background: var(--mymmo-ev-subtle);
  color: var(--mymmo-ev-ink);
  font: inherit;
  font-size: 0.9375rem;
}
.mymmo-ev-field input:focus,
.mymmo-ev-field textarea:focus {
  background: var(--mymmo-ev-surface);
  border-color: var(--mymmo-ev-accent);
}
.mymmo-ev-field textarea { resize: vertical; min-height: 5rem; }

.mymmo-ev-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9375rem;
}
.mymmo-ev-check input { margin-top: 0.25rem; }

.mymmo-ev-form__fine { margin: 0; font-size: 0.75rem; color: var(--mymmo-ev-faint); }

/* Honeypot: uit het zicht, maar niet display:none — sommige bots slaan
   dat over, en screenreaders krijgen aria-hidden op de wrapper. */
.mymmo-ev-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mymmo-ev *, .mymmo-ev *::before, .mymmo-ev *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.mymmo-ev-notice--info {
  border-style: solid;
  border-color: color-mix(in srgb, var(--mymmo-ev-accent) 30%, white);
  background: color-mix(in srgb, var(--mymmo-ev-accent) 6%, white);
  color: color-mix(in srgb, var(--mymmo-ev-accent) 75%, black);
}

/* ── Debugpaneel (alleen beheerders, met ?mymmo_debug=1) ─────────────────── */

.mymmo-ev-debug {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px dashed var(--mymmo-ev-danger);
  border-radius: var(--mymmo-ev-radius);
  background: #fffbfb;
  font-size: 0.8125rem;
}
.mymmo-ev-debug__title {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--mymmo-ev-danger);
}
.mymmo-ev-debug__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}
.mymmo-ev-debug__table th,
.mymmo-ev-debug__table td {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--mymmo-ev-line);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}
.mymmo-ev-debug__table th { background: var(--mymmo-ev-subtle); white-space: nowrap; }
.mymmo-ev-debug__hint { margin: 0; color: var(--mymmo-ev-muted); }

/* Agenda-knop in de bedankboodschap */
.mymmo-ev-alert__cta { margin: 0.75rem 0 0; }
.mymmo-ev-alert > div { min-width: 0; }

/* ── Aankondiging (mymmo_events_announcement) ─────────────────────────────
   Eén speels kaartje met het gehighlighte (of eerstvolgende) event: een
   curly-arrow wijst er expliciet naar, een groot klavertje ligt als zachte
   achtergrond achter de hele stapel, een paar (desnoods blanco) kaartjes --
   exact even groot als de hoofdkaart, enkel anders gedraaid, als een
   nonchalant neergelegde stapel speelkaarten -- liggen erachter, en rechts
   loopt een illustratie net over de rand van de kaart. */

.mymmo-ev-announce__stage {
  position: relative;
  max-width: var(--mymmo-ev-maxw);
  margin: 0 auto;
  padding: 5.5rem 1.5rem 4.5rem;
}

/* Inline-SVG uit mymmo_events_clover_svg(): getint met currentColor, groot
   genoeg om rond de hele kaartenstapel uit te piepen. */
.mymmo-ev-announce__clover {
  position: absolute;
  top: 40%;
  left: 20%;
  height: auto;
  color: #99f6e447;
  opacity: 0.65;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 0;
  pointer-events: none;
  min-width: 130%;
}

.mymmo-ev-announce__pointer {
  position: absolute;
  top: 1.5rem;
  right: -0.5rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
  pointer-events: none;
  transition: transform 0.25s ease;
}
/* v1.6.11: op hover van de bovenste kaart draait de hele pijl+label-groep
   licht mee, als één stijf geheel (zie announcementHover() in
   mymmo-events.js). transform-origin wordt vanuit JS in pixels gezet op
   het gemeten middelpunt van de kaart -- geen vaste waarde hier, want de
   kaart is fluid-width en een vaste CSS-pivot zou bij een andere
   containerbreedte niet meer kloppen. Label en pijl behouden hun eigen
   vaste rotatie (v1.6.4, hieronder). */
.mymmo-ev-announce__pointer--hover {
  transform: rotate(3deg);
}
.mymmo-ev-announce__pointer-label {
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--mymmo-ev-accent-ink);
  transform: rotate(4deg);
  max-width: 10rem;
}
/* v1.6.4: exacte waarden die Nico zelf live afgesteld heeft in devtools. */
.mymmo-ev-announce__pointer-arrow {
  width: 6rem;
  height: auto;
  transform: scaleX(1) rotate(-35deg);
  margin-top: 0.6rem;
  margin-left: 0.5rem;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.08));
}

/* De "stapel": de kaart is het enige kind dat de layout meebepaalt, de
   kaartjes erachter krijgen `inset: 0` en volgen dus automatisch exact
   dezelfde afmetingen -- enkel de rotatie maakt het verschil. */
.mymmo-ev-announce__deck {
  position: relative;
  z-index: 1;
}

.mymmo-ev-announce__ghost {
  position: absolute;
  inset: 0;
  background: var(--mymmo-ev-surface);
  border: 1px solid var(--mymmo-ev-line);
  border-radius: calc(var(--mymmo-ev-radius) * 1.4);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  padding: 1.5rem;
  overflow: hidden;
  transition: transform 0.2s ease;
  /* v1.6.13: flex-column zodat .mymmo-ev-announce__ghost-ctas altijd onderaan
     de kaart blijft staan, op dezelfde plek als de echte knoppenrij op de
     bovenste kaart -- ongeacht of dit kaartje een titel/datum toont. */
  display: flex;
  flex-direction: column;
}
.mymmo-ev-announce__ghost-date {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.3rem;
  border-radius: 999px;
  background: var(--mymmo-ev-accent-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mymmo-ev-accent-ink);
}
.mymmo-ev-announce__ghost-title {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mymmo-ev-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v1.6.13: decoratieve knoppenrij, exact zoals .mymmo-ev-announce__ctas op de
   bovenste kaart, maar dan puur zichtbaar -- geen <a>, pointer-events: none.
   Zonder dit toonde het randje dat door de rotatie/offset onderaan uitsteekt
   een lege plek precies waar op de echte kaart de knoppen staan. */
.mymmo-ev-announce__ghost-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  pointer-events: none;
}
.mymmo-ev-btn--ghost {
  cursor: default;
}
/* v1.6.11: elk kaartje krijgt een eigen transform-origin (licht naast het
   midden, en niet voor alle drie in dezelfde richting) plus een kleine
   translate() vóór de rotate() -- anders vallen ze bij rotatie 0 exact over
   elkaar, want ze delen verder dezelfde `inset: 0`-box. */
.mymmo-ev-announce__ghost--1 {
  z-index: 2;
  transform-origin: 42% 58%;
  transform: translate(6px, -5px) rotate(-5deg);
}
.mymmo-ev-announce__ghost--2 {
  z-index: 1;
  transform-origin: 58% 44%;
  transform: translate(-7px, 6px) rotate(6deg);
}
.mymmo-ev-announce__ghost--3 {
  z-index: 0;
  transform-origin: 46% 64%;
  transform: translate(4px, 9px) rotate(-9deg);
}
/* v1.6.14: `opacity` stond eerst op de hele `.mymmo-ev-announce__ghost--2/3`-
   kaart. Dat maakte niet enkel de tekst lichter, maar ook de eigen
   ondoorzichtige witte achtergrond van de kaart -- waardoor het klavertje en
   de kaart erachter er letterlijk doorheen schenen (doorzichtig, niet
   "lichter"). De achtergrond van `.mymmo-ev-announce__ghost` blijft daarom nu
   altijd op volle dekking staan (`background: var(--mymmo-ev-surface)` uit de
   basisregel hierboven); enkel de INHOUD (badge, titel, knoppenrij) van de
   kaartjes verder naar achteren wordt fletser -- dat leest nog steeds als
   "lichter", maar dan bovenop een solide witte kaart in plaats van een
   doorzichtige. */
.mymmo-ev-announce__ghost--2 .mymmo-ev-announce__ghost-date,
.mymmo-ev-announce__ghost--2 .mymmo-ev-announce__ghost-title,
.mymmo-ev-announce__ghost--2 .mymmo-ev-announce__ghost-ctas {
  opacity: 0.85;
}
.mymmo-ev-announce__ghost--3 .mymmo-ev-announce__ghost-date,
.mymmo-ev-announce__ghost--3 .mymmo-ev-announce__ghost-title,
.mymmo-ev-announce__ghost--3 .mymmo-ev-announce__ghost-ctas {
  opacity: 0.4;
}

/* Minieme extra beweging op hover van de bovenste kaart (klasse gezet door
   announcementHover() in mymmo-events.js), zodat de stapel licht "schikt". */
.mymmo-ev-announce__deck--hover .mymmo-ev-announce__ghost--1 {
  transform: translate(7px, -7px) rotate(-5.6deg);
}
.mymmo-ev-announce__deck--hover .mymmo-ev-announce__ghost--2 {
  transform: translate(-9px, 8px) rotate(6.5deg);
}
.mymmo-ev-announce__deck--hover .mymmo-ev-announce__ghost--3 {
  transform: translate(5px, 11px) rotate(-9.6deg);
}

.mymmo-ev-announce__card {
  position: relative;
  z-index: 3;
  background: var(--mymmo-ev-surface);
  border: 1px solid var(--mymmo-ev-line);
  border-radius: calc(var(--mymmo-ev-radius) * 1.4);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  padding: 1.5rem;
  transform: rotate(-1.25deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: grid;
  grid-template-columns: 1fr 9rem;
  gap: 1rem;
  overflow: hidden;
  isolation: isolate;
}
.mymmo-ev-announce__card:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.16);
}

/* Vaste tweede kolom: laat bewust witruimte rechts in de tekst vrij, zodat
   de illustratie daar plaats heeft zonder over de tekst te vallen. */
.mymmo-ev-announce__body {
  grid-column: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.mymmo-ev-announce__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: var(--mymmo-ev-accent-soft);
  color: var(--mymmo-ev-accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}
.mymmo-ev-announce__kicker .mymmo-ev-icon {
  width: 0.75em;
  height: 0.75em;
}

.mymmo-ev-announce__card .mymmo-ev-pill {
  margin-bottom: 0.5rem;
}

.mymmo-ev-announce__title {
  margin: 0 0 0.4rem;
  font-size: 1.375rem;
  line-height: 1.25;
}
.mymmo-ev-announce__title a { text-decoration: none; }
.mymmo-ev-announce__title a:hover { text-decoration: underline; }

.mymmo-ev-announce__when {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  color: var(--mymmo-ev-muted);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Vaste hoogte van ~4 regels, ook als de samenvatting korter is of
   ontbreekt -- zo springt de kaart niet mee met de inhoud van het event. */
.mymmo-ev-announce__summary {
  margin: 0 0 1.1rem;
  margin-right: 3rem;
  color: var(--mymmo-ev-text);
  font-size: 0.9rem;
  min-height: calc(1.5em * 4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mymmo-ev-announce__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Loopt bewust over de rechter- en onderrand van de kaart heen (~6-7% valt
   erbuiten); de kaart zelf knipt (overflow: hidden) wat buiten het frame
   valt. Geen eigen achtergrond -- de illustratie is zelf transparant. */
.mymmo-ev-announce__image {
  position: absolute;
  right: -1.2rem;
  bottom: -1.2rem;
  width: 18rem;
  height: 18rem;
  z-index: 0;
  pointer-events: none;
}
.mymmo-ev-announce__image img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* v1.6.15: pointer, illustratie en het derde kaartje verdwenen hier eerder
   volledig (display:none) -- exact de content die deze widget herkenbaar
   maakt. Nu blijft alles zichtbaar: de pointer krimpt, het derde kaartje
   blijft gewoon meedraaien (de translate()-offsets zijn te klein om ergens
   over te lopen), en de illustratie stroomt in de tekst (position: static)
   i.p.v. als absoluut gepositioneerde hoek-afbeelding -- in de
   eenkolomslayout zou die anders gewoon onder de volle-breedte tekst/
   knoppen verdwijnen (z-index van .body ligt boven .image, zie hierboven). */
@media (max-width: 34rem) {
  .mymmo-ev-announce__stage { padding: 4.5rem 0.5rem 2.75rem; }
  .mymmo-ev-announce__card { grid-template-columns: 1fr; padding: 1.15rem; }
  .mymmo-ev-announce__summary { margin-right: 0; }
  .mymmo-ev-announce__pointer-arrow { width: 4rem; }
  .mymmo-ev-announce__pointer-label { font-size: 0.8125rem; max-width: 6.5rem; }
  .mymmo-ev-announce__image { display: none; }
  .mymmo-ev-announce__ctas {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .mymmo-ev-announce__ctas .mymmo-ev-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.5rem;
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* ── Kaartenrij (mymmo_events_row) ─────────────────────────────────────────
   Kaarten als een losjes neergelegde stapel scheurkalenderblaadjes, lichter
   en veel lager dan de aankondiging -- bedoeld om ook mid-pagina te
   plaatsen, op dezelfde breedte als de rest. `count` heeft geen vaste cap
   van 4 meer (zie ROW_MAX_COUNT in class-shortcodes.php); minder events dan
   `count` toont gewoon minder kaarten, uitgespreid over de VOLLEDIGE
   beschikbare breedte (geen blanco aanvulling en geen ongebruikte ruimte
   meer -- zie rowOverlapFit() in mymmo-events.js).
   De kaarten overlappen (negatieve margin-left op alle behalve de eerste,
   soms zelfs een kleine positieve tussenruimte bij weinig kaarten) en de
   rij wordt NOOIT breder dan de beschikbare ruimte -- geen horizontale
   scrollbar, in plaats daarvan berekent rowOverlapFit() in mymmo-events.js
   hoeveel overlap (of ruimte) nodig is voor het aantal kaarten en de
   beschikbare breedte. Stapelvolgorde ligt vast en hangt af van
   `date_align` (zie .mymmo-ev-row__cards--date-right hieronder en de
   inline z-index per kaart in de template): hoveren duwt de buren opzij
   tot het kaartje volledig zichtbaar is, zonder die volgorde te wijzigen.
   Kaarten zijn altijd even hoog (align-items: stretch, geen vaste height
   meer) en tonen de volledige titel zonder afkapping. */
.mymmo-ev-row {
  position: relative;
  max-width: var(--mymmo-ev-maxw);
  margin: 0 auto;
  padding: 2.25rem 0 0.5rem;
}

/* Decoratieve scribble, rechts uitgelijnd achter de kaartenrij -- zelfde
   asset-aanpak als de aankondiging (mymmo_events_asset_url), maar als
   gewone <img> i.p.v. inline SVG: dit bestand hoeft geen currentColor te
   volgen. z-index 0 + .mymmo-ev-row__cards op z-index 1 houdt 'm achter
   de kaarten, ongeacht DOM-volgorde.
   v1.6.19: waarden live afgesteld in devtools (Nico) -- geen vaste breedte
   en volle opacity meer (verdween anders achter de kaart), top 30% i.p.v.
   50%, en een lichte negatieve right zodat hij net over de rand bleedt. */
.mymmo-ev-row__scribble {
  position: absolute;
  top: 30%;
  right: -5%;
  transform: translateY(-50%);
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.mymmo-ev-row__cards {
  position: relative;
  z-index: 1;
  display: flex;
  /* Laat verticaal scrollen van de pagina toe, maar geeft horizontale
     swipes (mobiel, geen hover) vrij aan rowSwipeEnable() in
     mymmo-events.js i.p.v. dat de browser die als paginascroll opvat. */
  touch-action: pan-y;
  /* stretch (i.p.v. flex-start): alle kaarten worden even hoog als de
     hoogste van de rij -- samen met min-height i.p.v. height op de kaart
     zelf (zie .mymmo-ev-row__card) is dit hoe kaarten met volledige,
     niet-afgekapte titels toch gelijk hoog blijven. */
  align-items: stretch;
  padding: 2.4rem 0.25rem 1rem;
  /* v1.6.20: bewust GEEN overflow-x:auto/scroll meer -- de rij mag nooit
     breder worden dan de beschikbare ruimte (dus ook nooit een
     scrollbar). rowOverlapFit() in mymmo-events.js berekent hoeveel
     overlap (of, bij weinig kaarten, tussenruimte) daarvoor nodig is en
     zet dat hieronder als custom property, zodat de rij ook bij weinig
     kaarten de volledige breedte vult i.p.v. een deel ongebruikt te
     laten; zonder JS geldt gewoon deze vaste waarde. */
  --mymmo-ev-row-overlap: 3.25rem;
}

/* "Schrijf je snel in!"-tagje: bestaat maar één keer per rij (niet meer
   per kaart) en wordt door rowPointerFollow() in mymmo-events.js
   verplaatst (DOM-reparent) naar welk kaartje dan ook gehoverd wordt --
   daarom hier geen kaart-specifieke selector, gewoon de klasse zelf.
   Standaard onzichtbaar; JS voegt pas na 500ms .is-visible toe, met een
   kleine "aanloop"-animatie (cartoonprincipe: eerst een tikje terug/in,
   dan met overshoot naar de rustpositie) i.p.v. gewoon in-faden. */
/* date_align="right": datum + uur rechts uitgelijnd op elk kaartje, zodat
   ze zichtbaar blijven ongeacht welk deel van de kaart schuilgaat achter
   de buur (zie z-index-formule + doc-comment in templates/row.php). De
   titel blijft bewust links uitgelijnd/normaal vloeiend -- die is te lang
   om sowieso altijd volledig zichtbaar te houden, dus daar verandert
   uitlijning weinig aan. */
.mymmo-ev-row__cards--date-right .mymmo-ev-row__dow,
.mymmo-ev-row__cards--date-right .mymmo-ev-row__day,
.mymmo-ev-row__cards--date-right .mymmo-ev-row__month,
.mymmo-ev-row__cards--date-right .mymmo-ev-row__meta {
  text-align: right;
}

.mymmo-ev-row__pointer {
  position: absolute;
  top: -2.1rem;
  right: 0.1rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.4rem) scale(0.8) rotate(-8deg);
  transition: opacity 0.15s ease;
}
.mymmo-ev-row__pointer.is-visible {
  opacity: 1;
  animation: mymmoRowPointerPop 0.42s both;
}
/* Cartoonachtige aanloop (anticipatie + lichte overshoot), maar subtieler
   en met een eigen timing-function per fase i.p.v. één extreme globale
   cubic-bezier -- dat laatste oogde "houterig" (te grote sprongen tussen
   de keyframe-stops). Nu: snel infaden, een kleine terugwijkende
   aanloopbeweging, dan een zachte overshoot die rustig settelt. */
@keyframes mymmoRowPointerPop {
  0%   {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.82) rotate(-6deg);
    animation-timing-function: ease-out;
  }
  35%  {
    opacity: 1;
    transform: translateY(0.42rem) scale(0.8) rotate(-8deg);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  75%  {
    transform: translateY(-0.06rem) scale(1.04) rotate(2deg);
    animation-timing-function: ease-out;
  }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.mymmo-ev-row__pointer-label {
  font-family: inherit;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--mymmo-ev-accent-ink);
  transform: rotate(4deg);
  max-width: 6.5rem;
}
.mymmo-ev-row__pointer-arrow {
  width: 3rem;
  height: auto;
  transform: scaleX(1) rotate(-35deg);
  margin-top: 0.3rem;
  margin-left: 0.4rem;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.08));
}

/* date_align="right": de datum staat rechts uitgelijnd op de kaart, dus
   het "Schrijf je snel in!"-tagje verhuist mee naar de linkerbovenhoek
   (i.p.v. rechts) en het krulletje wordt horizontaal gespiegeld zodat het
   nog steeds naar de kaart toe lijkt te wijzen. */
.mymmo-ev-row__cards--date-right .mymmo-ev-row__pointer {
  right: auto;
  left: 0.1rem;
  align-items: flex-start;
  text-align: left;
}
.mymmo-ev-row__cards--date-right .mymmo-ev-row__pointer-arrow {
  transform: scaleX(-1) rotate(-35deg);
  margin-left: 0;
  margin-right: 0.4rem;
}

/* Stapelvolgorde: elke kaart krijgt in de template een INLINE z-index mee
   (links = hoogste, dus bovenop; elke volgende kaart ligt daar telkens
   verder onder). Die volgorde ligt vast -- hover verandert 'm bewust
   NIET (zie :hover hieronder), enkel de marges. */
.mymmo-ev-row__card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  /* min-width i.p.v. een vaste width (200px, live getest) -- de kaarten
     waren te smal; ze mogen breder worden dan dit (bv. content), maar
     nooit smaller. rowOverlapFit() laat kaarten bij veel exemplaren
     verder over elkaar schuiven i.p.v. ze onder deze grens te duwen. */
  width: 200px;
  min-width: 200px;
  /* min-height i.p.v. een vaste height: samen met align-items: stretch op
     de ouder (.mymmo-ev-row__cards) worden alle kaarten in de rij
     automatisch even hoog als de hoogste, i.p.v. een vaste hoogte die de
     titel afkapt. Basiswaarde iets hoger dan voorheen (was 9.5rem) zodat
     een titel van gemiddelde lengte al zonder groei past. */
  min-height: 10.75rem;
  padding: 0.9rem 0.85rem;
  margin-left: calc(-1 * var(--mymmo-ev-row-overlap));
  border: 1px solid var(--mymmo-ev-line);
  border-radius: var(--mymmo-ev-radius-sm);
  background: var(--mymmo-ev-surface);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, margin 0.22s ease;
}
/* Eerste (bovenste) kaart heeft niets om over te schuiven.
   v1.6.33: :first-of-type, NIET :first-child. Het "Schrijf je snel in!"-
   tagje (.mymmo-ev-row__pointer, een <span>) staat in de markup VOOR de
   kaarten, dus was dat span het echte :first-child en kreeg ook de eerste
   kaart de negatieve margin-left. Daardoor stond de hele rij bij het laden
   van de pagina precies een overlap-breedte (3.25rem, of de door JS
   berekende waarde) te ver naar links; zodra je een kaart hoverde
   verhuisde het tagje via JS in die kaart, werd de eerste kaart plots wel
   :first-child en sprong de rij terug op zijn plaats -- vandaar dat dit
   enkel "bij het laden" leek te gebeuren. De kaarten zijn de enige <a>'s
   in de container, dus :first-of-type klopt ongeacht waar dat tagje op dat
   moment staat. */
.mymmo-ev-row__card:first-of-type {
  margin-left: 0;
}
/* Op hover: eigen marge aan beide kanten vergroten duwt de linker- en
   rechterbuur zichtbaar opzij (marges tellen op in flexbox, ze vallen niet
   samen zoals in blokopmaak) tot het kaartje volledig vrij ligt -- geen
   z-index-wijziging, de stapelvolgorde blijft exact hetzelfde. Geen
   schaalvergroting hier met opzet: dat zou net weer een stukje onder de
   buur kunnen duwen. */
.mymmo-ev-row__card:hover,
.mymmo-ev-row__card.is-active {
  margin-left: 0.5rem;
  margin-right: 1.5rem;
  transform: translateY(-6px) rotate(0deg);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}
.mymmo-ev-row__card:first-of-type:hover,
.mymmo-ev-row__card:first-of-type.is-active {
  margin-left: 0;
}

/* Losjes neergelegd: geen twee kaartjes in dezelfde richting of op dezelfde
   hoogte. Cyclisch (i % 4), dus ook bij meer dan 4 kaarten blijft dit
   afwisselen i.p.v. herhalen in een herkenbaar patroon van precies 4. */
.mymmo-ev-row__card--1 { transform: rotate(-2deg) translateY(2px); }
.mymmo-ev-row__card--2 { transform: rotate(1.5deg) translateY(-3px); }
.mymmo-ev-row__card--3 { transform: rotate(-1deg) translateY(1px); }
.mymmo-ev-row__card--4 { transform: rotate(2deg) translateY(-2px); }

/* Badge met het eventtype, inline vlak boven de titel -- niet meer
   absoluut in de hoek: dat botste met de curl van .mymmo-ev-row__pointer
   hierboven, die precies in die hoek naar beneden in de kaart wijst.
   Bewust een pop of color (volle achtergrondkleur, niet enkel een
   gekleurde stip) zodat hij opvalt tussen de rest van de compacte
   kaartinhoud; nooit afgekapt, ook niet bij een lange typenaam. */
.mymmo-ev-row__type-badge {
  align-self: flex-start;
  margin-bottom: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--mymmo-ev-row-badge-color, #475569) 15%, white);
  color: color-mix(in srgb, var(--mymmo-ev-row-badge-color, #475569) 80%, black);
}

.mymmo-ev-row__dow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mymmo-ev-accent-ink);
}
.mymmo-ev-row__day {
  margin-top: 0.05rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mymmo-ev-ink);
  font-variant-numeric: tabular-nums;
}
.mymmo-ev-row__month {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mymmo-ev-faint);
}
/* Uur + locatie, compact op één regel (afgekapt met ellipsis i.p.v.
   uitgerekt: dit kaartje is bewust klein). */
.mymmo-ev-row__meta {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  color: var(--mymmo-ev-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mymmo-ev-row__meta-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mymmo-ev-row__meta-time .mymmo-ev-icon {
  color: var(--mymmo-ev-accent-ink);
}
.mymmo-ev-row__meta-loc::before {
  content: "· ";
}
/* Geen afkapping meer (was -webkit-line-clamp: 2 + ellipsis): de titel
   wordt altijd volledig getoond. Kaarten blijven toch gelijk hoog dankzij
   align-items: stretch op .mymmo-ev-row__cards. */
.mymmo-ev-row__title {
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mymmo-ev-ink);
  overflow-wrap: break-word;
}

.mymmo-ev-row__more {
  margin: 0.6rem 0 0;
  text-align: right;
  font-size: 0.8125rem;
}
.mymmo-ev-row__more a {
  color: var(--mymmo-ev-muted);
  text-decoration: none;
}
.mymmo-ev-row__more a:hover {
  color: var(--mymmo-ev-accent-ink);
  text-decoration: underline;
}

/* Mobile-friendly van bij het ontwerp: kleinere kaarten + meer overlap
   i.p.v. dat kaartjes wegvallen -- rowOverlapFit() past dit sowieso verder
   aan zodat de rij nooit breder wordt dan het scherm. */
@media (max-width: 40rem) {
  /* Kleinere fallback-overlap voor als JS nog niet gedraaid heeft --
     rowOverlapFit() overschrijft dit sowieso zodra het kan. */
  .mymmo-ev-row__cards { --mymmo-ev-row-overlap: 2.5rem; }
  .mymmo-ev-row__card { width: 8rem; min-width: 8rem; min-height: 9.5rem; }
  .mymmo-ev-row__card:hover { margin-left: 0.35rem; margin-right: 1rem; }
  /* Geen vaste breedte meer op desktop (v1.6.19) -- hier WEL een grens,
     anders bleedt de scribble op een telefoonbreedte over de hele rij. */
  .mymmo-ev-row__scribble { max-width: 7rem; opacity: 0.6; }
  .mymmo-ev-row__pointer-arrow { width: 2.25rem; }
  .mymmo-ev-row__pointer-label { font-size: 0.6875rem; max-width: 5rem; }
}
@media (max-width: 24rem) {
  .mymmo-ev-row__cards { --mymmo-ev-row-overlap: 2rem; }
  .mymmo-ev-row__card { width: 7.25rem; min-width: 7.25rem; min-height: 9.25rem; }
  .mymmo-ev-row__scribble { display: none; }
}


/* -- Swipebare kaartenstapel (mobiel: rij + aankondiging) ------------------
   Op mobiel (<= 40rem) tonen [mymmo_events_row] en
   [mymmo_events_announcement] EXACT dezelfde stapel: dezelfde DOM-structuur
   (zie templates/row.php en templates/announcement.php), dezelfde klassen,
   dezelfde buitenmarges en dezelfde swipe-logica. Kaarten liggen licht
   gedraaid over elkaar, net als de vaste decoratieve stapel die de
   aankondiging op desktop heeft (.mymmo-ev-announce__ghost--1/2/3), maar
   het zijn ECHTE kaarten met eigen titel/tijd/knop.

   Structuur (identiek in beide templates):

     .mymmo-ev-swipestack            position: relative; reserveert bovenaan
                                     ruimte voor het pointer-tagje
       .mymmo-ev-announce__pointer   "Schrijf je snel in!", absoluut
                                     rechtsboven in die ruimte
       .mymmo-ev-swipestack__cards   <-- krijgt .mymmo-ev-deck-mode van JS;
                                     DIT is het positioneringskader van de
                                     kaarten erachter (inset: 0)
         .mymmo-ev-deck-card * n
       .mymmo-ev-swipedots           stipjes (door JS gebouwd)
       .mymmo-ev-swipehint           "Swipe om ..."-hint; verdwijnt na de
                                     eerste swipe

   v1.6.33 -- wat er mis was in 1.6.30-1.6.32 en hier gefixt is:
   - De kaarten erachter liggen op position: absolute; inset: 0. Zaten de
     hint (en straks de stipjes) in dezelfde container, dan rekende inset: 0
     vanaf de BOVENKANT van die container -- dus vanaf boven de hint -- en
     lagen die kaartjes systematisch te hoog t.o.v. de bovenste kaart.
     Vandaar nu een wrapper die niets anders bevat dan de kaarten zelf.
   - De rij en de aankondiging hadden op mobiel verschillende buitenmarges
     (2.25rem 0 0.5rem vs. 5.5rem 1.5rem 4.5rem, of 4.5/0.5/2.75 onder
     34rem) en verschillende decoratie (scribble vs. klavertje). Beide
     stonden daardoor anders uitgelijnd, terwijl ze er identiek horen uit te
     zien. Alle binnenruimte zit nu in .mymmo-ev-swipestack, alle decoratie
     valt op mobiel weg.
   - De rotaties van de kaartjes erachter zijn iets kleiner dan op desktop:
     een gedraaide kaart is breder dan zijn eigen kader, en op
     telefoonbreedte staken de hoeken buiten de beschikbare ruimte
     (horizontale paginascroll).

   v1.6.34 -- scheefstand hoort bij de KAART, niet bij de stapelpositie:
   - Elke positie had een eigen hoek (0: -1.25, 1: -4.5, 2: 5, 3: -7
     graden). Een kaart die na een swipe naar voren schoof veranderde
     daardoor onvermijdelijk van hoek, precies op het moment dat de swipe
     klaar was. Dat is geen animatie (nagemeten met transition-events: er
     loopt geen transitie, de nieuwe bovenste kaart landt rechtstreeks op
     zijn nieuwe hoek) maar een instant sprong -- en precies die sprong
     voelde houterig.
   - Nu krijgt elke kaart via :nth-child(4n+x) een eigen vaste hoek
     (--mymmo-ev-deck-rot, cyclus van 4 zoals .mymmo-ev-row__card--1..4 op
     desktop) en houdt ze die door de hele stapel heen. De stapel ligt dus
     nog altijd los en scheef met elke kaart anders gedraaid, maar er kan
     nergens meer een hoek verspringen.
   - De VERSCHUIVING blijft wel per positie -- dat is wat de stapel
     zichtbaar maakt -- en wordt bij een swipe mét transitie naar voren
     geschoven, zodat het eruitziet alsof je door de stapel gaat. Enkel de
     kaart die van de ene kant van het scherm naar de andere moet, springt
     transitieloos (zie .is-returning).

   v1.6.35 -- vooruit en terug zijn spiegelbeelden van elkaar:
   - Vooruit verdwijnt een kaart naar LINKS en komt ze onderaan de stapel.
     Terugswipen trekt die vorige kaart dus ook van LINKS terug naar boven
     (.is-incoming hieronder) -- niet van rechts, want dan lijkt het alsof
     de kaart die je net naar rechts sleepte gewoon terugkeert, en zie je
     niet waar ze belandt.
   - Tijdens een terugsleep beweegt de BOVENSTE kaart niet: de vorige kaart
     komt van links mee met je vinger (zie mymmo-events.js). Dat is de hele
     boodschap van dat gebaar -- je trekt de vorige kaart terug -- en de
     kaart die je zag blijft liggen en zakt enkel een plaats.
   - Tijdens het SLEPEN kantelt de kaart mee met je vinger BOVEN OP haar
     eigen hoek (mymmo-events.js rekent die erbij), zodat er ook bij het
     begin van een sleep niets rechtspringt. */
.mymmo-ev-swipestack {
  display: none;
  position: relative;
}
.mymmo-ev-swipestack .mymmo-ev-announce__card {
  grid-template-columns: 1fr;
}
/* Enkel de kaarten -- niets anders in deze wrapper, zie doc-blok. */
.mymmo-ev-swipestack__cards {
  position: relative;
}
/* De hoogte van de stapel komt normaal van de kaart die in de flow staat
   (data-deck-pos="0"). Tijdens het terugswipen ligt de invliegende kaart
   bovenop maar absoluut gepositioneerd (.is-incoming), en de kaart die
   bovenaan lag is dan al naar positie 1 gezakt -- dus staat er even geen
   kaart in de flow. Zonder deze min-height klapt de stapel op dat moment
   in tot 0 en verspringt de hele pagina. equalizeDeckCardHeights() in
   mymmo-events.js zet deze var toch al op de hoogste kaart. */
.mymmo-ev-deck-mode {
  min-height: var(--mymmo-ev-deck-h, auto);
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card {
  width: auto;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  height: var(--mymmo-ev-deck-h, auto);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease, box-shadow 0.2s ease;
  touch-action: pan-y;
  /* Sleepgevoel: geen tekstselectie of native link/image-drag die de swipe
     halverwege afbreekt met een pointercancel. */
  user-select: none;
  -webkit-user-select: none;
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card a,
.mymmo-ev-deck-mode .mymmo-ev-deck-card img {
  -webkit-user-drag: none;
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card.is-dragging {
  transition: none;
}
/* Eén frame zonder transitie, voor een kaart die JS van de ene kant van het
   scherm naar de andere moet verplaatsen zonder dat je dat ziet gebeuren:
   de weggeswipete kaart die onderaan de stapel wordt ingeschoven, en de
   terugkomende kaart die eerst links buiten beeld klaargezet wordt. Zonder
   dit zweefde zo'n kaart zichtbaar over het scherm -- de "kaart vliegt
   terug"-glitch van 1.6.30-1.6.32. Deze klasse staat bewust op de KAART en
   niet op de stapel: de overige kaarten moeten juist wél met een transitie
   naar hun nieuwe plaats schuiven, want dat is wat het gevoel geeft dat je
   door de stapel gaat. */
.mymmo-ev-deck-mode .mymmo-ev-deck-card.is-returning {
  transition: none !important;
}

/* Eigen vaste hoek per kaart -- cyclisch per 4, dus ook bij meer kaarten
   blijft het afwisselen i.p.v. herhalen in een herkenbaar patroon van
   precies 4 (zelfde aanpak als .mymmo-ev-row__card--1..4 op desktop).
   Elke stapelpositie hieronder gebruikt deze var, zodat de hoek van een
   kaart nooit verandert wanneer ze door de stapel schuift. */
.mymmo-ev-deck-mode .mymmo-ev-deck-card:nth-child(4n+1) { --mymmo-ev-deck-rot: -2.5deg; }
.mymmo-ev-deck-mode .mymmo-ev-deck-card:nth-child(4n+2) { --mymmo-ev-deck-rot: 1.75deg; }
.mymmo-ev-deck-mode .mymmo-ev-deck-card:nth-child(4n+3) { --mymmo-ev-deck-rot: -1.25deg; }
.mymmo-ev-deck-mode .mymmo-ev-deck-card:nth-child(4n+4) { --mymmo-ev-deck-rot: 2.25deg; }
/* Per positie enkel nog een VERSCHUIVING; de hoek komt van de kaart zelf
   (--mymmo-ev-deck-rot hierboven). Ook geen transform-origin per positie
   meer: een ander draaipunt per positie was een tweede bron van
   verspringen. */
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="0"] {
  position: relative;
  z-index: 4;
  transform: rotate(var(--mymmo-ev-deck-rot, 0deg));
  opacity: 1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="1"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: translate(7px, -6px) rotate(var(--mymmo-ev-deck-rot, 0deg));
  opacity: 1;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="2"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translate(-8px, 7px) rotate(var(--mymmo-ev-deck-rot, 0deg));
  opacity: 0.9;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="2"] .mymmo-ev-announce__body {
  opacity: 0.85;
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="3"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate(5px, 12px) rotate(var(--mymmo-ev-deck-rot, 0deg));
  opacity: 0.75;
  pointer-events: none;
  box-shadow: none;
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="3"] .mymmo-ev-announce__body {
  opacity: 0.4;
}
.mymmo-ev-deck-mode .mymmo-ev-deck-card[data-deck-pos="hidden"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

/* De kaart die bij TERUGSWIPEN van links terug de stapel op komt. Deze
   klasse moet NA de data-deck-pos-regels hierboven staan: ze heeft dezelfde
   specificiteit, dus enkel de plaats in het bestand bepaalt wie wint. Ze
   overschrijft bewust drie dingen, ongeacht op welke stapelpositie de kaart
   op dat moment staat:
   - z-index 5: ze ligt boven de hele stapel, ook al staat ze bij het begin
     van de sleep nog achteraan (data-deck-pos="3" of "hidden");
   - opacity 1 en position absolute: achterste posities zijn half of niet
     zichtbaar, en absoluut blijven staan zorgt ervoor dat de kaart die
     bovenaan lag rustig kan blijven liggen (zie min-height hierboven);
   - pointer-events none: de vinger blijft op de kaart eronder, die de
     pointer-capture heeft. */
.mymmo-ev-deck-mode .mymmo-ev-deck-card.is-incoming {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

/* Titel max. 2 regels, samenvatting max. 4 regels, met ellipsis als het
   langer is -- samen met equalizeDeckCardHeights() in mymmo-events.js
   (dat de hoogste kaart meet en die hoogte als --mymmo-ev-deck-h op de
   wrapper zet) houdt dit alle kaarten in de stapel exact even hoog. */
.mymmo-ev-swipestack .mymmo-ev-announce__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mymmo-ev-swipestack .mymmo-ev-announce__summary {
  margin-right: 0;
}

/* Stipjes onder de stapel: hoeveel kaarten er zijn en waar je zit, en
   aanklikbaar om direct naar een kaart te springen. Zonder indicator was
   er op mobiel geen enkel signaal hoeveel events er nog volgden (de
   swipe-hint zei "swipe", maar niet hoe vaak). JS bouwt de knopjes, zodat
   het aantal altijd exact het aantal kaarten volgt. */
.mymmo-ev-swipedots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  /* Ruim genoeg voor de onderste kaart van de stapel: die staat 12px lager
     en kantelt daar nog bovenop. */
  margin: 1.4rem 0 0;
}
.mymmo-ev-swipedot {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mymmo-ev-swipedot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--mymmo-ev-line);
  transition: width 0.22s ease, background-color 0.22s ease;
}
.mymmo-ev-swipedot.is-active::before {
  width: 1.15rem;
  background: var(--mymmo-ev-accent-ink);
}

/* Hint ONDER de stapel (v1.6.33): tot 1.6.32 stond die erboven, omdat de
   geabsoluteerde kaartjes erachter door hun offset onder de bovenste kaart
   uitstaken en tekst daarna onvoorspelbaar verschoof. Nu zitten die
   kaartjes in hun eigen wrapper (zie boven), dus staat de tekst eronder
   wel vast -- en dat is ook de logische leesplek: eerst de kaart, dan wat
   je ermee kan. */
.mymmo-ev-swipehint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mymmo-ev-muted);
  text-align: center;
  transition: opacity 0.3s ease;
}
.mymmo-ev-swipehint__scribble {
  width: 1.85rem;
  height: auto;
  flex: 0 0 auto;
  opacity: 0.85;
}
/* Na de eerste swipe is de boodschap overbodig. visibility i.p.v. display,
   zodat de stapel niet verspringt op het moment dat de hint weggaat. */
.mymmo-ev-swipehint.is-dismissed {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 40rem) {
  /* Alle binnenruimte van de mobiele zone zit hier -- padding-top
     reserveert de plek van het pointer-tagje, de zijkanten geven de
     gedraaide hoeken van de kaartjes erachter de ruimte die ze nodig
     hebben. */
  .mymmo-ev-swipestack {
    display: block;
    padding: 4.5rem 1.5rem 0.5rem;
  }
  .mymmo-ev-swipedots { display: flex; }
  .mymmo-ev-swipehint { display: flex; }

  .mymmo-ev-row__cards { display: none; }
  .mymmo-ev-row__more { display: none; }
  .mymmo-ev-announce__deck { display: none; }

  /* Identieke buitenmarges voor beide componenten (zie doc-blok). */
  .mymmo-ev-row,
  .mymmo-ev-announce__stage {
    padding: 0;
    /* clip, niet hidden: de gedraaide hoeken mogen nooit horizontale
       paginascroll veroorzaken, maar dit mag ook geen scroll-container
       worden (dat breekt position: sticky in het thema eromheen). */
    overflow-x: clip;
  }

  /* Geen decoratie op mobiel: het klavertje van de aankondiging en de
     scribble van de rij waren het laatste zichtbare verschil tussen beide
     componenten, en ze trokken de stapel ook optisch uit het midden. */
  .mymmo-ev-row__scribble,
  .mymmo-ev-announce__stage > .mymmo-ev-announce__clover {
    display: none;
  }

  /* Het pointer-tagje bestaat op mobiel enkel binnen de stapel (identieke
     markup in beide templates); de desktopvariant van de aankondiging
     (direct kind van .mymmo-ev-announce__stage) blijft verborgen. */
  .mymmo-ev-announce__stage > .mymmo-ev-announce__pointer {
    display: none;
  }
  .mymmo-ev-swipestack > .mymmo-ev-announce__pointer {
    top: 0;
    /* Absolute positionering rekent vanaf de padding-box, dus right: 0 zou
       de 1.5rem zijruimte van .mymmo-ev-swipestack negeren en het label tot
       tegen de schermrand duwen (waar het op een smal toestel afgesneden
       werd). 1rem laat het net iets over de kaartrand komen -- daar wijst
       het krulletje ook naartoe -- en houdt het binnen het scherm. */
    right: 1rem;
    /* Anticiperende verschijnbeweging: op mobiel bestaat er geen hover,
       dus speelt deze animatie hier eenmalig af bij het laden. */
    animation: mymmoRowPointerPop 0.5s both;
    animation-delay: 0.35s;
  }
  .mymmo-ev-swipestack .mymmo-ev-announce__pointer-arrow { width: 4rem; }
  .mymmo-ev-swipestack .mymmo-ev-announce__pointer-label {
    font-size: 0.8125rem;
    max-width: 6.5rem;
  }

  /* Kaartopmaak gelijk over de hele mobiele zone: de aankondiging deed dit
     pas onder 34rem, waardoor 34-40rem een andere kaart toonde dan de rij
     op diezelfde breedte. */
  .mymmo-ev-swipestack .mymmo-ev-announce__card { padding: 1.15rem; }
  .mymmo-ev-swipestack .mymmo-ev-announce__image { display: none; }
}