/* ==========================================================================
   components.css — herbruikbare UI componenten
   ========================================================================== */

/* Hero */
.hero {
  padding: var(--space-7) 0 var(--space-6);
  background:
    linear-gradient(180deg, var(--color-sand-dark) 0%, var(--color-sand) 100%);
  border-bottom: 1px solid var(--color-line);
  margin: calc(-1 * var(--space-7)) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  background-image: radial-gradient(circle, var(--color-saffron-light) 2px, transparent 2px);
  background-size: 22px 22px;
  opacity: 0.35;
  pointer-events: none;
}
.hero h1 {
  margin-bottom: var(--space-3);
  color: var(--color-charcoal);
}
.hero .lead {
  max-width: 60ch;
  margin: 0 0 var(--space-5);
  color: var(--color-clay);
}
.hero .container { position: relative; }

/* Page header (kleinere variant voor binnenpagina's) */
.page-header {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-6);
}
.page-header h1 {
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   Marokkaanse hero component (op elke pagina, met unieke illustratie)
   ========================================================================== */

.mg-hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-6);
  margin: calc(-1 * var(--space-7)) 0 var(--space-6);
  background: linear-gradient(135deg, #fdf8ee 0%, #f6ead0 55%, #f0d9a8 100%);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}

/* Zellige patroon laag 1: herhalend Marokkaans patroon, uniek per pagina.
   Het standaard patroon (acht-puntige ster) wordt gebruikt als geen
   data-pattern attribuut is gezet. Patroon-varianten verderop in CSS. */
.mg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23c14d34' stroke-width='1.2' opacity='0.22'><path d='M40 8 L48 24 L64 16 L56 32 L72 40 L56 48 L64 64 L48 56 L40 72 L32 56 L16 64 L24 48 L8 40 L24 32 L16 16 L32 24 Z'/><circle cx='40' cy='40' r='6'/></g><g fill='%23d99b2c' opacity='0.18'><circle cx='40' cy='40' r='2'/><circle cx='0' cy='0' r='2'/><circle cx='80' cy='0' r='2'/><circle cx='0' cy='80' r='2'/><circle cx='80' cy='80' r='2'/></g></svg>");
  background-size: 80px 80px;
  background-repeat: repeat;
  pointer-events: none;
  /* Mask: patroon valt sterker weg achter de tekst (links bij NL).
     Lagere alpha-waardes = meer transparant = patroon vervaagt meer. */
  mask-image:
    radial-gradient(ellipse 60% 100% at 25% 50%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 50%, black 100%),
    linear-gradient(black, black);
  -webkit-mask-image:
    radial-gradient(ellipse 60% 100% at 25% 50%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 50%, black 100%),
    linear-gradient(black, black);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* === Patroon varianten per pagina-variant === */

/* HOME: acht-puntige ster met centrale zeshoek (klassieke khatim) */
.mg-hero[data-pattern="home"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><path d='M45 10 L54 28 L72 19 L63 37 L81 46 L63 55 L72 73 L54 64 L45 82 L36 64 L18 73 L27 55 L9 46 L27 37 L18 19 L36 28 Z'/><polygon points='45,32 54,40 54,52 45,60 36,52 36,40' /></g><g fill='%23d99b2c' opacity='0.20'><circle cx='45' cy='46' r='2.5'/></g></svg>");
  background-size: 90px 90px;
}

/* REGIO: ruit/diamond grid (Berber tapijt motief) */
.mg-hero[data-pattern="regio"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><polygon points='35,5 55,35 35,65 15,35'/><polygon points='35,18 47,35 35,52 23,35'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='35' cy='35' r='2'/><circle cx='0' cy='35' r='2'/><circle cx='70' cy='35' r='2'/><circle cx='35' cy='0' r='2'/><circle cx='35' cy='70' r='2'/></g></svg>");
  background-size: 70px 70px;
}

/* HOTELS: mihrab-bogen rij (riad gevel motief) */
.mg-hero[data-pattern="hotels"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><path d='M10 90 L10 50 Q 10 25, 40 25 Q 70 25, 70 50 L70 90'/><path d='M22 90 L22 55 Q 22 35, 40 35 Q 58 35, 58 55 L58 90'/></g><g fill='%23d99b2c' opacity='0.20'><path d='M40 12 L43 18 L49 19 L44 23 L46 29 L40 26 L34 29 L36 23 L31 19 L37 18 Z'/></g></svg>");
  background-size: 80px 100px;
}

/* EXCURSIES: golvende lijnen + kleine duinen (woestijn motief) */
.mg-hero[data-pattern="excursies"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><path d='M0 30 Q 25 15, 50 30 T 100 30'/><path d='M0 45 Q 25 30, 50 45 T 100 45'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='25' cy='15' r='1.8'/><circle cx='75' cy='15' r='1.8'/><circle cx='50' cy='5' r='1.5'/></g></svg>");
  background-size: 100px 60px;
}

/* AUTOHUUR: hexagonen (kompas/banden grid) */
.mg-hero[data-pattern="autohuur"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><polygon points='42,8 70,24 70,56 42,72 14,56 14,24'/><polygon points='42,20 60,30 60,50 42,60 24,50 24,30'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='42' cy='40' r='2'/></g></svg>");
  background-size: 84px 96px;
}

/* PAKKETREIZEN: kruis-kruis met sterren (vliegtuig spoor / kompasrozen motief) */
.mg-hero[data-pattern="pakketreizen"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><path d='M40 10 L40 70 M10 40 L70 40'/><path d='M20 20 L60 60 M60 20 L20 60' stroke-width='1' opacity='0.6'/></g><g fill='%23d99b2c' opacity='0.20'><path d='M40 33 L43 39 L49 40 L43 41 L40 47 L37 41 L31 40 L37 39 Z'/></g></svg>");
  background-size: 80px 80px;
}

/* BLOG: arabesken vlechtwerk (eindeloze knoop motief) */
.mg-hero[data-pattern="blog"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><circle cx='40' cy='40' r='25'/><circle cx='40' cy='40' r='15'/><path d='M40 15 L40 65 M15 40 L65 40' stroke-width='1' opacity='0.7'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='40' cy='40' r='3'/></g></svg>");
  background-size: 80px 80px;
}

/* OVER: vierkante bloemen (Marokkaanse muurtegel) */
.mg-hero[data-pattern="over"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><path d='M35 12 Q 45 22, 35 32 Q 25 22, 35 12 Z'/><path d='M35 38 Q 45 48, 35 58 Q 25 48, 35 38 Z'/><path d='M12 35 Q 22 25, 32 35 Q 22 45, 12 35 Z'/><path d='M38 35 Q 48 25, 58 35 Q 48 45, 38 35 Z'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='35' cy='35' r='2.5'/></g></svg>");
  background-size: 70px 70px;
}

/* CONTACT: kleine kruisjes met cirkels (postzegel/zellige punten) */
.mg-hero[data-pattern="contact"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><circle cx='30' cy='30' r='16'/><path d='M30 22 L30 38 M22 30 L38 30'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='0' cy='0' r='1.8'/><circle cx='60' cy='0' r='1.8'/><circle cx='0' cy='60' r='1.8'/><circle cx='60' cy='60' r='1.8'/></g></svg>");
  background-size: 60px 60px;
}

/* FAQ: gestapelde sterren met variatie */
.mg-hero[data-pattern="faq"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='%23c14d34' opacity='0.20'><path d='M45 8 L51 26 L70 26 L55 38 L60 56 L45 45 L30 56 L35 38 L20 26 L39 26 Z'/></g><g fill='none' stroke='%23d99b2c' stroke-width='1.2' opacity='0.28'><circle cx='15' cy='75' r='4'/><circle cx='75' cy='75' r='4'/></g></svg>");
  background-size: 90px 90px;
}

/* REGIO DETAIL VARIANTEN per slug */
.mg-hero[data-pattern="regio-marrakech"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><path d='M0 60 L20 30 L40 55 L60 25 L80 50' /><path d='M0 70 L20 45 L40 65 L60 40 L80 60' /></g><g fill='%23d99b2c' opacity='0.20'><circle cx='20' cy='30' r='1.8'/><circle cx='60' cy='25' r='1.8'/></g></svg>");
  background-size: 80px 80px;
}
.mg-hero[data-pattern="regio-sahara"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='%23d99b2c' opacity='0.22'><path d='M35 8 L37 16 L35 24 L33 16 Z'/></g><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><path d='M0 50 Q 17 38, 35 50 T 70 50'/></g><g fill='%23c14d34' opacity='0.20'><circle cx='15' cy='25' r='1.5'/><circle cx='55' cy='30' r='1.5'/><circle cx='35' cy='65' r='1.5'/></g></svg>");
  background-size: 70px 70px;
}
.mg-hero[data-pattern="regio-konings"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><rect x='25' y='30' width='30' height='60'/><path d='M25 30 Q 25 18, 40 18 Q 55 18, 55 30'/><path d='M40 8 L40 18'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='40' cy='8' r='2'/></g></svg>");
  background-size: 80px 100px;
}
.mg-hero[data-pattern="regio-kust"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'><g fill='none' stroke='%232a4d8c' stroke-width='1.4' opacity='0.22'><path d='M0 25 Q 25 15, 50 25 T 100 25'/><path d='M0 40 Q 25 30, 50 40 T 100 40'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='25' cy='10' r='1.5'/><circle cx='75' cy='10' r='1.5'/></g></svg>");
  background-size: 100px 60px;
}
.mg-hero[data-pattern="regio-noord"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%232a4d8c' stroke-width='1.4' opacity='0.22'><rect x='10' y='30' width='15' height='40'/><rect x='30' y='20' width='15' height='50'/><rect x='50' y='35' width='15' height='35'/></g><g fill='%23c14d34' opacity='0.20'><circle cx='17' cy='28' r='1.8'/><circle cx='37' cy='18' r='1.8'/><circle cx='57' cy='33' r='1.8'/></g></svg>");
  background-size: 80px 80px;
}

/* BLOG CATEGORIE VARIANTEN */
.mg-hero[data-pattern="blog-planning"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><circle cx='35' cy='35' r='20'/><path d='M35 15 L35 55 M15 35 L55 35'/></g><g fill='%23d99b2c' opacity='0.20'><polygon points='35,20 38,32 35,50 32,32'/></g></svg>");
  background-size: 70px 70px;
}
.mg-hero[data-pattern="blog-accommodatie"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><path d='M10 90 L10 50 Q 10 25, 40 25 Q 70 25, 70 50 L70 90'/></g><g fill='%23d99b2c' opacity='0.20'><polygon points='40,42 44,50 52,50 46,55 48,63 40,58 32,63 34,55 28,50 36,50'/></g></svg>");
  background-size: 80px 100px;
}
.mg-hero[data-pattern="blog-excursies"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'><g fill='none' stroke='%23c14d34' stroke-width='1.4' opacity='0.22'><path d='M0 35 Q 25 20, 50 35 T 100 35'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='25' cy='15' r='4'/></g></svg>");
  background-size: 100px 60px;
}
.mg-hero[data-pattern="blog-regio"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='none' stroke='%23c14d34' stroke-width='1.3' opacity='0.22'><polygon points='35,5 55,35 35,65 15,35'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='35' cy='35' r='3'/></g></svg>");
  background-size: 70px 70px;
}
.mg-hero[data-pattern="blog-gezin"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='%23c14d34' opacity='0.20'><path d='M35 20 C 32 14, 24 14, 24 23 C 24 30, 35 42, 35 42 C 35 42, 46 30, 46 23 C 46 14, 38 14, 35 20 Z'/></g><g fill='%23d99b2c' opacity='0.20'><circle cx='15' cy='55' r='2'/><circle cx='55' cy='55' r='2'/><circle cx='35' cy='55' r='2'/></g></svg>");
  background-size: 70px 70px;
}

/* Zellige patroon laag 2: arabesken hoek-decoratie (subtiele extra layer) */
.mg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 15%, rgba(193, 77, 52, 0.10) 0, transparent 25%),
    radial-gradient(circle at 92% 85%, rgba(42, 77, 140, 0.08) 0, transparent 30%);
  pointer-events: none;
}

