/* ============================================================
   HOMEPAGE — nieuwe onderdelen (richting A: "de diagnose")
   ------------------------------------------------------------
   Kleurafspraak op deze pagina:
     · fel rood (--c-red)  = uitsluitend de ÉNE primaire knop per scherm
     · bordeaux (--c-bordeaux) = structuur: randen, labels, actieve staat
   Zo weet de bezoeker altijd waar de hoofdactie zit.
   Bevat: compacte reviewscore, hero-spotlight, routekeuze, reviewraster,
   FAQ en de afsluitende CTA.
   ============================================================ */

/* ------------------------------------------------------------
   Overslaan-link — alleen zichtbaar bij toetsenbordfocus
   ------------------------------------------------------------ */
.skip-to-main {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: var(--z-toast);
  transform: translate(-50%, -120%);
  padding: 10px 18px;
  border: 1px solid var(--c-red);
  border-bottom-left-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
  background: var(--c-bg-deep);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform var(--t-fast);
}
.skip-to-main:focus-visible,
.skip-to-main:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-to-main { transition: none; }
}

/* ------------------------------------------------------------
   Leesbaarheid boven de video
   De hero-achtergrond is een bewegende video met lichte metaalreflecties.
   Zonder eigen donkere bedding wisselt het tekstcontrast per frame. Deze
   gradient legt een vaste donkere basis onder de linkerkolom, zodat de
   tekst altijd leesbaar is, ongeacht welk frame in beeld staat.
   ------------------------------------------------------------ */
.hero--split .hero__overlay {
  background-image:
    linear-gradient(100deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.78) 34%, rgba(5, 5, 5, 0.22) 66%, rgba(5, 5, 5, 0.42) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.30) 0%, rgba(5, 5, 5, 0.45) 60%, rgba(5, 5, 5, 0.86) 100%);
}
@media (max-width: 960px) {
  /* Eén kolom: de tekst staat dan over het midden, dus egaal verdonkeren. */
  .hero--split .hero__overlay {
    background-image:
      linear-gradient(180deg, rgba(5, 5, 5, 0.62) 0%, rgba(5, 5, 5, 0.72) 45%, rgba(5, 5, 5, 0.90) 100%);
  }
}

/* ------------------------------------------------------------
   1. COMPACTE REVIEWSCORE — bewijs vóór belofte
   Staat op de plek van de oude Engelse slogan. Verbergt zichzelf als er
   geen echte cijfers zijn (js vult hem pas na antwoord van de API).
   ------------------------------------------------------------ */
.hero__score {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--c-bordeaux-line);
  background: var(--c-bordeaux-soft);
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--c-text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.hero__score:hover,
.hero__score:focus-visible { border-color: var(--c-red); background: rgba(255, 0, 0, .12); }
.hero__score[hidden] { display: none; }
.hero__score-stars { display: inline-flex; gap: 1px; }
.hero__score-stars svg { width: 13px; height: 13px; fill: #ffc247; }
.hero__score-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--c-text-dim);
  white-space: nowrap;
}
.hero__score-text strong { color: var(--c-text); }

/* ------------------------------------------------------------
   HERO-INDELING — verschilt bewust per schermbreedte
   In de HTML staat de volgorde: tekst → vertrouwensbalk → spotlight.
   Dat is de juiste volgorde voor mobiel: iemand met een kapotte controller
   ziet eerst garantie en levertijd, en pas daarna de uitgelichte aanbieding.
   Op desktop is er een tweede kolom, dus tilt deze grid de spotlight terug
   naar rechts naast de tekst. Zonder DOM-verplaatsing, dus geen versprong
   tijdens het laden en het werkt ook zonder JavaScript.
   ------------------------------------------------------------ */
.hero--split .hero__grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 961px) {
  .hero--split .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(var(--s-5), 5vw, var(--s-9));
    row-gap: clamp(var(--s-6), 4vw, var(--s-7));
  }
  .hero--split .hero__grid      { grid-column: 1; grid-row: 1; }
  .hero--split .hero__spot      { grid-column: 2; grid-row: 1; }
  .hero--split .hero__trust-bar { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}

/* ------------------------------------------------------------
   2. SPOTLIGHT — rechterkolom van de hero
   Eén slot, door het CMS te vullen. Geen carrousel: één boodschap per
   bezoek. Bewust geen glaseffect en geen brede schaduw; één duidelijke
   rand op een eigen oppervlak.
   ------------------------------------------------------------ */
.hero__spot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(18, 18, 20, .86) 0%, rgba(10, 10, 12, .92) 100%);
  max-width: 480px;
  margin-inline-start: auto;
}
/* Het label hangt over de bovenrand: maakt duidelijk dat dit een uitgelicht
   item is en niet gewoon de eerste van een reeks. */
