/* ============================================================================
   Jobsons Interieur — feuille unique.
   Squelette d'origine : _squelettes/grille-annuaire (grille dense en accueil,
   liste a filets en rubriek, deux colonnes asymetriques en artikel).
   Habillage propre au site : palette porselein/Delft, vocabulaire de classes
   « pgr- » (plattegrond : plan d'amenagement).
   Aucune requete externe, piles systeme uniquement.
   ========================================================================== */

:root {
  /* --- vlakken (surfaces) --- */
  --pgr-vloer:        #ECF0F6;  /* fond de page, porcelaine froide */
  --pgr-blad:         #FFFFFF;  /* fond des blocs */
  --pgr-blad-diep:    #DDE4EE;  /* aplats secondaires */
  --pgr-blad-warm:    #F6F1EA;  /* aplat chaud, encarts */

  /* --- inkt (texte) --- */
  --pgr-inkt:         #141C2B;
  --pgr-inkt-zacht:   #4C5766;
  --pgr-inkt-omkeer:  #F2F6FB;

  /* --- lijnen --- */
  --pgr-lijn:         #C6D0DE;
  --pgr-lijn-fijn:    #E1E7F0;

  /* --- accenten --- */
  --pgr-delft:        #1B4C8C;  /* bleu de Delft, identite */
  --pgr-delft-diep:   #123563;
  --pgr-delft-waas:   #E2EAF6;
  --pgr-koper:        #B4562F;  /* cuivre, seconde teinte */
  --pgr-koper-diep:   #8C4022;
  --pgr-koper-waas:   #F6E7DF;

  /* --- letters --- */
  --pgr-kop:   Seravek, Corbel, "Gill Sans Nova", Candara, "Segoe UI", "Noto Sans", sans-serif;
  --pgr-tekst: "Sitka Text", Constantia, Charter, "Bitstream Charter", Cambria, Georgia, serif;
  --pgr-maat:  "JetBrains Mono", "Roboto Mono", "Noto Sans Mono", "Ubuntu Mono", ui-monospace, monospace;

  /* --- ritme --- */
  --pgr-breedte:  1220px;   /* largeur du conteneur unique */
  --pgr-meetlat:  67ch;     /* largeur de lecture */
  --pgr-stap:     clamp(1.5rem, 3.4vw, 2.9rem);
  --pgr-raster:   250px;    /* densite de la grille de vignettes */
  --pgr-rond:     14px;     /* photos aux bords arrondis */
  --pgr-rond-kln: 8px;
  --pgr-schaduw:  0 1px 2px rgba(18, 28, 43, .06), 0 8px 22px rgba(18, 28, 43, .07);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pgr-vloer);
  color: var(--pgr-inkt);
  font-family: var(--pgr-tekst);
  font-size: 17.5px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--pgr-kop);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--pgr-inkt);
}

h1 { font-size: clamp(1.95rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.12rem; }

p { margin: 0 0 1.05em; }

a { color: var(--pgr-delft); text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { color: var(--pgr-koper-diep); }

:focus-visible {
  outline: 3px solid var(--pgr-koper);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- drempel */
.pgr-drempel {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--pgr-delft); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--pgr-rond-kln) 0;
  font-family: var(--pgr-kop); font-size: .92rem;
}
.pgr-drempel:focus { left: 0; }

/* ----------------------------------------------------------------- travee */
.pgr-travee {
  width: 100%;
  max-width: var(--pgr-breedte);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3.6vw, 2.4rem);
}

/* ---------------------------------------------------------------- fronton */
.pgr-fronton {
  background: var(--pgr-blad);
  border-bottom: 1px solid var(--pgr-lijn);
}
.pgr-fronton__band {
  height: 5px;
  background: linear-gradient(90deg,
    var(--pgr-delft) 0 42%, var(--pgr-koper) 42% 58%, var(--pgr-delft-diep) 58% 100%);
}
.pgr-fronton__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.15rem;
  padding-block: .6rem;
}
.pgr-enseigne {
  font-family: var(--pgr-kop);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pgr-inkt);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.pgr-enseigne__merk { color: var(--pgr-delft); }