/* Zorg dat de inhoud boven de patroon-laag staat (zowel container als container-narrow) */
.mg-hero > .container,
.mg-hero > .container-narrow { position: relative; z-index: 1; }

/* Het inhoudblok met grid: tekst links, illustratie rechts */
.mg-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 800px) {
  .mg-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .mg-hero-art {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }
}

.mg-hero-text { min-width: 0; }
.mg-hero-text h1 {
  font-size: var(--fs-4xl);
  line-height: 1.15;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-charcoal);
}
.mg-hero-text .lead {
  margin: 0 0 var(--space-4);
  color: var(--color-clay);
}
.mg-hero-text .eyebrow {
  background: white;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
}

/* Acht-puntige zellige ster decoratie naast de eyebrow */
.mg-hero-text .eyebrow::before {
  content: "✦";
  color: var(--color-saffron);
  margin-inline-end: 0.4em;
  font-size: 0.95em;
}

/* Illustratie container */
.mg-hero-art {
  position: relative;
}
.mg-hero-art svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(193, 77, 52, 0.14));
  /* Zachte vervaging aan de randen, zodat de illustratie organisch
     overloopt in de hero-achtergrond in plaats van als een hard
     rechthoekig vak te lezen. */
  mask-image: radial-gradient(
    ellipse 90% 88% at 50% 50%,
    black 55%,
    rgba(0, 0, 0, 0.85) 72%,
    rgba(0, 0, 0, 0.4) 88%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 90% 88% at 50% 50%,
    black 55%,
    rgba(0, 0, 0, 0.85) 72%,
    rgba(0, 0, 0, 0.4) 88%,
    transparent 100%
  );
}

/* Decoratieve zellige rand onder de hero (tegelpatroon) */
.mg-hero-band {
  position: relative;
  height: 14px;
  margin-top: calc(-1 * var(--space-6));
  background: var(--color-terracotta);
  background-image:
    linear-gradient(45deg, var(--color-saffron) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-saffron) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-saffron) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-saffron) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

/* CTA groep onder hero tekst */
.mg-hero-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* RTL: spiegel de ster en de grid volgorde */
[dir="rtl"] .mg-hero-text .eyebrow::before {
  margin-inline-end: 0.4em;
}

/* ==========================================================================
   Marokkaanse decoratieve elementen
   ========================================================================== */

/* Mihrab-boog rand voor cards/secties (subtiele geometrische bovenrand) */
.mg-arch-divider {
  position: relative;
  height: 36px;
  margin: var(--space-6) 0 var(--space-5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mg-arch-divider::before,
.mg-arch-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-line-strong), transparent);
}
.mg-arch-divider span {
  margin: 0 var(--space-4);
  color: var(--color-saffron);
  font-size: 1.5rem;
  line-height: 1;
}

/* H2 sectie-kop met saffraan onderlijn en linker zellige ster
   Komt in alle hoofdsecties van blog en content pagina's */
.mg-section-heading {
  position: relative;
  padding-bottom: var(--space-3);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  display: inline-block;
}
.mg-section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-saffron) 100%);
  border-radius: 2px;
}
[dir="rtl"] .mg-section-heading::after {
  left: auto;
  right: 0;
}

/* Marokkaanse "tussen-secties" ornament — gecentreerde zellige ster met lijnen */
.mg-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-7) 0;
  color: var(--color-saffron);
}
.mg-ornament::before,
.mg-ornament::after {
  content: "";
  flex: 0 1 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-saffron) 50%, transparent);
}
.mg-ornament svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Mooie geornamenteerde card met Marokkaanse boog-frame top */
.mg-frame-card {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5) var(--space-5);
  margin: var(--space-5) 0;
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.06);
}
.mg-frame-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 8px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-saffron) 20%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 80%,
    transparent 100%);
  border-radius: 0 0 var(--radius) var(--radius);
}
.mg-frame-card h3,
.mg-frame-card h4 {
  margin-top: 0;
  color: var(--color-terracotta);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mg-frame-card h3::before,
.mg-frame-card h4::before {
  content: "✦";
  color: var(--color-saffron);
  font-size: 0.9em;
}

/* Mooi citaat-blok in Marokkaanse stijl (voor kennis-boxen, tips, expert quotes) */
.mg-quote {
  position: relative;
  background: linear-gradient(135deg, rgba(217, 155, 44, 0.08) 0%, rgba(193, 77, 52, 0.05) 100%);
  border-left: 4px solid var(--color-saffron);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
  margin: var(--space-5) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-charcoal);
}
.mg-quote::before {
  content: "❝";
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-saffron);
  font-style: normal;
}
.mg-quote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-clay);
  font-style: normal;
  font-family: var(--font-body);
}
.mg-quote cite::before { content: "— "; }
[dir="rtl"] .mg-quote {
  border-left: 0;
  border-right: 4px solid var(--color-saffron);
  padding: var(--space-5) var(--space-7) var(--space-5) var(--space-5);
  border-radius: var(--radius) 0 0 var(--radius);
}
[dir="rtl"] .mg-quote::before {
  left: auto;
  right: var(--space-3);
  content: "❞";
}

/* Lijst met Marokkaanse zellige sterren als markers */
.mg-list-stars {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}
.mg-list-stars li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.mg-list-stars li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--color-saffron);
  font-size: 1.2em;
  font-weight: 700;
}
[dir="rtl"] .mg-list-stars li {
  padding-left: 0;
  padding-right: 2rem;
}
[dir="rtl"] .mg-list-stars li::before {
  left: auto;
  right: 0;
}

/* Numerieke lijst met geornamenteerde nummers in cirkels */
.mg-list-numbered {
  list-style: none;
  padding: 0;
  counter-reset: mg-counter;
  margin: var(--space-4) 0;
}
.mg-list-numbered li {
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--space-4);
  counter-increment: mg-counter;
  line-height: 1.6;
}
.mg-list-numbered li::before {
  content: counter(mg-counter);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.2em;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-terracotta);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.95em;
  box-shadow: 0 2px 6px rgba(193, 77, 52, 0.25);
}
[dir="rtl"] .mg-list-numbered li {
  padding-left: 0;
  padding-right: 3rem;
}
[dir="rtl"] .mg-list-numbered li::before {
  left: auto;
  right: 0;
}

/* Compact info-blokje met icon - voor "Wist je dat" feiten */
.mg-fact {
  display: flex;
  gap: var(--space-3);
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}
.mg-fact::before {
  content: "✦";
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-saffron);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
}
.mg-fact-text {
  margin: 0;
  flex: 1;
  font-size: 0.95em;
}
.mg-fact-text strong {
  color: var(--color-terracotta);
  display: block;
  margin-bottom: 0.25em;
  font-family: var(--font-display);
}

