/* ═══════════════════════════════════════════════════════════
   Hero-varianten bovenop de ECHTE site (preview)
   Wordt door nginx in elke pagina geïnjecteerd; de JS zet de foto,
   de waas en de keuzebalk. Alles hangt aan body[data-s="1..5"],
   zodat de echte site-CSS verder ongemoeid blijft.
   ═══════════════════════════════════════════════════════════ */

/* ─── De foto, de waas en het logo die de JS in de hero schuift ─── */
.pv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.pv-wash { position: absolute; inset: 0; z-index: 1; }
.pv-logo { display: none; height: 54px; width: auto; margin-bottom: 20px; }
/* wit logo op de donkere varianten, het gewone logo in de witte kaart,
   en in variant 5 niets: daar blijft de bestaande logo-kaart staan.
   Expliciet per stijl, anders wint de regel met de hoogste specificiteit. */
body.pv-hero[data-s="1"] .pv-logo-w,
body.pv-hero[data-s="2"] .pv-logo-w,
body.pv-hero[data-s="3"] .pv-logo-w { display: block; }
body.pv-hero[data-s="4"] .pv-logo-d { display: block; height: 46px; margin-bottom: 18px; }

/* ─── Stijl 1 t/m 4: de hero wordt één foto-vlak ─── */
body.pv-hero[data-s="1"] .hero,
body.pv-hero[data-s="2"] .hero,
body.pv-hero[data-s="3"] .hero,
body.pv-hero[data-s="4"] .hero { position: relative; overflow: hidden; display: flex; align-items: center; padding: 72px 0; }
body.pv-hero[data-s="1"] .hero,
body.pv-hero[data-s="2"] .hero,
body.pv-hero[data-s="3"] .hero,
body.pv-hero[data-s="4"] .hero .hero-grid { position: relative; }
body.pv-hero[data-s="2"] .hero,
body.pv-hero[data-s="3"] .hero,
body.pv-hero[data-s="4"] .hero { min-height: min(82vh, 680px); }
body.pv-hero[data-s="1"] .hero { min-height: min(96vh, 820px); }
body.pv-hero[data-s="1"] .hero { margin-top: calc(-1 * var(--pv-header-h, 68px)); }

body.pv-hero[data-s="1"] .hero-grid,
body.pv-hero[data-s="2"] .hero-grid,
body.pv-hero[data-s="3"] .hero-grid,
body.pv-hero[data-s="4"] .hero-grid { position: relative; z-index: 2; grid-template-columns: 1fr; }
body.pv-hero[data-s="1"] .hero-media,
body.pv-hero[data-s="2"] .hero-media,
body.pv-hero[data-s="3"] .hero-media,
body.pv-hero[data-s="4"] .hero-media { display: none; }
body.pv-hero[data-s="1"] .hero-copy,
body.pv-hero[data-s="2"] .hero-copy,
body.pv-hero[data-s="3"] .hero-copy { max-width: 640px; }

/* ─── Stijl 1: donkere waas, menubalk transparant over de foto ─── */
body.pv-hero[data-s="1"] .site-header { background: transparent; border-bottom-color: transparent; }
body.pv-hero[data-s="1"] .site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 24, .62), rgba(8, 14, 24, 0));
}
body.pv-hero[data-s="1"] .site-header.is-scrolled { background: var(--blue); border-bottom-color: rgba(255, 255, 255, .14); }
body.pv-hero[data-s="1"] .site-header.is-scrolled::before { display: none; }
body.pv-hero[data-s="1"] .pv-wash { background: linear-gradient(100deg, rgba(8, 14, 24, .76) 0%, rgba(8, 14, 24, .52) 42%, rgba(8, 14, 24, .16) 100%); }
body.pv-hero[data-s="1"] .hero-copy { padding-top: calc(var(--pv-header-h, 68px) + 40px); }

/* ─── Stijl 2: donkere waas, blauwe balk blijft ─── */
body.pv-hero[data-s="2"] .pv-wash { background: linear-gradient(100deg, rgba(8, 14, 24, .74) 0%, rgba(8, 14, 24, .48) 45%, rgba(8, 14, 24, .14) 100%); }

/* ─── Stijl 3: waas in de merkkleur ─── */
body.pv-hero[data-s="3"] .pv-wash { background: linear-gradient(100deg, rgba(18, 42, 77, .84) 0%, rgba(26, 60, 107, .58) 50%, rgba(26, 60, 107, .28) 100%); }