.hero__spot-label {
  position: absolute;
  top: -11px;
  left: var(--s-4);
  padding: 3px 10px;
  border-radius: var(--r-xs);
  background: var(--c-bordeaux);
  border: 1px solid var(--c-bordeaux-line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
/* Kiest de beheerder "geen balkje", dan verbergt js/home-spotlight.js dit
   element. Expliciet vastgelegd zodat een latere display-regel op deze klasse
   niet per ongeluk een leeg bordeaux blokje op de foto laat staan. */
.hero__spot-label[hidden] { display: none !important; }

/* Brede foto: 3:2 sluit aan op de productfotografie en vult de kolom. */
.hero__spot-media {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #0b0b0d;
  aspect-ratio: 3 / 2;
}
.hero__spot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__spot-body { min-width: 0; }
.hero__spot-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--c-text);
}
.hero__spot-text {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-dim);
}
/* Kenmerken uit de productgegevens (tags in data.js / products). Geen
   verzonnen opsomming: als een product geen tags heeft, blijft het blok weg. */
.hero__spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}
.hero__spot-tags[hidden] { display: none; }
.hero__spot-tags li {
  padding: 3px 9px;
  border: 1px solid var(--c-silver-line);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-silver);
}
/* De prijs is het cijfer waar de bezoeker op beslist. Hij stond in een rij
   van drie kleine elementen die er alle drie hetzelfde uitzagen — prijs,
   "vanaf" en de voorraadregel — waardoor niets eruit sprong. Nu krijgt het
   bedrag de display-letter van de merkkoppen en flink meer formaat, terwijl
   "vanaf" en de voorraad juist terugtreden. Het verschil zit niet in de
   grootte alleen, maar in de afstand tussen die drie. */