/* Extra: 2-koloms ja/nee tabel met groene/rode iconen voor "wel doen / niet doen" lijsten */
.mg-do-dont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.mg-do, .mg-dont {
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
}
.mg-do {
  background: linear-gradient(180deg, rgba(93, 140, 61, 0.05) 0%, transparent 100%);
  border-color: rgba(93, 140, 61, 0.3);
}
.mg-dont {
  background: linear-gradient(180deg, rgba(176, 58, 38, 0.05) 0%, transparent 100%);
  border-color: rgba(176, 58, 38, 0.3);
}
.mg-do h4, .mg-dont h4 {
  margin-top: 0;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mg-do h4 { color: var(--color-success); }
.mg-do h4::before { content: "✓"; font-weight: 700; }
.mg-dont h4 { color: var(--color-error); }
.mg-dont h4::before { content: "✗"; font-weight: 700; }
.mg-do ul, .mg-dont ul {
  margin: 0;
  padding-left: 1.2em;
}
[dir="rtl"] .mg-do ul, [dir="rtl"] .mg-dont ul {
  padding-left: 0;
  padding-right: 1.2em;
}
@media (max-width: 600px) {
  .mg-do-dont { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog landing pagina specifieke stijling
   ========================================================================== */

/* Eyebrow boven elke sectie op blog landing */
.mg-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: 999px;
}
.mg-section-eyebrow::before {
  content: "✦";
  color: var(--color-saffron);
  font-size: 0.95em;
}

/* Sectie-band met zandkleur achtergrond voor "Uitgelicht" en "Meer artikelen" */
.mg-blog-band {
  position: relative;
  margin: var(--space-6) calc(-1 * var(--space-5));
  padding: var(--space-7) var(--space-5);
  background: linear-gradient(180deg, #fdf8ee 0%, #faf6f0 100%);
  border-top: 1px solid rgba(217, 155, 44, 0.20);
  border-bottom: 1px solid rgba(217, 155, 44, 0.20);
  overflow: hidden;
}
.mg-blog-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23c14d34' stroke-width='1' opacity='0.12'><path d='M40 8 L48 24 L64 16 L56 32 L72 40 L56 48 L64 64 L48 56 L40 72 L32 56 L16 64 L24 48 L8 40 L24 32 L16 16 L32 24 Z'/></g></svg>");
  background-size: 80px 80px;
  background-repeat: repeat;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 50%, black 30%, transparent 90%);
}
.mg-blog-band > * { position: relative; z-index: 1; }

/* Variant met regular (zachter) achtergrond */
.mg-blog-band-soft {
  background: linear-gradient(180deg, #faf6f0 0%, #fffefb 100%);
}
.mg-blog-band-soft::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><g fill='none' stroke='%232a4d8c' stroke-width='1' opacity='0.10'><polygon points='35,5 55,35 35,65 15,35'/></g></svg>");
  background-size: 70px 70px;
}

/* Blog card met Marokkaanse top-rand en mooi opvallend hover effect */
.mg-blog-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fdf8ee 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-5);
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}

/* Zellige ster waterstempel achtergrond rechtsonder in de card */
.mg-blog-card > * { position: relative; z-index: 1; }
.mg-blog-card::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><g fill='none' stroke='%23d99b2c' stroke-width='1.4' opacity='0.18'><path d='M70 12 L82 42 L112 42 L88 60 L100 90 L70 72 L40 90 L52 60 L28 42 L58 42 Z'/><circle cx='70' cy='66' r='10'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: transform 0.4s ease, opacity var(--transition);
  z-index: 0;
}
[dir="rtl"] .mg-blog-card::after {
  right: auto;
  left: -30px;
  transform: scaleX(-1);
}

/* Top-rand gradient streep */
.mg-blog-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-saffron) 0%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 100%);
  opacity: 0.85;
  transition: opacity var(--transition), height var(--transition);
  z-index: 2;
}

.mg-blog-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 12px 28px rgba(193, 77, 52, 0.18);
  transform: translateY(-4px);
}
.mg-blog-card:hover::before {
  opacity: 1;
  height: 6px;
}
.mg-blog-card:hover::after {
  transform: rotate(20deg);
}

/* Categorie-badge als gekleurde ribbon met saffraan ✦ */
.mg-blog-card .mg-blog-card-category {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--space-3);
  padding: 0.3em 0.8em;
  background: var(--color-saffron-dark);
  border-radius: 999px;
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(217, 155, 44, 0.30);
}
.mg-blog-card .mg-blog-card-category::before {
  content: "✦";
  color: white;
  font-size: 1em;
}

/* Categorie-kleur varianten — elke categorie krijgt een eigen kleur */
.mg-blog-card[data-cat="planning"] .mg-blog-card-category {
  background: linear-gradient(135deg, var(--color-saffron) 0%, var(--color-saffron-dark) 100%);
  box-shadow: 0 2px 6px rgba(217, 155, 44, 0.30);
}
.mg-blog-card[data-cat="regio"] .mg-blog-card-category {
  background: linear-gradient(135deg, var(--color-terracotta) 0%, #9c3d27 100%);
  box-shadow: 0 2px 6px rgba(193, 77, 52, 0.30);
}
.mg-blog-card[data-cat="excursies"] .mg-blog-card-category {
  background: linear-gradient(135deg, var(--color-mint) 0%, #466b2d 100%);
  box-shadow: 0 2px 6px rgba(93, 140, 61, 0.30);
}
.mg-blog-card[data-cat="accommodatie"] .mg-blog-card-category {
  background: linear-gradient(135deg, var(--color-majorelle) 0%, #1d3a6b 100%);
  box-shadow: 0 2px 6px rgba(42, 77, 140, 0.30);
}
.mg-blog-card[data-cat="gezin"] .mg-blog-card-category {
  background: linear-gradient(135deg, #c75e4d 0%, #a3402f 100%);
  box-shadow: 0 2px 6px rgba(176, 58, 38, 0.30);
}

/* H3 titel groter en in display font */
.mg-blog-card h3 {
  margin: 0 0 var(--space-3);
  font-size: 1.3125rem;
  line-height: 1.3;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-charcoal);
}
.mg-blog-card h3 a {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(180deg, transparent 88%, rgba(217, 155, 44, 0.30) 88%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease, color var(--transition);
}
.mg-blog-card:hover h3 a,
.mg-blog-card h3 a:hover {
  background-size: 100% 100%;
  color: var(--color-terracotta);
}

/* Meta info met klok en subtiele lijntjes */
.mg-blog-card-meta {
  font-size: 0.8125rem;
  color: var(--color-clay);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed rgba(217, 155, 44, 0.30);
}
.mg-blog-card-meta::before {
  content: "✦";
  font-size: 0.85em;
  color: var(--color-saffron);
}

/* Summary */
.mg-blog-card-summary {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.6;
  flex: 1;
}

/* "Lees verder" als saffraan-getinte knop met groeiend pijltje */
.mg-blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  color: var(--color-terracotta);
  text-decoration: none;
  font-size: 0.875rem;
  align-self: flex-start;
  padding: 0.5em 1em 0.5em 1em;
  background: rgba(217, 155, 44, 0.08);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: 999px;
  transition: background var(--transition), gap var(--transition), border-color var(--transition), color var(--transition);
}
.mg-blog-card-link:hover {
  background: var(--color-saffron);
  border-color: var(--color-saffron);
  color: white;
  gap: 0.7em;
  text-decoration: none;
}
[dir="rtl"] .mg-blog-card-link {
  flex-direction: row-reverse;
}

/* Onderwerpen cards met zellige hoek-decoratie */
.mg-topic-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-5);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mg-topic-card::after {
  content: "✦";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 40px;
  height: 40px;
  background: var(--color-saffron);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(217, 155, 44, 0.3);
  transition: transform var(--transition);
}
.mg-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.10);
}
.mg-topic-card:hover::after {
  transform: rotate(45deg);
}
.mg-topic-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-terracotta);
  padding-right: 2.5rem;
}
[dir="rtl"] .mg-topic-card::after {
  right: auto;
  left: -8px;
}
[dir="rtl"] .mg-topic-card h3 {
  padding-right: 0;
  padding-left: 2.5rem;
}
.mg-topic-card p {
  margin: 0;
  color: var(--color-clay);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Sectiekop bovenaan elke band: eyebrow + heading samen */
.mg-section-header {
  margin-bottom: var(--space-6);
}
.mg-section-header h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-family: var(--font-display);
  color: var(--color-charcoal);
  position: relative;
  padding-bottom: var(--space-3);
  display: inline-block;
}
.mg-section-header h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-saffron) 100%);
  border-radius: 2px;
}
[dir="rtl"] .mg-section-header h2::after {
  left: auto;
  right: 0;
}
.mg-section-header .mg-section-subline {
  margin: var(--space-3) 0 0;
  color: var(--color-clay);
  font-size: 1rem;
  max-width: 60ch;
}

/* Card grid die zelf op band kan staan */
.mg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* ==========================================================================
   Blog artikel (detail pagina) specifieke stijling
   ========================================================================== */

/* Article wrapper met subtiele achtergrond en zellige hoek-decoratie */
.mg-article,
section > article.container.container-narrow {
  position: relative;
  max-width: var(--container);
  margin: var(--space-6) auto;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: linear-gradient(180deg, #fffefb 0%, #faf6f0 100%);
  border: 1px solid rgba(217, 155, 44, 0.20);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(193, 77, 52, 0.06);
}

/* Marokkaanse "tegel" hoekjes op de wrapper - klein zellige motief in 4 hoeken */
.mg-article::before,
.mg-article::after,
section > article.container.container-narrow::before,
section > article.container.container-narrow::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M14 2 L17 11 L26 11 L19 17 L21 26 L14 21 L7 26 L9 17 L2 11 L11 11 Z' fill='%23d99b2c' opacity='0.45'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.mg-article::before,
section > article.container.container-narrow::before {
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}
.mg-article::after,
section > article.container.container-narrow::after {
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
}

/* Geornamenteerde top-rand van het artikel (gradient streep over de hele breedte) */
.mg-article-rule {
  height: 4px;
  margin: 0 0 var(--space-5);
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-saffron) 15%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 85%,
    transparent 100%);
}

/* Rijke sectie-divider tussen hoofdsecties in een artikel.
   Centrale ster met saffraan lijntjes en kleine bolletjes. */
.mg-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-7) auto;
  max-width: 380px;
  color: var(--color-saffron);
}
.mg-divider::before,
.mg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-saffron) 50%, transparent 100%);
}
.mg-divider-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 1.2rem;
}
.mg-divider-icon::before { content: "•"; color: var(--color-terracotta); font-size: 0.6em; }
.mg-divider-icon::after  { content: "•"; color: var(--color-terracotta); font-size: 0.6em; }
.mg-divider-icon span { color: var(--color-saffron); }

/* Intro-callout: het opening-statement van een artikel als visueel blok.
   Werkt als de auteur de eerste paragraaf in <div class="mg-intro"> wikkelt. */
.mg-intro {
  position: relative;
  background: linear-gradient(135deg, rgba(217, 155, 44, 0.06) 0%, rgba(193, 77, 52, 0.04) 100%);
  border-left: 4px solid var(--color-saffron);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  margin: 0 0 var(--space-6);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.mg-intro p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-style: italic;
}
.mg-intro p + p {
  margin-top: var(--space-3);
}
[dir="rtl"] .mg-intro {
  border-left: 0;
  border-right: 4px solid var(--color-saffron);
  border-radius: var(--radius) 0 0 var(--radius);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-5);
}

