/* ============================================================
   RIET QUADEN MAKELAARS — RQ1 De Etalage (signature)

   Het kantoorraam van een dorpsmakelaar: een rustig kozijn met een rode
   lintel, daarachter "glas" (zacht grijs verloop + één statische
   glans-diagonaal) en daarop de woningen als raambiljetten: witte kaartjes
   met een passe-partout van wit papier, een iets gedraaide TE KOOP-sticker
   en per kaart een minieme eigen rotatie, alsof ze met de hand zijn
   opgehangen.

   Kleurnoot: de sticker is een rood VLAK met witte tekst en gebruikt daarom
   --rood-vlak (4,80:1) en niet --rood (3,97:1). --rood blijft voor de lijn
   boven het kozijn en de actieve positie-stip.

   Mobiel-eerst: onder 620px is de biljettenrij horizontaal bladerbaar met
   scroll-snap en een "peek" van de volgende kaart; de pijlen en stippen
   staan als gewone flex-rij BINNEN .container onder het kozijn (geen
   absolute positionering, dus ze kunnen niet buiten beeld belanden).

   DIEPTE-OPBOUW (herzien na review: het glas was zo licht dat het samenviel
   met de witte pagina en de glans onzichtbaar werd). Vier lagen, elk een
   meetbare stap in grijswaarde, zodat het als glas leest en niet als één
   plat wit vlak:

     straat / sectie   ~237 -> 231 (zacht verticaal dieper)
     kozijn            255 -> 244  (wit, tekent zich af tegen de sectie)
     glas              ~215 - 226  (donkerder dan de straat: het is een gat)
     glans-diagonaal   ~246        (piek, ~24 punten boven het glas)
     raambiljetten     255         (papier, springt los van het glas)
   ============================================================ */

/* ---------- 0. de straat: sectie-achtergrond ---------- */

/* Ritme: #over is wit, #diensten is warmgrijs. De etalage krijgt daartussen
   een eigen, iets diepere tint met een zacht verticaal verloop — geen plat
   vlak, en het witte kozijn tekent zich er duidelijk tegen af. */
#etalage {
  background:
    linear-gradient(180deg, rgba(24, 22, 23, 0.03) 0%, rgba(24, 22, 23, 0.06) 100%),
    var(--warmgrijs);
}

/* ---------- 1. sectiekop ---------- */

.etalage__kop {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 52px);
  text-align: center;
}

.etalage__label {
  margin-bottom: var(--ruimte-xs);
  color: var(--steungrijs);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.etalage__titel { margin-bottom: var(--ruimte-xs); }

.etalage__intro {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--steungrijs);
  text-wrap: pretty;
}

/* ---------- 2. kozijn, ruit en glans ---------- */

.etalage__kozijn {
  position: relative;
  padding: 6px;
  background: linear-gradient(180deg, var(--wit) 0%, var(--warmgrijs) 100%);
  border: 1px solid rgba(24, 22, 23, 0.16);
  border-top: 3px solid var(--rood);
  border-radius: 5px 5px 3px 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 26px 52px -34px rgba(24, 22, 23, 0.55);
}

/* de onderdorpel: een smalle richel die net buiten het kozijn uitsteekt */
.etalage__kozijn::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -8px;
  height: 8px;
  background:
    linear-gradient(180deg, rgba(24, 22, 23, 0.05) 0%, rgba(24, 22, 23, 0.13) 100%),
    var(--warmgrijs);
  border-radius: 0 0 4px 4px;
}

/* Het glas. Geen witte overlay meer (die waste met de glans samen tot één
   plat wit vlak), maar een tint ONDER de sectiekleur: je kijkt door een gat
   naar binnen. Het verloop is verticaal en zacht, zodat het glas ook zonder
   de glans niet vlak oogt. */
.etalage__raam {
  position: relative;
  overflow: hidden; /* houdt de glans binnen de ruit */
  padding: 12px;
  background:
    linear-gradient(
      168deg,
      rgba(24, 22, 23, 0.13) 0%,
      rgba(24, 22, 23, 0.08) 55%,
      rgba(24, 22, 23, 0.11) 100%
    ),
    var(--warmgrijs);
  border-radius: 2px;
  box-shadow: inset 0 3px 9px -4px rgba(24, 22, 23, 0.42);
}

/* Twee evenwijdige lichtstrepen diagonaal over de ruit: een brede en een
   smalle, zoals licht dat op dubbel glas valt. Ligt ACHTER de kaartjes
   (z-index 0 tegen 1): zo is de streep leesbaar in de kieren, langs de
   randen en boven/onder de rij, terwijl geen enkele tekst of rode sticker
   contrast inlevert. Piek ~246 tegen glas ~221: meetbaar, niet schreeuwerig. */
