/* Deze CSS laadt alleen op omgevingspagina's met dit sjabloon; de hero mag dus
   globaal achter de vaste header door lopen (zelfde format als de andere pagina's). */
.wrapper { padding-top: 0 !important; }
.breadcrumbs { display: none !important; }
.header { z-index: 60 !important; }

/* Omgevingspagina (Claude) — sjabloon voor alle area-posts.
   Alles geprefixt met `ar-` en genest onder `.ar-page`; de theme-CSS claimt
   generieke namen (.wrap, .gallery, .is-open). */

.ar-page {
  --ar-gold: #C89B4F;
  --ar-gold-hover: #b8862f;
  --ar-green: #2F5A47;
  --ar-ink: #191919;
  --ar-muted: #5c5c5c;
  --ar-cream: #FFFBF2;
  --ar-cream-dark: #F7F1E6;
  --ar-line: #e6dfd0;
  background-color: #191919;
  background-image: url(/assets/img/full-bg-aef51b.svg);
  color: #fff;
  font-family: 'Agenda', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
.ar-page h1, .ar-page h2, .ar-page h3 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.ar-page h2 { font-size: 42px; line-height: 1.2; }
/* Koppen op de cream leesvlakken (theme-fototekstblokken) moeten donker zijn;
   de witte kopkleur hierboven geldt alleen voor tekst op het donkere canvas. */
.ar-page .image-text__text h1,
.ar-page .image-text__text h2,
.ar-page .image-text__text h3,
.ar-page .image-text__text h4,
.ar-page .image-text__text h5 { color: var(--ar-ink); }
.ar-page h3 { font-size: 24px; }
.ar-page p { margin: 0 0 1rem; }
.ar-gold { color: var(--ar-gold); }
.ar-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* knoppen */
.ar-btn {
  display: inline-block; padding: 16px 30px; min-width: 210px; text-align: center;
  font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-decoration: none; border: 1px solid var(--ar-gold);
  background: var(--ar-gold); color: #fff; transition: background-color .2s, color .2s, border-color .2s;
}
.ar-btn:hover, .ar-btn:focus { background: var(--ar-gold-hover); border-color: var(--ar-gold-hover); color: #fff; }
.ar-btn--outline { background: transparent; color: var(--ar-gold); }
.ar-btn--outline:hover, .ar-btn--outline:focus { background: var(--ar-gold); color: #fff; }
.ar-btn--dark { border-color: var(--ar-ink); background: transparent; color: var(--ar-ink); }
.ar-btn--dark:hover { background: var(--ar-ink); color: #fff; }

/* 1. HERO — zelfde format als de andere pagina's */
.ar-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0d0d0d;
  min-height: clamp(600px, 82vh, 880px);
}
.ar-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ar-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.62) 100%);
}
.ar-hero__inner { position: relative; z-index: 2; text-align: center; padding: 150px 24px 90px; }
.ar-hero__eyebrow {
  display: inline-block; background: var(--ar-gold); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 16px; margin-bottom: 20px;
}
.ar-page .ar-hero h1 { font-size: clamp(36px, 4.5vw, 65px); line-height: 1.26; margin-bottom: 14px; }
.ar-hero__sub { font-size: 18px; color: rgba(255,255,255,.92); margin: 0; }

/* 2. OOGOPSLAG — cream paneel dat over de hero valt */
.ar-glance { position: relative; z-index: 5; margin-top: -84px; }
.ar-glance__box {
  background: var(--ar-cream); color: var(--ar-ink);
  padding: 44px 48px 40px; box-shadow: 0 14px 40px rgba(0,0,0,.3);
}
.ar-glance__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  border-bottom: 1px solid var(--ar-line); padding-bottom: 30px; margin-bottom: 28px;
}
.ar-glance__item { text-align: center; }
.ar-glance__ic { display: block; width: 30px; height: 30px; margin: 0 auto 12px; color: var(--ar-gold); }
.ar-glance__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ar-glance__label { display: block; font-family: 'Merriweather', serif; font-weight: 700; font-size: 17px; color: var(--ar-ink); }
.ar-glance__sub { display: block; font-size: 14px; color: var(--ar-muted); }
.ar-glance__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* 3. FOTO-TEKSTBLOKKEN */
.ar-sec { padding: 96px 0 0; }
.ar-sec--last { padding-bottom: 110px; }
.ar-block { display: flex; align-items: stretch; background: var(--ar-cream); color: var(--ar-ink); overflow: hidden; }
.ar-block + .ar-block { margin-top: 34px; }
.ar-block--rechts { flex-direction: row-reverse; }
.ar-block__img { width: 46%; object-fit: cover; min-height: 380px; max-height: 560px; }
.ar-block__body { width: 54%; padding: 52px 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.ar-block__body h2 { color: var(--ar-ink); font-size: 34px; }
.ar-block__body p { color: var(--ar-muted); font-size: 16px; }
.ar-block__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* 3b. LEES MEER — extra fototekstblokken uitklappen */
.ar-more[hidden] { display: none; }
.ar-more__bar { display: flex; justify-content: center; padding: 0 24px; margin-top: -138px; position: relative; z-index: 3; }
.ar-more__toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px;
}
.ar-more__chev { display: inline-flex; width: 18px; height: 18px; transition: transform .25s ease-out; }
.ar-more__chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ar-more__toggle[aria-expanded="true"] .ar-more__chev { transform: rotate(180deg); }