/* Pull-quote (vrij groot citaat dat tussen paragrafen valt) */
.mg-pull-quote {
  position: relative;
  text-align: center;
  margin: var(--space-7) auto;
  max-width: 600px;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-terracotta);
}
.mg-pull-quote::before,
.mg-pull-quote::after {
  display: block;
  font-size: 2.5rem;
  line-height: 0.5;
  color: var(--color-saffron);
  font-family: serif;
  font-style: normal;
}
.mg-pull-quote::before { content: "❝"; margin-bottom: var(--space-3); }
.mg-pull-quote::after  { content: "❞"; margin-top: var(--space-3); }

/* Tip-box: voor handige tussenkasten met praktisch advies */
.mg-tip-box {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(93, 140, 61, 0.08) 0%, rgba(217, 155, 44, 0.06) 100%);
  border: 1px solid rgba(93, 140, 61, 0.25);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.mg-tip-box::before {
  content: "💡";
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.mg-tip-box-content {
  flex: 1;
}
.mg-tip-box-content strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  color: var(--color-mint);
  font-size: 1.05em;
}
.mg-tip-box-content p {
  margin: 0;
}

/* Waarschuwing-box: voor "let op" momenten */
.mg-warn-box {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(176, 58, 38, 0.05) 0%, rgba(193, 77, 52, 0.04) 100%);
  border: 1px solid rgba(176, 58, 38, 0.30);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.mg-warn-box::before {
  content: "⚠";
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-error);
}
.mg-warn-box-content {
  flex: 1;
}
.mg-warn-box-content strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  color: var(--color-error);
  font-size: 1.05em;
}
.mg-warn-box-content p {
  margin: 0;
}

/* Stat-card: voor "8 ‧ regio's" statistiek-blokjes */
.mg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.mg-stat {
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
}
.mg-stat::before {
  content: "✦";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: var(--color-saffron);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.mg-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-terracotta);
  line-height: 1;
  margin: 0 0 var(--space-2);
}
.mg-stat-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-clay);
  line-height: 1.3;
}

/* Eerste paragraaf van het artikel iets groter en sfeervol */
.mg-article > p:first-of-type,
.mg-article > p:first-child,
section > article.container.container-narrow > p:first-of-type,
section > article.container.container-narrow > p:first-child {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  margin-bottom: var(--space-5);
}

/* Body paragrafen iets ruimer */
.mg-article p,
section > article.container.container-narrow p {
  line-height: 1.7;
}

/* Verbeterde H3 binnen artikel — net iets meer Marokkaans karakter */
.mg-article h3,
section > article.container.container-narrow h3 {
  position: relative;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
  color: var(--color-charcoal);
  font-family: var(--font-display);
}
.mg-article h3::before,
section > article.container.container-narrow h3::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--color-saffron);
  font-size: 0.85em;
}
[dir="rtl"] .mg-article h3,
[dir="rtl"] section > article.container.container-narrow h3 {
  padding-left: 0;
  padding-right: var(--space-4);
}
[dir="rtl"] .mg-article h3::before,
[dir="rtl"] section > article.container.container-narrow h3::before {
  left: auto;
  right: 0;
}

/* Inline links in artikel: saffraan onderlijn */
.mg-article a:not(.mg-blog-card-link):not(.mg-related-tile):not(.mg-other-article),
section > article.container.container-narrow a:not(.mg-blog-card-link):not(.mg-related-tile):not(.mg-other-article) {
  color: var(--color-terracotta);
  border-bottom: 1px solid rgba(217, 155, 44, 0.40);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.mg-article a:not(.mg-blog-card-link):not(.mg-related-tile):not(.mg-other-article):hover,
section > article.container.container-narrow a:not(.mg-blog-card-link):not(.mg-related-tile):not(.mg-other-article):hover {
  border-bottom-color: var(--color-saffron);
}

/* Mobile aanpassingen */
@media (max-width: 800px) {
  .mg-article,
  section > article.container.container-narrow {
    padding: var(--space-5) var(--space-4);
    margin: var(--space-4) var(--space-3);
  }
}

/* Sluit-ornament aan het einde van het artikel (voor de related footer) */
.mg-article-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-7) 0 0;
  color: var(--color-saffron);
  font-size: 1.4rem;
}
.mg-article-end::before,
.mg-article-end::after {
  content: "";
  flex: 0 1 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-saffron) 50%, transparent);
}
.mg-article-end-stars {
  display: inline-flex;
  gap: 0.4em;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   Related-links footer onder elk blogartikel
   ========================================================================== */

.mg-article-footer {
  position: relative;
  margin: var(--space-7) 0 0;
  padding: var(--space-7) 0;
  background: linear-gradient(180deg, #fdf8ee 0%, #f6ead0 100%);
  border-top: 3px solid;
  border-image: linear-gradient(90deg,
    transparent 0%,
    var(--color-saffron) 30%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 70%,
    transparent 100%) 1;
  overflow: hidden;
}
.mg-article-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23c14d34' stroke-width='1' opacity='0.10'><path d='M30 5 L36 18 L48 18 L38 26 L42 38 L30 32 L18 38 L22 26 L12 18 L24 18 Z'/></g></svg>");
  background-size: 60px 60px;
  background-repeat: repeat;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 80%);
}
.mg-article-footer > * { position: relative; z-index: 1; }

.mg-article-footer h2 {
  margin-top: 0;
  font-family: var(--font-display);
  color: var(--color-charcoal);
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-2);
}
.mg-article-footer h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-saffron) 100%);
  border-radius: 2px;
}
[dir="rtl"] .mg-article-footer h2::after {
  left: auto;
  right: 0;
}

.mg-article-footer .mg-section-eyebrow {
  margin-bottom: var(--space-3);
}

/* Related-links als geornamenteerde tegelcards */
.mg-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}
.mg-related-tile {
  position: relative;
  display: block;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 1.6em);
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-charcoal);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all var(--transition);
  overflow: hidden;
}
.mg-related-tile::before {
  content: "✦";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-saffron);
  font-size: 1.05em;
  transition: transform var(--transition), color var(--transition);
}
.mg-related-tile::after {
  content: "→";
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-clay);
  font-weight: 700;
  transition: transform var(--transition), color var(--transition);
  opacity: 0.5;
}
.mg-related-tile:hover {
  border-color: var(--color-saffron);
  background: linear-gradient(135deg, #fffefb 0%, rgba(217, 155, 44, 0.08) 100%);
  box-shadow: 0 4px 16px rgba(193, 77, 52, 0.10);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-terracotta);
}
.mg-related-tile:hover::before {
  transform: translateY(-50%) rotate(72deg);
  color: var(--color-terracotta);
}
.mg-related-tile:hover::after {
  transform: translateY(-50%) translateX(3px);
  color: var(--color-terracotta);
  opacity: 1;
}
[dir="rtl"] .mg-related-tile {
  padding: var(--space-4) calc(var(--space-4) + 1.6em) var(--space-4) var(--space-4);
}
[dir="rtl"] .mg-related-tile::before {
  left: auto;
  right: var(--space-4);
}
[dir="rtl"] .mg-related-tile::after {
  content: "←";
  right: auto;
  left: var(--space-4);
}
[dir="rtl"] .mg-related-tile:hover::after {
  transform: translateY(-50%) translateX(-3px);
}

/* "Andere artikelen" als compactere blog-card variant */
.mg-other-articles {
  margin-top: var(--space-6);
}
.mg-other-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.mg-other-article {
  position: relative;
  display: block;
  padding: var(--space-4);
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
  overflow: hidden;
}
.mg-other-article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-saffron) 0%, var(--color-terracotta) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.mg-other-article:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 4px 16px rgba(193, 77, 52, 0.10);
  transform: translateY(-2px);
  text-decoration: none;
}
.mg-other-article:hover::before {
  transform: scaleY(1);
}
.mg-other-article-title {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
.mg-other-article:hover .mg-other-article-title {
  color: var(--color-terracotta);
}
.mg-other-article-summary {
  margin: 0;
  color: var(--color-clay);
  font-size: 0.875rem;
  line-height: 1.5;
}
[dir="rtl"] .mg-other-article::before {
  left: auto;
  right: 0;
}



/* Card hover met warmere accenten */
.card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 24px rgba(193, 77, 52, 0.12);
}

/* Buttons en CTA's */
.cta, .btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: white;
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}
.cta:hover, .btn:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  color: white;
}
.cta-affiliate {
  background: var(--color-saffron);
  color: var(--color-charcoal);
}
.cta-affiliate:hover {
  background: var(--color-saffron-dark);
  color: var(--color-charcoal);
}
.cta-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.cta-outline:hover {
  background: var(--color-primary);
  color: white;
}

/* Region cards */
.regions-preview {
  margin-top: var(--space-6);
}
.regions-preview h2 {
  text-align: center;
  margin-bottom: var(--space-6);
  position: relative;
}
.regions-preview h2::after {
  content: "";
  display: block;
  width: 60px; height: 3px;
  background: var(--color-saffron);
  margin: var(--space-3) auto 0;
}

.region-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.region-list a {
  display: block;
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.region-list a::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.region-list a:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  text-decoration: none;
}
.region-list a:hover::before { transform: scaleY(1); }
.region-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.region-list span {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* Card (algemene component) */
.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }

/* Pros and cons lists */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
.pros-cons h4 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3);
}
.pros li, .cons li {
  list-style: none;
  padding-left: 1.75em;
  position: relative;
  margin-bottom: var(--space-2);
}
.pros { padding-left: 0; }
.cons { padding-left: 0; }
.pros li::before {
  content: "+";
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85em;
}
.cons li::before {
  content: "−";
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  background: var(--color-error);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85em;
}
@media (max-width: 600px) {
  .pros-cons { grid-template-columns: 1fr; }
}

/* Vergelijkingstabel */
.compare-table {
  margin: var(--space-5) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.compare-table table { margin: 0; }
.compare-table thead th {
  background: var(--color-majorelle);
  color: white;
  border: 0;
}

/* Info, warning en tip blokken */
.callout {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-cool);
  background: rgba(42, 77, 140, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-5) 0;
}
.callout-tip { border-left-color: var(--color-saffron); background: rgba(217, 155, 44, 0.08); }
.callout-warn { border-left-color: var(--color-error); background: rgba(176, 58, 38, 0.06); }
.callout strong { display: block; margin-bottom: var(--space-1); }

