/* ============================================================
   Blok productvoorbeelden (punt B5)
   ------------------------------------------------------------
   Alle kleuren, maten en tijden komen uit de variabelen van de site
   (--gl-*). Elke var() heeft een fallback, zodat dit blok ook los in
   demo.html klopt als het variabelenblok van index.html er niet is.

   Twee keuzes die de opmaak dragen:

   1. Een horizontale galerij in plaats van zeven beelden onder elkaar.
      Onder elkaar wordt het op een telefoon een lap van zeven schermen
      die niemand uitscrollt. Horizontaal is het op elke breedte
      dezelfde beweging: vegen op een telefoon, pijlen of slepen op een
      groot scherm, en de half zichtbare volgende kaart laat zien dat er
      meer is.

   2. De bronbeelden hebben twee verhoudingen: vijf zijn 1344x752 (1,787,
      dus praktisch 16:9) en twee zijn vierkant. Alle vensters lopen toch
      even hoog, want vanaf een tablet is een vierkante kaart smaller
      gemaakt in plaats van dat het beeld kleiner wordt. Op een telefoon,
      waar je een kaart tegelijk ziet, krijgen alle vensters de tussenmaat
      4:3. Zo oogt het verschil in bronmaat nergens als rommel.
   ============================================================ */

.pv {
  /* --pv-rand is tegelijk de zijmarge van de tekst en de scroll-marge van
     de galerij, zodat een gesnapte kaart precies onder de kop uitkomt. */
  --pv-rand: 1.25rem;
  --pv-kaart: 88vw;
  --pv-gat: 1rem;
  --pv-lijn: var(--gl-line, rgba(0, 0, 0, 0.1));
  --pv-inkt: var(--gl-ink, #000);
  --pv-accent: var(--gl-accent, #0091ff);
  /* Zwart op 55 procent, net als de lopende tekst elders op de site. Bewust
     een rgba-waarde en geen color-mix: valt color-mix weg in een oudere
     browser, dan is de hele variabele ongeldig en wordt grijze tekst zwart. */
  --pv-zacht: rgba(0, 0, 0, 0.55);
  --pv-vlak: rgba(0, 0, 0, 0.06);

  box-sizing: border-box;
  padding: clamp(3rem, 8vw, 6rem) var(--pv-rand);
  background: var(--gl-bg, #fff);
  color: var(--pv-inkt);
  font-family: var(--gl-font-body, ui-sans-serif, system-ui, sans-serif);
  font-weight: var(--gl-weight-body, 400);
}

.pv *,
.pv *::before,
.pv *::after { box-sizing: border-box; }

/* ---------- kop en bediening ---------- */

.pv-hoofd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gl-space-3, 1.5rem);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.pv-kop { max-width: 46rem; }
/* Ultrabreed: de dienstenkaarten staan sinds 25 aug 2026 gecentreerd, en de kop
   van de pagina schuift met ze mee. Deze kop deed dat niet, en dan staan er twee
   koppen op een pagina die niet uitlijnen: "Vijf dingen die morgen al werk uit
   handen nemen" op 1126 px en "Zo ziet het eruit" op 626. Nu schuift hij mee met
   dezelfde berekening, zodat allebei op dezelfde x beginnen.
   De strook met voorbeelden zelf blijft wel de volle breedte houden: dat is een
   carrousel waar je doorheen veegt, en die wordt slechter van smaller.
   Bewust GEEN media query: de centrering van de kaarten heeft er ook geen. Op
   een smal scherm is de kaart even breed als de kolom en wordt de marge vanzelf
   0, dus deze regel doet daar niets. Met een grens op 2600 px stond de kop op
   2560 wel scheef, en dat is precies de maat van een gewone externe monitor. */
.pv-hoofd {
  margin-left: max(0px, calc((100% - var(--db-kaart-breedte, 860px)) / 2));
}

.pv-oog {
  margin: 0 0 var(--gl-space-2, 1rem);
  font-size: var(--gl-text-xs, 0.75rem);
  letter-spacing: var(--gl-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--pv-accent);
}

.pv-titel {
  margin: 0;
  font-family: var(--gl-font-display, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--gl-text-2xl, clamp(2rem, 4.5vw, 3.25rem));
  font-weight: var(--gl-weight-display, 200);
  letter-spacing: var(--gl-tracking-display, -0.02em);
  line-height: var(--gl-leading-tight, 1.05);
}

.pv-intro {
  margin: var(--gl-space-2, 1rem) 0 0;
  font-size: var(--gl-text-md, 1.125rem);
  line-height: var(--gl-leading-normal, 1.6);
  color: var(--pv-zacht);
}

.pv-bediening {
  display: flex;
  align-items: center;
  gap: var(--gl-space-2, 1rem);
  margin-left: auto;
}

.pv-teller {
  margin: 0;
  font-size: var(--gl-text-xs, 0.75rem);
  letter-spacing: var(--gl-tracking-label, 0.08em);
  font-variant-numeric: tabular-nums;
  color: var(--pv-zacht);
}

.pv-pijlen { display: none; gap: 0.5rem; }

.pv-pijl {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--gl-border, 1px) solid var(--pv-lijn);
  border-radius: 50%;
  background: transparent;
  color: var(--pv-inkt);
  cursor: pointer;
  transition: border-color var(--gl-duration-fast, 0.2s) var(--gl-ease, ease),
              color var(--gl-duration-fast, 0.2s) var(--gl-ease, ease),
              opacity var(--gl-duration-fast, 0.2s) var(--gl-ease, ease);
}

.pv-pijl svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-pijl:hover:not(:disabled) { border-color: var(--pv-accent); color: var(--pv-accent); }
.pv-pijl:disabled { opacity: 0.3; cursor: default; }

.pv-pijl:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: 3px;
}

