/* ------------------------------------------------------------------
   Lin Housing — styling.

   Mobile-first: de basisregels gelden voor de telefoon, de media-queries
   voegen alleen ruimte toe. De link wordt geappt; vrijwel iedereen opent
   hem op een klein scherm.

   Geen externe fonts. Systeemfonts renderen direct, kosten geen request
   en houden de site vrij van een cookiebanner.
   ------------------------------------------------------------------ */

:root{
  --groen:#1F3A34;        /* rustig, niet-makelaarachtig; hoofdkleur */
  --groen-diep:#152722;
  --groen-zacht:#E4EBE7;
  --oker:#B8874B;         /* accent: alleen voor 'binnenkort' en focus */
  --wit:#FFFFFF;
  --papier:#F8F7F4;
  --lijn:#E2DFD8;
  --inkt:#1B1B19;
  --inkt-zacht:#5C5A54;

  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1080px;
  --gut:clamp(1.1rem,5vw,3rem);
  --rond:10px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--papier);
  color:var(--inkt);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:var(--groen);text-decoration:none}
a:hover{text-decoration:underline}

/* Eén zichtbare focusstijl voor alles wat bestuurbaar is. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--oker);
  outline-offset:2px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;
  background:var(--wit);padding:.6rem 1rem;z-index:10;
}
.skip:focus{left:.5rem;top:.5rem}


/* ---------- kop ---------- */

.kop{
  background:var(--groen);
  color:var(--wit);
  position:sticky;top:0;z-index:5;
}
.kop-binnen{
  max-width:var(--wrap);margin:0 auto;padding:.9rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.merk{color:var(--wit);display:block}
.merk:hover{text-decoration:none}
.merk-naam{
  display:block;font-size:1.15rem;font-weight:600;letter-spacing:.02em;
}
.merk-tagline{
  display:block;font-size:.78rem;color:var(--groen-zacht);
  line-height:1.35;margin-top:.1rem;
}

.talen{display:flex;gap:.2rem;flex:none}
.talen button{
  background:none;border:0;color:var(--groen-zacht);
  font:inherit;font-size:.85rem;padding:.35rem .55rem;
  cursor:pointer;border-radius:4px;
}
.talen button[aria-pressed="true"]{
  background:var(--groen-diep);color:var(--wit);font-weight:600;
}


/* ---------- hoofdruimte ---------- */

main{
  max-width:var(--wrap);margin:0 auto;
  padding:1.75rem var(--gut) 3rem;
}

h2{font-size:clamp(1.35rem,1.2rem + 1vw,1.85rem);line-height:1.25;font-weight:600}
h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem}

.intro{margin-bottom:1.75rem;max-width:56ch}
.intro p{color:var(--inkt-zacht);margin-top:.5rem}

.leeg{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:1.5rem;color:var(--inkt-zacht);
}


/* ---------- overzicht ---------- */

/* auto-fit, geen vast aantal kolommen: het raster past zich aan het
   aantal woningen aan zonder dat er ergens een aantal vastligt. */
.grid{
  display:grid;gap:1.1rem;
  grid-template-columns:1fr;
}
@media (min-width:620px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

.kaart{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);overflow:hidden;
  color:inherit;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s;
}
.kaart:hover{text-decoration:none;border-color:var(--groen);transform:translateY(-2px)}

.kaart-beeld{position:relative;aspect-ratio:4/3;background:var(--groen-zacht)}
.kaart-beeld img{width:100%;height:100%;object-fit:cover}

/* Aantal foto's rechtsboven, tegenover de statusbadge linksboven. Een
   halfdoorzichtige pil en geen witte: wit naast de witte statusbadge
   leest als twee even belangrijke labels, en dat is het niet. */
.kaart-fototeller{
  position:absolute;top:.7rem;right:.7rem;
  display:inline-flex;align-items:center;gap:.28rem;
  font-size:.75rem;font-weight:600;
  padding:.26rem .55rem;border-radius:999px;
  background:rgba(21,39,34,.6);color:var(--wit);
}
.kaart-fototeller svg{width:.95rem;height:.95rem}

/* Oppervlakte links, maandbedrag rechts, onderaan de foto.

   Het verloop is er niet voor de sier maar voor de leesbaarheid: witte
   tekst op een foto verdwijnt zodra er een lichte keuken achter staat.
   Het loopt naar volledig doorzichtig, zodat het onderin donker genoeg
   is zonder dat de foto zelf achter een waas verdwijnt. De text-shadow
   vangt het laatste geval op — een foto die ook onderin licht is. */
