/* Homepage-secties. Waarden 1:1 overgenomen uit index.html. */

/* ---------- Hero ---------- */
.hero-home {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: clamp(120px, 16vh, 190px) 0 0; isolation: isolate;
}
.hero-home__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-home__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Ken Burns: langzaam inzoomen en licht verschuiven, eenmalig bij het laden. */
@keyframes wm-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.14) translate(-1.5%, -1.5%); }
}
.hero-home--kenburns .hero-home__img {
  transform-origin: 50% 50%;
  animation: wm-kenburns 24s cubic-bezier(.2, .5, .3, 1) both;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-home--kenburns .hero-home__img { animation: none; transform: none; }
}
.hero-home__overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(1,32,45,.88) 0%, rgba(2,52,74,.4) 32%, rgba(1,38,54,.8) 72%, rgba(1,32,45,.96) 100%); }
.hero-home__dim { position: absolute; inset: 0; z-index: -1; background: var(--wm-navy); opacity: var(--hero-dim, .42); }
.hero-home__glow {
  position: absolute; top: 14%; right: -6%; width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(23,162,174,.34), transparent 68%); z-index: -1; pointer-events: none;
}
.hero-home__in { width: 100%; max-width: var(--wm-container); margin: 0 auto; padding: 0 var(--wm-pad) clamp(110px, 14vh, 175px); position: relative; }
.hero-home__label { margin: 0 0 clamp(14px, 2vw, 22px); font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--wm-sand); }
.hero-home__title { margin: 0; font-size: clamp(38px, 6vw, 82px); line-height: 1.03; font-weight: 800; letter-spacing: -.025em; max-width: 19ch; text-wrap: balance; }
.hero-home__intro { margin: clamp(20px, 2.4vw, 30px) 0 0; font-size: 18px; line-height: 1.75; color: rgba(255,255,255,.94); max-width: 60ch; text-wrap: pretty; }

.speakers-pill {
  margin: clamp(24px, 3vw, 34px) 0 0; width: 100%; max-width: 620px;
  display: flex; align-items: center; gap: 10px 20px; padding: 16px 22px 16px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-family: inherit; font-size: 18px; font-weight: 600; text-align: left; cursor: pointer; flex-wrap: wrap;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.speakers-pill:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); border-color: rgba(232,220,116,.85); }
.speakers-pill__left { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0; }
.speakers-pill__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wm-sand); box-shadow: 0 0 0 6px rgba(232,220,116,.25); flex: 0 0 auto; }
.speakers-pill__text { display: block; line-height: 1.45; }
.speakers-pill__right { display: inline-flex; align-items: center; gap: 8px; color: var(--wm-sand); font-weight: 700; white-space: nowrap; padding-left: 26px; }

.hero-home__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(18px, 3vw, 34px); margin: clamp(22px, 3vw, 30px) 0 0; font-size: 18px; font-weight: 600; color: #fff; }
.hero-home__fact { display: inline-flex; align-items: center; gap: 11px; }
.hero-home__fact--wrap { flex-wrap: wrap; }
.hero-home__route { color: var(--wm-sand); font-weight: 700; border-bottom: 2px solid rgba(232,220,116,.45); padding-bottom: 2px; transition: border-color .25s ease, color .25s ease; }
.hero-home__route:hover { border-color: var(--wm-sand); color: #fff; }
.hero-home__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(26px, 3.2vw, 38px) 0 0; }