/* Foutpagina (grote, gecentreerde versie) */
.error-page {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.error-page .error-code {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.error-page h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-3);
}
.error-page .error-illustration {
  max-width: 220px;
  margin: 0 auto var(--space-5);
}
.error-page .error-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* Zellige patroon decoratie (achtergrond accent) */
.zellige-band {
  height: 12px;
  background-image:
    linear-gradient(45deg, var(--color-terracotta) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-terracotta) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-terracotta) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-terracotta) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  background-color: var(--color-saffron);
  margin: var(--space-6) 0;
}


/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--color-charcoal);
  color: var(--color-sand);
  padding: var(--space-4) var(--space-5);
  border-top: 4px solid var(--color-saffron);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.cookie-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
.cookie-banner-heading {
  font-size: var(--fs-md);
  margin: 0 0 var(--space-2);
  color: var(--color-saffron-light);
}
.cookie-banner-text p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.cookie-banner-text a {
  color: var(--color-saffron-light);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cookie-banner-actions .cta {
  white-space: nowrap;
}
.cookie-banner-actions .cta-outline {
  color: var(--color-sand);
  border-color: var(--color-sand);
}
.cookie-banner-actions .cta-outline:hover {
  background: var(--color-sand);
  color: var(--color-charcoal);
}
@media (max-width: 720px) {
  .cookie-banner-inner {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   RTL aanpassingen voor componenten
   ========================================================================== */

/* Region-list accent staat default links, in RTL aan de rechterkant */
[dir="rtl"] .region-list a::before {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

/* Callout heeft default linker rand, in RTL rechter rand */
[dir="rtl"] .callout {
  border-left: 0;
  border-right: 4px solid var(--color-cool);
  border-radius: var(--radius) 0 0 var(--radius);
}
[dir="rtl"] .callout-tip { border-right-color: var(--color-saffron); }
[dir="rtl"] .callout-warn { border-right-color: var(--color-error); }

/* Pros/cons icons zijn position absolute met left:0, in RTL right:0 */
[dir="rtl"] .pros li,
[dir="rtl"] .cons li {
  padding-left: 0;
  padding-right: 1.75em;
}
[dir="rtl"] .pros li::before,
[dir="rtl"] .cons li::before {
  left: auto;
  right: 0;
}

/* Hero gestippelde decoratie in RTL aan de andere kant */
[dir="rtl"] .hero::before {
  right: auto;
  left: -80px;
}

/* Zellige patroon vervaging: in RTL is de tekst rechts, dus mask moet
   spiegelen zodat het patroon links zichtbaar is en achter tekst vervaagt */
[dir="rtl"] .mg-hero::before {
  mask-image:
    radial-gradient(ellipse 60% 100% at 75% 50%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 50%, black 100%),
    linear-gradient(black, black);
  -webkit-mask-image:
    radial-gradient(ellipse 60% 100% at 75% 50%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 50%, black 100%),
    linear-gradient(black, black);
}

/* Hoek-spotlights ook spiegelen */
[dir="rtl"] .mg-hero::after {
  background-image:
    radial-gradient(circle at 92% 15%, rgba(193, 77, 52, 0.10) 0, transparent 25%),
    radial-gradient(circle at 8% 85%, rgba(42, 77, 140, 0.08) 0, transparent 30%);
}


/* ==========================================================================
   Juridische pagina's (privacy, cookies, voorwaarden, disclaimer)
   ========================================================================== */

/* Inhoudsopgave: gestileerd kader met saffraan accent en genummerde links */
.legal-toc {
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-left: 4px solid var(--color-saffron);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
}
[dir="rtl"] .legal-toc {
  border-left: 1px solid rgba(217, 155, 44, 0.30);
  border-right: 4px solid var(--color-saffron);
}
.legal-toc-title {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.legal-toc-title::before {
  content: "✦";
  color: var(--color-saffron);
  font-size: 1em;
}
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal-toc;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-1) var(--space-4);
}
.legal-toc li {
  counter-increment: legal-toc;
  position: relative;
  padding-left: 2em;
  line-height: 1.5;
}
.legal-toc li::before {
  content: counter(legal-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-saffron-dark);
  letter-spacing: 0.05em;
}
[dir="rtl"] .legal-toc li {
  padding-left: 0;
  padding-right: 2em;
}
[dir="rtl"] .legal-toc li::before {
  left: auto;
  right: 0;
}
.legal-toc a {
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.legal-toc a:hover {
  color: var(--color-terracotta);
  border-bottom-color: rgba(217, 155, 44, 0.50);
}
@media (max-width: 600px) {
  .legal-toc ol {
    grid-template-columns: 1fr;
  }
}

/* Tabellen in juridische pagina's: nette ingekaderde tabel met saffraan
   header en zachte zebra-strepen. Werkt voor alle tabellen die in een
   .legal-table wrapper staan. */
.legal-table {
  margin: var(--space-4) 0 var(--space-5);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: var(--radius);
  overflow-x: auto;
  background: white;
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.04);
}
.legal-table table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.legal-table thead th {
  background: linear-gradient(135deg, var(--color-terracotta) 0%, #9c3d27 100%);
  color: white;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border: 0;
  vertical-align: top;
}
[dir="rtl"] .legal-table thead th {
  text-align: right;
}
.legal-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(217, 155, 44, 0.18);
  vertical-align: top;
  line-height: 1.55;
  color: var(--color-charcoal);
}
.legal-table tbody tr:nth-child(even) td {
  background: rgba(253, 248, 238, 0.55);
}
.legal-table tbody tr:hover td {
  background: rgba(217, 155, 44, 0.08);
}
.legal-table tbody tr:last-child td {
  border-bottom: 0;
}
.legal-table code {
  background: rgba(217, 155, 44, 0.12);
  color: var(--color-terracotta);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}
.legal-table strong {
  color: var(--color-charcoal);
}

/* Mobiele weergave: tabel scrollt horizontaal met subtiele aanwijzing */
@media (max-width: 600px) {
  .legal-table {
    position: relative;
  }
  .legal-table table {
    font-size: 0.875rem;
  }
  .legal-table thead th,
  .legal-table tbody td {
    padding: var(--space-2) var(--space-3);
  }
}

/* "Laatst bijgewerkt"-blok onderaan elke juridische pagina.
   Zandkleur achtergrond met saffraan accent en zellige ster. */
.legal-meta {
  position: relative;
  margin: var(--space-7) 0 var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 1.6em);
  background: linear-gradient(135deg, rgba(217, 155, 44, 0.06) 0%, rgba(193, 77, 52, 0.04) 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  color: var(--color-clay);
  font-size: 0.875rem;
  line-height: 1.55;
}
.legal-meta::before {
  content: "✦";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-saffron);
  font-size: 1.1em;
}
[dir="rtl"] .legal-meta {
  padding: var(--space-4) calc(var(--space-5) + 1.6em) var(--space-4) var(--space-5);
}
[dir="rtl"] .legal-meta::before {
  left: auto;
  right: var(--space-4);
}

/* Inline links in juridische pagina's krijgen subtiele saffraan onderlijn,
   in lijn met de blog-artikel stijl. */
.legal-toc + h2.mg-section-heading {
  margin-top: var(--space-5);
}

/* H3 binnen juridische pagina's: kleinere variant van de mg-style */
.container-narrow > h3,
section .container-narrow > h3 {
  font-family: var(--font-display);
  color: var(--color-charcoal);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}


/* ==========================================================================
   FAQ pagina (accordion-stijl met details/summary)
   ========================================================================== */

/* FAQ wrapper, verdeelt secties met ruimte */
.faq-list {
  margin: var(--space-4) 0 var(--space-6);
}

/* Native accordion: details + summary
   Voordeel: geen JavaScript, schermlezer-vriendelijk, werkt overal. */
.faq-item {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 4px 12px rgba(193, 77, 52, 0.08);
}
.faq-item[open] {
  border-color: var(--color-saffron);
  box-shadow: 0 4px 16px rgba(193, 77, 52, 0.10);
  background: linear-gradient(180deg, #fffefb 0%, rgba(217, 155, 44, 0.04) 100%);
}

/* Summary = klikbare vraag-balk */
.faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.4;
  list-style: none;
  user-select: none;
  transition: color var(--transition);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--color-terracotta);
}

/* Saffraan ster aan de start, ipv default driehoek */
.faq-item summary::before {
  content: "✦";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 155, 44, 0.12);
  color: var(--color-saffron);
  border-radius: 50%;
  font-size: 0.95rem;
  transition: transform 0.3s ease, background var(--transition), color var(--transition);
}
.faq-item[open] summary::before {
  background: var(--color-saffron);
  color: white;
  transform: rotate(180deg);
}

/* Plus/minus indicator aan het einde */
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  color: var(--color-clay);
  transition: transform 0.3s ease, color var(--transition);
}
.faq-item[open] summary::after {
  content: "−";
  color: var(--color-terracotta);
  transform: rotate(180deg);
}
[dir="rtl"] .faq-item summary::after {
  margin-left: 0;
  margin-right: auto;
}

/* Antwoord-blok */
.faq-item-answer {
  padding: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 28px + var(--space-3));
  color: var(--color-text);
  line-height: 1.7;
  font-size: 0.9375rem;
  animation: faq-fade-in 0.3s ease;
}
[dir="rtl"] .faq-item-answer {
  padding: 0 calc(var(--space-5) + 28px + var(--space-3)) var(--space-4) var(--space-5);
}
.faq-item-answer p {
  margin: 0 0 var(--space-3);
}
.faq-item-answer p:last-child {
  margin-bottom: 0;
}
.faq-item-answer ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.4em;
}
[dir="rtl"] .faq-item-answer ul {
  padding-left: 0;
  padding-right: 1.4em;
}
.faq-item-answer li {
  margin-bottom: var(--space-1);
}
.faq-item-answer a {
  color: var(--color-terracotta);
  border-bottom: 1px solid rgba(217, 155, 44, 0.40);
  text-decoration: none;
  transition: border-color var(--transition);
}
.faq-item-answer a:hover {
  border-bottom-color: var(--color-saffron);
}
.faq-item-answer code {
  background: rgba(217, 155, 44, 0.12);
  color: var(--color-terracotta);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

@keyframes faq-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Compactere weergave op mobiel */
@media (max-width: 600px) {
  .faq-item summary {
    padding: var(--space-3) var(--space-4);
    font-size: 1rem;
    gap: var(--space-2);
  }
  .faq-item-answer {
    padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 28px + var(--space-2));
    font-size: 0.9rem;
  }
  [dir="rtl"] .faq-item-answer {
    padding: 0 calc(var(--space-4) + 28px + var(--space-2)) var(--space-4) var(--space-4);
  }
}


