/* ui.css — herbruikbare componentklassen voor Camping Siësta
   Kleuren komen overeen met de Tailwind-config (siesta-*). Kleuren van headings staan in :where(),
   zodat een utility zoals text-white altijd wint. Breakpoints: sm = 640px, lg = 1024px. */

:root {
  --siesta-50: #f6f4f0;
  --siesta-100: #ebe7de;
  --siesta-200: #d9d2c3;
  --siesta-500: #2e7e27;
  --siesta-600: #345e41;
  --siesta-600-hover: #2a5239;
  --siesta-700: #175212;
  --siesta-900: #10331a;
  --emerald-300: #6ee7b7;
  --neutral-500: #737373;
}

/* ── Buttons ───────────────────────────────────────────── */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: var(--siesta-600);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
  color: #fff;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ui-button:hover { background-color: var(--siesta-600-hover); }
.ui-button:focus-visible { outline: 2px solid var(--siesta-600); outline-offset: 2px; }

.ui-button--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }

/* alleen een icoon: even veel padding aan alle zijden (vierkant/rond) */
.ui-button--icon { padding: 0.75rem; line-height: 1; }

.ui-button--outline { border-color: var(--siesta-600); background-color: transparent; color: var(--siesta-700); }
.ui-button--outline:hover { background-color: var(--siesta-600); color: #fff; }

/* op donkere achtergronden */
.ui-button--light { background-color: #fff; color: var(--siesta-700); }
.ui-button--light:hover { background-color: var(--siesta-50); }
.ui-button--outline-light { border-color: rgb(255 255 255 / 0.6); background-color: transparent; color: #fff; }
.ui-button--outline-light:hover { background-color: #fff; color: var(--siesta-900); }

/* ── Labels ────────────────────────────────────────────── */
.ui-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--siesta-500);
}
.ui-label--light { color: var(--emerald-300); }

.ui-label-sm {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

/* ── Headings (stijl los van het HTML-niveau) ──────────── */
.h1 { font-size: 2.25rem; font-weight: 600; line-height: 1.25; }
.h2 { font-size: 1.875rem; font-weight: 600; line-height: 2.25rem; letter-spacing: -0.5px; }
.h3 { font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.5px; }
.h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; }
:where(.h2, .h3, .h4) { color: var(--siesta-900); }

@media (min-width: 640px) {
  .h1 { font-size: 3rem; }
  .h2 { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .h1 { font-size: 3.75rem; line-height: 3.75rem; }
}

/* ── Link met pijl ─────────────────────────────────────── */
.ui-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--siesta-600);
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.ui-link:hover { color: var(--siesta-700); text-decoration: underline; }
.ui-link__arrow { transition: transform 0.2s ease; }
.ui-link:hover .ui-link__arrow { transform: translateX(4px); }

/* ── Kaart (verblijf / kampeerplaats) ──────────────────────
   Hele kaart klikbaar via de titellink (.ui-card__link, stretched link). "Boek deze" (.ui-card__book) ligt erboven.
   "Meer info" (.ui-card__more) wordt onderstreept bij hover op de kaart, maar niet als je over "Boek deze" gaat. */
.ui-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--siesta-100), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ui-card:hover,
.ui-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--siesta-100), 0 22px 40px -12px rgb(16 51 26 / 0.28), 0 8px 16px -8px rgb(16 51 26 / 0.18);
}
.ui-card__more svg { transition: transform 0.2s ease; }
.ui-card:hover .ui-card__more { text-decoration: underline; text-underline-offset: 4px; }
.ui-card:hover .ui-card__more svg { transform: translateX(4px); }
.ui-card:has(.ui-card__book:hover) .ui-card__more { text-decoration: none; }
.ui-card:has(.ui-card__book:hover) .ui-card__more svg { transform: none; }
.ui-card__link::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.ui-card__link:focus-visible::after { outline: 2px solid var(--siesta-500); outline-offset: 3px; border-radius: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .ui-card,
  .ui-card:hover,
  .ui-card:focus-within { transition: none; transform: none; }
}

/* ── Chip (vormgeving van een label; positionering doe je met een wrapper) ───────────── */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background-color: #fff;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--siesta-700);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.ui-chip b { font-weight: inherit; }
.ui-chip--primary { background-color: var(--siesta-600); color: #fff; }

.ui-card[hidden] { display: none; }

/* ── Filter (togglebutton in een groep) ───────────────────── */
.ui-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--siesta-200);
  border-radius: 9999px;
  background-color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--siesta-900);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ui-filter:hover { border-color: var(--siesta-500); }
.ui-filter:focus-visible { outline: 2px solid var(--siesta-600); outline-offset: 2px; }
.ui-filter[aria-pressed='true'] { border-color: var(--siesta-600); background-color: var(--siesta-600); color: #fff; }
.ui-filter__count { opacity: 0.6; font-weight: 500; }

/* ── Icoon: dunnere lijn (bovenop .ic; strokebreedte in viewBox-eenheden) ─ */
.ic.ic--thin { stroke-width: 1.2; }

/* ── Slideshow: foto's vervagen in elkaar (enkel CSS) ─────────
   Container krijgt style="--n: <aantal foto's>", elke <img> style="--i: <index vanaf 0>"; optioneel --t (seconden per foto, standaard 5s).
   De keyframes gaan uit van 7 foto's (ca. 14,3% per foto); pas de percentages aan bij een ander aantal. */
.ui-slideshow > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: ui-slideshow-fade calc(var(--n) * var(--t, 5s)) infinite both;
  animation-delay: calc(var(--i) * var(--t, 5s));
}
@keyframes ui-slideshow-fade {
  0% { opacity: 0; }
  5% { opacity: 0.6; }
  16% { opacity: 0.6; }
  20%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-slideshow > img { animation: none; }
  .ui-slideshow > img:first-child { opacity: 0.6; }
}

/* ── Fotogalerij (<dialog>, horizontaal scrollbare foto's met snap) ─────────
   Openen met dialog.showModal(); sluiten via <form method="dialog">. Pijlen scrollen de track een breedte op. */
.ui-gallery {
  width: calc(100vw - 6rem);
  max-width: none;
  max-height: calc(100dvh - 6rem);
  margin: auto;
  overflow: visible;
  border: 0;
  background-color: transparent;
  padding: 0;
  color: #fff;
}
.ui-gallery[open] { display: flex; flex-direction: column; }
.ui-gallery::backdrop { background-color: rgb(16 51 26 / 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* titel en sluitknop staan boven de foto, buiten de slider; de knop helemaal rechts */
.ui-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3rem; margin-bottom: 0.5rem; padding-left: 0.25rem; text-shadow: 0 1px 6px rgb(0 0 0 / 0.4); }
.ui-gallery__stage { position: relative; min-height: 0; overflow: hidden; border-radius: 1.5rem; background-color: var(--siesta-900); }
.ui-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ui-gallery__track::-webkit-scrollbar { display: none; }
.ui-gallery__track:focus-visible { outline: 2px solid var(--emerald-300); outline-offset: -2px; }
.ui-gallery__track > figure { flex: 0 0 100%; scroll-snap-align: center; }
.ui-gallery__track img { display: block; width: 100%; height: calc(100dvh - 9.5rem); object-fit: contain; }
.ui-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.ui-gallery__nav--prev { left: 0.75rem; }
.ui-gallery__nav--next { right: 0.75rem; }