.kaart-strook{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem;
  padding:2rem .8rem .65rem;
  background:linear-gradient(to top,
    rgba(21,39,34,.88), rgba(21,39,34,.5) 45%, rgba(21,39,34,0));
  color:var(--wit);text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.kaart-opp{font-size:.85rem;font-weight:500}
.kaart-prijs{
  font-size:1.05rem;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.kaart-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.kaart-type{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--inkt-zacht);
}
.kaart-titel{font-size:1.1rem;font-weight:600;line-height:1.3}
.kaart-buurt{font-size:.9rem;color:var(--inkt-zacht)}
.kaart-beschikbaar{font-size:.88rem;margin-top:.45rem;font-weight:500}
.kaart-cta{
  font-size:.85rem;color:var(--groen);font-weight:600;margin-top:.7rem;
}
.kaart:hover .kaart-cta{text-decoration:underline}

.badge{
  position:absolute;top:.7rem;left:.7rem;
  font-size:.72rem;font-weight:600;letter-spacing:.03em;
  padding:.28rem .6rem;border-radius:999px;
  background:var(--wit);color:var(--groen);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.badge-binnenkort{background:var(--oker);color:var(--wit)}


/* ---------- detail ---------- */

/* De badge staat op de detailpagina in de tekstkolom, niet op de foto. */
body[data-weergave="detail"] .badge{position:static;box-shadow:none;
  display:inline-block;margin-top:.6rem;border:1px solid var(--lijn)}
body[data-weergave="detail"] .badge-binnenkort{border-color:var(--oker)}

.terug{
  display:inline-block;font-size:.9rem;margin-bottom:1.1rem;
  color:var(--inkt-zacht);
}

.detail-kop{margin-bottom:1.25rem}
.detail-type{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--inkt-zacht);
}
.detail-buurt{color:var(--inkt-zacht);margin-top:.15rem}

.galerij{margin-bottom:1.5rem}

/* Het spoor is de swipe. scroll-snap doet het werk dat je anders met
   touch-events zou naprogrammeren, en voelt daardoor precies zoals de
   rest van het toestel. De scrollbalk is verborgen: op de telefoon is
   hij er toch niet, en op een desktop leidt hij af van de duimen.
   scroll-behavior staat hier bewust NIET op smooth — dat zou een swipe
   vertragen. Het vloeiende scrollen zit in app.js, alleen bij een klik
   of een pijltjestoets. */
.galerij-spoor{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  border-radius:var(--rond);
  background:var(--groen-zacht);
  scrollbar-width:none;
}
.galerij-spoor::-webkit-scrollbar{display:none}

.dia{flex:0 0 100%;scroll-snap-align:start}
.dia-fig{margin:0}
.dia img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

/* Optioneel opschrift onder een foto. Over de foto heen zou hem
   onleesbaar maken bij een lichte opname; eronder in de bak kost een
   regel hoogte en is altijd te lezen. */
.dia-opschrift{
  padding:.5rem .7rem;font-size:.85rem;
  color:var(--inkt-zacht);background:var(--wit);
  border-top:1px solid var(--lijn);
}

/* Duimen scrollen horizontaal op de telefoon in plaats van te wikkelen. */
.galerij-strip{
  display:flex;gap:.5rem;margin-top:.5rem;
  overflow-x:auto;padding-bottom:.25rem;
  scrollbar-width:thin;
}
.duim{
  flex:none;width:76px;padding:0;cursor:pointer;
  background:none;border:2px solid transparent;border-radius:6px;
  overflow:hidden;line-height:0;
}
.duim img{width:100%;aspect-ratio:4/3;object-fit:cover}
.duim[aria-pressed="true"]{border-color:var(--groen)}

/* Plaatshoudermelding links, teller rechts. De teller staat als laatste
   in de flexrij en wordt met margin-left:auto naar rechts geduwd, zodat
   hij ook rechts staat als de melding er niet is. */
.galerij-onder{
  display:flex;align-items:baseline;gap:1rem;
  margin-top:.45rem;
  font-size:.8rem;color:var(--inkt-zacht);
}
.galerij-teller{margin-left:auto;flex:none}
.galerij-note{min-width:0}

.gegevens{
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:.35rem 1rem;margin-bottom:1.5rem;
}
.gegeven{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--lijn);
}
.gegeven:last-child{border-bottom:0}
.gegeven dt{color:var(--inkt-zacht);font-size:.92rem}
.gegeven dd{font-weight:500;text-align:right}

.kenmerken{margin-bottom:1.5rem}
.kenmerken ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.kenmerken li{
  background:var(--groen-zacht);color:var(--groen-diep);
  font-size:.85rem;padding:.3rem .7rem;border-radius:999px;
}