.hero__spot-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px var(--s-3);
  margin-bottom: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.hero__spot-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  line-height: 1;
}
.hero__spot-price strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-tight, -.01em);
  line-height: .9;
  text-transform: none;
  color: var(--c-text);
  /* Cijfers even breed houden, zodat het bedrag niet verspringt terwijl de
     kaart tussen de uitgelichte diensten wisselt. */
  font-variant-numeric: tabular-nums;
}
.hero__spot-stock {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__spot-stock[hidden] { display: none; }
.hero__spot-stock--warn { color: var(--c-warning); }
.hero__spot-stock--out  { color: #ff9a9a; }
/* Ruim op voorraad: wel vermelden, niet schreeuwen. Groen zou de aandacht
   weghalen bij de prijs ernaast, terwijl het hier om geruststelling gaat. */
.hero__spot-stock--ok   { color: var(--c-text-dim); }
.hero__spot-cta { width: 100%; justify-content: center; }

/* ------------------------------------------------------------
   Wisselen tussen uitgelichte diensten
   ------------------------------------------------------------
   Een korte vervaging in plaats van een schuif: schuiven trekt de blik mee
   en onderbreekt het lezen, vervagen niet. Alleen de inhoud vervaagt; de
   kaart zelf blijft staan, zodat de pagina niet verspringt.
   ------------------------------------------------------------ */
.hero__spot-media,
.hero__spot-body > *:not(.hero__spot-dots) {
  transition: opacity .18s ease;
}
.hero__spot.is-wisselend .hero__spot-media,
.hero__spot.is-wisselend .hero__spot-body > *:not(.hero__spot-dots) {
  opacity: 0;
}

.hero__spot-dots {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.hero__spot-dots[hidden] { display: none !important; }

/* Het bolletje zelf is klein, het aanraakvlak eromheen niet: de knop is
   28x28 px, zodat hij op een telefoon met een duim te raken is. */
.hero__spot-dot {
  appearance: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero__spot-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-border-strong);
  transition: background .18s ease, transform .18s ease;
}
.hero__spot-dot:hover::before { background: var(--c-text-dim); }
.hero__spot-dot.is-active::before {
  background: var(--c-red);
  transform: scale(1.35);
}
.hero__spot-dot:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: -4px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  .hero__spot-media,
  .hero__spot-body > *:not(.hero__spot-dots),
  .hero__spot-dot::before { transition: none; }
}

/* Mobiel/tablet: de kolommen stapelen, dus een hoge verticale kaart zou de
   routekeuze eronder wegduwen. Daarom hier juist de compacte variant: kleine
   foto links, kern rechts. Zelfde informatie, ongeveer de helft van de hoogte. */
@media (max-width: 960px) {
  .hero__spot {
    flex-direction: row;
    align-items: center;
    gap: var(--s-3);
    margin-inline: auto;
    max-width: 460px;
    text-align: left;
  }
  .hero__spot-media { flex: 0 0 100px; aspect-ratio: 1; border-radius: var(--r-xs); }
  .hero__spot-body { flex: 1 1 auto; min-width: 0; }
  .hero__spot-title { font-size: 1.15rem; }
  .hero__spot-text {
    margin-bottom: var(--s-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero__spot-tags { display: none; }      /* kenmerken passen niet in deze breedte */
  /* De prijs blijft ook hier het opvallendste, maar niet ten koste van de
     hoogte: deze kaart staat op mobiel bovenop de routekeuze. */
  .hero__spot-foot { margin-bottom: var(--s-2); padding-top: var(--s-2); }
  .hero__spot-price strong { font-size: 1.65rem; }
  .hero__spot-cta { width: auto; padding-inline: var(--s-4); }
}
@media (max-width: 420px) {
  .hero__spot-media { flex-basis: 84px; }
  .hero__spot-title { font-size: 1.05rem; }
  .hero__spot-cta { width: 100%; }
}

/* ------------------------------------------------------------
   3. ROUTEKEUZE — "Waar wil je beginnen?"
   Drie gelijkwaardige keuzes op één beslismoment: dit is precies het geval
   waarvoor kaarten het juiste middel zijn. Vlak gehouden, geen zweefeffect.
   ------------------------------------------------------------ */
.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--s-4);
}
.route {
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-4) var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: rgba(18, 18, 20, .55);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base), background var(--t-base);
}
.route:hover,
.route:focus-visible {
  border-color: var(--c-red);
  background: rgba(255, 0, 0, .06);
}
.route:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.route__kind {
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 2px 8px;
  border: 1px solid var(--c-bordeaux-line);
  border-radius: var(--r-xs);
  background: var(--c-bordeaux-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--c-silver);
}
.route__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-text);
}
.route__desc {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-dim);
}
.route__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.route__price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.route__price strong {
  margin-left: 4px;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text);
}
.route__go {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-red-text);
  text-shadow: var(--shadow-red-text);
}
.route__go::after { content: " →"; }
.route-else {
  margin: var(--s-5) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.route-else a { color: var(--c-red-text); text-shadow: var(--shadow-red-text); }

/* ------------------------------------------------------------
   4. REVIEWS — vast raster in plaats van een roterende carrousel
   Vier reviews passen gewoon naast/onder elkaar. Roteren verbergt tekst
   die je juist wilt laten lezen, en de oude versie pauzeerde alleen bij
   mouse-hover: onbruikbaar op touch en met het toetsenbord.
   ------------------------------------------------------------ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-4);
}
.review-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: rgba(18, 18, 20, .55);
}
.review-card__stars { display: flex; gap: 2px; margin-bottom: var(--s-3); }
.review-card__stars svg { width: 14px; height: 14px; fill: #ffc247; }
/* Reviewlengtes lopen sterk uiteen: er staat er één van ruim 2000 tekens
   tussen. Zonder begrenzing wordt die kaart vier keer zo hoog als de rest en
   valt het raster uit elkaar. Daarom afkappen op 8 regels, met een knop om
   uit te klappen — de volledige tekst blijft dus beschikbaar. */
.review-card__quote {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card.is-open .review-card__quote {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.review-card__more {
  align-self: flex-start;
  margin: 0 0 var(--s-3);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-red-text);
  text-shadow: var(--shadow-red-text);
}
.review-card__more:hover { text-decoration: underline; }
.review-card__more:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
.review-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.review-card__avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-bordeaux);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: #fff;
  overflow: hidden;
}
.review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card__name { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
.review-card__what {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.reviews-empty {
  padding: var(--s-5);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------
   5. FAQ — drie vragen, native <details>, werkt zonder JavaScript
   ------------------------------------------------------------ */
.home-faq { display: grid; gap: var(--s-3); max-width: 760px; margin-inline: auto; }
.home-faq__item {
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: rgba(18, 18, 20, .55);
}
.home-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  cursor: pointer;
  font-weight: var(--fw-semi);
  color: var(--c-text);
  list-style: none;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--c-red-text);
}
.home-faq__item[open] summary::after { content: "–"; }
.home-faq__item summary:focus-visible { outline: 2px solid var(--c-red); outline-offset: -2px; }
.home-faq__item p {
  margin: 0;
  padding: 0 var(--s-4) var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-dim);
}
.home-faq__more { margin-top: var(--s-4); text-align: center; font-size: var(--fs-sm); }

/* ------------------------------------------------------------
   6. AFSLUITENDE CTA — de pagina eindigde zonder vraag
   ------------------------------------------------------------ */
.home-close {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--c-bordeaux-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(139, 0, 0, .28) 0%, transparent 70%),
    linear-gradient(180deg, rgba(18, 18, 20, .9) 0%, rgba(10, 10, 12, .95) 100%);
  text-align: center;
}
.home-close h2 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.home-close p {
  max-width: 52ch;
  margin: 0 auto var(--s-5);
  color: var(--c-text-dim);
  font-size: var(--fs-md);
}
.home-close__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}
@media (max-width: 480px) {
  .home-close { padding: var(--s-5) var(--s-4); }
  .home-close__actions .btn { width: 100%; justify-content: center; }
}