/* ---------- Ticker ---------- */
/* Alleen horizontaal afknippen, zodat de schaduw van de chips volledig zichtbaar blijft. */
.ticker { background: var(--wm-sand); overflow-x: clip; overflow-y: visible; position: relative; z-index: 2; padding: 20px 0 24px; }
.ticker__track { display: flex; width: max-content; animation: wm-marquee 44s linear infinite; }
.ticker__group { display: flex; align-items: center; gap: 16px; padding-right: 16px; white-space: nowrap; }
.ticker__bob { display: inline-flex; animation: wm-bob 3.4s ease-in-out infinite; }
.ticker__bob:nth-child(5n+2) { animation-delay: -0.8s; }
.ticker__bob:nth-child(5n+3) { animation-delay: -1.6s; }
.ticker__bob:nth-child(5n+4) { animation-delay: -2.4s; }
.ticker__bob:nth-child(5n+5) { animation-delay: -3.2s; }
.ticker__chip {
  display: inline-flex; align-items: center; gap: 12px; background: var(--wm-cream-3); color: var(--wm-navy);
  font-size: 18px; font-weight: 700; padding: 10px 22px 10px 11px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(2,67,94,.16); transform: rotate(-1.6deg);
  transition: transform .3s var(--wm-ease), box-shadow .3s ease;
}
.ticker__bob:nth-child(5n+2) .ticker__chip { transform: rotate(1.4deg); }
.ticker__bob:nth-child(5n+3) .ticker__chip { transform: rotate(-1.2deg); }
.ticker__bob:nth-child(5n+4) .ticker__chip { transform: rotate(1.8deg); }
.ticker__bob:nth-child(5n+5) .ticker__chip { transform: rotate(-1.8deg); }
/* Hover wint van de rotatieregels hierboven (hogere specificiteit), voor alle chips. */
.ticker__bob:nth-child(n) .ticker__chip:hover { color: var(--wm-navy); transform: rotate(0deg) scale(1.07); box-shadow: 0 14px 32px rgba(23,162,174,.45); }
.ticker__bob:nth-child(n) .ticker__chip.is-koraal:hover { box-shadow: 0 14px 32px rgba(233,123,90,.45); }
.ticker__bob:nth-child(n) .ticker__chip.is-navy:hover { box-shadow: 0 14px 32px rgba(2,67,94,.4); }
.ticker__bob:nth-child(n) .ticker__chip.is-zand:hover { box-shadow: 0 14px 32px rgba(198,180,59,.45); }
.ticker__icon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--wm-teal); }
.ticker__chip.is-koraal .ticker__icon { background: var(--wm-coral); }
.ticker__chip.is-navy .ticker__icon { background: var(--wm-navy); }
.ticker__chip.is-zand .ticker__icon { background: var(--wm-sand-dark); }

/* ---------- Agenda-carrousel ---------- */
.s-agenda { position: relative; background: var(--wm-sand); color: var(--wm-navy); padding: clamp(58px, 7vw, 100px) 0 0; }
.s-agenda__head { max-width: var(--wm-container); margin: 0 auto; padding: 0 clamp(26px, 4vw, 62px); }
.s-agenda__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.s-agenda__text { max-width: 44ch; }
.s-agenda__intro { margin: 16px 0 0; font-size: 18px; line-height: 1.7; color: var(--wm-text-intro); }
.s-agenda__nav { display: flex; gap: 12px; }
.s-agenda__btn {
  width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(2,67,94,.4); background: none; color: var(--wm-navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.s-agenda__btn:hover { background: var(--wm-navy); color: var(--wm-sand); border-color: var(--wm-navy); }
.s-agenda__btn--prev:hover { transform: translateX(-3px); }
.s-agenda__btn--next:hover { transform: translateX(3px); }
.s-agenda__track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-padding-left: clamp(26px, 4vw, 62px);
  padding: clamp(26px, 3.2vw, 44px) clamp(26px, 4vw, 62px) clamp(44px, 6vw, 70px);
  max-width: var(--wm-container); margin: 0 auto;
}
.evcard {
  flex: 0 0 clamp(272px, 80vw, 358px); scroll-snap-align: start; background: #fff; color: var(--wm-navy);
  display: flex; flex-direction: column;
  border-radius: 26px; overflow: hidden; box-shadow: 0 16px 38px rgba(2,67,94,.2);
  transition: transform .35s var(--wm-ease), box-shadow .35s ease;
}
.evcard:hover { transform: translateY(-10px); box-shadow: 0 28px 56px rgba(2,67,94,.32); }
.evcard__media { position: relative; height: 196px; overflow: hidden; }
.evcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--wm-ease); }
.evcard:hover .evcard__img { transform: scale(1.07); }
.evcard__badge { position: absolute; top: 16px; left: 16px; }
.evcard__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.evcard__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.evcard__text { margin: 11px 0 18px; font-size: 18px; line-height: 1.65; color: var(--wm-text-body); }
/* Altijd linksonder, ook bij korte teksten: kaarten zijn even hoog (flex-track), link zakt naar beneden. */
.evcard__link { margin-top: auto; align-self: flex-start; }
.evcard__text a { color: var(--wm-teal); font-weight: 700; border-bottom: 2px solid rgba(23,162,174,.4); }
.evcard__text a:hover { color: var(--wm-teal); border-color: var(--wm-teal); }
.evcard__title + .evcard__link { padding-top: 18px; }
.s-agenda__cta {
  flex: 0 0 clamp(240px, 70vw, 300px); scroll-snap-align: start; background: var(--wm-navy); color: #fff; border-radius: 26px; padding: 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px; box-shadow: 0 16px 38px rgba(2,67,94,.24);
  transition: transform .35s var(--wm-ease), background .3s ease;
}
.s-agenda__cta:hover { color: #fff; transform: translateY(-10px); background: var(--wm-navy-hover); }
.s-agenda__cta-title { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.s-agenda__cta-sub { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--wm-sand); }

/* ---------- Over ons ---------- */
.s-over { position: relative; background: var(--wm-cream); color: var(--wm-navy); padding: clamp(40px, 5vw, 74px) 0 0; overflow-x: clip; overflow-y: visible; }
.s-over__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(34px, 4.5vw, 76px); align-items: center; position: relative; }
.s-over__title { margin: 0; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.s-over__p { margin: 22px 0 0; font-size: 18px; line-height: 1.75; color: var(--wm-text-intro); max-width: 58ch; text-wrap: pretty; }
.s-over__p--2 { margin-top: 18px; }
.s-over__usps { display: flex; flex-direction: column; gap: 12px; margin: clamp(26px, 3vw, 36px) 0 0; max-width: 620px; }
.usp.is-zand:hover { box-shadow: 0 20px 40px rgba(2,67,94,.24); }
.usp.is-koraal:hover { box-shadow: 0 20px 40px rgba(233,123,90,.3); }
.usp.is-teal:hover { box-shadow: 0 20px 40px rgba(23,162,174,.3); }
.usp.is-navy:hover { box-shadow: 0 20px 40px rgba(2,67,94,.3); }
.s-over__cta { margin: clamp(26px, 3vw, 34px) 0 0; }
.collage { position: relative; min-height: clamp(370px, 44vw, 530px); }
.collage__glow { position: absolute; top: 4%; right: 2%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(23,162,174,.24), transparent 70%); }
.collage__a, .collage__b, .collage__c { position: absolute; overflow: hidden; transition: transform .45s var(--wm-ease); }
.collage__a img, .collage__b img, .collage__c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage__a { top: 0; right: 0; width: 74%; aspect-ratio: 4 / 3; border-radius: 26px; box-shadow: 0 26px 60px rgba(2,67,94,.22); transform: rotate(2deg); }
.collage__a:hover { transform: rotate(0deg) scale(1.02); }
.collage__b { bottom: 6%; left: 0; width: 52%; aspect-ratio: 3 / 4; border-radius: 26px; border: 8px solid var(--wm-cream); box-shadow: 0 26px 60px rgba(2,67,94,.26); transform: rotate(-3deg); }
.collage__b:hover { transform: rotate(0deg) scale(1.03); }
.collage__c { bottom: 0; right: 4%; width: 42%; aspect-ratio: 3 / 2; border-radius: 22px; border: 8px solid var(--wm-cream); box-shadow: 0 22px 48px rgba(2,67,94,.24); transform: rotate(4deg); }
.collage__c:hover { transform: rotate(0deg) scale(1.03); }
.s-over__wave { margin-top: clamp(44px, 6vw, 84px); }