/* Lopende tekst, geen opsomming. 62ch omdat een regel langer dan
   ongeveer vijfenzestig tekens op een breed scherm lastig te volgen is:
   het oog moet terug naar het begin van de volgende regel en raakt kwijt
   waar dat is. */
.omschrijving{margin-bottom:1.75rem;max-width:62ch}
.omschrijving p{color:var(--inkt-zacht);line-height:1.65}
.omschrijving p + p{margin-top:.85rem}


/* ---------- in de buurt ---------- */

/* auto-fit met een minimum van 19rem: op een telefoon één kolom, op een
   breder scherm zoveel kolommen als er passen. Geen media query nodig en
   dus ook geen breekpunt dat bij een zevende voorziening niet meer klopt.

   19rem en niet 13rem, want bij 13rem paste er een vierde kolom in die
   'Station Arnhem Presikhaaf' niet meer kon tonen. Liever drie kolommen
   met hele namen dan vier met puntjes. */
.omgeving{margin-bottom:2rem}
.omgeving ul{
  list-style:none;display:grid;gap:.1rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--rond);padding:.35rem .5rem;
}
.omgeving li{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .5rem;min-width:0;
}

/* De iconen zijn de enige plek op de pagina waar de hoofdkleur op klein
   formaat terugkomt. Ze mogen opvallen, maar niet zwaarder wegen dan de
   tekst ernaast — vandaar de gedempte tint en niet het volle groen. */
.omgeving svg{
  width:1.35rem;height:1.35rem;flex:none;
  color:var(--groen);opacity:.75;
}

/* Namen breken af op een nieuwe regel in plaats van op een beletselteken.
   Een afgekapte naam is erger dan een regel die twee hoog wordt: bij
   'Winkelcentrum Pre…' moet de lezer raden wat er stond, en dat is precies
   wat dit blok zou moeten wegnemen. */
.omgeving-naam{min-width:0;line-height:1.35}

/* De tijd rechts uitlijnen zodat de kolom te scannen is zonder te lezen.
   Het reiswijze-icoon staat hier kleiner dan het plaats-icoon links: het
   hoort bij het getal, niet naast de naam. */
.omgeving-tijd{
  margin-left:auto;flex:none;padding-left:.75rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.85rem;color:var(--inkt-zacht);font-variant-numeric:tabular-nums;
}
.omgeving-tijd svg{width:1.05rem;height:1.05rem;opacity:.6}


/* Zichtbaar voor een screenreader, niet voor het oog. Gebruikt voor het
   woord 'lopen' of 'fietsen', dat op het scherm een icoon is. clip-path
   en niet display:none — dat laatste haalt het uit de voorleesvolgorde. */
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}


/* ---------- contact ---------- */

.contact{
  background:var(--groen);color:var(--wit);
  border-radius:var(--rond);padding:1.5rem;
  margin-top:2.5rem;
}
.contact h3{color:var(--wit)}
.contact p{color:var(--groen-zacht);max-width:52ch}

.mailknop{
  display:inline-block;margin-top:1rem;
  background:var(--wit);color:var(--groen-diep);
  font-weight:600;padding:.7rem 1.3rem;border-radius:var(--rond);
}
.mailknop:hover{text-decoration:none;background:var(--groen-zacht)}


/* ---------- voet ---------- */

.voet{
  max-width:var(--wrap);margin:0 auto;
  padding:1.5rem var(--gut) 2.5rem;
  border-top:1px solid var(--lijn);
  font-size:.85rem;color:var(--inkt-zacht);
}
.voet-klein{margin-top:.3rem;font-size:.8rem}


/* ---------- terugval zonder JavaScript ---------- */

/* Stond eerst als style-attribuut in de noscript. Hier omdat de
   Content-Security-Policy in _headers geen inline stijl toestaat, en
   omdat CSS wél laadt als JavaScript uitstaat. */
.noscript-melding{padding:1.5rem;text-align:center}


/* ---------- voorkeuren respecteren ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---------- buurtkaart ---------- */

/* Eén afbeelding, op de server samengesteld. Geen kaartbibliotheek en geen
   ingesloten kaartdienst: dat zou verzoeken naar buiten betekenen en
   daarmee de cookievrije opzet van deze site kosten. */
.kaartblok{margin-bottom:2rem}
.kaartblok-fig{margin:0}
.kaartblok img{
  width:100%;height:auto;display:block;
  border:1px solid var(--lijn);border-radius:var(--rond);
  background:var(--groen-zacht);
}
.kaartblok-note{
  margin-top:.5rem;font-size:.8rem;color:var(--inkt-zacht);
  max-width:62ch;
}