/* ============================================================
   VACATURES — het venster

   Een vacature heeft geen eigen pagina: ze opent in een venster op
   /vacatures/, gevuld door cms-collections.js uit het item in het
   portaal. Zo kan de klant er zelf een bij zetten zonder pagina.

   Het venster is gebouwd als de hero van een projectpagina: links
   de foto over de volle hoogte, rechts het merkje, de titel, de
   kleurlijn met de naam van de stiel erboven, de samenvatting en
   de tekst. Dezelfde taal als de rest: de hoek van .rea-vlak, het
   gouden lijntje, .mini met het merkje, .knop en .knop-leeg.

   --kleur en --kleur-label komen uit cms-collections.js, per stiel
   van de vacature: de naam op de lijn en de punten bij de redenen
   staan in die kleur. Zonder stiel valt alles terug op indigo.
   ============================================================ */
.vac-venster{
  --lucht:clamp(28px,3.4vw,52px);
  /* max-width:none: de browser zet op een modaal venster zelf een
     max-width van 100% min 2em, en die knijpt 100vw op een telefoon. */
  width:min(1140px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px);
  padding:0; margin:auto; border:0; overflow:hidden;
  /* Een flexkolom geeft .vac-raam een echte hoogte binnen de
     max-height, en dan scrolt alleen de tekstkolom, niet de foto. */
  display:flex; flex-direction:column;
  background:var(--papier); color:var(--inkt);
  border-radius:var(--rond-l) 0 var(--rond-l) 0;
  box-shadow:0 30px 80px rgba(20,21,60,.28);
  opacity:0; translate:0 18px;
  transition:opacity .38s var(--ease), translate .48s var(--ease-uit), display .4s allow-discrete, overlay .4s allow-discrete;
}
/* display:flex hierboven zou het gesloten venster tonen; dicht is dicht. */
.vac-venster:not([open]){display:none}
.vac-venster[open]{opacity:1; translate:0 0}
@starting-style{ .vac-venster[open]{opacity:0; translate:0 18px} }
.vac-venster::backdrop{background:rgba(20,21,60,.55); backdrop-filter:blur(3px)}
/* de pagina erachter staat stil zolang het venster open is */
html:has(.vac-venster[open]){overflow:hidden}

.vac-venster .vac-raam{flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:minmax(0,1fr)}
.vac-venster .vac-beeld{margin:0; position:relative; overflow:hidden; min-height:min(560px,calc(100dvh - 32px));
  background:var(--grijs-100)}
.vac-venster .vac-beeld img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* De tekstkolom scrolt zelf. Bij een korte vacature staat de inhoud
   verticaal in het midden (margin:auto); bij een lange begint ze
   bovenaan en scrolt ze. */
.vac-venster .vac-tekst{overflow:auto; min-height:0; overscroll-behavior:contain;
  display:flex; padding:var(--lucht) clamp(28px,3.8vw,60px)}
.vac-venster .vac-inhoud{margin:auto 0; width:100%}
.vac-venster .mini{display:inline-flex; margin-bottom:clamp(14px,1.8vw,22px)}
.vac-venster h2{margin:0; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.9rem,3.6vw,3.1rem); letter-spacing:-.04em; line-height:.98;
  text-wrap:balance}
/* De lijn met de naam van de stiel erboven, zoals op een projectpagina.
   De marge erboven is de ruimte voor het label. */
.vac-venster .kleurlijn{height:clamp(9px,1vw,12px); width:min(300px,72%);
  margin-top:clamp(58px,5vw,70px)}
.vac-venster .vac-onder{margin:clamp(20px,2.4vw,28px) 0 0; max-width:52ch;
  font-size:clamp(1.02rem,1.3vw,1.14rem); line-height:1.62; color:var(--indigo-900)}
.vac-venster .vac-lijn{display:block; width:34px; height:5px; margin:clamp(20px,2.4vw,28px) 0;
  border-radius:3px 0 3px 0; background:var(--goud)}
.vac-venster .vac-body p{margin:0 0 1em; max-width:60ch; line-height:1.66; color:var(--grijs-900)}
.vac-venster .vac-body p:last-child{margin-bottom:0}

/* Wat werken bij Beco is, uit de slots van de pagina: vier redenen in
   twee kolommen, elk met het merkvierkantje in de kleur van de stiel.
   Het vierkantje is het teken van de site (linksboven en rechtsonder
   rond, de andere twee hoeken scherp): hetzelfde als in het menu en
   op de stappen, zie .mega-groep en .stap .nr in basis.css. */