/* ---------- Kijk mee ---------- */
.s-kijk { position: relative; background: var(--wm-navy-dark); padding: clamp(36px, 4.5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.s-kijk__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px clamp(30px, 5vw, 70px); align-items: end; }
.s-kijk__intro { margin: 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.9); max-width: 52ch; }
.s-kijk__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 2vw, 28px); margin: clamp(28px, 3.5vw, 46px) 0 0; }
.reel { background: var(--wm-navy-hover); border-radius: 30px; padding: 14px; box-shadow: 0 22px 50px rgba(0,0,0,.34); transition: transform .35s var(--wm-ease), box-shadow .35s ease; }
.reel:hover { transform: translateY(-8px); box-shadow: 0 34px 66px rgba(0,0,0,.46); }
.reel__frame { border-radius: 20px; overflow: hidden; background: #fff; }
.reel__frame iframe { display: block; width: 100%; height: 640px; border: 0; }
.reel__link { display: inline-flex; align-items: center; gap: 10px; margin: 14px 6px 4px; font-size: 18px; font-weight: 700; color: var(--wm-sand); transition: gap .25s ease; }
.reel__link:hover { color: var(--wm-sand); gap: 16px; }
.s-kijk__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(30px, 3.6vw, 44px) 0 0; }

/* ---------- Kids & Jongeren ---------- */
.s-kids { background: var(--wm-cream-2); color: var(--wm-navy); padding: clamp(56px, 7vw, 100px) 0 0; }
.s-kids__title { max-width: 22ch; }
.s-kids__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; margin: clamp(30px, 3.6vw, 46px) 0 0; }
.gcard {
  background: #fff; color: var(--wm-navy); border-radius: 28px; overflow: hidden; box-shadow: 0 16px 38px rgba(2,67,94,.16);
  display: flex; flex-direction: column; transition: transform .35s var(--wm-ease), box-shadow .35s ease;
}
.gcard:hover { transform: translateY(-10px); box-shadow: 0 30px 58px rgba(2,67,94,.4); }
.gcard.is-koraal:hover { box-shadow: 0 30px 58px rgba(233,123,90,.36); }
.gcard.is-zand:hover { box-shadow: 0 30px 58px rgba(217,200,69,.42); }
.gcard.is-teal:hover { box-shadow: 0 30px 58px rgba(23,162,174,.4); }
.gcard__media { position: relative; height: 212px; overflow: hidden; }
.gcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--wm-ease); }
.gcard:hover .gcard__img { transform: scale(1.08); }
.gcard__badge { position: absolute; bottom: 14px; left: 14px; pointer-events: none; }
.gcard__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.gcard__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.gcard__text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--wm-text-body); }
.gcard__link { margin-top: auto; align-self: flex-start; }
.s-kids__wave { margin-top: clamp(46px, 6vw, 84px); }