/* De galerij loopt tot de schermrand door; een outline erbuiten valt half
   weg. Daarom een rand aan de binnenkant. */
.pv-rij:focus-visible {
  outline: 2px solid var(--pv-accent);
  outline-offset: -2px;
  border-radius: var(--gl-radius-lg, 2rem);
}

/* ---------- de galerij ---------- */

.pv-rij {
  display: flex;
  gap: var(--pv-gat);
  margin: 0 calc(-1 * var(--pv-rand));
  padding: 0 var(--pv-rand);
  list-style: none;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pv-rand);
  /* De schuifbalk verbergen: de teller, de pijlen en de streep eronder
     vertellen al waar je bent. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pv-rij::-webkit-scrollbar { display: none; }

.pv-kaart {
  flex: 0 0 var(--pv-kaart);
  scroll-snap-align: start;
}

.pv-figuur { margin: 0; }

/* Op een telefoon krijgen alle vensters dezelfde verhouding 4:3. Dat is een
   tussenmaat: de brede beelden houden een smalle band boven en onder, de
   vierkante een smalle band links en rechts, en beide zijn nog goed te zien.
   Een 16:9-venster zou de vierkante beelden bijna halveren, en elk venster
   zijn eigen verhouding geven maakt de rij zo hoog als de hoogste kaart,
   waardoor er onder de brede kaarten een gat valt tot aan de streep.
   Vanaf een tablet is dat opgelost met de breedte, zie onderaan. */
.pv-venster {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--gl-border, 1px) solid var(--pv-lijn);
  border-radius: var(--gl-radius-lg, 2rem);
  background: var(--gl-bg-alt, #f6fafe);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.35);
}

/* De twee vierkante beelden laten links en rechts een band vrij. Bij een
   donker beeld zou een lichte band als een fout lezen, dus daar is de
   band donker. */
.pv-venster-donker { background: #0b0d0c; }

.pv-venster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pv-tekst { padding: var(--gl-space-3, 1.5rem) var(--gl-space-1, 0.5rem) 0; }

.pv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: var(--gl-text-xs, 0.75rem);
  letter-spacing: var(--gl-tracking-label, 0.08em);
  text-transform: uppercase;
}

.pv-dienst { color: var(--pv-accent); }

