/* ============================================================
   GardenIQ — aanvulling op site.css (overgenomen van paintiq.nl)
   ------------------------------------------------------------
   Zelfde familie als PaintIQ en Monteur Max: night + aurora,
   Outfit-koppen, de 35°-snede. Het tuinaccent is klein gehouden:
   de tweede regel van een kop en de pictogrammen zijn bladgroen,
   de knoppen blijven aurora (merk).
   ============================================================ */
:root {
  --blad-300: #9fd99a;
  --blad-500: #4fae5c;
  --blad-700: #2f7d43;
  --blad-800: #256537;
  --blad-50: #f1f8ef;
}

/* Logo: eigen SVG met slogan, geen uitsnede van een PNG zoals bij PaintIQ */
.merk { aspect-ratio: auto; overflow: visible; }
.merk img { position: static; width: auto; height: 100%; max-width: none; }
.brand .merk { height: 44px; }
@media (max-width: 1140px) { .brand .merk { height: 40px; } }
@media (max-width: 400px)  { .brand .merk { height: 34px; } }
.footer .merk { height: 34px; }

/* Achtergrondbeeld in plaats van video (hero: echt GardenIQ-beeld) */
.bgvid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-licht .bgvid img { object-position: 62% 60%; }

/* Tuinaccent */
.hero-licht h1 em, .section-head h2 em { font-style: normal; color: var(--blad-700); }
.on-night .section-head h2 em, .band-donker h2 em { color: var(--blad-300); }
.fcard-ic { color: var(--blad-700); background: var(--blad-50); }
.hero-licht .checks svg { color: var(--blad-700); }
.band-groen { background: var(--blad-50); }

/* Voor/na-schuif */
.vn {
  --pos: 50%;
  position: relative; overflow: hidden; user-select: none;
  aspect-ratio: 4 / 3; max-width: 1040px; margin-inline: auto;
  border-radius: var(--radius-kaart); background: var(--slate-100);
  box-shadow: var(--schaduw-lg);
}
.vn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vn .voor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vn .grens {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgb(10 37 64 / 0.25); pointer-events: none;
}
.vn .greep {
  position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: #fff; color: var(--night-900); box-shadow: var(--schaduw-md);
  display: grid; place-items: center; pointer-events: none;
}
.vn .greep svg { width: 22px; height: 22px; }
.vn .lbl {
  position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; pointer-events: none;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; background: rgb(10 37 64 / 0.78); color: #fff;
}
.vn .lbl.l { left: 14px; }
.vn .lbl.r { right: 14px; }
.vn input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.vn input:focus-visible ~ .greep { outline: 3px solid var(--aurora-800); outline-offset: 3px; }
.vn-cap { max-width: 1040px; margin: 14px auto 0; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 560px) { .vn { aspect-ratio: 4 / 3.6; } }

/* Schermafbeeldingen zonder uitsnede */
.shot-heel { display: block; width: 100%; height: auto; }

/* Vragen */
.vragen { display: grid; gap: 12px; max-width: 52rem; }
.vragen details { border: 1px solid var(--line); border-radius: var(--radius-kaart); background: #fff; padding: 0 22px; box-shadow: var(--schaduw-kaart); }
.vragen summary {
  cursor: pointer; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--night-900);
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; color: var(--blad-700); font-size: 1.5rem; line-height: 1; }
.vragen details[open] summary::after { content: "\2013"; }
.vragen details p { margin: 0 0 18px; color: var(--muted); }

/* Zes kaarten (2 rijen) */
.fcards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .fcards-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fcards-6 { grid-template-columns: minmax(0, 1fr); } }

/* Video als achtergrond van de donkere hero (binnenkort-pagina) */
.hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.12); }
.hero .klein-voet { margin-top: 28px; color: var(--on-night-muted); font-size: 0.92rem; }
.hero .klein-voet a { color: var(--on-night); text-decoration: underline; }
/* Binnenkort-pagina: de video moet echt zichtbaar zijn (tekstkant donker, beeldkant licht) */
body.soon { background: var(--night-950); }
.soon .hero::before {
  background:
    linear-gradient(90deg, rgb(6 26 46 / 0.88) 0%, rgb(6 26 46 / 0.62) 50%, rgb(6 26 46 / 0.16) 100%),
    linear-gradient(0deg, rgb(6 26 46 / 0.55) 0%, transparent 30%);
}
.soon .hero h1 em { color: var(--blad-300); }
.soon .hero h1, .soon .hero .lede { text-shadow: 0 1px 2px rgb(0 0 0 / 0.45), 0 4px 22px rgb(0 0 0 / 0.35); }
@media (max-width: 760px) { .soon .hero::before { background: rgb(6 26 46 / 0.74); } }
/* site.css verbergt .hero-bg sinds PaintIQ zijn bewegende achtergrond schrapte; hier is hij juist de bedoeling */
.soon .hero-bg { display: block; }
.soon .hero { min-height: 100svh; }