/* ============================================================================
   MORRAPARK v2 — HOME: LICHTE HERO + GROENE HUURDERSBALK
   ----------------------------------------------------------------------------
   Alleen voor index.html (de home). Laadt NA home.css en overschrijft daar
   uitsluitend de hero. De rest van de homepage blijft ongemoeid.

   Aanleiding: de groene full-bleed hero domineert de pagina. Het
   reserveringsoverzicht (narrowcasting) voelt luxer omdat het groen daar juist
   spaarzaam is: warm papier-canvas als grondvlak, wit als paneel, groen alleen
   als smalle structuurbalk. Dit concept keert die verhouding terug op de home.

   Kleurdiscipline: geen losse hex-waarden, alles via de tokens uit theme.css.
   Champagne (--accent) mag NIET als tekst op --canvas (~1.9:1) — op licht
   canvas is het accent daarom groen (--site-accent doet dat al vanzelf in
   dagmodus). Champagne blijft alleen op donkere ondergrond: de huurdersbalk.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. HERO — van drenched groen naar warm papier
   --------------------------------------------------------------------------- */
.hero-home { background: var(--canvas); color: var(--ink); }

/* De champagne-gloed uit home.css:11-14 hier doodleggen. Op #faf8f4 rendert
   rgba(203,177,142,.18) als niets — een effect dat je alleen in de code ziet.
   In nachtmodus is er wél een donker vlak om op te gloeien, dus daar blijft
   hij staan (zie het nacht-blok verderop). */
.hero-home::before { content: none; }

/* De champagne-overrides uit home.css terugdraaien, zodat --site-accent wint:
   groen overdag, champagne 's nachts. Eén regel, twee modi. */
.hero-home .kicker { color: var(--site-accent); }
.hero-home .kicker::before { background: currentColor; }
.hero-home h1 { color: var(--ink); }
.hero-home h1 strong { color: var(--site-accent); }
.hero-home__lead { color: var(--ink-lead); }
.hero-home__tour { display: inline-flex; align-items: center; min-height: 44px; color: var(--site-accent); font-weight: var(--weight-medium); text-underline-offset: .25em; }
.hero-home__cta { align-items: center; }

/* Zonder trust-rij eindigt de linkerkolom op de knoppen. De hero mag dan wat
   compacter: de onderrand hoeft geen ruimte meer te reserveren voor een
   afsluitende regel. */
