/* ============================================================
   netwerkevents.css
   Paginaspecifieke laag bovenop style.css + marrakech.css.
   Alleen overrides die van marrakech afwijken — zelfde tokens.
   ============================================================ */

/* --- Hero: scrim afgestemd op de kasteelfoto -------------
   De foto is bij fel daglicht geschoten: blauwe lucht, witte wolken.
   Daar is een zware scrim voor nodig, anders leest de witte kop niet
   over de lucht. Links bijna zwart voor de tekst, rechts net genoeg
   opengelaten om de gevel en de vlaggen te laten zien.
   Let op bij het vervangen van de foto: een donkere opname heeft
   juist een lichtere scrim nodig, anders wordt het een zwart vlak. */
.mk-hero--photo::before {
  background:
    linear-gradient(90deg, rgba(8, 8, 7, 0.94) 0%, rgba(8, 8, 7, 0.86) 38%, rgba(8, 8, 7, 0.42) 66%, rgba(8, 8, 7, 0.2) 100%),
    linear-gradient(180deg, rgba(8, 8, 7, 0.6) 0%, rgba(8, 8, 7, 0.12) 34%, rgba(8, 8, 7, 0.75) 100%);
}

@media (max-width: 991px) {
  .mk-hero--photo::before {
    background:
      linear-gradient(180deg, rgba(8, 8, 7, 0.92) 0%, rgba(8, 8, 7, 0.86) 45%, rgba(8, 8, 7, 0.95) 100%);
  }
}

/* --- Herken je dit: één foto i.p.v. het 2x2 grid ---------
   Geen versprongen kolommen meer, dus ook de nth-child-offsets
   van marrakech terugdraaien. */
.mk-photo-grid--single { grid-template-columns: 1fr; }
.mk-photo-grid--single figure { aspect-ratio: 4 / 5; margin-top: 0; }
/* De foto is liggend, de tegel staand: uitsnede op Salar zelf,
   iets rechts van het midden. */
.mk-photo-grid--single img { object-position: 57% 32%; }

@media (max-width: 991px) {
  /* Op mobiel staat de foto onder de lijst — daar werkt een
     minder hoge uitsnede beter. */
  .mk-photo-grid--single figure { aspect-ratio: 3 / 4; max-width: 460px; margin-inline: auto; }
}

/* --- Videosectie ------------------------------------------
   Poster + gouden play-knop; de echte player laadt pas na een
   klik (zie js/netwerkevents.js). */
.ne-video {
  position: relative;
  max-width: 940px;
  margin-inline: auto;
  /* Exact de verhouding van het bijgesneden bestand (1214x652),
     dus geen zwarte balken en niets dat wegvalt. */
  aspect-ratio: 1214 / 652;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.ne-video__poster,
.ne-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* Donkere waas zodat de play-knop altijd leesbaar is */
.ne-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(8, 8, 7, 0.35) 0%, rgba(8, 8, 7, 0.62) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ne-video:hover::after { opacity: 0.75; }

.ne-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 82px;
  height: 82px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(13, 13, 12, 0.55);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
/* Driehoekje, optisch iets naar rechts zodat het gecentreerd oogt */
.ne-video__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--gold);
}
.ne-video:hover .ne-video__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(209, 173, 125, 0.18);
}

/* Nog geen videobron gekoppeld */
.ne-video--empty { cursor: default; }
.ne-video--empty .ne-video__play { display: none; }
.ne-video--empty:hover::after { opacity: 1; }
.ne-video__soon {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 13, 12, 0.7);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.ne-video--empty .ne-video__soon { display: block; }

.ne-video__caption {
  max-width: 780px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 767px) {
  .ne-video__play { width: 62px; height: 62px; }
  .ne-video__play::before { border-width: 10px 0 10px 16px; }
  .ne-video__caption { font-size: 16px; margin-top: 24px; }
}

/* --- Sfeerimpressie: mozaïekraster -----------------------
   Vier kolommen; de eerste foto is dubbel zo groot, daarna een
   afwisseling van brede en smalle tegels. */
.ne-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 14px;
}
.ne-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.ne-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease, ease);
}
.ne-gallery__item:hover img { transform: scale(1.04); }

.ne-gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.ne-gallery__item:nth-child(2) { grid-column: span 2; }
.ne-gallery__item:nth-child(5),
.ne-gallery__item:nth-child(6) { grid-column: span 2; }