.vac-venster .vac-redenen{margin-top:clamp(22px,2.6vw,32px); padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--grijs-200)}
.vac-venster .vac-redenen .mini{margin-bottom:12px}
.vac-venster .vac-redenen ul{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px}
.vac-venster .vac-redenen li,
.vac-lijst li{position:relative; padding-left:22px;
  font-weight:600; font-size:14.5px; line-height:1.4; color:var(--inkt)}
.vac-venster .vac-redenen li::before,
.vac-lijst li::before{content:""; position:absolute; left:0; top:.32em;
  width:11px; height:11px; border-radius:4px 0 4px 0; background:var(--kleur,var(--indigo))}

.vac-venster .vac-daden{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;
  margin-top:clamp(24px,2.8vw,34px)}
.vac-venster .vac-plaats{margin:clamp(18px,2vw,24px) 0 0; max-width:60ch;
  font-size:13.5px; line-height:1.55; color:var(--grijs-600)}

/* De sluitknop: rechtsboven, in de stijl van de pijltjes. Op het
   papier is hij indigo; op de foto (telefoon) doorschijnend. */
.vac-venster .vac-sluit{position:absolute; top:16px; right:16px; width:44px; height:44px;
  border-radius:var(--pil); border:1px solid var(--indigo); background:var(--indigo);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease)}
.vac-venster .vac-sluit:hover{background:var(--indigo-900); transform:rotate(90deg)}
.vac-venster .vac-sluit svg{width:16px; height:16px}

/* Een kaart die een venster opent, voelt als een knop. */
[data-cms-popup] .rea-kaart{cursor:pointer}

@media(max-width:820px){
  .vac-venster{width:100vw; max-height:100dvh; margin:auto 0 0; border-radius:var(--rond-l) var(--rond-l) 0 0}
  /* Op een telefoon scrolt het hele venster: foto bovenaan, tekst eronder. */
  .vac-venster .vac-raam{display:block; overflow:auto; overscroll-behavior:contain}
  .vac-venster .vac-beeld{aspect-ratio:4/3; min-height:0}
  .vac-venster .vac-tekst{overflow:visible; display:block; padding:26px 22px 34px}
  .vac-venster h2{text-wrap:pretty}
  .vac-venster .kleurlijn{margin-top:50px}
  .vac-venster .vac-redenen ul{grid-template-columns:1fr}
  .vac-venster .vac-sluit{border-color:rgba(255,255,255,.55); background:rgba(20,21,60,.55); backdrop-filter:blur(4px)}
  .vac-venster .vac-sluit:hover{background:var(--indigo)}
}
@media(prefers-reduced-motion:reduce){
  .vac-venster{transition:none; translate:0 0}
  .vac-venster .vac-sluit:hover{transform:none}
}


/* ============================================================
   DE VACATUREPAGINA (/vacatures/<slug>/)

   Gebouwd uit de blokken van de site: de hero van een projectpagina,
   .feiten en .volle-band van over/home, .rea-raster van het
   overzicht, .daadvlak.goud van de home. Hier alleen wat er nog niet
   was: de functie naast het korte overzicht, de fotostrook van het
   werk, en de twee praktische alinea's onder het gouden vlak.
   ============================================================ */
.vac-lijst{list-style:none; margin:clamp(14px,1.6vw,20px) 0 0; padding:0;
  display:grid; gap:9px}
.verhaal-tekst h3{margin:clamp(24px,2.8vw,34px) 0 0; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.4rem); letter-spacing:-.03em; color:var(--indigo-900)}

/* De functie links, het korte overzicht rechts: stiel, standplaats,
   werven, hoe solliciteren. Elk met het merkvierkantje in de stielkleur. */
.vac-job{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(28px,5vw,80px); align-items:start; margin-top:clamp(28px,4vw,48px)}
@media(max-width:820px){ .vac-job{grid-template-columns:1fr} }
.vac-kort{margin:0; padding:clamp(22px,2.6vw,32px); background:var(--grijs-100);
  border-radius:var(--rond-l) 0 var(--rond-l) 0; display:grid; gap:clamp(14px,1.6vw,20px)}
.vac-kort > div{position:relative; padding-left:24px}
.vac-kort > div::before{content:""; position:absolute; left:0; top:.28em;
  width:11px; height:11px; border-radius:4px 0 4px 0; background:var(--kleur,var(--indigo))}