.pgr-enseigne__staaf {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--pgr-koper);
  display: inline-block;
}
.pgr-devise {
  margin: 0;
  font-family: var(--pgr-maat);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pgr-inkt-zacht);
}
.pgr-parcours { margin-left: auto; }
.pgr-parcours ul {
  display: flex; flex-wrap: wrap; gap: .15rem .35rem;
  list-style: none; margin: 0; padding: 0;
}
.pgr-parcours__lijn {
  display: inline-block;
  padding: .28rem .52rem;
  border-radius: 999px;
  font-family: var(--pgr-kop);
  font-size: .88rem;
  font-weight: 600;
  color: var(--pgr-inkt-zacht);
  text-decoration: none;
}
.pgr-parcours__lijn:hover { background: var(--pgr-delft-waas); color: var(--pgr-delft-diep); }
.pgr-parcours__lijn[aria-current] { background: var(--pgr-delft); color: #fff; }

/* ------------------------------------------------------------------ erker */
/* Le hero est une BANDE, jamais un ecran : les rubrieken doivent rester
   visibles sans derouler. */
.pgr-erker {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--pgr-delft-diep);
  border-bottom: 1px solid var(--pgr-delft-diep);
}
.pgr-erker__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pgr-erker__waas {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(15, 33, 63, .90) 0 38%, rgba(18, 42, 76, .70) 100%);
}
.pgr-erker__kern {
  padding-block: clamp(1.2rem, 2.4vw, 1.75rem);
  color: var(--pgr-inkt-omkeer);
  display: grid;
  gap: .72rem;
  grid-template-columns: minmax(0, 1fr);
}
.pgr-erker__kern h1 { color: #fff; max-width: 21ch; }
.pgr-erker__inleiding {
  margin: 0;
  max-width: 62ch;
  font-size: 1.06rem;
  color: #DCE6F5;
}
.pgr-erker__opschrift {
  font-family: var(--pgr-maat);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9FC0E8;
  margin: 0;
}
.pgr-peiling {
  display: flex; flex-wrap: wrap; gap: .5rem 2.2rem;
  list-style: none; margin: 0; padding: 0;
}
.pgr-peiling__post { display: flex; align-items: baseline; gap: .5rem; }
.pgr-peiling__cijfer {
  font-family: var(--pgr-maat);
  font-size: 1.18rem;
  font-weight: 700;
  color: #F0C9B4;
}
.pgr-peiling__naam {
  font-family: var(--pgr-kop);
  font-size: .84rem;
  letter-spacing: .04em;
  color: #C3D5EC;
}

/* ------------------------------------------------------------- vertrekken */
/* Grille des rubrieken : premiere rangee visible sans derouler. */
.pgr-vertrekken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pgr-vertrek {
  position: relative;
  background: var(--pgr-blad);
  border: 1px solid var(--pgr-lijn-fijn);
  border-radius: var(--pgr-rond);
  overflow: hidden;
  box-shadow: var(--pgr-schaduw);
}
.pgr-vertrek__lijst { margin: 0; }
.pgr-vertrek__lijst img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.pgr-vertrek__kern { padding: .68rem .8rem .8rem; }
.pgr-vertrek__naam {
  font-family: var(--pgr-kop);
  font-size: 1.03rem;
  font-weight: 700;
  margin: 0 0 .18rem;
}
.pgr-vertrek__naam a { color: var(--pgr-inkt); text-decoration: none; }
.pgr-vertrek__naam a:hover { color: var(--pgr-delft); text-decoration: underline; }
.pgr-vertrek__telling {
  margin: 0;
  font-family: var(--pgr-maat);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pgr-inkt-zacht);
}

/* ------------------------------------------------------------------- rail */
.pgr-rail { padding-block: var(--pgr-stap); }
.pgr-rail--nauw { padding-block: calc(var(--pgr-stap) * .5); }
.pgr-rail__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin-bottom: .8rem;
  padding-bottom: .42rem;
  border-bottom: 2px solid var(--pgr-inkt);
}
.pgr-rail__telling {
  font-family: var(--pgr-maat);
  font-size: .73rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pgr-inkt-zacht);
}
.pgr-verwijzing {
  margin-left: auto;
  font-family: var(--pgr-kop);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.pgr-verwijzing:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- wand */
/* Le mur de vignettes : dense, photos arrondies. */
.pgr-wand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pgr-raster), 1fr));
  gap: 1.05rem;
}
.pgr-wand--breed { --pgr-raster: 300px; }