/* Gelijke vierkanten i.p.v. het mozaïek. De eventfoto's zijn vierkant
   aangeleverd, dus een vierkante tegel snijdt er niets af. auto-fit
   houdt het raster kloppend of er nu twee, drie of vier foto's staan —
   komen er nieuwe bij, dan hoeft hier niets aangepast. */
/* Drie kolommen: bij zes foto's geeft dat twee volle rijen. auto-fit
   maakte er 4 + 2 van, en zo'n halve tweede rij oogt als een fout. */
.ne-gallery--events {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
  max-width: 1100px;
  margin-inline: auto;
}
.ne-gallery--events .ne-gallery__item {
  aspect-ratio: 1 / 1;
  grid-column: auto;
  grid-row: auto;
}
/* Brede tegel voor een liggende foto. Bewust GEEN eigen aspect-ratio:
   de hoogte komt van de vierkante tegel ernaast, zodat de rij precies
   uitlijnt. Zet je hier wel een verhouding, dan wijkt hij een paar
   pixels af van zijn buur en zie je een randje. */
.ne-gallery--events .ne-gallery__item--breed {
  grid-column: span 2;
  aspect-ratio: auto;
}

@media (max-width: 767px) {
  .ne-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; gap: 10px; }
  .ne-gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .ne-gallery__item:nth-child(2),
  .ne-gallery__item:nth-child(5),
  .ne-gallery__item:nth-child(6) { grid-column: span 2; }

  /* Op een telefoon worden drie vierkanten naast elkaar postzegels;
     dan liever onder elkaar op volle breedte.
     grid-auto-rows MOET hier terug naar auto: het mozaïek hierboven
     zet vaste rijen van 130px, en een vierkante tegel van 338px past
     daar niet in. Zonder deze regel schuiven de foto's 193px over
     elkaar heen en steekt de laatste dwars door de FAQ-kop. */
  .ne-gallery--events {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
  }
  .ne-gallery--events .ne-gallery__item { grid-column: auto; grid-row: auto; }
  /* In één kolom heeft de brede tegel geen buurman meer om zijn hoogte
     aan te ontlenen; hier dus wel een eigen liggende verhouding. */
  .ne-gallery--events .ne-gallery__item--breed { aspect-ratio: 3 / 2; }
}

/* --- FAQ: opsommingen binnen een antwoord ----------------- */
.ne-faq-list { margin: 10px 0 18px; padding-left: 2px; list-style: none; }
.ne-faq-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.ne-faq-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.faq-item__a-inner p + p { margin-top: 14px; }
.faq-item__a-inner b { color: var(--gold); font-weight: 600; }

/* --- Pakketten -------------------------------------------
   Drie kaarten naast elkaar, alle drie even hoog met de knoppen
   op één lijn onderaan. Gold heeft de langste lijst en bepaalt
   dus de hoogte; bij Bronze en Silver valt onder de lijst lege
   ruimte, en dat hoort zo — een prijstabel leest alleen rustig
   als de knoppen op dezelfde hoogte staan. */
