/* Site-eigen CSS Yachtcenter Langweer (site 477).
   Overgenomen uit Greenchalets (site 476, public/css/custom.css) voor de lagen van
   /pagina-onderdelen/home-lagen: classes gc- -> yc-, kleuren naar het Yachtcenter-palet
   (navy #1D3446, diepzee #0E1E2C, ijs #8FB3C9 / ijs diep #4D82A4, nevel #EEF1F3).
   Alleen laag-gerelateerde regels; header/topbar/boeken/regiokaart bewust niet. 12-10-2026 */

/* Koppen en knoppen in Archivo breed (wdth 125), als het ontwerp. Geen CMS-veld voor font-stretch. */
h1, h2, h3, .ds-title, .heading, .btn, .ds-button { font-stretch: 125%; }

/* Exacte schaal uit prototype/home.html; CMS-fontvelden gebruiken vaste breakpoints.
   Alle wisselende titels (h1 en p) delen dezelfde tekengrootte. */
.hero__titles > .hero__title { font-size: clamp(38px, 5vw, 62px); }

/* Spotlight (laag 'Camping in de spotlight'): volbeeld-achtergrond met een kaart op de
   linker containerrand. Het marge-veld in het CMS accepteert geen calc(), en de
   layer__inner verliest z'n container-cap zodra de achtergrond volbeeld is. Deze ene
   regel zet de kaart binnen de 72rem-body, links uitgelijnd. Geselecteerd via het
   `css-class`-opmaakveld (design_layer) i.p.v. een item-id -- die is niet stabiel bij
   dupliceren/re-seed. Zie Flow #1167. */
.yc-spotlight .layer__sc > .layer__inner {
  margin-left: max(1.5rem, calc((100% - 72rem) / 2));
  margin-right: auto;
}
@media (max-width: 760px) {
  /* Mobiel: kaart-marges + wat lucht in het kader (desktop 40/38px, mobiel stond op 0). Age 2026-10-07. */
  .yc-spotlight .layer__sc > .layer__inner { margin-left: 16px; margin-right: 16px; padding: 28px 24px; }
}
/* Rechts-variant van yc-spotlight: kaart aan de rechterkant binnen de 72rem-body.
   Gebruik samen met .yc-spotlight (css-class = "yc-spotlight yc-spotlight--right").
   Alleen desktop; mobiel blijft via de regel hierboven full-width. Zie Flow #1167. */
@media (min-width: 761px) {
  .yc-spotlight--right .layer__sc > .layer__inner {
    margin-left: auto;
    margin-right: max(1.5rem, calc((100% - 72rem) / 2));
  }
}


/* Campings-band ('Onze campings'): overlay-kaarten met liggend (4:3) beeld. Het
   framework geeft een overlay-kaart alleen hoogte bij een staand beeld; bij 4:3 zakt
   de caption eruit. Geselecteerd via `css-class` (design_layer), niet op item-id, zodat
   de bestemmingen-laag (3:4, .yc-bestemmingen-carousel) hier los van blijft staan.
   Zie Flow #1166. */
.yc-campings-band .card__inner--overlay { aspect-ratio: 4 / 3; }
.yc-campings-band .card__inner--overlay > .card__media { position: absolute; inset: 0; aspect-ratio: auto; }

/* Bestemmingen-carrousel ('Onze bestemmingen'): het CMS-veld 'arrows_position' (rechts
   onder) is niet bedraad naar CSS; de pijlen blijven op de zijkanten. Hier scoped naar
   rechts-onder de kaarten, als ronde navy knoppen -- via `css-class`
   (design_layer), niet op item-id. Zie Flow #1172. */
.yc-destinations-carousel .carousel__controls {
  position: static; inset: auto; pointer-events: auto;
  justify-content: flex-end; gap: 12px; padding: 22px 0 0;
}
.yc-destinations-carousel .carousel__button {
  background: #0E1E2C; color: #fff;
  box-shadow: 0 10px 24px -14px rgba(14,30,44,.55);
}
/* Pijltjes i.p.v. chevrons: zelfde pijl als in de knoppen (pijl-rechts.svg,
   M5 12h14 M13 6l6 6-6 6). Framework tekent een chevron via ::before-mask; hier
   vervangen door de knop-pijl. yc-destinations-arrow */