/* 4. KAART */
.ar-map { margin-top: 34px; background: var(--ar-cream); color: var(--ar-ink); }
.ar-map__grid { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
.ar-map__text { padding: 48px 46px 44px; }
.ar-map__text h2 { color: var(--ar-ink); font-size: 30px; }
.ar-map__adres { font-size: 16px; color: var(--ar-muted); margin-bottom: 22px; }
.ar-reistijden__lead { font-size: 15px; color: var(--ar-muted); margin: 0 0 12px; }
.ar-reistijden { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ar-reistijden li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ar-muted); }
.ar-reistijden strong { color: var(--ar-ink); font-weight: 700; }
.ar-reistijden__ic { display: inline-flex; width: 24px; height: 24px; color: var(--ar-gold); flex: 0 0 auto; }
.ar-reistijden__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ar-map__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ar-map__frame { min-height: 380px; }
.ar-map__frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* 4b. KAARTSECTIE */
.ar-mapsec { padding: 96px 0 0; }
@media (max-width: 900px) { .ar-mapsec { padding-top: 56px; } }

/* 5. MEER IN DE OMGEVING */
.ar-meer { padding: 96px 0 0; }
.ar-meer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.ar-card { background: var(--ar-cream); color: var(--ar-ink); display: flex; flex-direction: column; overflow: hidden; }
.ar-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ar-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.ar-card__tag {
  align-self: flex-start; background: var(--ar-ink); color: #fff; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; margin-bottom: 14px;
}
.ar-card h3 { color: var(--ar-ink); font-size: 22px; margin-bottom: 6px; }
.ar-card__time { font-size: 14px; color: var(--ar-muted); margin-bottom: 20px; }
.ar-card .ar-btn { margin-top: auto; width: 100%; min-width: 0; padding: 13px 18px; }
.ar-meer__hint { display: none; }

/* "Meer in de omgeving" breder dan de tekstkolom, zelfde maat als de brede blokken
   op /faciliteiten/ (1620px, opnieuw gecentreerd t.o.v. de wrap). Alleen vanaf 1200px,
   daaronder zou het blok juist smaller worden dan de wrap. */
@media (min-width: 1200px) {
  .ar-meer > .ar-wrap {
    width: min(1620px, calc(100vw - 40px)); max-width: none;
    margin-left: calc(50% - min(810px, 50vw - 20px));
    padding-left: 0; padding-right: 0;
  }
  .ar-meer__grid { gap: 28px; }
  .ar-meer .ar-card img { height: 260px; }
  .ar-meer .ar-card__body { padding: 28px 30px 32px; }
}

/* 6. PROMOTIESLIDER (theme-component) */
.ar-slider { padding: 96px 0 0; }
.ar-slider .image-slider { padding: 0; }

/* 7. SLOT-CTA */
.ar-endcta { padding: 96px 0 110px; }
.ar-endcta__box {
  background: var(--ar-cream-dark); color: var(--ar-ink);
  padding: 62px 60px; display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center;
}
.ar-endcta h2 { color: var(--ar-ink); font-size: 34px; margin-bottom: 8px; }
.ar-endcta p { color: var(--ar-muted); margin: 0; }
.ar-endcta__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .ar-page h2 { font-size: 32px; }
  .ar-glance__box { padding: 34px 26px 32px; }
  .ar-block__img { width: 42%; }
  .ar-block__body { width: 58%; padding: 38px 34px 34px; }
  .ar-meer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ar-hero { min-height: 58svh; }
  .ar-hero__inner { padding: 110px 20px 60px; }
  .ar-glance { margin-top: -60px; }
  .ar-glance__grid { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .ar-glance__item { display: flex; align-items: center; gap: 14px; text-align: left; }
  .ar-glance__ic { margin: 0; flex: 0 0 auto; }
  .ar-block, .ar-block--rechts { flex-direction: column; }
  .ar-block__img, .ar-block__body { width: 100%; }
  .ar-block__img { min-height: 0; height: 240px; }
  .ar-block__body { padding: 30px 24px 28px; }
  .ar-more__bar { margin-top: -46px; }
  .ar-map__grid { grid-template-columns: 1fr; }
  .ar-map__text { padding: 32px 24px 28px; }
  /* Mobiel: horizontale slider. De volgende kaart piept erbij, zodat meteen
     zichtbaar is dat er meer tips staan; plus een veeg-hint onder de kop. */
  .ar-meer__grid {
    display: flex; grid-template-columns: none; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -24px; padding: 0 24px 6px;
  }
  .ar-meer__grid::-webkit-scrollbar { display: none; }
  .ar-meer__grid > .ar-card { flex: 0 0 80%; scroll-snap-align: center; }
  .ar-meer__hint {
    display: flex; align-items: center; gap: 8px; margin: -6px 0 18px;
    font-size: 14px; letter-spacing: .04em; color: var(--ar-gold);
  }
  .ar-meer__hint-ic { display: inline-flex; width: 18px; height: 18px; }
  .ar-meer__hint-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ar-endcta__box { grid-template-columns: 1fr; padding: 40px 26px; gap: 26px; }
  .ar-btn { width: 100%; min-width: 0; }
}