.ne-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
  max-width: 1180px;
  margin-inline: auto;
}
.ne-plans .mk-price-card {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin-inline: 0;
  padding: 40px 32px 36px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ne-plans .mk-price-card__logo { width: 74px; margin-bottom: 18px; }
.ne-plans .mk-price-card__amount { font-size: clamp(38px, 3.4vw, 52px); }
/* De lijst rekt op tot de kaart vol is; daardoor zakt de knop
   naar de onderrand in plaats van direct onder de laatste optie.
   align-content: start is hier essentieel: de lijst is een grid, en
   zonder die regel verdeelt het raster de extra hoogte TUSSEN de
   regels. Bronze met 6 punten oogt dan even vol als Gold met 11,
   precies het omgekeerde van wat de prijstabel moet vertellen.
   Nu houden de regels hun eigen hoogte en valt de restruimte
   onderaan — zo zie je in één oogopslag dat Gold meer biedt. */
.ne-plans .mk-price-card .feature-list {
  flex: 1 0 auto;
  align-content: start;
  gap: 12px;
  margin: 26px 0 30px;
}
/* Vangnet: mocht er ooit iets tussen lijst en knop komen, dan
   blijft de knop alsnog onderaan hangen. */
.ne-plans .mk-price-card .btn-primary { margin-top: auto; }

/* Kleine btw-regel onder de balk */
.ne-plan__vat {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Metaallagen per pakket ------------------------------
   background-clip op de tekst geeft de naam en het bedrag een
   echte metaalglans; de vinkjes hebben per pakket hun eigen
   gekleurde icoon (checked-bronze/silver/gold.svg). */
.ne-plan .mk-price-card__name,
.ne-plan .mk-price-card__amount {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.ne-plan--bronze {
  border-color: rgba(198, 138, 78, 0.55);
  background: linear-gradient(170deg, rgba(198, 138, 78, 0.12), rgba(13, 13, 12, 0.96));
}
.ne-plan--bronze .mk-price-card__name,
.ne-plan--bronze .mk-price-card__amount {
  background-image: linear-gradient(135deg, #f0cba8 0%, #c68a4e 35%, #9c6329 60%, #e8bb92 100%);
}
.ne-plan--bronze .mk-price-card__allin {
  background: linear-gradient(135deg, #e8bb92, #c68a4e 55%, #9c6329);
  color: #2a1b0c;
}
.ne-plan--bronze .mk-price-card__rule { background: rgba(198, 138, 78, 0.45); }

.ne-plan--silver {
  border-color: rgba(207, 212, 218, 0.6);
  background: linear-gradient(170deg, rgba(207, 212, 218, 0.13), rgba(13, 13, 12, 0.96));
  box-shadow: 0 0 50px rgba(207, 212, 218, 0.12), 0 24px 60px rgba(0, 0, 0, 0.55);
}
.ne-plan--silver .mk-price-card__name,
.ne-plan--silver .mk-price-card__amount {
  background-image: linear-gradient(135deg, #ffffff 0%, #cfd4da 35%, #8e959c 60%, #f2f4f6 100%);
}
.ne-plan--silver .mk-price-card__allin {
  background: linear-gradient(135deg, #f2f4f6, #cfd4da 55%, #9aa2aa);
  color: #20242a;
}
.ne-plan--silver .mk-price-card__rule { background: rgba(207, 212, 218, 0.5); }
.ne-plan--silver .ne-plan__badge { background: linear-gradient(135deg, #f2f4f6, #cfd4da 55%, #9aa2aa); color: #20242a; }

.ne-plan--gold {
  border-color: var(--gold);
  box-shadow: 0 0 60px rgba(209, 173, 125, 0.2), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.ne-plan--gold .mk-price-card__name,
.ne-plan--gold .mk-price-card__amount {
  background-image: linear-gradient(135deg, #fff3d6 0%, #dfbb86 35%, #b08d5b 60%, #f6e0b5 100%);
}

.ne-plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: #0d0d0c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- Toelichting boven de kaarten ------------------------
   De ondermarge moet ruimer zijn dan je op het oog zou zetten: de
   badges van Silver en Gold steken 13px boven hun kaart uit, dus de
   zichtbare tussenruimte is altijd 13px kleiner dan deze waarde. */
.ne-plans__note {
  max-width: 860px;
  margin: 0 auto 84px;
  padding: 24px 28px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(252, 252, 252, 0.03);
}
.ne-plans__note-row { display: flex; align-items: baseline; gap: 18px; }
.ne-plans__note-label {
  flex: 0 0 96px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.ne-plans__note p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.ne-plans__note b { color: var(--text-cream); font-weight: 600; }

@media (max-width: 1100px) {
  .ne-plans { grid-template-columns: 1fr; max-width: 620px; gap: 40px; }
}
@media (max-width: 600px) {
  .ne-plans__note-row { display: block; }
  .ne-plans__note-label { display: block; margin-bottom: 6px; }
}

/* --- Tijdlijn: lopende tekst i.p.v. een puntenlijst -------
   Item 2 en 3 zijn beschrijvingen, geen opsommingen. */
.ne-learn__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Reviews: Google-stijl -------------------------------
   Witte kaarten op de donkere pagina, licht gedraaid zodat ze ogen
   als losse screenshots uit Google Reviews. Wit is hier bewust: het
   contrast met de zwarte pagina maakt de sociale bewijskracht sterk
   en het beeld herkenbaar als een echte review, niet als sitecopy. */
.ne-reviews {
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}
.ne-review {
  position: relative;
  padding: 24px 24px 26px;
  border-radius: 14px;
  background: #fff;
  color: #202124;
  /* Twee lagen: een korte rand-schaduw voor de kaartrand en een
     diepe, zachte voor het zweefeffect boven de zwarte achtergrond. */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    0 18px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s ease;
}
/* Lichte, ongelijke draaiing — genoeg om los te ogen, niet zoveel
   dat de tekst scheef leest. */
.ne-review:nth-child(1) { transform: rotate(-1.1deg); }
.ne-review:nth-child(2) { transform: rotate(0.7deg) translateY(-14px); }
.ne-review:nth-child(3) { transform: rotate(-0.4deg) translateY(4px); }
.ne-review:hover,
.ne-review:nth-child(1):hover,
.ne-review:nth-child(2):hover,
.ne-review:nth-child(3):hover {
  transform: rotate(0) translateY(-6px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    0 26px 56px rgba(0, 0, 0, 0.58);
}

.ne-review__head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 16px;
}
.ne-review__avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #e0c299, #c19a63);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.ne-review__who { min-width: 0; }
.ne-review__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #202124;
}
.ne-review__meta {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #70757a;
}
/* Het Google-logo rechtsboven, zoals op een echte reviewkaart */
.ne-review__source {
  flex: 0 0 auto;
  margin-left: auto;
  width: 19px;
  height: 19px;
  display: block;
}

.ne-review__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}
.ne-review__stars svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: #fbbc04;
}
.ne-review__text {
  font-size: 14.5px;
  line-height: 1.62;
  color: #3c4043;
}

/* --- Reviews als doorlopende lus -------------------------
   Elf reviews passen niet in een raster zonder de pagina op te
   rekken. Een lus toont ze allemaal en houdt de sectie compact.
   De kaartenreeks staat twee keer in de HTML; de animatie schuift
   exact één set op en herhaalt. Op het moment van terugspringen
   staat de tweede set op dezelfde plek, dus je ziet geen sprong. */
.ne-marquee {
  position: relative;
  /* Echt scrollen i.p.v. een transform: alleen zo kan de bezoeker er
     zelf doorheen vegen of slepen. Het doorlopen wordt in
     js/netwerkevents.js geregeld door scrollLeft op te schuiven. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* oude Edge */
  overscroll-behavior-x: contain;    /* geen terug-navigatie bij doorvegen */
  cursor: grab;
  /* Vervagen aan de randen zodat kaarten niet hard afgekapt lijken */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ne-marquee::-webkit-scrollbar { display: none; }
.ne-marquee.is-sleepend { cursor: grabbing; }
/* Tijdens slepen mag de tekst niet oplichten als selectie */
.ne-marquee.is-sleepend,
.ne-marquee.is-sleepend * { user-select: none; }

.ne-marquee__track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  padding: 12px 0 20px;
}

/* In de lus krijgt elke kaart dezelfde breedte en hoogte: bij losse
   breedtes gaat de rij golven en oogt de beweging onrustig. */
.ne-marquee .ne-review {
  flex: 0 0 340px;
  width: 340px;
  display: flex;
  flex-direction: column;
  /* De scheve stand van het raster werkt hier niet: bij beweging
     leest dat als trillen in plaats van als losse screenshots. */
  transform: none !important;
}
.ne-marquee .ne-review__text { flex: 1; }
/* Afbeeldingen en tekst niet meeslepen als je de rij vastpakt */
.ne-marquee .ne-review img { -webkit-user-drag: none; user-drag: none; }

@media (max-width: 640px) {
  .ne-marquee .ne-review { flex-basis: 280px; width: 280px; }
  .ne-marquee__track { gap: 16px; }
  /* Op een telefoon minder vervaging: daar is het beeld al smal en
     zou een brede fade te veel van de kaart wegnemen. */
  .ne-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}

/* --- Socials in de landingspagina-footer -----------------
   De hoofdsite heeft ze in de grote footer; deze pagina had alleen
   een mailadres. Zelfde gouden ring als daar, iets compacter. */
.lp-socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.lp-social {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lp-social svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.lp-social:hover {
  background: rgba(209, 173, 125, 0.14);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.ne-disclaimer {
  max-width: 720px;
  margin: 44px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(252, 252, 252, 0.45);
}

@media (max-width: 991px) {
  .ne-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* Bij twee kolommen valt de derde kaart alleen op een rij; dan
     oogt de opzettelijke scheefstand als een fout. Dus recht. */
  .ne-review,
  .ne-review:nth-child(1),
  .ne-review:nth-child(2),
  .ne-review:nth-child(3) { transform: none; }
}
@media (max-width: 640px) {
  .ne-reviews { grid-template-columns: 1fr; gap: 18px; }
}

/* De USP-balk telt weer vier blokken en gebruikt dus gewoon het
   raster uit marrakech.css. Geen override meer nodig. */

/* --- Boekingssectie --------------------------------------- */
.ne-booking {
  max-width: 900px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(252, 252, 252, 0.03);
}
.ne-booking .calendly-inline-widget { width: 100%; }

/* De sticky balk wijkt zodra het formulier in beeld komt */
.mk-sticky.is-at-form { transform: translateY(110%); }