.etalage__glans {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 19%,
    rgba(255, 255, 255, 0.30) 25%,
    rgba(255, 255, 255, 0.74) 33%,
    rgba(255, 255, 255, 0.20) 40%,
    rgba(255, 255, 255, 0.58) 45%,
    rgba(255, 255, 255, 0.10) 51%,
    rgba(255, 255, 255, 0) 58%
  );
}

.etalage__noscript {
  position: relative;
  z-index: 1;
  padding: var(--ruimte-md) var(--ruimte-sm);
  color: var(--steungrijs);
  text-align: center;
}

/* dezelfde melding, maar dan door etalage.js ingezet als WONINGEN ontbreekt
   of leeg is: het raam mag nooit kaal blijven. Link expliciet gestileerd,
   want `a` erft standaard alleen de tekstkleur zonder onderstreping. */
.etalage__leeg-link {
  color: var(--zwart);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(24, 22, 23, 0.35);
  transition: text-decoration-color 0.2s var(--ease-luxe), color 0.2s var(--ease-luxe);
}
.etalage__leeg-link:hover,
.etalage__leeg-link:focus-visible {
  color: var(--rood-diep);
  text-decoration-color: currentColor;
}
.etalage__leeg-link:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. de biljettenrij ---------- */

/* mobiel: horizontaal bladerbaar met snap en peek */
.etalage__biljetten {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  padding: 12px 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 10px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.etalage__biljetten::-webkit-scrollbar { display: none; }

@media (min-width: 620px) {
  .etalage__raam { padding: clamp(18px, 2.6vw, 34px); }

  .etalage__biljetten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.4vw, 28px);
    padding: 6px;
    overflow: visible;
    scroll-snap-type: none;
  }
}

@media (min-width: 900px) {
  .etalage__biljetten { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 4. het raambiljet ---------- */

.biljet {
  position: relative;
  z-index: 1;
  display: block;
  /* 58vw laat op 360px een peek van ~31px van de volgende kaart zien
     (spoorbreedte 254px, kaart 209px, gap 14px) */
  flex: 0 0 clamp(190px, 58vw, 268px);
  scroll-snap-align: start;
  border-radius: 4px;
  /* de handmatige ophang-rotatie; per kaart gezet via --draai */
  transform: rotate(var(--draai, 0deg));
}
.biljet:hover { z-index: 3; }

.biljet:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 5px;
}

/* het papier zelf: alles wat beweegt zit hier, zodat de rotatie op .biljet
   blijft staan en de entree-animatie van GSAP er niet mee vecht */
.biljet__blad {
  position: relative; /* anker voor de sticker, die net buiten het papier valt */
  display: block;
  padding: 10px 10px 14px;
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(24, 22, 23, 0.10),
    0 8px 18px -14px rgba(24, 22, 23, 0.45);
  /* transform-transitie NIET hier: etalage.js animeert de entree (hang-in)
     zelf per frame met GSAP en een browser-transitie op transform zou die
     frames smoren tot iets papperigs. De hover-lift-transitie op transform
     komt er pas bij ná de entree, zie .is-klaar hieronder. */
  transition: box-shadow 0.45s var(--ease-luxe);
}

/* etalage.js zet deze class op #etalage zodra de hang-in-entree klaar is
   (onComplete, het reduced-motion-pad of het timeout-vangnet) — pas dan mag
   de transform van de hover-lift een eigen transitie krijgen. */
.is-klaar .biljet__blad {
  transition:
    transform 0.45s var(--ease-luxe),
    box-shadow 0.45s var(--ease-luxe);
}

/* dichter bij het raam: het kaartje komt 4px naar voren */
.biljet:hover .biljet__blad,
.biljet:focus-visible .biljet__blad {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(24, 22, 23, 0.10),
    0 18px 34px -18px rgba(24, 22, 23, 0.55);
}

.biljet__beeld {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;      /* ruimte gereserveerd: geen CLS */
  background: var(--warmgrijs);
  overflow: hidden;
}

.biljet__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* staande bronfoto's (bv. 480x640): iets hoger uitsnijden, anders verdwijnt
   de nok van het huis. etalage.js zet deze class na het laden van de foto. */
.biljet__beeld--staand img { object-position: 50% 32%; }

/* de sticker: klein rood vlak, wit, licht gedraaid, steekt net over de rand */
.biljet__sticker {
  position: absolute;
  top: 12px;
  left: -6px;
  z-index: 2;
  padding: 5px 11px 4px;
  background: var(--rood-vlak);
  color: var(--wit);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 4px 10px -6px rgba(24, 22, 23, 0.7);
  transform: rotate(-2deg);
}

.biljet__tekst {
  display: block;
  padding: 14px 4px 0;
}

.biljet__type {
  display: block;
  margin-bottom: 3px;
  color: var(--steungrijs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.biljet__straat {
  display: block;
  font-family: var(--font-kop);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--zwart);
  /* lange straatnamen (Pastoor Schoenmaeckersstraat) mogen afbreken */
  overflow-wrap: break-word;
  hyphens: auto;
}

.biljet__plaats {
  display: block;
  margin-top: 2px;
  color: var(--steungrijs);
  font-size: 0.875rem;
  line-height: 1.4;
}

.biljet__streep {
  display: block;
  height: 1px;
  margin: 12px 0 10px;
  background: rgba(24, 22, 23, 0.12);
}

.biljet__prijs {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--zwart);
}

.biljet__kk {
  margin-left: 1px;
  color: var(--steungrijs);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---------- 5. blader-bediening (alleen bij de scrollrij) ---------- */

.etalage__blader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px; /* ruimte onder de dorpel (die 8px buiten het kozijn valt) */
}
.etalage__blader[hidden] { display: none; }

@media (min-width: 620px) {
  .etalage__blader { display: none; }
}

.etalage__pijl-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--zwart);
  background: var(--wit);
  /* 50% zwart op wit = 3,15:1, dus de rand van de knop haalt de 3:1-eis
     voor bedieningselementen (WCAG 1.4.11) */
  border: 1px solid rgba(24, 22, 23, 0.5);
  border-radius: 50%;
  transition:
    border-color 0.3s var(--ease-luxe),
    background-color 0.3s var(--ease-luxe),
    opacity 0.3s var(--ease-luxe);
}
.etalage__pijl-knop svg {
  width: 15px;
  height: 15px;
}
.etalage__pijl-knop:hover:not(:disabled) {
  border-color: var(--zwart);
  background: rgba(24, 22, 23, 0.04);
}
.etalage__pijl-knop:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
}
.etalage__pijl-knop:disabled {
  opacity: 0.32;
  cursor: default;
}