/* "demo gegevens" staat pal onder het beeld, niet erop. Zo is het aan het
   beeld gekoppeld zonder een hoek af te dekken, en het blijft rustig:
   kleine letter, grijs, geen uitroeptekens. Ali's keuze is deze twee
   woorden, geen langere disclaimer. */
.pv-demo {
  padding: 0.25rem 0.6rem;
  border-radius: var(--gl-radius, 2.5rem);
  background: var(--pv-vlak);
  color: var(--pv-zacht);
  text-transform: none;
  letter-spacing: 0;
}

.pv-naam {
  margin: 0;
  font-family: var(--gl-font-display, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--gl-text-lg, 1.5rem);
  font-weight: var(--gl-weight-display, 200);
  letter-spacing: var(--gl-tracking-display, -0.02em);
  line-height: var(--gl-leading-snug, 1.3);
}

.pv-uitleg {
  margin: 0.5rem 0 0;
  max-width: 42rem;
  font-size: var(--gl-text-sm, 0.875rem);
  line-height: var(--gl-leading-normal, 1.6);
  color: var(--pv-zacht);
}

/* ---------- voortgangsstreep ---------- */

.pv-voortgang {
  position: relative;
  height: 2px;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 2px;
  background: var(--pv-lijn);
  overflow: hidden;
}

.pv-staaf {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  border-radius: 2px;
  background: var(--pv-accent);
  /* Breedte en positie komen uit het script; zonder script blijft de
     streep op de eerste kaart staan en klopt hij nog steeds. */
  transform: scaleX(0.14);
}

/* ---------- beweging ---------- */

/* Kaarten komen bij het in beeld komen een keer omhoog. Dat maakt
   zichtbaar dat het een rij is die je kunt doorlopen. Meer beweging zit
   er niet in: het beeld moet het werk doen, niet het effect. */
.pv-kaart {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--gl-duration, 0.8s) var(--gl-ease, ease),
              transform var(--gl-duration, 0.8s) var(--gl-ease, ease);
}

.pv-zichtbaar .pv-kaart { opacity: 1; transform: none; }
.pv-zichtbaar .pv-kaart:nth-child(2) { transition-delay: 0.08s; }
.pv-zichtbaar .pv-kaart:nth-child(3) { transition-delay: 0.16s; }

/* Zonder script blijven de kaarten anders onzichtbaar. */
.pv:not(.pv-geregeld) .pv-kaart { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pv-kaart { opacity: 1; transform: none; transition: none; }
  .pv-rij { scroll-behavior: auto; }
}

/* ---------- schermklassen ---------- */

@media (min-width: 700px) {
  .pv {
    --pv-rand: 2rem;
    --pv-kaart: 74vw;
    --pv-gat: 1.5rem;
  }
  .pv-pijlen { display: flex; }
  .pv-tekst { padding-inline: var(--gl-space-2, 1rem); }

  /* Vanaf hier volgt elk venster de verhouding van zijn eigen bronbeeld, en
     lost de breedte het verschil op: een vierkante kaart is negen zestiende
     van een brede kaart, dus komt het vierkante venster precies even hoog uit
     als het 16:9-venster ernaast. Gelijke onderranden, geen banden. */
  .pv-venster { aspect-ratio: 16 / 9; }
  .pv-kaart-vierkant .pv-venster { aspect-ratio: 1 / 1; }
  .pv-kaart-vierkant { flex-basis: calc(var(--pv-kaart) * 9 / 16); }
}

@media (min-width: 1100px) {
  .pv {
    --pv-rand: clamp(3rem, 5vw, 6rem);
    --pv-kaart: 70vw;
    --pv-gat: 2rem;
  }
}

/* Vanaf ongeveer een brede monitor kan een kaart op ware grootte van het
   bronbeeld (1344 px) getoond worden. Groter heeft geen zin: dan schaalt
   de browser op en wordt de tekst in het dashboard juist zachter. */
@media (min-width: 1800px) {
  .pv {
    --pv-kaart: min(58vw, 1360px);
    --pv-gat: 2.5rem;
  }
}