/*
  Lopende balk met gerechten (band.js) en reviews (blok "reviews" in lavendel.js).
  Afgeleid van band- en reviews-opmaak van Tapas&Zo. Kleuren via de tokens van het ontwerp (basis.css)
  en de --rv-* waarden hieronder.
*/
:where(:root) {
  --rv-vlak: #FBF8F4;
  --rv-ster: #5F4580;
  --rv-tripadvisor: #00875A;
  --rv-schaduw: 0 18px 36px -26px rgba(46, 31, 51, .55);
}

/* ---------- lopende balk ---------- */
section[data-blok="band"] { padding-block: var(--sectie) calc(var(--sectie) * .5); overflow: hidden; }
.band-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 16px; margin-bottom: 1.4rem; }
.band-kop .blok-titel { flex: 1 1 16rem; }
.band-kop .blok-titel { margin: 0; }
.band-knoppen { display: flex; gap: 8px; flex: none; }
.band-knop {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--tekst) 40%, transparent); background: transparent; color: var(--tekst); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.band-knop:hover { border-color: var(--tekst); }
.band-knop[aria-pressed="true"] { background: var(--tekst); color: var(--vlak); }
.band-knop:disabled { opacity: .4; cursor: default; }
.band-knop .ico { width: 20px; height: 20px; }

/* Zonder beweging (of zonder script): een gewone rij om zelf door te scrollen */
.band-rij {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px var(--rand) 8px; scrollbar-width: thin;
}
.band-rij > .foto, .band-spoor > .foto { flex: 0 0 auto; width: clamp(210px, 26vw, 300px); scroll-snap-align: start; }
.band-foto img { aspect-ratio: 1; object-fit: cover; border-radius: 6px; -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* Met beweging: het spoor schuift, de rij zelf scrollt niet */
.band-rij.is-band { display: block; overflow: hidden; padding-inline: 0; cursor: grab; touch-action: pan-y; scroll-snap-type: none; }
.band-rij.is-band.sleept { cursor: grabbing; }
.band-spoor { display: flex; gap: 14px; width: max-content; will-change: transform; }
.band-rij:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- reviews ---------- */
.rv-boven { display: grid; gap: 1.6rem 3rem; align-items: end; }
.rv-kop .blok-intro { margin-bottom: 0; }
.rv-scores { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.rv-score { display: flex; align-items: center; gap: .7rem; }
.rv-score .rv-logo { position: static; width: 34px; height: 34px; }
.rv-score-getal { font-family: var(--letter-kop); font-size: 2.6rem; line-height: 1; font-variant-numeric: lining-nums; }
.rv-score-tekst { font-size: 1rem; line-height: 1.35; color: var(--zacht); }
.rv-lijst {
  margin: 2.2rem calc(var(--rand) * -1) 0; padding: 0 var(--rand) 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.rv-kaart {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem 1.4rem 1.3rem; border-radius: 8px; background: var(--rv-vlak); color: var(--tekst);
  border: 1px solid var(--lijn); box-shadow: var(--rv-schaduw);
}
.rv-logo { position: absolute; top: 1.2rem; right: 1.2rem; width: 26px; height: 26px; line-height: 0; }
.rv-logo svg { width: 100%; height: 100%; display: block; }
.rv-sterren { margin: 0; padding-right: 2.4rem; font-size: 1.1rem; letter-spacing: .14em; line-height: 1; }
.rv-sterren .aan { color: var(--rv-ster); }
.rv-sterren.rv-tripadvisor .aan { color: var(--rv-tripadvisor); }
.rv-sterren .uit { color: var(--lijn); }
.rv-tekst { margin: 0; flex: 1; }
.rv-tekst p { margin: 0; font-family: var(--letter-kop); font-size: 1.18rem; line-height: 1.5; }
.rv-tekst strong { font-weight: 600; }
.rv-wie { display: grid; gap: .1rem; margin: 0; padding-top: .8rem; border-top: 1px solid var(--lijn); }
.rv-naam { font-weight: 600; }
.rv-bron { font-size: 1rem; color: var(--zacht); }
.rv-voet { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 1.2rem; }

@media (min-width: 900px) {
  .rv-boven { grid-template-columns: minmax(0, 1fr) auto; }
  .rv-lijst { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
}