.vac-kort dt{font-family:var(--tekst); font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--indigo)}
.vac-kort dd{margin:4px 0 0; font-size:15px; line-height:1.5; color:var(--inkt)}
.vac-kort dd a{color:var(--indigo); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}
/* de stielkleur van de pagina voor de vierkantjes: zelfde bron als de hero */
main[data-cms-waarde-category="vloer"]{--kleur:var(--vloer)}
main[data-cms-waarde-category="grond"]{--kleur:var(--grond)}
main[data-cms-waarde-category="afbraak"]{--kleur:var(--afbraak)}
main[data-cms-waarde-category="timmer"]{--kleur:var(--timmer)}
main[data-cms-waarde-category="dak"]{--kleur:var(--dak)}
main[data-cms-waarde-category="bouw"]{--kleur:var(--bouw)}

/* Drie foto's van het werk, elk met de hoek van de site. */
.vac-strook{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,28px); margin-top:clamp(28px,4vw,48px)}
@media(max-width:700px){ .vac-strook{grid-template-columns:1fr} }
.vac-strook figure{margin:0}
.vac-strook .vlak{display:block; overflow:hidden; background:var(--grijs-100);
  aspect-ratio:4/3; border-radius:var(--rond-l) 0 var(--rond-l) 0}
.vac-strook img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.6s var(--ease)}
.vac-strook figure:hover img{transform:scale(1.04)}

/* De twee praktische alinea's onder het gouden vlak. */
.vac-praktisch{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,48px); margin-top:clamp(22px,2.8vw,36px)}
@media(max-width:700px){ .vac-praktisch{grid-template-columns:1fr} }
.vac-praktisch p{margin:0; font-size:14.5px; line-height:1.6; color:var(--grijs-600); max-width:52ch}
.vac-praktisch a{color:var(--indigo); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}

/* ══ WAT U DOET, EN WAT WIJ VRAGEN ═══════════════════════════
   De voorwaarden van de vacature, maar niet als de tabel van een
   vacaturesite. Twee vlakken naast elkaar die samen de afspraak
   vormen: links op papier wat u doet, met het merkvierkantje in de
   kleur van de stiel; rechts in indigo wat wij vragen, met het
   vierkantje in goud, en onderaan in één alinea wie hier past.
   Dezelfde hoek en dezelfde kleuren als het gouden en het indigo
   daadvlak op de homepage.                                      */
.vac-deal{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(18px,2.4vw,32px); align-items:stretch; margin-top:clamp(28px,4vw,48px)}
@media(max-width:860px){ .vac-deal{grid-template-columns:1fr} }
.vac-deal > div{padding:clamp(24px,3vw,44px); border-radius:var(--rond-l) 0 var(--rond-l) 0}
.vac-doen{background:var(--grijs-100)}
.vac-vragen{background:var(--indigo); color:#fff}
.vac-deal .mini{display:inline-flex; margin-bottom:clamp(16px,2vw,24px)}
.vac-vragen .mini{color:var(--goud)}
.vac-deal h3{margin:0 0 clamp(16px,2vw,24px); font-family:var(--disp); font-weight:600;
  font-size:clamp(1.35rem,2.1vw,1.8rem); letter-spacing:-.035em; line-height:1.1; text-wrap:balance}
.vac-vragen h3{color:#fff}
/* de lijsten: het merkvierkantje, in twee kolommen zodra er plaats is */
.vac-deal ul{list-style:none; margin:0; padding:0; display:grid; gap:11px 22px}
.vac-doen ul{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){ .vac-doen ul{grid-template-columns:1fr} }
.vac-deal li{position:relative; padding-left:22px; font-size:14.5px; line-height:1.5}
.vac-doen li{font-weight:600; color:var(--inkt)}
.vac-vragen li{color:rgba(255,255,255,.92)}
.vac-deal li::before{content:""; position:absolute; left:0; top:.42em;
  width:11px; height:11px; border-radius:4px 0 4px 0}
.vac-doen li::before{background:var(--kleur,var(--indigo))}
.vac-vragen li::before{background:var(--goud)}
/* wie hier past: één alinea, geen lijstje */
.vac-vragen .vac-mens{margin:clamp(20px,2.4vw,30px) 0 0; padding-top:clamp(16px,2vw,22px);
  border-top:1px solid rgba(255,255,255,.18); font-size:14.5px; line-height:1.62;
  color:rgba(255,255,255,.8)}
.vac-vragen .vac-mens b{display:block; margin-bottom:6px; font-weight:600; color:#fff}