/* Iets te vieren: intro met kernpunten en foto, drie menu's als witte kaarten met de gangen onder elkaar,
   een breed blok voor het feestarrangement en "Goed om te weten". Licht, net als zakelijk. */
.feest { background-color: var(--secondary); padding: var(--space-2xl) var(--space-m); }
.feest__binnen { width: var(--max-screen-width); max-width: 100%; margin: 0 auto; }
.feest__tagline { margin: 0 0 .6rem; font-weight: 600; color: var(--primary-tekst); }
.feest__kop { font-family: "Bearmen"; font-size: var(--text-2xl); color: var(--dark); margin: 0 0 var(--space-s); }
.feest__kop--midden { text-align: center; margin: var(--space-2xl) 0 var(--space-l); }
.feest__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.feest__tekst { color: var(--text-body); }
.feest__foto { width: 100%; height: auto; display: block; border-radius: var(--radius-m); aspect-ratio: 3 / 2; object-fit: cover; }
.feest__feiten, .feest__weten ul { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; gap: .5rem; }
.feest__feiten li, .feest__weten li { position: relative; padding-left: 1.6rem; }
.feest__feiten li { font-weight: 600; color: var(--dark); }
.feest__feiten li::before { content: "✓"; position: absolute; left: 0; color: var(--primary-tekst); font-weight: 700; }
.feest__weten li::before { content: "–"; position: absolute; left: 0; color: var(--primary-tekst); }

.menus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.menu { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-m); padding: var(--space-l) var(--space-m); }
.menu__titel { margin: 0; font-family: "Bearmen"; font-size: var(--text-xl); color: var(--dark); line-height: 1.15; }
.menu__prijs { margin: .3rem 0 0; font-size: var(--text-xl); font-weight: 700; color: var(--primary-tekst); }
.menu__prijs span { font-size: var(--text-s); font-weight: 400; color: var(--dark-60); }
.menu__extra { margin: var(--space-xs) 0 0; font-size: var(--text-s); color: var(--text-body); font-style: italic; }
.menu__keuze { margin: var(--space-m) 0 0; padding-top: var(--space-s); border-top: 1px solid var(--dark-10); font-size: var(--text-s); color: var(--dark-60); }
.menu-gang { margin-top: var(--space-s); }
.menu-gang__naam { margin: 0; font-weight: 700; color: var(--dark); }
.menu-gang__opties { margin: .1rem 0 0; color: var(--text-body); }
.menu__knop { margin-top: auto; text-align: center; justify-content: center; }
.menu-gang:last-of-type { margin-bottom: var(--space-l); }
.feest__voetnoot { margin: var(--space-s) 0 0; text-align: center; font-size: var(--text-s); color: var(--dark-60); }

.feestje {
  margin-top: var(--space-2xl);
  padding: var(--space-l);
  background: #fff;
  border-radius: var(--radius-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-l);
  align-items: center;
}
.feestje__links p { color: var(--text-body); margin: 0 0 var(--space-xs); }
.feestje__links .feest__tagline { color: var(--primary-tekst); }
.feestje__wie { font-weight: 700; color: var(--dark) !important; }
.feestje__klein { font-size: var(--text-s); }
.feestje__rechts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
.feestje__rechts .menu__prijs { font-size: var(--text-2xl); margin: 0; }

.feest__weten {
  margin-top: var(--space-2xl);
  padding: var(--space-l);
  border: 1px solid var(--dark-20);
  border-radius: var(--radius-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-l);
  align-items: center;
}
.feest__weten-kop { margin: 0; font-family: "Bearmen"; font-size: var(--text-l); color: var(--dark); }
.feest__weten ul { margin-top: var(--space-s); color: var(--text-body); }
.feest__knoppen { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.feest__knop-rand { border: 1px solid var(--dark); color: var(--dark); background: transparent; }
.feest__knop-rand:hover { background: var(--dark); color: var(--secondary); }

@media (max-width: 991px) {
  .feest__intro { grid-template-columns: 1fr; }
  .menus { grid-template-columns: 1fr 1fr; }
  .feestje, .feest__weten { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .menus { grid-template-columns: 1fr; }
}