.pgr-nis {
  display: flex;
  flex-direction: column;
  background: var(--pgr-blad);
  border: 1px solid var(--pgr-lijn-fijn);
  border-radius: var(--pgr-rond);
  overflow: hidden;
  box-shadow: var(--pgr-schaduw);
}
.pgr-nis__lijst { margin: 0; position: relative; }
.pgr-nis__lijst img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.pgr-nis__kern {
  padding: .7rem .85rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .34rem;
  flex: 1;
}
.pgr-nis__regie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.pgr-staal {
  font-family: var(--pgr-maat);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pgr-delft-diep);
  background: var(--pgr-delft-waas);
  border-radius: 999px;
  padding: .16rem .52rem;
  text-decoration: none;
}
a.pgr-staal:hover { background: var(--pgr-delft); color: #fff; }
.pgr-staal--koper { color: var(--pgr-koper-diep); background: var(--pgr-koper-waas); }
.pgr-datum {
  font-family: var(--pgr-maat);
  font-size: .72rem;
  color: var(--pgr-inkt-zacht);
  letter-spacing: .02em;
}
.pgr-nis__titel {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
}
.pgr-nis__titel a { color: var(--pgr-inkt); text-decoration: none; }
.pgr-nis__titel a:hover { color: var(--pgr-delft); text-decoration: underline; }
.pgr-nis__samenvatting {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--pgr-inkt-zacht);
}

/* la premiere nis d'une bande est mise en avant */
.pgr-nis--uitgelicht { grid-column: span 2; }
.pgr-nis--uitgelicht .pgr-nis__lijst img { aspect-ratio: 16 / 9; }
.pgr-nis--uitgelicht .pgr-nis__titel { font-size: 1.42rem; }
.pgr-nis--uitgelicht .pgr-nis__samenvatting { font-size: 1rem; }
@media (max-width: 680px) { .pgr-nis--uitgelicht { grid-column: span 1; } }

/* --------------------------------------------------------------- register */
/* Liste dense a filets : le rythme propre aux pages de rubriek. */
.pgr-register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pgr-lijn); }
.pgr-regel {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 210px;
  gap: 1.1rem;
  align-items: start;
  padding-block: .95rem;
  border-bottom: 1px solid var(--pgr-lijn-fijn);
}
.pgr-regel__lijst { margin: 0; }
.pgr-regel__lijst img {
  width: 112px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--pgr-rond-kln);
}
.pgr-regel__titel { font-size: 1.08rem; margin: 0 0 .25rem; }
.pgr-regel__titel a { color: var(--pgr-inkt); text-decoration: none; }
.pgr-regel__titel a:hover { color: var(--pgr-delft); text-decoration: underline; }
.pgr-regel__samenvatting { margin: 0; font-size: .94rem; color: var(--pgr-inkt-zacht); }
.pgr-regel__kenmerken { margin: 0; display: grid; gap: .28rem; }
.pgr-kenmerk { display: flex; gap: .5rem; font-size: .82rem; }
.pgr-kenmerk dt {
  font-family: var(--pgr-maat);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pgr-inkt-zacht);
  min-width: 82px;
}
.pgr-kenmerk dd { margin: 0; font-family: var(--pgr-kop); font-weight: 600; }
@media (max-width: 900px) {
  .pgr-regel { grid-template-columns: 92px minmax(0, 1fr); }
  .pgr-regel__lijst img { width: 92px; }
  .pgr-regel__kenmerken { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: max-content; gap: 1rem; overflow-x: auto; }
}

/* ---------------------------------------------------------------- kruimel */
.pgr-kruimel {
  padding-block: .8rem;
  font-family: var(--pgr-maat);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--pgr-inkt-zacht);
}
.pgr-kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: .42rem; margin: 0; padding: 0; }
.pgr-kruimel li::after { content: "›"; margin-left: .42rem; color: var(--pgr-lijn); }
.pgr-kruimel li:last-child::after { content: ""; }
.pgr-kruimel a { color: var(--pgr-inkt-zacht); }

/* ------------------------------------------------------------------ blad */
/* Page de detail : deux colonnes asymetriques, rail collant a droite. */
.pgr-vel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: start;
  padding-bottom: var(--pgr-stap);
}
@media (max-width: 960px) { .pgr-vel { grid-template-columns: minmax(0, 1fr); } }

.pgr-vel__tekst { max-width: var(--pgr-meetlat); }
.pgr-vel__tekst h2 {
  margin: 1.9rem 0 .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--pgr-lijn-fijn);
}
.pgr-vel__tekst h3 { margin: 1.3rem 0 .4rem; font-size: 1.04rem; color: var(--pgr-delft-diep); }
.pgr-vel__tekst ul, .pgr-vel__tekst ol { margin: 0 0 1.1em; padding-left: 1.15rem; }
.pgr-vel__tekst li { margin-bottom: .34em; }

.pgr-kop-artikel { padding-block: .4rem 1.2rem; }
.pgr-kop-artikel h1 { max-width: 22ch; margin-bottom: .55rem; }
.pgr-inleiding {
  font-size: 1.14rem;
  line-height: 1.62;
  color: var(--pgr-inkt-zacht);
  max-width: 60ch;
  margin-bottom: .8rem;
}
.pgr-regie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  padding-bottom: .8rem;
}