/* ==========================================================================
   Regio pagina's: index en detail
   ========================================================================== */

/* Breadcrumb in hero op regio detail-pagina's */
.mg-breadcrumb {
  position: relative;
  z-index: 1;
  font-size: 0.8125rem;
  color: var(--color-clay);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
  letter-spacing: 0.02em;
}
.mg-breadcrumb a {
  color: var(--color-terracotta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.mg-breadcrumb a:hover {
  border-bottom-color: var(--color-saffron);
}
.mg-breadcrumb span[aria-hidden="true"] {
  color: var(--color-saffron);
  font-weight: 700;
}

/* === Index: regio-cards grid (vervangt platte region-list) === */
.region-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.region-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-charcoal);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Saffraan top-rand die uitbreidt op hover */
.region-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-saffron) 0%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 100%);
  opacity: 0.85;
  transition: height var(--transition), opacity var(--transition);
}

/* Subtiele zellige ster waterstempel rechtsonder */
.region-card::after {
  content: "";
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23d99b2c' stroke-width='1.4' opacity='0.18'><path d='M50 10 L58 32 L80 32 L62 46 L70 68 L50 54 L30 68 L38 46 L20 32 L42 32 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: transform 0.4s ease;
}
[dir="rtl"] .region-card::after {
  right: auto;
  left: -28px;
  transform: scaleX(-1);
}

.region-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 12px 28px rgba(193, 77, 52, 0.15);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--color-charcoal);
}
.region-card:hover::before {
  height: 5px;
  opacity: 1;
}
.region-card:hover::after {
  transform: rotate(20deg);
}
[dir="rtl"] .region-card:hover::after {
  transform: scaleX(-1) rotate(-20deg);
}

/* Icon-bol met saffraan accent */
.region-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.30);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
  transition: background var(--transition);
}
.region-card-icon img {
  display: block;
}
.region-card:hover .region-card-icon {
  background: rgba(217, 155, 44, 0.20);
}

.region-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-terracotta);
  position: relative;
  z-index: 1;
  line-height: 1.2;
}
.region-card-desc {
  display: block;
  color: var(--color-clay);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
  flex: 1;
}
.region-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-saffron-dark);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  transition: gap var(--transition), color var(--transition);
}
.region-card:hover .region-card-cta {
  color: var(--color-terracotta);
  gap: 0.7em;
}

/* === Detail: hoogtepunten als genummerde kaarten === */
.region-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.region-highlight {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-3));
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.region-highlight:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.10);
  transform: translateY(-2px);
}

/* Genummerd label linksboven (01, 02, 03, ...) */
.region-highlight-num {
  position: absolute;
  top: -1px;
  left: var(--space-4);
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark, #9c3d27) 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  padding: 0.35em 0.9em;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 2px 6px rgba(193, 77, 52, 0.25);
}
[dir="rtl"] .region-highlight-num {
  left: auto;
  right: var(--space-4);
}

.region-highlight h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-charcoal);
  line-height: 1.3;
}
.region-highlight p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* === Detail: Beste tijd / Vervoer 2-koloms feature blok === */
.region-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.region-info-card {
  position: relative;
  background: white;
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-4);
  padding-top: calc(var(--space-5) + var(--space-2));
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
}
.region-info-card .region-info-icon {
  position: absolute;
  top: -16px;
  left: var(--space-5);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-saffron);
  color: white;
  border-radius: 50%;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(217, 155, 44, 0.30);
}
[dir="rtl"] .region-info-card .region-info-icon {
  left: auto;
  right: var(--space-5);
}
.region-info-season .region-info-icon {
  background: var(--color-saffron);
}
.region-info-transport .region-info-icon {
  background: var(--color-majorelle);
  box-shadow: 0 2px 8px rgba(42, 77, 140, 0.30);
}
.region-info-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-charcoal);
}
.region-info-card p {
  margin: 0 0 var(--space-2);
  line-height: 1.55;
  font-size: 0.9375rem;
}
.region-info-card p:last-child {
  margin-bottom: 0;
}
.region-info-note {
  color: var(--color-clay);
  font-size: 0.875rem;
  font-style: italic;
}

/* === Detail: Volgende stappen CTA grid === */
.region-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
.region-next-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  background: white;
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-charcoal);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}
.region-next-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-saffron);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.region-next-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.12);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--color-charcoal);
}
.region-next-card:hover::before {
  transform: scaleX(1);
}
.region-next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(217, 155, 44, 0.10);
  margin-bottom: var(--space-1);
  transition: background var(--transition);
}
.region-next-card:hover .region-next-icon {
  background: rgba(217, 155, 44, 0.20);
}
.region-next-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-terracotta);
  line-height: 1.25;
}
.region-next-sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-clay);
  line-height: 1.4;
}


/* ==========================================================================
   Hotels pagina's: index en detail
   ========================================================================== */

/* Meta-info onder hero op detailpagina (regio-label) */
.mg-hero-meta {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  color: var(--color-clay);
  margin-top: var(--space-3);
  margin-bottom: 0;
}
.mg-hero-meta a {
  color: var(--color-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 155, 44, 0.40);
  transition: border-color var(--transition);
}
.mg-hero-meta a:hover {
  border-bottom-color: var(--color-saffron);
}

/* === Index: stadskaarten grid === */
.hotel-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.hotel-city-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-charcoal);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hotel-city-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-saffron) 0%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 100%);
  opacity: 0.85;
  transition: height var(--transition), opacity var(--transition);
}
.hotel-city-card::after {
  content: "";
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23d99b2c' stroke-width='1.4' opacity='0.18'><path d='M50 10 L58 32 L80 32 L62 46 L70 68 L50 54 L30 68 L38 46 L20 32 L42 32 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: transform 0.4s ease;
}
[dir="rtl"] .hotel-city-card::after {
  right: auto;
  left: -28px;
  transform: scaleX(-1);
}
.hotel-city-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 12px 28px rgba(193, 77, 52, 0.15);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--color-charcoal);
}
.hotel-city-card:hover::before {
  height: 5px;
  opacity: 1;
}
.hotel-city-card:hover::after {
  transform: rotate(20deg);
}
[dir="rtl"] .hotel-city-card:hover::after {
  transform: scaleX(-1) rotate(-20deg);
}

.hotel-city-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.30);
  color: var(--color-terracotta);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
  transition: background var(--transition);
}
.hotel-city-icon svg {
  width: 36px;
  height: 36px;
}
.hotel-city-card:hover .hotel-city-icon {
  background: rgba(217, 155, 44, 0.20);
}

.hotel-city-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-terracotta);
  position: relative;
  z-index: 1;
  line-height: 1.2;
}
.hotel-city-region {
  display: block;
  font-size: 0.7rem;
  color: var(--color-saffron-dark);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.hotel-city-desc {
  display: block;
  color: var(--color-clay);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: var(--space-3);
  flex: 1;
  position: relative;
  z-index: 1;
}
.hotel-city-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-saffron-dark);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  transition: gap var(--transition), color var(--transition);
}
.hotel-city-card:hover .hotel-city-cta {
  color: var(--color-terracotta);
  gap: 0.7em;
}

/* === Detail: Riad vs Hotel keuze (2-koloms feature kaarten) === */
.hotel-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.hotel-choice-card {
  position: relative;
  background: white;
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-2));
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hotel-choice-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.10);
  transform: translateY(-2px);
}
.hotel-choice-icon {
  position: absolute;
  top: -16px;
  left: var(--space-5);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(217, 155, 44, 0.30);
}
[dir="rtl"] .hotel-choice-icon {
  left: auto;
  right: var(--space-5);
}
.hotel-choice-riad .hotel-choice-icon {
  background: var(--color-terracotta);
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.30);
}
.hotel-choice-hotel .hotel-choice-icon {
  background: var(--color-majorelle);
  box-shadow: 0 2px 8px rgba(42, 77, 140, 0.30);
}
.hotel-choice-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-charcoal);
}
.hotel-choice-riad h3 {
  color: var(--color-terracotta);
}
.hotel-choice-hotel h3 {
  color: var(--color-majorelle);
}
.hotel-choice-section {
  margin-bottom: var(--space-3);
}
.hotel-choice-section:last-child {
  margin-bottom: 0;
}
.hotel-choice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
}
.hotel-choice-label::before {
  font-size: 1rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
}
.hotel-choice-plus { color: var(--color-success); }
.hotel-choice-plus::before { content: "+"; background: var(--color-success); }
.hotel-choice-minus { color: var(--color-error); }
.hotel-choice-minus::before { content: "−"; background: var(--color-error); }
.hotel-choice-section ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.9375rem;
  line-height: 1.55;
}
[dir="rtl"] .hotel-choice-section ul {
  padding-left: 0;
  padding-right: 1.2em;
}
.hotel-choice-section li {
  margin-bottom: var(--space-1);
}

