/*
 * Bouwdam — nieuwe paginaopmaak (overdracht 04-11-2026, ontwerpen/over-bouwdam.html en werken-bij.html).
 * Alleen geladen op pagina's met een laag o_* (bdm_pagina_nieuw in inc/bouwdam-projecten.php), zodat
 * bestaande pagina's niet veranderen. Maten 1-op-1 uit de inline stijlen van het ontwerp; de ruimte
 * tussen lagen blijft die van de site (132px).
 */

[data-bdm] .bdm-pn {
  --pn-kop: #082626;
  --pn-tekst: #616666;
  --pn-tekst-zand: #4A4F4D;
  --pn-oranje: #EF7920;
  --pn-oranje-donker: #D9661A;
  --pn-zand: #F3EBE1;
  --pn-bruin: #86594E;
  --pn-vlak: #E7E7E4;
  --pn-lijn: rgba(15, 20, 18, .1);
  font-family: var(--bdm-font, 'Plus Jakarta Sans', system-ui, sans-serif);
}

/* ---- Bouwstenen ---- */
[data-bdm] .bdm-pn-twee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; }
[data-bdm] .bdm-pn-twee.is--boven { align-items: start; }
[data-bdm] .bdm-pn-twee.is--rek { align-items: stretch; }
[data-bdm] .bdm-pn-h2,
[data-bdm] .bdm-pn-tekst h2 { margin: 0; font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -1.8px; color: var(--pn-kop); overflow-wrap: break-word; }
[data-bdm] .bdm-pn-tekst { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
[data-bdm] .bdm-pn-tekst > * { margin: 0; }
[data-bdm] .bdm-pn-tekst p,
[data-bdm] .bdm-pn-tekst li { font-size: 18px; line-height: 30.6px; letter-spacing: -0.3px; color: var(--pn-tekst); }
[data-bdm] .bdm-pn-tekst.is--klein { gap: 12px; }
[data-bdm] .bdm-pn-tekst.is--klein p,
[data-bdm] .bdm-pn-tekst.is--klein li { font-size: 16px; line-height: 26px; }
[data-bdm] .bdm-pn-tekst ul { padding-left: 1.2em; list-style: disc; }
[data-bdm] .bdm-pn-tekst ul li::marker { color: var(--pn-oranje); }
[data-bdm] .bdm-pn-tekst a { color: var(--pn-kop); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
[data-bdm] .bdm-pn-tekst a:hover { color: var(--pn-oranje); }
[data-bdm] .bdm-pn-tekst strong { color: var(--pn-kop); font-weight: 600; }
[data-bdm] .bdm-pn-kaart { background: #FFFFFF; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; }
[data-bdm] .bdm-pn-kaart__kop { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.3px; color: var(--pn-kop); }

/* ---- Tekst met kerncijfers (o_intro) ---- */
[data-bdm] .bdm-pn-cijfers { background: #FFFFFF; border-radius: 24px; padding: 8px 32px; }
[data-bdm] .bdm-pn-cijfer { padding: 24px 0; display: flex; align-items: baseline; gap: 20px; }
[data-bdm] .bdm-pn-cijfer + .bdm-pn-cijfer { border-top: .8px solid var(--pn-lijn); }
[data-bdm] .bdm-pn-cijfer__getal { flex: 0 0 120px; font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -1.8px; color: var(--pn-kop); }
[data-bdm] .bdm-pn-cijfer__label { font-size: 16px; line-height: 24px; color: var(--pn-tekst); min-width: 0; }

/* ---- Tijdlijn (o_tijdlijn) ---- */
[data-bdm] .bdm-pn-tijdlijn__lijst { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
[data-bdm] .bdm-pn-tijdlijn__moment { display: flex; flex-direction: column; gap: 14px; }
[data-bdm] .bdm-pn-tijdlijn__jaar { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--pn-oranje); }
[data-bdm] .bdm-pn-tijdlijn__stip { width: 12px; height: 12px; border-radius: 999px; background: var(--pn-oranje); flex: none; }
[data-bdm] .bdm-pn-tijdlijn__lijn { flex: 1; height: 1px; background: rgba(15, 20, 18, .12); }

/* ---- Kop links, tekst rechts (o_split) ---- */
[data-bdm] .bdm-pn-split__links { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
[data-bdm] .bdm-pn-split__foto { aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--pn-vlak); }
[data-bdm] .bdm-pn-split__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-bdm] .bdm-pn-zandvlak { background: var(--pn-zand); border-radius: 24px; padding: 56px; box-sizing: border-box; }
[data-bdm] .bdm-pn-zandvlak .bdm-pn-split__links { gap: 28px; }
[data-bdm] .bdm-pn-zandvlak .bdm-pn-tekst p,
[data-bdm] .bdm-pn-zandvlak .bdm-pn-tekst li { color: var(--pn-tekst-zand); }
[data-bdm] .bdm-pn-paden { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
[data-bdm] .bdm-pn-pad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #FFFFFF; border-radius: 16px; padding: 14px 18px; font-size: 16px; font-weight: 600; color: var(--pn-kop); }
[data-bdm] .bdm-pn-pad__pijl { color: var(--pn-oranje); display: flex; }
[data-bdm] .bdm-pn-pad__pijl svg { width: 20px; height: 20px; }
[data-bdm] .bdm-pn-nummers { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
[data-bdm] .bdm-pn-nummer { background: #FFFFFF; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
[data-bdm] .bdm-pn-nummer__nr { font-size: 13px; font-weight: 700; color: var(--pn-oranje); }
[data-bdm] .bdm-pn-nummer__tekst { font-size: 17px; line-height: 27px; color: var(--pn-tekst); }
[data-bdm] .bdm-pn-nummer__tekst strong { display: block; margin-bottom: 4px; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -1px; color: var(--pn-kop); }
[data-bdm] .bdm-pn-na { margin-top: 28px; }

/* ---- Divisies als kaarten (tekstblokken, weergave kaarten) ---- */
[data-bdm] .bdm-pn-dkaarten__raster { margin-block: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
[data-bdm] .bdm-pn-dkaarten__raster > li { display: flex; min-width: 0; }
[data-bdm] .bdm-pn-dkaart { flex: 1; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
[data-bdm] .bdm-pn-dkaart__beeld { aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--pn-vlak); }
[data-bdm] .bdm-pn-dkaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
[data-bdm] a.bdm-pn-dkaart:hover .bdm-pn-dkaart__beeld img { transform: scale(1.04); }
[data-bdm] .bdm-pn-dkaart__blad { flex: 1 1 0%; background: #FFFFFF; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
[data-bdm] .bdm-pn-dkaart__kop { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -1.4px; color: var(--pn-kop); overflow-wrap: break-word; }
[data-bdm] .bdm-pn-dkaart__tekst { margin: 0; font-size: 16px; line-height: 26px; letter-spacing: -0.3px; color: var(--pn-tekst); }
[data-bdm] .bdm-pn-dkaart__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; line-height: 28px; letter-spacing: -0.5px; color: var(--pn-oranje); transition: color .2s; }
[data-bdm] .bdm-pn-dkaart__link svg { width: 20px; height: 20px; transition: transform .2s; }
[data-bdm] a.bdm-pn-dkaart:hover .bdm-pn-dkaart__link { color: var(--pn-oranje-donker); }
[data-bdm] a.bdm-pn-dkaart:hover .bdm-pn-dkaart__link svg { transform: translateX(3px); }

/* ---- Werken bij: foto naast zandkleurige kaart (werving, weergave naast) ---- */
[data-bdm] .bdm-pn-werving__foto { min-height: 420px; border-radius: 24px; overflow: hidden; background: var(--pn-vlak); }
[data-bdm] .bdm-pn-werving__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-bdm] .bdm-pn-werving__kaart { background: var(--pn-zand); border-radius: 24px; padding: 56px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 24px; align-items: flex-start; min-width: 0; }
[data-bdm] .bdm-pn-werving__label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--pn-bruin); }
[data-bdm] .bdm-pn-werving__tekst { margin: 0; font-size: 18px; line-height: 30.6px; letter-spacing: -0.3px; color: var(--pn-tekst-zand); }
[data-bdm] .bdm-pn-werving__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
[data-bdm] .bdm-pn-werving__vacatures { font-size: 15px; color: var(--pn-tekst-zand); }
[data-bdm] .bdm-pn-knop { background: var(--pn-oranje); color: #FFFFFF; text-decoration: none; border-radius: 16px; padding: 14px 24px; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; display: inline-flex; align-items: center; gap: 8px; transition: background .2s; }
[data-bdm] .bdm-pn-knop:hover { background: var(--pn-oranje-donker); color: #FFFFFF; }
[data-bdm] .bdm-pn-knop svg { width: 20px; height: 20px; }

/* ---- Vacatures met foto (vacatures, weergave foto) ---- */
[data-bdm] .bdm-pn-vacatures__balk { margin-top: 56px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
[data-bdm] .bdm-pn-vacatures__balk:first-child { margin-top: 0; }
[data-bdm] .bdm-pn-vacatures__kop { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -1.2px; color: var(--pn-kop); }
[data-bdm] .bdm-pn-vacatures__aantal { margin: 0; font-size: 15px; color: var(--pn-tekst); }
[data-bdm] .bdm-pn-vacatures__leeg { margin: 24px 0 0; font-size: 18px; line-height: 1.7; color: var(--pn-tekst); }
[data-bdm] .bdm-pn-vacatures__raster { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
[data-bdm] .bdm-pn-vacatures__raster > li { display: flex; min-width: 0; }
[data-bdm] .bdm-pn-vkaart { flex: 1; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; }
[data-bdm] .bdm-pn-vkaart__beeld { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pn-vlak); }
[data-bdm] .bdm-pn-vkaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
[data-bdm] .bdm-pn-vkaart:hover .bdm-pn-vkaart__beeld img { transform: scale(1.04); }
[data-bdm] .bdm-pn-vkaart__blad { flex: 1; padding: 24px 24px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
[data-bdm] .bdm-pn-vkaart__tekst { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
[data-bdm] .bdm-pn-vkaart__titel { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.5px; color: #0F1412; overflow-wrap: anywhere; }
[data-bdm] .bdm-pn-vkaart__feit { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--pn-bruin); background: var(--pn-zand); border-radius: 999px; padding: 6px 12px 7.5px; }
[data-bdm] .bdm-pn-vkaart__rond { flex: none; width: 44px; height: 44px; border-radius: 999px; border: .8px solid rgba(15, 20, 18, .15); display: grid; place-items: center; color: #0F1412; transition: all .2s; }
[data-bdm] .bdm-pn-vkaart:hover .bdm-pn-vkaart__rond { background: var(--pn-oranje); color: #FFFFFF; border-color: var(--pn-oranje); }

/* ---- Kleinere schermen (ontwerp: één kolom onder 1000px, smallere vlakken onder 700px) ---- */
/* Tussenmaat: de inhoud is daar ~750-950px breed; drie kolommen van ~230px gaven woorden buiten hun vak. */
[data-bdm] .bdm-pn-kaart, [data-bdm] .bdm-pn-dkaart__blad, [data-bdm] .bdm-pn-nummer { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 1200px) {
  [data-bdm] .bdm-pn-intro .bdm-pn-twee,
  [data-bdm] .bdm-pn-tijdlijn__lijst { grid-template-columns: minmax(0, 1fr); }
  [data-bdm] .bdm-pn-dkaart__kop { font-size: 26px; letter-spacing: -1px; }
  [data-bdm] .bdm-pn-dkaart__blad { padding: 24px; }
}
@media (max-width: 1000px) {
  [data-bdm] .bdm-pn-twee,
  [data-bdm] .bdm-pn-tijdlijn__lijst,
  [data-bdm] .bdm-pn-nummers,
  [data-bdm] .bdm-pn-dkaarten__raster,
  [data-bdm] .bdm-pn-vacatures__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  [data-bdm] .bdm-pn-h2,
  [data-bdm] .bdm-pn-tekst h2 { font-size: 32px; line-height: 40px; letter-spacing: -1.4px; }
  [data-bdm] .bdm-pn-zandvlak,
  [data-bdm] .bdm-pn-werving__kaart { padding: 28px; }
  [data-bdm] .bdm-pn-cijfers { padding: 4px 24px; }
  [data-bdm] .bdm-pn-cijfer__getal { flex-basis: 96px; font-size: 36px; }
  [data-bdm] .bdm-pn-werving__foto { min-height: 300px; }
}