/* ===================================================================
   LETTERTYPES - staan op de site zelf (map /fonts), dus er wordt niets
   bij Google opgehaald. Inter (tekst) en Poppins (koppen), open-source
   licentie (SIL OFL).
   =================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800.woff2') format('woff2'); }

/* ===================================================================
   HUISSTIJL / THEMA
   Alle kleuren, lettertypes en maten staan hier als variabelen.
   Wil je de kleuren of het lettertype veranderen? Pas ze hier aan,
   dan verandert de hele site automatisch mee.
   =================================================================== */
:root {
  /* Kleuren - Streetbeatz huisstijl */
  --color-bg: #ffffff;
  --color-bg-alt: #faf6f9;
  --color-surface: #ffffff;
  --color-surface-hover: #fdf0fa;
  --color-border: #e6e6e6;
  --color-text: #141414;
  --color-text-muted: #737373;
  --color-primary: #ff44db;
  --color-primary-dark: #d928b6;
  --color-accent: #91c87b;

  /* Lettertypes */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Maten */
  --container-width: 1180px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --header-height: 84px;
  --shadow-md: 0 12px 32px rgba(20, 20, 20, 0.1);
}

/* ===================================================================
   RESET / BASIS
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--color-text-muted); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }
.section--alt { background: var(--color-bg-alt); }
.section-header { max-width: 640px; margin: 0 0 48px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--color-primary);
  margin-bottom: 14px;
}

/* ===================================================================
   KNOPPEN
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-block { width: 100%; justify-content: center; }

/* ===================================================================
   HEADER / NAVIGATIE
   =================================================================== */
/* Sticky staat op de wrapper (#site-header), niet op .site-header zelf:
   die wrapper is een direct kind van <body>, wat de volle paginahoogte
   als "houvast" geeft. Zonder dit zou de sticky header meteen weer
   wegscrollen omdat zijn eigen ouder maar zo hoog is als de header zelf. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  display: inline-flex;
}
.logo .logo-part-a { color: var(--color-accent); }
.logo .logo-part-b { color: var(--color-primary); }
.logo.logo--image img { height: 68px; width: auto; display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-nav a {
  padding: 10px 16px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-text);
  background: var(--color-surface);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-icons a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-icons a:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.social-icons svg { width: 18px; height: 18px; fill: currentColor; }

.main-nav .social-icons { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    height: calc(100vh - var(--header-height));
    background: var(--color-bg);
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    padding: 32px 24px;
    gap: 4px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .main-nav a { width: 100%; padding: 14px 18px; font-size: 1.1rem; }
  body.nav-open .main-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .header-actions .social-icons { display: none; }
  .nav-toggle { display: inline-flex; }
  body.nav-open .main-nav .social-icons {
    display: flex;
    margin-top: 20px;
  }
}

/* ===================================================================
   HERO (homepagina)
   =================================================================== */
.hero {
  position: relative;
  min-height: clamp(480px, 60vh, 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
  z-index: 0;
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Donkere overlay boven op de foto, zodat de tekst goed leesbaar blijft -
   links (waar de tekst staat) donkerder, rechts iets lichter zodat de foto
   ook goed zichtbaar blijft. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10,9,14,0.85) 0%, rgba(10,9,14,0.6) 45%, rgba(10,9,14,0.25) 80%),
    linear-gradient(0deg, rgba(10,9,14,0.35) 0%, transparent 40%);
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.hero__content .eyebrow { color: var(--color-primary); }
.hero__content > p { color: rgba(255,255,255,0.82); }
.hero__actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero .btn-outline:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-title-main {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}
.hero-title-sub {
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  line-height: 1.2;
}

/* ===================================================================
   KAARTEN / GRIDS
   =================================================================== */
.grid {
  display: grid;
  gap: 28px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Merchandise-grid: 3 kaarten per rij, een onvolledige laatste rij (bijv.
   2 kaarten) wordt gecentreerd in plaats van links uitgelijnd - dat lukt
   niet met CSS Grid, daarom flexbox met "wrap" + "justify-content:center". */
.merch-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.merch-grid > .card {
  flex: 1 1 calc(33.333% - 19px);
  max-width: calc(33.333% - 19px);
}
@media (max-width: 900px) {
  .merch-grid > .card { flex-basis: calc(50% - 14px); max-width: calc(50% - 14px); }
}
@media (max-width: 600px) {
  .merch-grid > .card { flex-basis: 100%; max-width: 100%; }
}

/* Elke kaart krijgt dezelfde interne opbouw, met vaste hoogtes voor titel,
   kleurkeuze en beschrijving. Zo staan de prijzen en bestelknoppen bij elk
   product op precies dezelfde hoogte, ook als de tekst korter of langer is. */
.merch-grid .card {
  display: flex;
  flex-direction: column;
}
.merch-grid .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.merch-grid .card__body h3 { min-height: 2.4em; }
.merch-grid .card__body > p:not(.price) { min-height: 6.4em; }
.merch-grid .card__body .btn-order { margin-top: auto; }
.merch-grid .variant-swatches { min-height: 44px; }
.merch-grid .variant-current { min-height: 1.6em; }

/* Productfoto's volledig in beeld (niet bijgesneden): een vast, vierkant
   kader met wat lucht eromheen, dat voor elk product even groot is. */
.merch-grid .card__image {
  aspect-ratio: 1 / 1;
  background: #fff;
}
.merch-grid .card__image img {
  object-fit: contain;
  padding: 20px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.card__image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.card__image img { width: 100%; height: 100%; object-fit: cover; }

/* Foto naast tekst (bijv. "Over ons"), in een rond kader. Een cirkel houdt
   altijd zijn eigen 1:1 verhouding (anders wordt het een ovaal), dus in
   plaats van de foto uit te rekken tot de teksthoogte, centreren we hem
   netjes naast de tekst op een vaste, nette grootte. */
.about-photo-row { align-items: center; }
.about-photo--round {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-md);
}
.about-photo--round img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Iets naar boven gepositioneerd, zodat zowel het gezicht als de tekst
     op het shirt binnen de cirkel zichtbaar blijven. */
  object-position: 50% 18%;
}
.card__body { padding: 22px; }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 10px;
}