.hero-home .container {
  padding-top: clamp(3.4rem, 6.5vw, 5.4rem);
  padding-bottom: clamp(3.4rem, 6.5vw, 5.4rem);
}
@media (max-width: 900px) {
  .hero-home .container { padding-top: 1.8rem; padding-bottom: 2rem; }
  .hero-home h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .hero-home__lead { font-size: var(--text-base); margin-bottom: 1.1rem; }
  .hero-home__cta { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* Witte passe-partout i.p.v. champagne rand + zware donkere schaduw.
   aspect-ratio en radius blijven staan, dus home.css:84-92 blijft werken. */
.hero-home__media {
  border: .5rem solid var(--surface);
  box-shadow: 0 1rem 2.4rem rgba(13,46,34,.12);
}

/* NACHT — de gloed uit home.css mag hier wél aan: er is een donker vlak om op
   te gloeien. */
[data-theme="night"] .hero-home::before {
  content: "";
  background: radial-gradient(90% 120% at 88% 0%, rgba(203,177,142,.14), transparent 55%);
}

/* Alléén de kleur van de passe-partout wisselt, nooit de breedte. Met
   box-sizing:border-box (base.css:9) rekent aspect-ratio over de border-box,
   dus een dunnere rand levert een grótere foto: dan verspringt het beeld bij
   het omschakelen van dag naar nacht. Daarom blijft de .5rem staan en verandert
   hier uitsluitend border-color.

   's Nachts is --surface bijna --canvas, dus een witte passe-partout zou
   verdwijnen. In plaats daarvan champagne dóór het paneelvlak: donker genoeg om
   niet te schreeuwen, licht genoeg om als kader te lezen. De hairline eromheen
   scheidt het kader van het canvas. Die staat bewust in box-shadow en niet in de
   rand — een spread-schaduw ligt buiten de border-box en telt dus niet mee in de
   aspect-ratio. */
[data-theme="night"] .hero-home__media {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* Knoppen blijven groen: .btn--primary staat al op var(--brand) in base.css.
   Bewust géén override hier — de groene knop is het enige luide element in de
   hero, precies zoals de "nu bezig"-rij op het narrowcasting-bord. */

/* ---------------------------------------------------------------------------
   2. HUURDERSBALK — het groen keert terug als smalle structuurbalk
   Full-bleed, direct onder de hero. Levert meteen de scheiding tussen het
   canvas van de hero en de witte USP-strip eronder.
   --------------------------------------------------------------------------- */
.tenants {
  position: relative;              /* anker voor .tenants__pause */
  background: var(--brand);
  padding: 1.5rem 0 1.7rem;
  overflow: hidden;
}
.tenants__label {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--accent);            /* champagne mag hier: donkere ondergrond */
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* Randen wegvloeien i.p.v. hard afkappen — scheelt het "afgeknipte" gevoel.
   Rechts stopt de fade 3.5rem vóór de rand i.p.v. óp de rand: dat maakt een
   volledig doorzichtige goot waar .tenants__pause in staat. Zonder die goot
   schuiven logo's op ~40% dekking onder de knop door en oogt hij vies. De goot
   is breder dan de knop zelf (1.5rem + .75rem marge), zodat er geen restje
   logo vlak naast de knop blijft hangen. */
.tenants__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 10rem), transparent calc(100% - 3.5rem));
          mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 10rem), transparent calc(100% - 3.5rem));
}

/* Twee identieke kopieën naast elkaar; -50% verschuiving is precies één kopie,
   dus het lusje is naadloos. Negatieve richting = rechts naar links. */
.tenants__track {
  display: flex;
  width: max-content;
  animation: tenants-roll 44s linear infinite;
}
/* Hover-pauze blijft als comfort voor muisgebruikers; de knop hieronder is het
   mechanisme dat telt. Botsen niet: paused-door-knop plus hover is nog steeds
   paused, en hervatten gaat altijd via de knop. */
.tenants__viewport:hover .tenants__track { animation-play-state: paused; }
.tenants.is-paused .tenants__track { animation-play-state: paused; }

/* Pauzeknop — helemaal rechts, in de doorzichtige goot van de mask. Geen kader
   en geen vlak: alleen het pictogram, in dezelfde ingehouden toon als de logo's
   zelf (.tenant-logo staat op .8). Een omlijnde knop trok de balk uit balans.
   .6 is geen willekeurige waarde: champagne op --brand geeft daar 3.5:1, ruim
   boven de 3:1 die WCAG 1.4.11 voor bedieningselementen vraagt. Lager oogt
   rustiger maar levert een knop op die je niet ziet staan.
   Het pictogram blijft 1.5rem; het klikvlak is via ::after 44px in het
   vierkant, zonder de mask-goot of de balk-balans aan te tasten. 24px was de
   ondergrens van WCAG 2.5.8 en dus precies te klein om prettig te raken. */
.tenants__pause {
  position: absolute; right: .75rem; transform: translateY(-50%);
  /* 50% is het midden van de hele balk, en die telt het label mee — de knop
     komt daardoor boven de logorij te hangen. Terugduwen met de halve hoogte
     van het labelblok: regelhoogte (.72rem × 1.65) + de marge eronder (1.1rem),
     gedeeld door twee. Geen los getal, dus hij blijft kloppen als de
     labeltypografie verandert. */
  top: calc(50% + (var(--text-2xs) * 1.65 + 1.1rem) / 2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--accent);
  opacity: .6;
  transition: opacity .2s;
}
.tenants__pause:hover, .tenants__pause:focus-visible { opacity: 1; }
/* Onzichtbaar 44px-raakvlak rond het pictogram. inset is negatief, dus het
   groeit naar buiten zonder de layout of de mask-goot te verschuiven. */