.yc-destinations-carousel .carousel__prev::before,
.yc-destinations-carousel .carousel__next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.yc-destinations-carousel .carousel__prev::before { transform: rotate(180deg); }



/* FAQ-intro (kolommen): de link-opmaak (design_text_anchor) van een column_text
   compileert geen regel op de <a> in de richttekst, dus de tel/mail-links krijgen
   geen kleur. Hier scoped in de merk-/navye kleur met underline. Zie Flow #1191. */
.layer--columns .ds-columns-text a {
  color: #4D82A4; text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}


/* Aanbod-kaarten: de prijs hoort in het losse 'suffix'-veld, maar dat rendert
   niet (Flow #1175). Als tussenoplossing staat de prijs op een eigen regel in
   het tekstveld (via een regeleinde); het tekstveld doet echter geen nl2br en
   'white-space' is geen CMS-opmaakprop. Deze ene regel laat het regeleinde in
   een kaarttekst breken, zodat de prijs op een eigen regel valt (zoals prototype). */
.card__text { white-space: pre-line; }


/* Knop-rollover: de hover-KLEUR staat in EH (huisstijl button_hover) en de vloeiende overgang komt
   sinds framework 1.58.2764 uit het framework (.btn/.ds-button, punt 1197). Blijft hier alleen de
   subtiele lift: 'transform' is geen CMS-opmaakprop. */
.btn:hover { transform: translateY(-1px); }



.ds-button .site-nav__cta-icon,
.ds-button .button--icon--after {
  /* Pijl-icoon schuift binnen de knop naar rechts bij hover, als het prototype
     (.btn:hover svg{transform:translateX}). Aangehaakt op de gedeelde knop-class
     .ds-button (advies Ronny) i.p.v. de inline mask-var, zodat ALLE knoppen
     dezelfde animatie krijgen -- header-CTA (mask-span) en laag-knop (img). Een
     transform verschuift puur visueel: geen reflow. transform/transition kunnen
     niet via het CMS (Flow #1197). cta-arrow-translate */
  transition: transform .2s ease;
}
.ds-button:hover .site-nav__cta-icon,
.ds-button:hover .button--icon--after {
  transform: translateX(4px);
}

/* Standaard knop = navy met pijl, als knopstijl 156 (Direct boeken). Geen
   CMS-optie om een knopstijl als default aan te wijzen en het pijl-icoon hoort bij
   de knop-STIJL (Flow #1202). .btn--primary dragen ALLEEN ongestylede/standaard-
   knoppen (gestylede krijgen cms-cta--<hash>). Form-submit krijgt dezelfde stijl als
   knopstijl 156 (navy + pijl + weight 600): de CMS-instelling
   design_forms.submit_button wordt niet door de formulier-render gehonoreerd
   (Flow #961-familie; submit_button:156 staat in het CMS klaar voor als dat gat dicht
   is). default-btn-navy */
.btn--primary,
button[type="submit"].btn--primary { background-color: #1D3446; color: #FFFFFF; border-radius: 8px; }
.btn--primary:hover,
button[type="submit"].btn--primary:hover { background-color: #0E1E2C; }
a.btn--primary,
button[type="submit"].btn--primary { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
a.btn--primary::after,
button[type="submit"].btn--primary::after {
  content: ""; flex: 0 0 auto; width: 1.05em; height: 1.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}
a.btn--primary:hover::after,
button[type="submit"].btn--primary:hover::after { transform: translateX(4px); }



/* Formulier-velden: rondingen + subtiele achtergrond. De CMS-opmaak (design_forms)
   compileert niet (Flow #961), daarom hier. */
.form-field__control {
  border-radius: 12px;
  background-color: #FFFFFF;
  border: 1px solid #D3DAE0;
  transition: border-color .15s ease, background-color .15s ease;
}
.form-field__control:focus,
.form-field__control:focus-visible {
  border-color: #4D82A4;
  background-color: #FFFFFF;
  outline: none;
}


/* Standaard body-/contentbreedte op 1280px. Het framework zet --max op 72rem
   (1152) inline in de <head> ná custom.css; menu (.site-header__inner) en
   content-lagen (.layer__inner) gebruiken var(--max) en zaten daardoor op 1152,
   terwijl de kaartsecties 1280 zijn. Er is geen CMS-veld voor de containerbreedte
   (settings_styles heeft alleen kleuren/fonts). Hogere specificiteit (html:root)
   wint van de inline :root. Centrering (margin:auto op .layer__inner) blijft. yc-body-1280 */
html:root { --max: 1280px; }

/* Verzenden-knop rechts uitlijnen onder het formulier. yc-form-submit-right */
.form-actions { display: flex; justify-content: flex-end; }


/* Formulierkop (titel/subtitel/tekst boven het formulier) gelijk aan de reguliere
   sectiekoppen. De formulier-render gebruikt eigen .ds-forms-*-classes die niet de
   .ds-title/.ds-subtitle/.ds-text-opmaak erven, en design_forms compileert niet
   (Flow #961). Waarden overgenomen van .ds-title/.ds-subtitle/.ds-text. yc-forms-heading */
.ds-forms-title {
  font-family: var(--theme-font-2);
  font-size: clamp(30px, 12px + 2.3438vw, 42px);
  font-weight: 600;
  line-height: 1.14;
  color: #0E1E2C;
}
.ds-forms-subtitle {
  font-family: var(--theme-font-1);
  font-size: clamp(17px, 14px + 0.3906vw, 19px);
  font-weight: 600;
  color: #5E6E7B;
  margin-top: -6px;
}
.ds-forms-text {
  font-size: clamp(16px, 14.5px + 0.1953vw, 17px);
  color: #5E6E7B;
}


/* USP-band (onder hero): 3 kolommen naast elkaar. layer_usps type 4 schaalt items
   op contentbreedte → lange subtitels vielen op 2 rijen; vast 3-koloms raster
   (1 kolom mobiel). yc-usp-band */
.yc-usp-band .usps { display: grid; grid-template-columns: 1fr; gap: 20px 40px; align-items: center; }
@media (min-width: 768px) { .yc-usp-band .usps { grid-template-columns: repeat(3, 1fr); } }


/* Campings-band edge-to-edge: deze laag over de volle breedte i.p.v. de 1280-container.
   Hogere specificiteit dan de container-cap. Kleine zijmarge zodat de kaarten niet
   tegen de schermrand plakken. yc-campings-edge */
.layer.yc-campings-band > .layer__sc,
.layer.yc-campings-band > .layer__sc > .layer__inner { max-width: none; }
.layer.yc-campings-band > .layer__sc > .layer__inner { padding-inline: 40px; }
@media (max-width: 767px) {
  .layer.yc-campings-band > .layer__sc > .layer__inner { padding-inline: 16px; }
}


/* Fotoslider (media-album) edge-to-edge: volle breedte, foto's lopen door tot de
   schermrand (als Noorthey). yc-slider-edge */
.layer.yc-slider-edge > .layer__sc,
.layer.yc-slider-edge > .layer__sc > .layer__inner { max-width: none; padding-inline: 0; }


/* Faciliteiten-kaarten (home): 'simpele' iconen (zachtgroen tegel, laag 303) en
   'blob'-iconen (navy organische vlek, laag 304). Op mobiel 2 kolommen i.p.v. 1:
   het CMS-veld 'column_count_min' (Minimaal aantal op 1 rij) wordt niet gehonoreerd in
   de render -- de opgeslagen waarde doet niets, data-cols-min blijft 1 (column_count
   werkt wel). Scoped op het css-class-opmaakveld yc-fac-cards (design_layer), niet op
   item-id. Zie Flow #1212. yc-fac-cards-mobile */
@media (max-width: 767px) {
  .yc-fac-cards .layer__cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Faciliteiten-kaarten -> Noorthey-kaartstijl: wit kaartje met zachte schaduw, klein
   icoon-badge linksboven, titel + omschrijving links. De default layer_cards-grid toont
   geen subtitel en zet het beeld volbreed; daarom staat de omschrijving in het text-veld
   (rendert als .card__text, Flow #1213) en zetten we hier de kaart-layout om. Gescoped op
   css-class .yc-fac-cards (design_layer), geen item-id. yc-fac-cards-noorthey */
.yc-fac-cards .card__content {
  background: #fff;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 16px 34px -20px rgba(14,30,44, .30), 0 2px 6px -3px rgba(14,30,44, .10);
  height: 100%;
}
.yc-fac-cards .card__inner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; height: 100%;
}
.yc-fac-cards .card__media {        /* klein icoon-badge i.p.v. volbreed beeld */
  width: 52px; max-width: 52px; margin: 0; flex: 0 0 auto;
}
.yc-fac-cards .card__body { text-align: left; }
.yc-fac-cards .card__title {
  color: #0E1E2C; font-size: 19px; line-height: 1.25; margin: 0 0 4px;
}
.yc-fac-cards .card__text {
  color: #5E6E7B; font-size: 15px; line-height: 1.45; margin: 0;
}


/* Faciliteiten-kaarten: ruimte tussen de koptekst (titel/intro) en de kaarten, en de
   blob-iconen (versie 304) wat groter dan de vierkante (visueel vullen ze hun badge
   minder). yc-fac-cards-tweaks */
.yc-fac-cards .layer-cards__grid { margin-top: 32px; }
@media (max-width: 767px) { .yc-fac-cards .layer-cards__grid { margin-top: 22px; } }
.yc-fac-cards--blob .card__media { width: 128px; max-width: 128px; }


/* Campings-band marquee: tussenruimte tussen de kaarten. Het CMS-veld 'spacing'
   (Ruimte om kaarten) wordt in de marquee/strip-modus niet naar --strip-gap doorgezet
   (kaarten raakten elkaar). Hier scoped hersteld op de strip-track. Zie Flow #1214.
   yc-campings-strip-gap */
.yc-campings-band .strip__track { gap: 20px; }
@media (max-width: 767px) { .yc-campings-band .strip__track { gap: 14px; } }


/* Bestemmingen-carrousel: de 'Alle gebieden'-knop rechtsonder, net links van de
   pijltjes groeperen (i.p.v. losse knop linksonder). Desktop schuift de knop op de
   pijltjes-rij; mobiel blijft hij onder de kaarten staan. yc-destinations-link-right */
@media (min-width: 768px) {
  .yc-destinations-carousel .layer-cards__button {
    float: right;
    margin-top: -43px;
    margin-right: 116px;
    position: relative;
    z-index: 2;
  }
}


/* Faciliteiten overflow-variant (laag 422): landscape blob-iconen waar het icoon uit de
   blob valt (als de belofte-banner, laag 214). Composiet is 146x114, dus groter en volledig
   tonen (contain) i.p.v. het kleine vierkante badge. yc-fac-cards-ov */
.yc-fac-cards--ov .card__media {
  width: 96px; max-width: 96px; aspect-ratio: 146 / 114;
}
.yc-fac-cards--ov .card__media img {
  object-fit: contain; object-position: left center;
}


/* Footer social-iconen: navy blob-iconen (media 144/145) i.p.v. witte glyphs in
   een ringetje. Het framework zet een ring op .site-footer__social (border +
   border-radius:50%, 40x40) en schaalt het icoon naar ~18px; er is geen CMS-veld voor
   de social-icoonstijl/-grootte. Ring weg + blob op footer-formaat (~60x52, contain).
   Zie Flow #1217. yc-footer-socials */
.site-footer .site-footer__social {
  border: 0; border-radius: 0; width: auto; height: auto;
}
.site-footer .site-footer__social-icon {
  width: 60px; height: 52px; max-width: none; object-fit: contain;
}







/* Tekst+beeld (text_image): tekstkolom VERTICAAL centreren t.o.v. de foto, in ALLE
   text_image-lagen (content-lagen + reserveren-CTA's). EH's 'Verticale uitlijning kolommen
   = Gecentreerd' (column_vertical_alignment) centreert alleen de MEDIA-kolom; de tekstkolom
   blijft top-uitgelijnd (framework-gap) en de opmaak-slots (design_column) accepteren geen
   align-self. Deze ene regel centreert beide kolommen in de grid. Verzoek Age 2026-10-02:
   geldt voor alle tekst+beeld-lagen. yc-ti-vcenter */
.text-image__grid { align-items: center; }

/* Bij een 'Lees meer'-uitklap: tekst+beeld bovenaan uitlijnen i.p.v. gecentreerd, zodat
   de foto niet meeschuift wanneer de verborgen tekst uitklapt. Scoped op lagen met een
   readmore-toggle (.layer__readmore); korte lagen blijven gecentreerd. yc-ti-readmore-top */
.text-image__grid:has(.layer__readmore) { align-items: start; }


/* === FAQ-toggle: vervang de framework border-chevron door de site-pijl (pijl-rechts.svg) ===
   Framework-gap: het FAQ-toggle-icoon is niet CMS-instelbaar (Flow: FAQ-icoon CMS-veld). Age-verzoek 2026-10-02. */
.faq__q::after{
  width:17px;height:17px;border:0;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transform:rotate(90deg);
  transition:transform .22s ease;
}
.faq__item[open] .faq__q::after,
details[open] .faq__q::after{ transform:rotate(-90deg); }



/* Home-FAQ (css-class yc-home-faq, layer_faq 121): (1) foto bovenaan vast -- het framework
   centreert .faq__layout verticaal, waardoor de foto meezakt zodra de vragen dicht zijn;
   (2) het dunne lijntje boven de titel weg (.faq__main border-top). Geen CMS-veld hiervoor.
   yc-home-faq-fix */
.yc-home-faq .faq__layout--with-media { align-items: start; }
.yc-home-faq .faq__main { border-top: 0; }
/* Home-FAQ foto vierkant 1:1 i.p.v. het framework-4/3 (ds-faq-media). De foto is al 3:4
   bijgesneden (media 241); dit zet de container-verhouding mee zodat object-fit:cover niet
   terug naar liggend knipt. yc-home-faq-ratio */
.yc-home-faq .faq__media,
.yc-home-faq .faq__media .media { aspect-ratio: 1 / 1; }



/* yc-ti-ratio-43: tekst+media foto's minimaal 4:3, cover-crop (Age 2026-10-06) */
.text-image__media .media { aspect-ratio: 4 / 3; }
.text-image__media img { width: 100%; height: 100%; object-fit: cover; }

/* yc-ti-viewport-radius: media-viewport erft de ronding van .media (fix text_image slider/viewport) - Age 2026-10-06 */
.text-image__media .media__viewport { border-radius: inherit; height: 100%; }


/* === yc-aanbod-card: aanbod-card in kolommenlaag (gebieden/campings) - Age 2026-10-07 === */
.yc-aanbod-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.yc-aanbod-card .module-col__media, .yc-aanbod-card .module-col__media .media { border-radius: 0; }
.yc-aanbod-card .module-col__media .media { aspect-ratio: 4 / 3; }
.yc-aanbod-card .module-col__media .media__viewport { height: 100%; }
.yc-aanbod-card .module-col__media img { width: 100%; height: 100%; object-fit: cover; }
.yc-aanbod-card .module-col__media { border-bottom: 8px solid #DCE7EF; }
.yc-aanbod-card__body { padding: 24px 22px 22px; text-align: center; }
.yc-aanbod-card__body .card__eyebrow { margin-bottom: 0; background-position: 50% 50%; }
.yc-aanbod-card__body .card__title { font-size: 1.625rem; line-height: 1.2; margin-top: -4px; }
.yc-aanbod-card__body .column__cta { text-align: center; margin-top: 16px; }
.yc-aanbod-card__body .column__cta .btn { background: #DCE7EF; color: #0E1E2C; }
.yc-aanbod-card__body .column__cta .btn:hover { background: #8FB3C9; }


/* === yc-card-carousel: 2-up swipebare card-carrousel (gebieden met 3 accommodaties) - Age 2026-10-07 === */
.yc-card-carousel .module-col__cols {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.yc-card-carousel .module-col__cols::-webkit-scrollbar { display: none; }
.yc-card-carousel .module-col__cols > .module-col {
  flex: 0 0 calc(33.333% - 14px);
  width: auto;
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  .yc-card-carousel .module-col__cols > .module-col { flex: 0 0 85%; }
}


/* yc-card-carousel: stippen - Age 2026-10-07 */
.yc-card-carousel { position: relative; }
.yc-card-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.yc-card-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #C9CED3; cursor: pointer; transition: background .2s, transform .2s; }
.yc-card-carousel__dot.is-active { background: #4D82A4; transform: scale(1.2); }


/* yc-aanbod-card: knoppen op gelijke hoogte (titel reserveert 2 regels) + meer ruimte boven knop - Age 2026-10-07 */
.yc-aanbod-card .card__title { min-height: 2.4em; }
.yc-aanbod-card__body .column__cta { margin-top: 22px; }


/* yc-col-vcenter: linker tekst+opsomming verticaal centreren naast de card(s) - Age 2026-10-07 */
.layer__col:has(> .layer__col-inner > .yc-col-vcenter) { display: flex; flex-direction: column; justify-content: center; }


/* reviews-knop pijl: layer_reviews levert het button-icoon ongesigneerd (403) -> CSS-pijl in knopkleur - Age 2026-10-07 */
.ds-reviews-button img.button--icon { display: none; }
.ds-reviews-button::after {
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 6px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h12M13%206l6%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h12M13%206l6%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Werkwijze (en elke laag met deze class): foto/media bovenin de kolom uitlijnen
   i.p.v. verticaal gecentreerd (framework zet .text-image__grid default op center). */


/* Werkwijze (en elke laag met deze class): foto/media bovenin de kolom uitlijnen
   i.p.v. verticaal gecentreerd (framework zet .text-image__grid default op center). */
.yc-media-top .text-image__grid { align-items: start; }

/* yc-prose bullets: content-opsommingen (prose ul) met Yachtcenter-bullet
   (navy halo + donkergroene stip), zoals Camping Noorthey. Alleen ul; ol houdt nummers. */
.prose ul {
  list-style: none;
  padding-left: 1.7em;
}
.prose ul li {
  position: relative;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.7em;
  top: 0;
  width: 1.1em;
  height: 1.7em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='10'%20cy='10'%20r='10'%20fill='%23DCE7EF'%20fill-opacity='0.35'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='5'%20fill='%234D82A4'/%3E%3C/svg%3E") no-repeat left center;
  background-size: 1.1em 1.1em;
}




/* Mobiel: compactere sectie-ruimte. De default .layer__sc-padding (88px top+bottom) is op
   mobiel aan de ruime kant en stapelt tot grote lege banden tussen secties; 60px houdt het
   ritme maar compacter. Lagen met een eigen (specifiekere) spacing-instelling blijven ongemoeid.
   Age 2026-10-07. yc-mobile-section-spacing */
@media (max-width: 767px){
  .layer > .layer__sc { padding-top: 60px; padding-bottom: 60px; }
}




/* Mobiel: de fotosliders (yc-slider-edge: omgeving op gebieden + faciliteiten op campings)
   de helft kleiner. Strip-hoogte 259px -> 130px; breedte volgt per foto het aspect (auto),
   dus ~2 foto's in beeld i.p.v. 1. Hogere specificiteit (.layer.yc-slider-edge) i.p.v. forceren. Age 2026-10-07. yc-slider-edge-mobile-half */
@media (max-width: 767px){
  .layer.yc-slider-edge .strip,
  .layer.yc-slider-edge .strip__track,
  .layer.yc-slider-edge .strip__item,
  .layer.yc-slider-edge .strip__item .media { height: 130px; }
  .layer.yc-slider-edge .strip__item,
  .layer.yc-slider-edge .strip__item .media { width: auto; }
  .layer.yc-slider-edge .strip__item .media img { height: 130px; width: auto; }
}




/* Consistente zijmarge op mobiel: content niet tegen de schermrand. De framework-
   basis zet elke laag-content op ~9px (layer__sc centreert op width:calc(100% - ~19px));
   dat oogde te krap op tekst, aanbod-kaarten, FAQ en CTA's. Eenmalige basisregel:
   16px padding op de LAAG zelf -> de gecentreerde layer__sc schuift uniform naar binnen
   tot ~25px (gelijk aan de cards-slider, die zijn eigen 16px inner-padding heeft).
   Padding op .layer (niet op inner) stapelt niet bij geneste kolommen en houdt
   achtergronden/banden vol-breed. Uitgezonderd: hero (eigen layout), yc-slider-edge
   (fotosliders bewust vol-breed), yc-campings-band + yc-spotlight (regelen hun eigen
   zijlijn, stonden al op 25px) en lagen BINNEN een kolom (de kolommenlaag zelf krijgt
   de 16px, anders stapelt het). Kolommenlagen stonden eerst op 9px; sinds 2026-10-12
   ook 25px (verzoek Age).
   Age 2026-10-08. yc-mobile-side-gutter */
@media (max-width: 767px) {
  .layer:not(.yc-slider-edge):not(.yc-campings-band):not(.yc-spotlight):not(.layer--hero):not(.layer__col .layer):not(.layer__breadcrumbs) {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Sitemap in 2 kolommen (secties blijven heel). Anker op framework-classes. */
.layer--sitemap .sitemap__list--root {
  columns: 2;
  column-gap: 56px;
}
.layer--sitemap .sitemap__list--root > .sitemap__item {
  break-inside: avoid;
}
@media (max-width: 640px) {
  .layer--sitemap .sitemap__list--root { columns: 1; }
}


/* Hero-teksten (regio V2): fade + rise reveal zoals de home-hero, start na 1s, licht gestaggerd. */
.yc-hero-anim .hero__eyebrow,
.yc-hero-anim .hero__title,
.yc-hero-anim .hero__subtitle {
  opacity: 0;
  transform: translateY(26px);
  animation: gcHeroRise 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.yc-hero-anim .hero__eyebrow  { animation-delay: 1s; }
.yc-hero-anim .hero__title    { animation-delay: 1.15s; }
.yc-hero-anim .hero__subtitle { animation-delay: 1.3s; }
@keyframes gcHeroRise {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yc-hero-anim .hero__eyebrow,
  .yc-hero-anim .hero__title,
  .yc-hero-anim .hero__subtitle { opacity: 1; transform: none; animation: none; }
}



/* Scrollytelling quote-lagen (V2 Côte d'Azur): scroll-gedreven onthulling die wat LATER intreedt.
   Foto schuift op de X-as in vanaf de buitenrand (+ blur-naar-scherp + subtiele zoom); tekst (eyebrow
   en titel) schuift op de Y-as omhoog en verschijnt daarna. Pure CSS via animation-timeline:view() --
   valt netjes terug (geen animatie) zonder ondersteuning of bij prefers-reduced-motion, dan toont
   alles gewoon normaal. overflow-x:clip op de laag vangt de X-slide (geen horizontale scroll).
   Gescoped op css-class yc-scrolly (6 quote text_image-lagen). Age 2026-10-08. yc-scrolly */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .yc-scrolly { overflow-x: clip; }
    .yc-scrolly .text-image__media {
      overflow: hidden;
      --yc-x: 240px;                     /* foto vliegt van ver rechts binnen (standaard: foto rechts) */
      animation: yc-scrolly-media linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 72%;
      will-change: transform, filter, opacity;
      backface-visibility: hidden;
    }
    .yc-scrolly.is-reversed .text-image__media { --yc-x: -240px; }  /* foto links -> van ver links */
    @media (max-width: 767px) {
      .yc-scrolly .text-image__media { --yc-x: 120px; }
      .yc-scrolly.is-reversed .text-image__media { --yc-x: -120px; }
    }
    .yc-scrolly .ds-eyebrow {
      animation: yc-scrolly-eyebrow linear both;
      animation-timeline: view();
      animation-range: entry 22% cover 52%;
    }
    .yc-scrolly .ds-title {
      animation: yc-scrolly-title linear both;
      animation-timeline: view();
      animation-range: entry 28% cover 70%;
    }
  }
}
/* Foto: grote inschuif op de X-as vanaf de buitenrand + zware blur-naar-scherp + flinke zoom + lichte kanteling. */
@keyframes yc-scrolly-media {
  from { opacity: 0; transform: translateX(var(--yc-x, 240px)) scale(1.28) rotate(-2.5deg); filter: blur(18px) saturate(1.3); }
  to   { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: blur(0) saturate(1); }
}
/* Tekst: grote opkomst op de Y-as (eyebrow eerst, titel groter en later). */
@keyframes yc-scrolly-eyebrow {
  from { opacity: 0; transform: translateY(64px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes yc-scrolly-title {
  from { opacity: 0; transform: translateY(112px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* Kaart-lagen (gebieden/regio's): titel reserveert 2 regels i.p.v. 3, zodat er bij een
   korte titel geen grote witruimte boven de spec-iconen staat. /aanbod (eigen grid) houdt
   3 regels. Verzoek Age 2026-10-10. yc-themecards-titel */
.layer-cards__grid .search-results__card-title { min-height: 2.3em; }


/* Kaartlaag binnen een kolom (gebieden/regio's) op mobiel: de geneste layer__sc
   centreert zichzelf met een eigen gutter (~7px) waardoor de kaarten verder inspringen
   dan de intro-tekst. Vol-breed in de kolom -> kaart en tekst op dezelfde 25px-lijn.
   Age 2026-10-12. yc-mobile-side-gutter */
@media (max-width: 767px) {
  .layer__col .layer--cards > .layer__sc.layer--content { margin-left: 0; margin-right: 0; width: 100%; }
}




/* De content-secties (.layer--content) krijgen hun 1280-breedte uit het framework;
   centreren via margin-inline zodat ze niet links plakken (zoals Greenchalets). yc-content-center */
.layer--content { margin-inline: auto; }


/* Twee knoppen naast elkaar: vaste tussenruimte (Greenchalets deed dit via een knopstijl).
   De tweede knop (btn--accent) als lichte variant, zodat primair en secundair te onderscheiden zijn. yc-knoppen-naast-elkaar */
.ds-button + .ds-button { margin-left: 14px; }
@media (max-width: 600px) { .ds-button + .ds-button { margin-left: 0; margin-top: 10px; } }
.btn--accent { background-color: #FFFFFF; color: #1D3446; box-shadow: inset 0 0 0 1.5px #1D3446; border-radius: 8px; }
.btn--accent:hover { background-color: #EEF1F3; }


/* Header mobiel (naar Greenchalets): logo, telefoon en menu op één regel. Het Yachtcenter-logo is
   breed (5,8:1), dus onder 600px: telefoon alleen als icoon en de proefvaart-CTA uit de header
   (staat prominent op de pagina's zelf). Ankers op framework-classes + tel:-href, niet op item-id. yc-header-mobiel */
@media (max-width: 760px) {
  .site-header .site-header__inner { flex-wrap: nowrap; gap: 12px; }
  .site-header .site-logo { flex: 0 1 auto; min-width: 0; }
  .site-header .site-logo__img { height: 30px; width: auto; max-width: 100%; }
  .site-header__tools .site-nav__cta { white-space: nowrap; }
}
@media (max-width: 600px) {
  .site-header__tools .site-nav__cta[href^="tel:"] .site-nav__cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header__tools .site-nav__cta[href^="tel:"] { padding: .5rem; }
  .site-header__tools .site-nav__cta:not([href^="tel:"]) { display: none; }
  .site-header .site-logo__img { height: 26px; }
}


/* Header tablet/kleine laptop (761-1199px): het framework toont hier al het volledige menu, maar
   logo + menu + telefoon + CTA passen niet naast elkaar en braken in twee rijen. Compacter op één
   regel; onder 960px ook de proefvaart-CTA uit de header. yc-header-tablet */
@media (min-width: 761px) and (max-width: 1199px) {
  .site-header .site-header__inner { flex-wrap: nowrap; gap: 20px; }
  .site-header .site-logo__img { height: 30px; width: auto; }
  .site-header__tools { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .site-header__tools .site-nav__cta { white-space: nowrap; }
  .site-header__tools .site-nav__cta[href^="tel:"] .site-nav__cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header__tools .site-nav__cta[href^="tel:"] { padding: .5rem; }
  .site-header__tools .site-nav__cta:not([href^="tel:"]) { font-size: .82rem; }
}
@media (min-width: 761px) and (max-width: 959px) {
  .site-header__tools .site-nav__cta:not([href^="tel:"]) { display: none; }
}


/* Footer-logo: het framework capt op max-height 64px; er is geen CMS-slot voor de footer-logogrootte.
   Kleiner voor een rustiger voet (zoals Greenchalets). yc-footer-logo */
.site-footer__logo { max-height: 40px; max-width: 220px; height: auto; width: auto; }