/* ─── Stijl 4: foto schoon, tekst in een witte kaart ─── */
body.pv-hero[data-s="4"] .pv-wash { background: linear-gradient(100deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .14) 55%, rgba(0, 0, 0, .04) 100%); }
body.pv-hero[data-s="4"] .hero-copy {
  background: #fff; border-radius: var(--radius, 16px); padding: 38px 38px 34px;
  box-shadow: 0 24px 60px rgba(10, 20, 35, .3); max-width: 620px;
}
body.pv-hero[data-s="4"] .hero-sub { color: var(--muted, #5c6672); }

/* ─── Tekstkleuren op de donkere varianten ─── */
body.pv-hero[data-s="1"] h1,
body.pv-hero[data-s="2"] h1,
body.pv-hero[data-s="3"] h1 { color: #fff; }
body.pv-hero[data-s="1"] .eyebrow,
body.pv-hero[data-s="2"] .eyebrow { color: #ffb98f; }
body.pv-hero[data-s="3"] .eyebrow { color: #ffd0b4; }
body.pv-hero[data-s="1"] .hero-sub,
body.pv-hero[data-s="2"] .hero-sub { color: #e6ebf2; }
body.pv-hero[data-s="3"] .hero-sub { color: #dde6f1; }
body.pv-hero[data-s="1"] .hero-actions .btn-outline,
body.pv-hero[data-s="2"] .hero-actions .btn-outline,
body.pv-hero[data-s="3"] .hero-actions .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .85); color: #fff; }
body.pv-hero[data-s="1"] .hero-actions .btn-outline:hover,
body.pv-hero[data-s="2"] .hero-actions .btn-outline:hover,
body.pv-hero[data-s="3"] .hero-actions .btn-outline:hover { background: #fff; color: var(--blue); }
body.pv-hero[data-s="1"] .hero-wa,
body.pv-hero[data-s="2"] .hero-wa,
body.pv-hero[data-s="3"] .hero-wa { border-color: #fff; background: transparent; color: #fff; }
body.pv-hero[data-s="1"] .hero-wa:hover,
body.pv-hero[data-s="2"] .hero-wa:hover,
body.pv-hero[data-s="3"] .hero-wa:hover { background: #fff; color: var(--blue); }

/* ─── Stijl 5: foto als zachte achtergrond, hero verder ongewijzigd ─── */
body.pv-hero[data-s="5"] .hero { position: relative; overflow: hidden; }
body.pv-hero[data-s="5"] .pv-wash { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .92)); }
body.pv-hero[data-s="5"] .hero-grid { position: relative; z-index: 2; }

/* ═══ Keuzebalk (alleen in deze preview) ═══ */
.pv-picker {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 9999;
  display: flex; flex-direction: column; gap: 7px; max-width: calc(100vw - 20px);
  background: rgba(14, 20, 30, .93); color: #fff; border-radius: 14px; padding: 10px 13px;
  font: 400 .8rem/1.4 var(--font, system-ui, sans-serif); box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}
.pv-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pv-label { opacity: .6; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; }
.pv-name { font-size: .74rem; opacity: .85; }
.pv-hint { font-size: .68rem; opacity: .5; }
.pv-picker button {
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px; width: 30px; height: 30px; font: inherit; font-weight: 700; cursor: pointer; padding: 0;
}
.pv-picker button:hover { background: rgba(255, 255, 255, .28); }
.pv-picker button.is-on { background: #D24F15; border-color: #D24F15; }
.pv-picker .pv-thumb { width: 48px; height: 33px; overflow: hidden; border-radius: 8px; }
.pv-picker .pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-picker .pv-hide { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; font-size: .9rem; line-height: 1; }

@media (max-width: 860px) {
  body.pv-hero[data-s="1"] .hero-copy { padding-top: calc(var(--pv-header-h, 60px) + 24px); }
  .pv-logo { height: 44px; }
}
@media (max-width: 620px) {
  body.pv-hero[data-s="1"] .hero,
  body.pv-hero[data-s="2"] .hero,
  body.pv-hero[data-s="3"] .hero,
  body.pv-hero[data-s="4"] .hero { min-height: auto; padding: 56px 0 64px; }
  body.pv-hero[data-s="4"] .hero-copy { padding: 26px 24px 22px; }
  .pv-picker { width: calc(100vw - 16px); padding: 7px 9px; gap: 5px; font-size: .72rem; }
  .pv-picker button { width: 25px; height: 25px; font-size: .74rem; }
  .pv-picker .pv-thumb { width: 34px; height: 24px; }
  .pv-name { font-size: .66rem; }
}