.tenants__pause::after { content: ""; position: absolute; inset: -.625rem; }
.tenants__pause svg { width: .85rem; height: .85rem; stroke: currentColor; fill: none; }

/* De globale focusring in base.css:58 is --site-accent: overdag diepgroen —
   op deze groene balk dus onzichtbaar. Champagne is hier de enige kleur die
   contrast heeft. Geldt ook voor de viewport, die in reduced-motion
   focusbaar wordt. */
.tenants__pause:focus-visible,
.tenants__viewport:focus-visible { outline-color: var(--accent); }

@keyframes tenants-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.tenants__list {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  list-style: none;
  margin: 0;
  padding: 0 1.75rem;
}

/* De PNG's zijn al witte silhouetten op transparant, omgezet uit de originele
   huurderslogo's door scripts/build_tenant_logos.py. Bewust géén
   `filter: brightness(0) invert(1)` hier: dat werkt alleen op bronnen die al
   transparant zijn en maakt van een JPG met witte achtergrond een massief wit
   blok. Een nieuw logo gaat dus door het script, niet rechtstreeks in de map.

   Afmetingen staan als width/height op elke logo-tag — door het script berekend op
   gelijk optisch gewicht (een vierkant logo en een breed woordmerk op dezelfde
   hoogte oogt scheef) en geëxporteerd op 2x voor retina. Daarmee reserveert de
   browser de ruimte vóór het laden, dus de balk verspringt niet. */
.tenant-logo {
  flex: none;
  opacity: .8;
  transition: opacity .2s;
}
.tenants__list li:hover .tenant-logo { opacity: 1; }

/* ---------------------------------------------------------------------------
   3. REDUCED MOTION
   base.css:16-19 forceert globaal animation-duration:.01ms — dat zou de
   marquee laten klappen i.p.v. stoppen. Hier expliciet doodleggen en de rij
   handmatig scrollbaar maken; de tweede (aria-hidden) kopie is dan overbodig.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tenants__track { animation: none !important; width: auto; }
  .tenants__track [aria-hidden="true"] { display: none; }
  .tenants__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .tenants__list { padding-inline: 1.5rem; }
  /* Balk staat al stil, dus de pauzeknop heeft geen functie. site-v2.js maakt
     hem hier niet aan; dit vangt het geval waarin de voorkeur ná het laden
     omgaat. De viewport krijgt daar tabindex, zodat scrollen met het
     toetsenbord kan. */
  .tenants__pause { display: none; }
}

/* ---------------------------------------------------------------------------
   4. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 520px) {
  /* Samen zijn de twee knoppen breder dan het scherm, dus ze stapelen. Twee
     losse breedtes onder elkaar (155px en 233px) geeft een rafelige linkerkolom.
     flex-basis 100% maakt de stapeling expliciet i.p.v. een toevallig gevolg
     van wrappen; ze lijnen dan links én rechts uit met de tekst erboven. */
  .hero-home__cta .btn { flex: 1 0 100%; }
}

@media (max-width: 900px) {
  .tenants { padding: 1.2rem 0 1.4rem; }
  .tenants__list { gap: 2.4rem; }
  /* Zelfde goot rechts als op desktop, alleen krapper aan de linkerkant. */
  .tenants__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 6rem), transparent calc(100% - 3.25rem));
            mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 6rem), transparent calc(100% - 3.25rem));
  }
  /* Logo's zelf niet verkleinen: ze zijn met 17-41px al klein genoeg, en
     schalen zou de optische normalisatie uit het script ongedaan maken. Alleen
     de tussenruimte krimpt, zodat er meer namen tegelijk in beeld staan. */
}