/* Blokken die op meerdere pagina's staan: de proeverij-uitnodiging en
   de fotogalerij onderaan. Eerder stonden ze in css/pages/home.css. */

/* ── Proeverij: uitnodiging (homepage en conceptpagina's) ──────────────── */
/* Een lichte kaart met een dunne messing lijst, zoals de menukaartjes die
   op tafel staan. Foto: de oprichters, want u proeft bij hen aan tafel. */

.proeverij__kaart { position: relative; display: grid; background: var(--c-cream-soft); }
.proeverij__kaart::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(169, 132, 66, 0.55);
  pointer-events: none;
}
.proeverij__beeld { margin: 0; }
.proeverij__beeld img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
.proeverij__tekst { display: grid; gap: var(--s-4); justify-items: start; padding: clamp(28px, 4.5vw, 60px); }
.proeverij__titel { font-size: var(--t-3xl); }
.proeverij__titel em { font-style: italic; color: var(--c-brass-ink); }
.proeverij__intro { color: var(--c-text-soft); max-width: 46ch; }
.proeverij__feiten { width: 100%; margin: 0; border-top: 1px solid var(--c-cream-line); }
.proeverij__feiten div { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-4); padding: 11px 0; border-bottom: 1px solid var(--c-cream-line); }
.proeverij__feiten dt { padding-top: 4px; font-size: var(--t-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-brass-ink); }
.proeverij__feiten dd { margin: 0; }
.proeverij__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-2); }
.proeverij__bel {
  font-size: var(--t-sm);
  color: var(--c-text-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--c-cream-line);
}
.proeverij__bel:hover { color: var(--c-text); }

@media (min-width: 860px) {
  .proeverij__kaart { grid-template-columns: 5fr 6fr; }
  .proeverij__beeld img { aspect-ratio: auto; }
}

/* ── Galerij onderaan ──────────────────────────────────────────────────
   Mozaïek met dense-vulling. Breed: 4 kolommen; groot = 2×2, breed = 2×1,
   hoog = 1×2. De volgorde in de HTML sluit zonder gaten. */
.galerij {
  padding-block: clamp(56px, 7vw, 104px) 0;
}
.galerij__kop {
  display: grid;
  gap: var(--s-3);
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.galerij__kop .lead { max-width: 52ch; }
.galerij__raster {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(140px, 44vw, 260px);
  grid-auto-flow: dense;
}
.galerij__beeld { position: relative; margin: 0; overflow: hidden; background: var(--c-ink); }
.galerij__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), opacity 0.6s var(--ease-out);
}
.galerij__beeld--groot,
.galerij__beeld--breed { grid-column: span 2; }
.galerij__beeld--groot,
.galerij__beeld--hoog { grid-row: span 2; }
@media (min-width: 900px) {
  .galerij__raster {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(180px, 17vw, 270px);
  }
}
@media (hover: hover) {
  .galerij__beeld:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .galerij__beeld img { transition: none; }
  .galerij__beeld:hover img { transform: none; }
}

/* ── Film naast de tekst: staand gefilmd, dus staand getoond ────── */
.split__media--film { position: relative; }
.split__media--film video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--c-ink);
}
.film__knop {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(247, 243, 234, 0.35);
  border-radius: var(--r-sm);
  background: rgba(14, 13, 11, 0.45);
  color: var(--c-text-inv);
  font-size: var(--t-xs);
  line-height: 1.2;
  cursor: pointer;
}
.film__knop:hover { background: rgba(14, 13, 11, 0.7); }

/* ── Galerij als horizontale strook ──────────────────────────────── */
.galerij--strook .strook {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--gutter);
  padding-bottom: var(--s-3);
  scrollbar-width: thin;
}
.strook__beeld {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--c-ink);
}
.strook__beeld img {
  display: block;
  height: clamp(220px, 34vw, 420px);
  width: auto;
  max-width: none;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
@media (hover: hover) {
  .strook__beeld:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .strook__beeld img { transition: none; }
  .strook__beeld:hover img { transform: none; }
}
.galerij--strook .strook:focus-visible { outline: 2px solid var(--c-brass); outline-offset: -4px; }

/* ── Link onder een punt in "wat u erbij kunt boeken" ────────────── */
.erbij .erbij__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-brass-ink);
  border-bottom: 1px solid transparent;
}
.erbij .erbij__link:hover { border-bottom-color: currentColor; }

/* ── Pijltjes bij de fotostrook ──────────────────────────────────── */
.strook-wikkel { position: relative; }
.strook__knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-cream-line);
  border-radius: 50%;
  background: var(--c-cream);
  color: var(--c-text);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(14, 13, 11, 0.12);
  transition: background 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.strook-wikkel.is-scrollbaar .strook__knop { display: grid; }
.strook__knop:hover { background: var(--c-brass); border-color: var(--c-brass); color: var(--c-ink); }
.strook__knop:disabled { opacity: 0.35; cursor: default; }
.strook__knop:disabled:hover { background: var(--c-cream); border-color: var(--c-cream-line); color: var(--c-text); }
.strook__knop--vorige { left: calc(var(--gutter) - 22px); }
.strook__knop--volgende { right: calc(var(--gutter) - 22px); }
@media (max-width: 700px) {
  .strook__knop--vorige { left: 8px; }
  .strook__knop--volgende { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .strook__knop { transition: none; }
}