/* === Detail: Top-5 accommodatie kaarten === */
.hotel-acc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.hotel-acc-card {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-3));
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.hotel-acc-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 6px 16px rgba(193, 77, 52, 0.10);
}
.hotel-acc-num {
  position: absolute;
  top: -1px;
  left: var(--space-4);
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  padding: 0.35em 0.9em;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 2px 6px rgba(193, 77, 52, 0.25);
}
[dir="rtl"] .hotel-acc-num {
  left: auto;
  right: var(--space-4);
}
.hotel-acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.hotel-acc-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-charcoal);
  line-height: 1.3;
}
.hotel-acc-type {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-saffron-dark);
  background: rgba(217, 155, 44, 0.12);
  padding: 0.2em 0.7em;
  border-radius: 999px;
}
.hotel-acc-type::before {
  content: "✦";
  font-size: 0.85em;
}
.hotel-acc-desc {
  margin: 0 0 var(--space-4);
  line-height: 1.6;
  color: var(--color-text);
}
.hotel-acc-fits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(217, 155, 44, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.hotel-acc-fits-good strong,
.hotel-acc-fits-not strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 0.25em;
}
.hotel-acc-fits-good strong {
  color: var(--color-mint);
}
.hotel-acc-fits-not strong {
  color: var(--color-error);
}
.hotel-acc-fits span {
  color: var(--color-charcoal);
  line-height: 1.5;
}
.hotel-acc-card .cta-affiliate {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.hotel-acc-card .cta-affiliate::after {
  content: "→";
  font-weight: 700;
  transition: transform var(--transition);
}
.hotel-acc-card .cta-affiliate:hover::after {
  transform: translateX(3px);
}
[dir="rtl"] .hotel-acc-card .cta-affiliate::after {
  content: "←";
}
[dir="rtl"] .hotel-acc-card .cta-affiliate:hover::after {
  transform: translateX(-3px);
}

/* Valkuilen sectie krijgt subtiele rode tint via mg-list-stars override */
.hotel-mistakes li::before {
  color: var(--color-error);
  content: "!";
  background: var(--color-error);
  color: white;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  top: 0.35em;
  font-weight: 700;
}


/* ==========================================================================
   Excursies pagina's: index en detail
   ========================================================================== */

/* === Index: 4 locatie-kaarten (Marrakech, Fez, Sahara, Atlas) === */
.exc-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.exc-loc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-charcoal);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.exc-loc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-saffron) 0%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 100%);
  opacity: 0.85;
  transition: height var(--transition), opacity var(--transition);
}
.exc-loc-card::after {
  content: "";
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23d99b2c' stroke-width='1.4' opacity='0.18'><path d='M50 10 L58 32 L80 32 L62 46 L70 68 L50 54 L30 68 L38 46 L20 32 L42 32 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: transform 0.4s ease;
}
[dir="rtl"] .exc-loc-card::after {
  right: auto;
  left: -28px;
  transform: scaleX(-1);
}
.exc-loc-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 12px 28px rgba(193, 77, 52, 0.15);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--color-charcoal);
}
.exc-loc-card:hover::before {
  height: 5px;
  opacity: 1;
}
.exc-loc-card:hover::after {
  transform: rotate(20deg);
}
[dir="rtl"] .exc-loc-card:hover::after {
  transform: scaleX(-1) rotate(-20deg);
}
.exc-loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.30);
  color: var(--color-terracotta);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
  transition: background var(--transition);
}
.exc-loc-icon svg {
  width: 36px;
  height: 36px;
}
.exc-loc-card:hover .exc-loc-icon {
  background: rgba(217, 155, 44, 0.20);
}
.exc-loc-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-terracotta);
  position: relative;
  z-index: 1;
  line-height: 1.2;
}
.exc-loc-region {
  display: block;
  font-size: 0.7rem;
  color: var(--color-saffron-dark);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.exc-loc-desc {
  display: block;
  color: var(--color-clay);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: var(--space-3);
  flex: 1;
  position: relative;
  z-index: 1;
}
.exc-loc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-saffron-dark);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  transition: gap var(--transition), color var(--transition);
}
.exc-loc-card:hover .exc-loc-cta {
  color: var(--color-terracotta);
  gap: 0.7em;
}

/* === Detail: 4 featured tours als genummerde kaarten === */
.exc-tour-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.exc-tour-card {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-3));
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.exc-tour-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 6px 16px rgba(193, 77, 52, 0.10);
}
.exc-tour-num {
  position: absolute;
  top: -1px;
  left: var(--space-4);
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  padding: 0.35em 0.9em;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 2px 6px rgba(193, 77, 52, 0.25);
}
[dir="rtl"] .exc-tour-num {
  left: auto;
  right: var(--space-4);
}
.exc-tour-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.exc-tour-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-charcoal);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.exc-tour-duration {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1em;
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.8125rem;
  white-space: nowrap;
}
[dir="rtl"] .exc-tour-duration {
  align-items: flex-start;
}
.exc-tour-duration-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-saffron-dark);
  font-weight: 700;
}
.exc-tour-duration-value {
  color: var(--color-charcoal);
  font-weight: 600;
}
.exc-tour-desc {
  margin: 0 0 var(--space-4);
  line-height: 1.6;
  color: var(--color-text);
}

/* "Wel boeken" / "Niet boeken" 2-koloms blokjes met groene/rode accent */
.exc-tour-when {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.exc-tour-when-yes,
.exc-tour-when-no {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.exc-tour-when-yes {
  background: rgba(93, 140, 61, 0.06);
  border-left: 3px solid var(--color-mint);
}
[dir="rtl"] .exc-tour-when-yes {
  border-left: 0;
  border-right: 3px solid var(--color-mint);
}
.exc-tour-when-no {
  background: rgba(176, 58, 38, 0.05);
  border-left: 3px solid var(--color-error);
}
[dir="rtl"] .exc-tour-when-no {
  border-left: 0;
  border-right: 3px solid var(--color-error);
}
.exc-tour-when-yes strong,
.exc-tour-when-no strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 0.25em;
}
.exc-tour-when-yes strong {
  color: var(--color-mint);
}
.exc-tour-when-no strong {
  color: var(--color-error);
}
.exc-tour-when-yes span,
.exc-tour-when-no span {
  color: var(--color-charcoal);
}

.exc-tour-good {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0;
  font-size: 0.9375rem;
  color: var(--color-clay);
  border-top: 1px dashed rgba(217, 155, 44, 0.30);
  border-bottom: 1px dashed rgba(217, 155, 44, 0.30);
}
.exc-tour-good strong {
  color: var(--color-charcoal);
}

.exc-tour-card .cta-affiliate {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.exc-tour-card .cta-affiliate::after {
  content: "→";
  font-weight: 700;
  transition: transform var(--transition);
}
.exc-tour-card .cta-affiliate:hover::after {
  transform: translateX(3px);
}
[dir="rtl"] .exc-tour-card .cta-affiliate::after {
  content: "←";
}
[dir="rtl"] .exc-tour-card .cta-affiliate:hover::after {
  transform: translateX(-3px);
}

/* === Detail: Dagtrip vs meerdaagse keuze (2-koloms feature kaarten) === */
.exc-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.exc-choice-card {
  position: relative;
  background: white;
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-2));
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.exc-choice-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.10);
  transform: translateY(-2px);
}
.exc-choice-icon {
  position: absolute;
  top: -16px;
  left: var(--space-5);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 50%;
  font-size: 0.95rem;
}
[dir="rtl"] .exc-choice-icon {
  left: auto;
  right: var(--space-5);
}
.exc-choice-day .exc-choice-icon {
  background: var(--color-saffron);
  box-shadow: 0 2px 8px rgba(217, 155, 44, 0.30);
}
.exc-choice-multi .exc-choice-icon {
  background: var(--color-majorelle);
  box-shadow: 0 2px 8px rgba(42, 77, 140, 0.30);
}
.exc-choice-card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-charcoal);
}
.exc-choice-day h3 {
  color: var(--color-saffron-dark);
}
.exc-choice-multi h3 {
  color: var(--color-majorelle);
}
.exc-choice-card p {
  margin: 0 0 var(--space-2);
  line-height: 1.6;
  font-size: 0.9375rem;
}
.exc-choice-card p:last-child {
  margin-bottom: 0;
}
.exc-choice-pro {
  color: var(--color-mint);
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.exc-choice-con {
  color: var(--color-error);
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === Detail: afsluit-CTA in mg-tip-box === */
.exc-tip-cta {
  margin-top: var(--space-3) !important;
  margin-bottom: 0 !important;
}
.exc-tip-cta .cta-affiliate {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.exc-tip-cta .cta-affiliate::after {
  content: "→";
  font-weight: 700;
  transition: transform var(--transition);
}
.exc-tip-cta .cta-affiliate:hover::after {
  transform: translateX(3px);
}
[dir="rtl"] .exc-tip-cta .cta-affiliate::after {
  content: "←";
}
[dir="rtl"] .exc-tip-cta .cta-affiliate:hover::after {
  transform: translateX(-3px);
}

/* === Index: 6 tour-types grid (verhuisd uit inline style) === */
.excursie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
@media (max-width: 540px) {
  .excursie-grid { grid-template-columns: 1fr; }
}
.excursie-card {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.excursie-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.10);
}
.excursie-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-saffron) 0%, var(--color-terracotta) 50%, var(--color-saffron) 100%);
  opacity: 0.85;
}
.excursie-card-header {
  margin-bottom: var(--space-2);
}
.excursie-card-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: 999px;
  padding: 0.25em 0.75em;
  margin-bottom: var(--space-2);
}
.excursie-card-title {
  margin: 0;
  font-size: 1.25rem;
  font-family: var(--font-display);
  color: var(--color-charcoal);
  line-height: 1.3;
}
.excursie-card-stats {
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
}
.excursie-card-stats .mg-stat-value {
  font-size: 1.05rem;
}
.excursie-card-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}
.excursie-card-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-top: 1px dashed rgba(217, 155, 44, 0.30);
  border-bottom: 1px dashed rgba(217, 155, 44, 0.30);
}
.excursie-card-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}
.excursie-card-cta .cta {
  width: 100%;
  text-align: center;
}
@media (min-width: 540px) {
  .excursie-card-cta .cta { width: auto; }
}


/* ==========================================================================
   Homepage specifieke componenten
   ========================================================================== */