/* ---------- Nieuw hier ---------- */
.s-nieuw { position: relative; background: var(--wm-sand); color: var(--wm-navy); padding: clamp(40px, 5vw, 70px) 0 clamp(70px, 9vw, 120px); }
.s-nieuw__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(30px, 4vw, 64px); align-items: center; }
.s-nieuw__title { margin: 0; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.s-nieuw__p { margin: 20px 0 0; font-size: 18px; line-height: 1.75; max-width: 54ch; text-wrap: pretty; }
.s-nieuw__steps { display: flex; flex-direction: column; gap: 12px; margin: clamp(24px, 3vw, 32px) 0 0; }
.step { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 20px; padding: 18px 22px; box-shadow: 0 12px 30px rgba(2,67,94,.14); }
.step__text { font-size: 18px; font-weight: 700; line-height: 1.5; }
.s-nieuw__ctas { margin: clamp(26px, 3vw, 34px) 0 0; }
.s-nieuw__photo { position: relative; }
.s-nieuw__frame { border-radius: 30px; overflow: hidden; box-shadow: 0 26px 60px rgba(2,67,94,.28); aspect-ratio: 4 / 5; }
.s-nieuw__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--wm-ease); }
.s-nieuw__frame:hover img { transform: scale(1.05); }
.s-nieuw__card { position: absolute; bottom: -22px; left: -10px; background: var(--wm-navy); color: #fff; border-radius: 22px; padding: 20px 24px; box-shadow: 0 20px 44px rgba(1,32,45,.35); max-width: 74%; }
.s-nieuw__card-text { display: block; font-size: 18px; font-weight: 700; line-height: 1.5; }
.s-nieuw__mail { display: inline-block; margin-top: 10px; font-size: 18px; font-weight: 800; color: var(--wm-sand); border-bottom: 2px solid rgba(232,220,116,.45); padding-bottom: 2px; transition: border-color .25s ease; }
.s-nieuw__mail:hover { color: var(--wm-sand); border-color: var(--wm-sand); }

/* ---------- Sprekers-modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 120; background: rgba(1,32,45,.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: wm-fade .22s ease both;
}
.modal__dialog { width: min(640px, 100%); max-height: 86vh; overflow-y: auto; background: #fff; color: var(--wm-navy); border-radius: 30px; padding: clamp(24px, 4vw, 38px); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal__title { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.modal__close {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; border: 2px solid rgba(2,67,94,.25); background: none; color: var(--wm-navy);
  font-size: 24px; line-height: 1; cursor: pointer; transition: background .25s ease, border-color .25s ease;
}
.modal__close:hover { background: var(--wm-cream); border-color: var(--wm-navy); }
.modal__intro { margin: 14px 0 0; font-size: 18px; line-height: 1.7; color: var(--wm-text-body); }
.modal__list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.speaker { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 22px; background: var(--wm-cream); transition: transform .25s ease, background .25s ease; }
.speaker:hover { transform: translateX(5px); background: var(--wm-cream-hover); }
.speaker__date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--wm-navy); color: var(--wm-sand); border-radius: 16px; padding: 12px 6px; }
.speaker__day { font-size: 24px; font-weight: 800; line-height: 1; }
.speaker__month { font-size: 18px; font-weight: 600; line-height: 1; }
.speaker__name { display: block; font-size: 20px; font-weight: 800; color: var(--wm-navy); letter-spacing: -.01em; }
.speaker__theme { display: block; margin-top: 4px; font-size: 18px; line-height: 1.5; color: var(--wm-text-body); }