/* USP / feature blokken */
.feature {
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 68, 219, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.feature__icon svg { width: 26px; height: 26px; fill: currentColor; }

/* Breed, gecentreerd tekstblok (bijv. de missie op "Over ons") */
.section-header--wide { max-width: 760px; margin-bottom: 0; }

/* ===================================================================
   TEAM
   =================================================================== */
.team-card__body { text-align: center; }
.team-card__role { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }

/* ===================================================================
   SOCIAL ICONEN - grote variant (homepage teaser)
   =================================================================== */
.social-icons--lg a { width: 52px; height: 52px; }
.social-icons--lg svg { width: 24px; height: 24px; }

/* ===================================================================
   CONTACTFORMULIER
   =================================================================== */
/* Beide kolommen even hoog: de foto staat links onderaan (75% van de
   kolombreedte), zodat de onderkant van de foto gelijk loopt met de
   onderkant van het formulier. De social-knoppen beslaan de eerste helft
   van de fotobreedte, dus 50% van die 75%. */
.contact-layout { align-items: stretch; }
.contact-info { display: flex; flex-direction: column; }
.contact-info .social-icons { justify-content: space-between; margin-bottom: 32px; }
@media (min-width: 901px) {
  .contact-info .social-icons { width: 37.5%; }
}
.contact-photo {
  width: 75%;
  aspect-ratio: 4 / 3;
  margin-top: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.contact-form {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
}
.form-group--grow { flex: 1; display: flex; flex-direction: column; }
.form-group--grow textarea { flex: 1; min-height: 110px; resize: none; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-note {
  font-size: 0.85rem;
  text-align: center;
  margin: 14px 0 0;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ===================================================================
   GOOGLE MAPS WIDGET
   =================================================================== */
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
@media (max-width: 700px) {
  .map-embed { aspect-ratio: 4 / 5; }
}
/* Lopende tekst (bijv. de privacyverklaring) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.35rem; margin: 2.2em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--color-text); line-height: 1.7; }
.prose ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5em; }
.prose a { color: var(--color-primary-dark); text-decoration: underline; }
.prose mark { background: #fff2a8; color: var(--color-text); padding: 1px 6px; border-radius: 4px; }

/* Kaart pas laden na een klik (privacy): dit blok staat er tot die tijd. */
.map-consent {
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 68, 219, 0.1), rgba(145, 200, 123, 0.18));
}
.map-consent__icon { width: 44px; height: 44px; margin-bottom: 10px; color: var(--color-primary); }
.map-consent__icon svg { width: 100%; height: 100%; fill: currentColor; }
.map-consent h3 { margin-bottom: 8px; }
.map-consent p { max-width: 520px; font-size: 0.92rem; margin-bottom: 18px; }
.map-consent a:not(.btn) { color: var(--color-primary-dark); text-decoration: underline; }
.map-consent__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ===================================================================
   AGENDA: UITGELICHT EVENT + WEDSTRIJDENLIJST
   =================================================================== */
.event-feature {
  display: grid;
  grid-template-columns: 5fr 6fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.event-feature__poster { background: var(--color-surface); align-self: start; }

/* Carrousel: elke poster is een "dia" die vastklikt (scroll-snap), met
   pijlen links/rechts en bolletjes eronder. Swipen werkt op touchscreens.
   Het kader heeft precies de verhouding van de posters (4:5), dus er blijft
   geen rand om de poster over. */
.carousel { display: flex; flex-direction: column; }
.carousel__viewport { position: relative; flex: none; width: 100%; aspect-ratio: 4 / 5; }
.carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; height: 100%; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, color 0.2s ease;
}
.carousel__btn:hover { background: var(--color-primary); color: #fff; }
.carousel__btn svg { width: 22px; height: 22px; fill: currentColor; }
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__dots { display: flex; justify-content: center; gap: 10px; padding: 14px 0; }
.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(20, 20, 20, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel__dot.is-active { background: var(--color-primary); transform: scale(1.3); }
.event-feature__body { padding: 44px; align-self: center; }
.event-feature__body h2 { margin-bottom: 8px; }
.event-feature__when { color: var(--color-text); margin-bottom: 14px; }
.event-feature__when strong { color: var(--color-primary); }

.session-list { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.session-list li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}
.session-list__nr {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-list__what strong { display: block; line-height: 1.2; }
.session-list__what small { color: var(--color-text-muted); font-size: 0.85rem; }
.session-list__time { font-family: var(--font-heading); font-weight: 600; white-space: nowrap; }

.event-feature__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 24px;
}
.event-feature__price strong { font-family: var(--font-heading); font-size: 1.3rem; }
.event-feature__price span {
  background: rgba(145, 200, 123, 0.25);
  color: #3f6b2f;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 14px;
  border-radius: 100px;
}
.event-feature__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.event-feature__note { margin: 20px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--color-text-muted); }
.event-feature__note a { color: inherit; text-decoration: underline; }
.event-feature__note a:hover { color: var(--color-primary-dark); }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.event-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.event-row:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.event-row__date {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: rgba(255, 68, 219, 0.12);
  color: var(--color-primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  line-height: 1;
}
.event-row__date strong { font-size: 1.7rem; }
.event-row__date span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.event-row__info h3 { margin: 0 0 4px; font-size: 1.15rem; }
.event-row__info p { margin: 0; font-size: 0.95rem; }
.event-row__teams { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.event-row__teams span {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255, 68, 219, 0.12);
  color: var(--color-primary-dark);
}
.agenda-more { text-align: center; margin-top: 48px; }
.agenda-more .social-icons { justify-content: center; }

@media (max-width: 900px) {
  .event-feature { grid-template-columns: 1fr; }
  .carousel { max-width: 440px; margin: 0 auto; }
  .event-feature__body { padding: 28px 22px; }
}
@media (max-width: 600px) {
  .event-row { grid-template-columns: 64px 1fr; }
  .event-row__date { width: 64px; height: 64px; }
  .event-row__teams { grid-column: 2; justify-content: flex-start; }
  .session-list li { grid-template-columns: 36px 1fr; }
  .session-list__time { grid-column: 2; }
}

/* ===================================================================
   MERCHANDISE
   =================================================================== */
.price { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: 1.1rem; }

.variant-swatches {
  display: flex;
  gap: 8px;
  padding: 14px 22px 0;
}
.variant-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.variant-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.variant-swatch.is-active { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary); }
.variant-current { font-size: 0.9rem; color: var(--color-text-muted); margin: 4px 0 10px; }
.variant-current strong { color: var(--color-text); }

/* ===================================================================
   SOCIAL-BLOK OP DE HOMEPAGE (tekst + telefoon met video)
   Het beeld heeft een zwarte achtergrond, dus staat het in een zwart
   paneel met een roze-groene rand. */
.social-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.social-showcase__text h2 { margin-bottom: 14px; }
.social-showcase__text p { max-width: 520px; margin-bottom: 28px; }
.social-showcase__visual { display: flex; justify-content: center; }
.social-showcase__frame {
  position: relative;
  width: min(100%, 360px);
  padding: 4px;
  border-radius: calc(var(--radius-lg) + 4px);
  background: linear-gradient(140deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 30px 60px rgba(255, 68, 219, 0.22);
  transform: rotate(2.5deg);
}
.social-showcase__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: #000;
}
@media (max-width: 900px) {
  .social-showcase { grid-template-columns: 1fr; gap: 40px; }
  .social-showcase__frame { width: min(100%, 300px); }
}

/* ===================================================================
   CTA BANNER
   =================================================================== */
.cta-banner {
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  color: #fff;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.85); }
.cta-banner .btn-outline { border-color: rgba(255,255,255,0.6); color: #fff; }
.cta-banner .btn-outline:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-col h4 { font-size: 1rem; margin-bottom: 18px; }
.footer-col p, .footer-col a { color: var(--color-text-muted); font-size: 0.95rem; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a:hover { color: var(--color-primary); }
/* De knoppen spreiden zich uit over precies de breedte van de kop erboven. */
.footer-col--social { width: fit-content; }
.footer-col--social .social-icons { justify-content: space-between; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom a:hover { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .cta-banner { padding: 40px 24px; }
}

/* ===================================================================
   CONTACTGEGEVENS BLOK (footer)
   =================================================================== */
.contact-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: var(--color-text-muted);
}
.contact-list svg { width: 18px; height: 18px; fill: var(--color-primary); flex-shrink: 0; margin-top: 3px; }

/* Pagina-intro (voor binnenpaginas zoals agenda/team/media/merchandise) */
.page-hero {
  padding: 160px 0 64px;
  text-align: center;
}
.page-hero .eyebrow { }
.page-hero p { max-width: 640px; margin-left: auto; margin-right: auto; }