/* === USP cards === */
.home-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.home-usp-card {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-2));
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-usp-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 8px 20px rgba(193, 77, 52, 0.10);
  transform: translateY(-2px);
}
.home-usp-icon {
  position: absolute;
  top: -16px;
  left: var(--space-5);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-saffron);
  color: white;
  border-radius: 50%;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(217, 155, 44, 0.30);
}
[dir="rtl"] .home-usp-icon {
  left: auto;
  right: var(--space-5);
}
.home-usp-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-terracotta);
}
.home-usp-card p {
  margin: 0;
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* === Eerste stappen (3 genummerde kaarten) === */
.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  counter-reset: home-step;
}
.home-step {
  position: relative;
  display: block;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + var(--space-3));
  text-decoration: none;
  color: var(--color-charcoal);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-step:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 12px 28px rgba(193, 77, 52, 0.15);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--color-charcoal);
}
.home-step-num {
  position: absolute;
  top: -1px;
  left: var(--space-4);
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  padding: 0.35em 0.9em;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 2px 6px rgba(193, 77, 52, 0.25);
}
[dir="rtl"] .home-step-num {
  left: auto;
  right: var(--space-4);
}
.home-step h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-charcoal);
  line-height: 1.3;
}
.home-step p {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.home-step-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-saffron-dark);
  letter-spacing: 0.02em;
  transition: gap var(--transition), color var(--transition);
}
.home-step:hover .home-step-cta {
  color: var(--color-terracotta);
  gap: 0.7em;
}

/* === Categorieën grid: hergebruikt region-next-card maar grotere icons === */
.home-cats-grid .region-next-icon {
  width: 64px;
  height: 64px;
}
.home-cats-grid .region-next-icon img {
  width: 40px;
  height: 40px;
}
.home-cats-grid .region-next-card {
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.home-cats-grid .region-next-card strong {
  font-size: 1.0625rem;
}
.home-cats-grid .region-next-sub {
  font-size: 0.875rem;
  margin-top: var(--space-1);
}

/* === Praktische voorbereiding (3 artikel-kaarten) === */
.home-prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
}
.home-prep-card {
  position: relative;
  display: block;
  background: white;
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-charcoal);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-prep-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-saffron) 0%, var(--color-terracotta) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
[dir="rtl"] .home-prep-card::before {
  left: auto;
  right: 0;
}
.home-prep-card:hover {
  border-color: var(--color-saffron);
  box-shadow: 0 12px 28px rgba(193, 77, 52, 0.15);
  transform: translateY(-3px);
  text-decoration: none;
  color: var(--color-charcoal);
}
.home-prep-card:hover::before {
  transform: scaleY(1);
}
.home-prep-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  margin-bottom: var(--space-3);
}
.home-prep-tag::before {
  content: "✦ ";
}
.home-prep-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-terracotta);
  line-height: 1.3;
}
.home-prep-card p {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.home-prep-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-saffron-dark);
  transition: gap var(--transition), color var(--transition);
}
.home-prep-card:hover .home-prep-cta {
  color: var(--color-terracotta);
  gap: 0.7em;
}

/* === Trust sectie (vervangt platte achtergrondblok) === */
.home-trust {
  position: relative;
  background: linear-gradient(180deg, #fdf8ee 0%, #f6ead0 100%);
  border-top: 3px solid;
  border-image: linear-gradient(90deg,
    transparent 0%,
    var(--color-saffron) 30%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 70%,
    transparent 100%) 1;
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-7) 0;
  margin: var(--space-7) 0 0;
  text-align: center;
  overflow: hidden;
}
.home-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23c14d34' stroke-width='1' opacity='0.10'><path d='M30 5 L36 18 L48 18 L38 26 L42 38 L30 32 L18 38 L22 26 L12 18 L24 18 Z'/></g></svg>");
  background-size: 60px 60px;
  background-repeat: repeat;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 80%);
}
.home-trust > .container,
.home-trust > .container-narrow { position: relative; z-index: 1; }
.home-trust .eyebrow {
  background: white;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid rgba(217, 155, 44, 0.30);
  box-shadow: var(--shadow-sm);
  display: inline-block;
}
.home-trust .eyebrow::before {
  content: "✦";
  color: var(--color-saffron);
  margin-inline-end: 0.4em;
}
.home-trust h2 {
  font-family: var(--font-display);
  margin: var(--space-3) 0 var(--space-3);
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-2);
}
.home-trust h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta) 0%, var(--color-saffron) 100%);
  border-radius: 2px;
}
.home-trust .lead {
  margin: 0 auto;
  max-width: 60ch;
}
.home-trust-link {
  margin: var(--space-4) 0 0;
}
.home-trust-link a {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1.2em;
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: 999px;
  color: var(--color-terracotta);
  text-decoration: none;
  transition: background var(--transition), gap var(--transition);
}
.home-trust-link a:hover {
  background: var(--color-saffron);
  color: white;
  gap: 0.7em;
}


/* ==========================================================================
   Contact pagina
   ========================================================================== */

/* 2-koloms layout: form + aside-blokjes met asides ergens onder formulier op mobiel */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-4) 0 var(--space-7);
}
@media (min-width: 760px) {
  .contact-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* Form: één gestylede kaart, geen inline styles meer per veld */
.contact-form {
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.05);
}
.contact-field {
  margin-bottom: var(--space-4);
}
.contact-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
}
.contact-req {
  color: var(--color-terracotta);
  font-weight: 700;
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: var(--radius-sm);
  font: inherit;
  background: white;
  color: var(--color-charcoal);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-field textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.55;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-saffron);
  box-shadow: 0 0 0 3px rgba(217, 155, 44, 0.15);
}
.contact-field input:invalid:not(:placeholder-shown),
.contact-field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}
.contact-error {
  color: var(--color-error);
  font-size: 0.875rem;
  margin: var(--space-1) 0 0;
}
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-4);
}
.contact-form .cta {
  margin-top: var(--space-2);
}

/* Aside blokjes: hergebruik region-info-card stijl, gestapeld vertical */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-aside .region-info-card p {
  margin-bottom: var(--space-2);
}
.contact-aside .region-info-card p:last-child {
  margin-bottom: 0;
}

/* Error variant van mg-tip-box: rode accent in plaats van saffraan */
.mg-tip-box-error {
  background: rgba(176, 58, 38, 0.05);
  border-color: rgba(176, 58, 38, 0.30) !important;
}
.mg-tip-box-error::before {
  background: var(--color-error) !important;
}
.mg-tip-box-error .mg-tip-box-content strong {
  color: var(--color-error);
}


/* ==========================================================================
   Contact pagina — success state
   Grote gecentreerde kaart die formulier vervangt na succesvol verzenden
   ========================================================================== */
.contact-success {
  position: relative;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-5) var(--space-6);
  margin: var(--space-4) 0 var(--space-7);
  text-align: center;
  box-shadow: 0 8px 24px rgba(193, 77, 52, 0.08);
  overflow: hidden;
}

/* Saffraan-terracotta gradient streep bovenaan */
.contact-success::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--color-saffron) 0%,
    var(--color-terracotta) 50%,
    var(--color-saffron) 100%);
}

/* Subtiele zellige ster waterstempel rechtsboven en linksonder */
.contact-success::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23d99b2c' stroke-width='1.2' opacity='0.18'><path d='M50 8 L60 32 L86 32 L66 48 L74 74 L50 58 L26 74 L34 48 L14 32 L40 32 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
[dir="rtl"] .contact-success::after {
  right: auto;
  left: -40px;
  transform: scaleX(-1);
}

/* Drijvende ster boven de kaart */
.contact-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
  color: white;
  font-size: 1.75rem;
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 16px rgba(193, 77, 52, 0.30);
  position: relative;
  z-index: 1;
}

.contact-success-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-terracotta);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.contact-success-lead {
  margin: 0 auto var(--space-4);
  max-width: 50ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-charcoal);
  position: relative;
  z-index: 1;
}

/* Onderwerp-pill */
.contact-success-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(217, 155, 44, 0.10);
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: 999px;
  padding: 0.5em 1.2em;
  margin: 0 0 var(--space-4);
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.contact-success-meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  font-weight: 700;
}
.contact-success-meta-value {
  font-size: 0.95rem;
  color: var(--color-charcoal);
  font-weight: 500;
  word-break: break-word;
}

/* Bevestigings-zin (e-mail check) */
.contact-success-confirm {
  margin: 0 auto var(--space-5);
  max-width: 50ch;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* "Stuur nog een bericht" link als pill-button */
.contact-success-again {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  background: white;
  border: 1px solid rgba(217, 155, 44, 0.30);
  border-radius: 999px;
  color: var(--color-terracotta);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), gap var(--transition);
  position: relative;
  z-index: 1;
}
.contact-success-again:hover {
  background: var(--color-saffron);
  border-color: var(--color-saffron);
  color: white;
  gap: 0.7em;
  text-decoration: none;
}

/* Mobiele aanpassingen */
@media (max-width: 540px) {
  .contact-success {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }
  .contact-success-title {
    font-size: 1.4rem;
  }
  .contact-success-lead {
    font-size: 1rem;
  }
  .contact-success-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
}


/* ==========================================================================
   Blog: Over de auteur card
   E-E-A-T signal: zichtbare attributie naar Person met bio en link
   ========================================================================== */
.mg-author-card-wrap {
  padding: var(--space-5) 0 var(--space-3);
}
.mg-author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  position: relative;
  overflow: hidden;
}
/* Saffraan top-rand */
.mg-author-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-saffron) 0%, var(--color-terracotta) 100%);
}
.mg-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-terracotta-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(193, 77, 52, 0.20);
}
.mg-author-avatar-letter {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: white;
  line-height: 1;
}
.mg-author-body {
  min-width: 0;
}
.mg-author-name {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-charcoal);
}
.mg-author-role {
  margin: 0 0 var(--space-2);
  font-size: 0.875rem;
  color: var(--color-saffron-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mg-author-bio {
  margin: 0 0 var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-charcoal);
}
.mg-author-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-terracotta);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(193, 77, 52, 0.30);
  padding-bottom: 1px;
  transition: gap var(--transition), color var(--transition);
}
.mg-author-link:hover {
  color: var(--color-terracotta-dark);
  gap: 0.6em;
  border-bottom-color: var(--color-terracotta-dark);
  text-decoration: none;
}

/* Mobile: stacking */
@media (max-width: 540px) {
  .mg-author-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-4);
  }
  .mg-author-avatar {
    margin: 0 auto;
  }
  .mg-author-link {
    margin: 0 auto;
  }
}