/* ============================================================
   PAGE-HOME-HERO3.CSS — hero-variant 3 "Ochtendlicht"
   Laadt ná page-home.css en overschrijft alleen de hero:
   de serene landschapsfoto is 100% zichtbaar (geen donker vlak,
   geen overlay). Kop + subtekst in main1-groen op de lichte lucht,
   licht zoekblok en solide stadschips voor maximaal contrast.
   Verbruikt uitsluitend tokens.
   ============================================================ */

.hm-hero-v3 {
  background: var(--paper);
  padding: 48px 0 76px;
  border-bottom: none;
}
/* Fotolaag: 100% zichtbaar, achter de tekst */
.hm-hero-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  /* Parallax: de crop schuift subtiel mee via --hero-plx (app.js) */
  background: url('/assets/img/hero-uitvaartvinden-1800.webp') no-repeat;
  background-size: cover;
  background-position: center calc(50% + var(--hero-plx, 0px));
}
/* Subtiel zwart gradient onderaan de foto: donker aan de onderrand,
   loopt naar transparant omhoog */
.hm-hero-v3::after {
  content: "";
  position: absolute;
  top: auto; /* basisregel .hm-hero::after zet inset:0 — top moet los */
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  opacity: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

.hm-hero-v3 .hm-hero-eyebrow {color: var(--gold);display: none;}
.hm-hero-v3 h1 { color: var(--color-main1); }
.hm-hero-v3 h1 em { color: var(--color-heide); font-style: normal; }
.hm-hero-v3 .hm-hero-sub { color: var(--color-main1); }

/* Zoekblok licht op de foto — extra lift, subtiele rand valt terug op base */
.hm-hero-v3 .search-card {
  box-shadow: var(--shadow-float);
}

/* Stadslinks staan in de donkere achterlaag (.hm-search-stack),
   niet meer los op de foto: geen witte chips of blur meer nodig. */
.hm-hero-v3 .quick-cities { opacity: 1; }

/* Mobiel: witruimte boven de h1 halveren (kop stond te laag).
   88px hero-padding + 20px h1-marge = 108px → ~54px. */
@media (max-width: 640px) {
  .hm-hero-v3 { padding-top: 20px; }
  .hm-hero-v3::before {
    background-image: url('/assets/img/hero-uitvaartvinden-mobile.webp');
    /* Ingezoomd (cover was te ver uitgezoomd op de korte hero),
       verticaal gecentreerd zodat de bloemen onderin zichtbaar zijn */
    background-size: 175% auto;
    /* x 25%: foto naar rechts geschoven zodat de bloemen links in beeld komen */
    background-position: 15% calc(38% + var(--hero-plx, 0px));
  }
  .hm-hero-v3::after { display: none; } /* geen donker gradient over de foto op mobiel */
  .hm-hero-v3 h1 { margin-top: 0; }
  .hm-hero-v3 .hm-hero-sub { display: none; }

  .hm-hero-v3 .hm-search-stack {
    margin-top: 24px;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hm-hero-v3 .hm-search-stack .quick-cities { display: none; }

  .hm-hero-v3 .hm-search-row { flex-direction: row; }
  .hm-hero-v3 .hm-search-btn {
    flex: 0 0 64px;
    width: 64px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
  }
}