.pgr-lijst-groot { margin: 0 0 1.4rem; }
.pgr-lijst-groot img {
  width: 100%;
  aspect-ratio: 12 / 5;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--pgr-rond);
}
.pgr-onderschrift {
  margin: .48rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--pgr-inkt-zacht);
  border-left: 3px solid var(--pgr-koper);
  padding-left: .65rem;
}
.pgr-lijst-half { margin: 1.4rem 0; }
.pgr-lijst-half img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--pgr-rond);
}

/* rail */
.pgr-rooster {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 1rem;
}
.pgr-schouw {
  background: var(--pgr-blad);
  border: 1px solid var(--pgr-lijn);
  border-radius: var(--pgr-rond);
  padding: .9rem 1rem 1rem;
}
.pgr-schouw h2, .pgr-schouw h3 {
  font-size: .78rem;
  font-family: var(--pgr-maat);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pgr-inkt-zacht);
  margin: 0 0 .6rem;
  border: 0;
  padding: 0;
}
.pgr-schouw dl { margin: 0; display: grid; gap: .45rem; }
.pgr-schouw__regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .5rem;
  padding-bottom: .42rem;
  border-bottom: 1px dotted var(--pgr-lijn);
  font-size: .88rem;
}
.pgr-schouw__regel dt { color: var(--pgr-inkt-zacht); }
.pgr-schouw__regel dd { margin: 0; font-family: var(--pgr-kop); font-weight: 600; }
.pgr-schouw ol { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.pgr-schouw li { margin-bottom: .3rem; }

/* tableau large */
.pgr-tafel-schuif { overflow-x: auto; margin: 1.2rem 0 1.5rem; border: 1px solid var(--pgr-lijn); border-radius: var(--pgr-rond-kln); }
.pgr-tafel-schuif table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .9rem; }
.pgr-tafel-schuif caption {
  text-align: left;
  padding: .6rem .8rem;
  font-family: var(--pgr-maat);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pgr-inkt-zacht);
  background: var(--pgr-blad-diep);
}
.pgr-tafel-schuif th, .pgr-tafel-schuif td { padding: .52rem .8rem; text-align: left; border-top: 1px solid var(--pgr-lijn-fijn); }
.pgr-tafel-schuif thead th { background: var(--pgr-blad); font-family: var(--pgr-kop); font-size: .84rem; }
.pgr-tafel-schuif tbody tr:nth-child(even) { background: #F7F9FC; }

/* --------------------------------------------------------------- lichtval */
.pgr-lichtval {
  background: var(--pgr-blad-warm);
  border: 1px solid var(--pgr-koper-waas);
  border-left: 5px solid var(--pgr-koper);
  border-radius: var(--pgr-rond-kln);
  padding: 1rem 1.15rem;
  margin: 1.6rem 0;
}
.pgr-lichtval h2, .pgr-lichtval h3 { border: 0; padding: 0; margin: 0 0 .45rem; font-size: 1.02rem; }
.pgr-lichtval p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- hoek */
.pgr-hoek { padding-block: var(--pgr-stap); border-top: 1px solid var(--pgr-lijn); }

/* ------------------------------------------------------------------ plint */
.pgr-plint {
  background: var(--pgr-inkt);
  color: #C3D0E2;
  margin-top: var(--pgr-stap);
  border-top: 5px solid var(--pgr-koper);
}
.pgr-plint__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 1.4rem;
  padding-block: 1.8rem 1.2rem;
}
.pgr-plint h2 {
  font-size: .76rem;
  font-family: var(--pgr-maat);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8FAACB;
  margin: 0 0 .55rem;
}
.pgr-plint ul { list-style: none; margin: 0; padding: 0; }
.pgr-plint li { margin-bottom: .3rem; font-size: .93rem; }
.pgr-plint a { color: #E4EBF5; text-decoration: none; }
.pgr-plint a:hover { color: #F0C9B4; text-decoration: underline; }
.pgr-plint p { font-size: .92rem; color: #A9BBD2; }
.pgr-plint__voet {
  border-top: 1px solid #2A3648;
  padding-block: .85rem 1.4rem;
  font-family: var(--pgr-maat);
  font-size: .74rem;
  letter-spacing: .04em;
  color: #8FAACB;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}

/* ------------------------------------------------------------ pagina 404 */
.pgr-verdwaald { padding-block: clamp(2.4rem, 7vw, 5rem); text-align: left; }
.pgr-verdwaald h1 { margin-bottom: .7rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}