/* positie-stippen: puur een indicator, geen bediening (de pijlen zijn de
   knoppen, met een volwaardig tapdoel van 44px). Daarom aria-hidden. */
.etalage__stippen {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 4px;
}

.etalage__stip {
  display: block;
  width: 7px;
  height: 7px;
  background: rgba(24, 22, 23, 0.22);
  border-radius: 50%;
  transition:
    width 0.35s var(--ease-luxe),
    background-color 0.35s var(--ease-luxe);
}
.etalage__stip.is-actief {
  width: 18px;
  background: var(--rood);
  border-radius: 4px;
}

/* ---------- 6. onder de etalage ---------- */

.etalage__onder {
  margin-top: clamp(30px, 4vw, 48px);
  text-align: center;
}

.etalage__onder-tekst {
  max-width: 34rem;
  margin: 0 auto var(--ruimte-sm);
  color: var(--steungrijs);
  text-wrap: pretty;
}

/* iets ruimer dan de standaardknop: het label is lang. Op de smalste
   telefoons zou "Bekijk het volledige woningaanbod ↗" met die padding net
   niet passen, dus daar vult de knop de breedte en mag het label afbreken. */
.etalage__knop { padding-inline: 30px; }

@media (max-width: 430px) {
  .etalage__knop {
    width: 100%;
    padding-inline: 18px;
  }
}

/* Label én pijl zitten in ÉÉN flex-item, zodat de pijl inline meeloopt met de
   tekst. Breekt het label op smalle schermen (< 430px) in twee regels, dan
   staat de pijl achter de laatste regel in plaats van verticaal gecentreerd
   naast het hele blok te zweven. */
.etalage__knop-label { display: inline; }

.etalage__pijl {
  margin-left: 8px;
  font-size: 1.05em;
  line-height: 1;
}

/* alleen voor schermlezers */
.etalage__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 7. stille beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  .biljet__blad {
    transition: box-shadow 0.2s linear;
  }
  .biljet:hover .biljet__blad,
  .biljet:focus-visible .biljet__blad {
    transform: none;
  }
  .etalage__stip { transition: none; }
  .etalage__biljetten { scroll-behavior: auto; }
}

/* ---------- 8. afdrukken ---------- */

/* Vangnet: bij het afdrukken vuurt ScrollTrigger niet mee, dus de biljetten
   mogen nooit op de beginstand (opacity 0) blijven staan. Meteen alles zwart
   op wit, zonder glas en zonder bediening. */
@media print {
  #etalage { background: var(--wit); }
  .biljet__blad {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none;
    border: 1px solid rgba(24, 22, 23, 0.3);
  }
  .etalage__raam,
  .etalage__kozijn { background: var(--wit); box-shadow: none; }
  .etalage__glans,
  .etalage__blader { display: none; }
  .etalage__biljetten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow: visible;
  }
  .biljet { transform: none; break-inside: avoid; }
}