/* paginas.css — onderdelen van de binnenpagina's (About Us, Lumiduct, Projects, Media & News, Vacancies,
   Contact, QR Info, blog). Maten gemeten op de oude site bij 1366 px (zie reference/data/_layout-*.json). */

/* Algemeen ------------------------------------------------------------- */
.nadruk { font-weight: var(--gewicht-halfvet); }
.icoon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.banner img { width: 100%; height: 464px; object-fit: cover; object-position: 50% 100%; }
@media (max-width: 767px) { .banner img { height: auto; aspect-ratio: 1216 / 413; } }

/* About Us ------------------------------------------------------------- */
.over-intro { padding-top: 56px; }
.over-intro .kop-2 { margin: 2.2rem 0 1.2rem; }
.team { padding-top: 1.5rem; }
.team .kop-2 { margin-bottom: 44px; }
.team__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 60px; }
.team__lid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.team__foto { width: 196px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.team__naam { font-size: var(--tekst-basis); font-weight: var(--gewicht-vet); margin: 26px 0 8px; }
.team__rol { margin: 0 0 22px; font-weight: var(--gewicht-normaal); }
.team__linkedin { color: #9b9b9b; font-size: 22px; line-height: 1; display: inline-block; padding: 8px; }
.team__linkedin:hover { color: var(--kleur-navy); }
/* Eerste rij: twee personen met de naam naast de (grotere) foto */
.team__lid--breed { grid-column: span 2; flex-direction: row; justify-content: flex-start; padding-left: 20px; text-align: center; }
.team__lid--breed .team__foto { width: 216px; }
.team__lid--breed .team__info { flex: 1; }
.team__lid--breed .team__naam { margin-top: 0; }
@media (max-width: 900px) {
  .team__lijst { grid-template-columns: repeat(2, 1fr); }
  .team__lid--breed { grid-column: span 1; flex-direction: column; padding-left: 0; }
  .team__lid--breed .team__foto { width: 196px; }
  .team__lid--breed .team__naam { margin-top: 26px; }
}
@media (max-width: 520px) {
  .team__lijst { grid-template-columns: 1fr; }
  .team__foto, .team__lid--breed .team__foto { width: 230px; }
}

.partners { background: var(--kleur-groen); color: var(--kleur-navy); margin-top: 70px; padding: 45px 0 48px; }
.partners__kop { color: var(--kleur-navy);   /* oud: wit op groen, contrast 1,8:1 (onvoldoende) */ text-align: center; margin-bottom: 70px; position: relative; }
.partners__kop::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 44px; height: 2px; background: var(--kleur-navy); transform: translateX(-50%); }
.partners__rij { list-style: none; margin: 0 0 50px; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 30px 20px; }
.partners__rij li { width: var(--b); max-width: 100%; }
.partners__rij img { width: 100%; height: auto; }
.partners__eu { font-size: 0.9375rem; line-height: 1.3; font-weight: var(--gewicht-normaal); color: #000; max-width: 901px; margin: 10px auto 0; }
@media (max-width: 767px) {
  .partners__rij { justify-content: center; gap: 26px 28px; margin-bottom: 26px; }
  .partners__rij li { width: min(calc(var(--b) * 0.8), 42vw); }
}

/* Lumiduct -------------------------------------------------------------- */
.lumiduct { padding-top: 17px; }
.lumiduct > .kop-2 { margin-bottom: 38px; }
.kenmerk { display: grid; grid-template-columns: 483px 1fr; align-items: center; gap: 0 40px; margin: 28px 0; }
.kenmerk .kop-3 { margin-bottom: 1.1rem; }
.kenmerk .lijst-geel { margin: 0; }
.kenmerk__beeld { justify-self: center; }
.kenmerk__beeld img { width: 100%; max-width: 100%; }
.kenmerk--beeld-links { grid-template-columns: 1fr 395px; }
.kenmerk--beeld-links .kenmerk__beeld { grid-column: 1; grid-row: 1; }
.kenmerk--beeld-links .kenmerk__tekst { grid-column: 2; }
@media (max-width: 900px) {
  .kenmerk, .kenmerk--beeld-links { grid-template-columns: 1fr; gap: 20px; margin: 44px 0; }
  .kenmerk--beeld-links .kenmerk__beeld, .kenmerk--beeld-links .kenmerk__tekst { grid-column: 1; grid-row: auto; }
  .kenmerk__beeld { max-width: 420px; }
}
.documentatie { padding-top: 40px; }
.documentatie .kop-2 { margin-bottom: 30px; }
.documentatie__lijst { list-style: none; margin: 0; padding: 0; display: flex; gap: 40px; }
.documentatie__lijst a {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 80px;
  text-decoration: none; font-size: 0.9375rem; font-weight: var(--gewicht-normaal); text-align: center;
}
.documentatie__lijst .icoon { width: 56px; height: 56px; color: #8a8a8a; }
.documentatie__lijst a:hover .icoon { color: var(--kleur-navy); }

/* Projects (Mondial Movers) --------------------------------------------- */
body.donker { background: var(--kleur-navy); }
body.donker main { color: var(--kleur-wit); }
body.donker .site-footer { background: var(--kleur-wit); }
.project { padding: 30px 0 40px; }
.project__titel { text-align: center; margin-bottom: 55px; }
.videoslider .slider__lijst { gap: 30px; padding: 0 4px; scroll-padding-left: 4px; }
.videoslider__kaart { flex: 0 0 min(672px, 88vw); scroll-snap-align: start; margin: 0; }
.videoslider__speler { position: relative; }
.videoslider__kaart video { width: 100%; aspect-ratio: 16 / 9; background: #35465c; object-fit: cover; }
.videoslider__kaart figcaption { text-align: center; font-size: 1.375rem; font-weight: var(--gewicht-halfvet); line-height: 1.25; padding: 20px 10px 0; }
.videoslider .slider__knop { top: calc(378px / 2); }
@media (max-width: 767px) { .videoslider .slider__knop { top: calc(88vw * 9 / 16 / 2); } }
.project__tekst { max-width: 765px; margin: 55px auto 0; padding: 0 var(--rand); text-align: justify; }
.project__tekst a { color: var(--kleur-wit); }
.project__tekst a:hover { color: var(--kleur-geel); }
.citaat { margin: 45px 0 40px; font-size: 0.9375rem; font-weight: var(--gewicht-halfvet); }
.citaat blockquote { margin: 0; font-style: italic; }
.citaat figcaption { text-align: right; margin-top: 40px; }
.fotoslider__dia { flex: 0 0 100%; scroll-snap-align: start; }
.fotoslider__dia img { width: 100%; aspect-ratio: 765 / 380; object-fit: cover; }
@media (max-width: 767px) { .project__tekst { text-align: left; } }

/* Afspeelknop over de videoposter (src/assets/js/video.js) */
.afspeelknop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.afspeelknop svg { width: 72px; height: 72px; transition: transform 0.15s; }
.afspeelknop:hover svg, .afspeelknop:focus-visible svg { transform: scale(1.1); }

/* Projects (losse fotopagina) -------------------------------------------- */
.projects { padding-top: 60px; padding-bottom: 20px; }
.projects img { width: 486px; max-width: 100%; aspect-ratio: 486 / 364; object-fit: cover; }

/* Vacancies ------------------------------------------------------------- */
.vacatures__banner img { width: 100%; height: 406px; object-fit: cover; }
@media (max-width: 767px) { .vacatures__banner img { height: 200px; } }
.vacatures__kop { text-align: center; margin: 30px 0 38px; }
.vacatures__kolommen { display: grid; grid-template-columns: 468px 1fr; gap: 24px; align-items: start; }
.vacatures__kolommen img { width: 100%; aspect-ratio: 468 / 409; object-fit: cover; }
.vacatures__kolommen p { text-align: justify; }
@media (max-width: 767px) {
  .vacatures__kolommen { grid-template-columns: 1fr; }
  .vacatures__kolommen p { text-align: left; }
}

/* Vacaturepagina's (tekst uit src/vacatures/*.md) ------------------------ */
.vacature { padding: 10px var(--rand) 40px; font-size: var(--tekst-basis); line-height: 1.17; color: var(--kleur-blauw-donker); font-weight: var(--gewicht-normaal); }
@media (min-width: 1020px) { .vacature { padding-left: 0; padding-right: 0; } }
.vacature__kop, .vacature h2 { font-size: 1em; font-weight: var(--gewicht-vet); margin: 0; line-height: inherit; }
.vacature__kop { margin-bottom: 1.2em; }
.vacature p { margin: 0 0 1.2em; }
.vacature ul { list-style: disc; padding-left: 25px; margin: 0 0 1.2em; }
.vacature--klein { font-size: 0.875rem; }
.vacature--navy-uitgevuld { color: var(--kleur-navy); text-align: justify; }
@media (max-width: 767px) { .vacature--klein { font-size: 1rem; } .vacature--navy-uitgevuld { text-align: left; } }
.vacature p:has(+ ul) { margin-bottom: 0; }   /* op de oude site volgt de lijst direct op de inleidende zin */

/* Contact --------------------------------------------------------------- */
.contact { text-align: center; padding: 60px var(--rand) 50px; }
.contact__kop { font-weight: var(--gewicht-normaal); margin-bottom: 30px; }
.contact__kop--connect { margin: 28px 0 22px; }
.formulier { max-width: 806px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; text-align: left; }
.formulier__links .veld + .veld { margin-top: 4px; }
.formulier input[type="email"], .formulier input[type="text"], .formulier textarea {
  width: 100%; font: inherit; font-size: 0.8125rem; font-weight: var(--gewicht-licht); color: var(--kleur-navy);
  border: 1px solid #8a969f; border-radius: 0; background: var(--kleur-wit); padding: 6px 8px; min-height: 32px;
}
.formulier textarea { height: 100px; resize: vertical; display: block; }
.formulier ::placeholder { color: #8a8f99; opacity: 1; }
.formulier [aria-invalid="true"] { border-color: #c0392b; border-width: 2px; }
.veld__fout { color: #b3261e; font-size: 0.8125rem; font-weight: var(--gewicht-normaal); margin: 4px 0 0; }
.formulier__privacy { font-size: 0.75rem; line-height: 1.3; margin: 6px 0 0; }
.formulier__knop {
  display: block; margin: 6px 0 0 auto; min-width: 44px; min-height: 32px; padding: 4px 10px;
  border: 0; background: var(--kleur-groen); color: var(--kleur-navy); font: inherit; font-size: 0.875rem; font-weight: var(--gewicht-normaal); cursor: pointer;
}
.formulier__knop:hover { background: #7bbd7d; }
.formulier__knop:disabled { opacity: 0.6; cursor: wait; }
.formulier__honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__melding { grid-column: 1 / -1; margin-top: 16px; padding: 12px 16px; font-size: 0.9375rem; font-weight: var(--gewicht-normaal); }
.formulier__melding--ok { background: #e6f4e7; border-left: 4px solid #2e7d32; }
.formulier__melding--fout { background: #fdecea; border-left: 4px solid #b3261e; }
.sociaal { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; }
.sociaal a { display: block; padding: 5px; color: #000; font-size: 23px; line-height: 1; }
.sociaal a:hover { color: var(--kleur-blauw); }
@media (max-width: 767px) {
  .contact { text-align: left; padding-top: 24px; }
  .formulier { grid-template-columns: 1fr; }
  .formulier input[type="email"], .formulier input[type="text"] { font-size: 1.125rem; min-height: 48px; padding: 10px; }
  .formulier__links .veld + .veld, .formulier__rechts { margin-top: 16px; }
  .formulier textarea { font-size: 1.125rem; height: 140px; padding: 10px; }
  .formulier__knop { font-size: 1.125rem; min-height: 44px; }
  .sociaal { justify-content: flex-start; gap: 22px; }
  .sociaal a { font-size: 30px; }
}

/* Tekstpagina (privacyverklaring) ---------------------------------------- */
.tekstpagina { padding-top: 40px; padding-bottom: 30px; max-width: 760px; margin-left: auto; margin-right: auto; }
.tekstpagina .kop-3 { margin: 1.8rem 0 0.6rem; }

/* Video klik-om-te-laden (onderdelen/video-embed.njk + embed.js) ---------- */
.embed { position: relative; }
.embed__knop, .embed__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.embed__knop img { width: 100%; height: 100%; object-fit: cover; }
.embed__speel { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); transition: transform 0.15s; }
.embed__knop:hover .embed__speel, .embed__knop:focus-visible .embed__speel { transform: translate(-50%, -50%) scale(1.1); }
.embed__noot { font-size: 0.75rem; color: #666; margin: 4px 0 0; }

/* QR Info --------------------------------------------------------------- */
.qr { padding-top: 12px; padding-bottom: 30px; }
.qr__kop { font-size: 2.25rem; font-weight: var(--gewicht-licht); color: #000; text-align: center; margin-bottom: 18px; }
.qr__raster { display: grid; grid-template-columns: 1fr 675px 1fr; align-items: start; }
.qr__video { grid-column: 2; }
.qr__sociaal { grid-column: 3; justify-self: end; list-style: none; margin: 54px 46px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qr__sociaal a { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #000; color: #fff; font-size: 34px; }
.qr__sociaal a:hover { background: var(--kleur-blauw); }
.qr__tekst { max-width: 675px; margin: 22px auto 30px; font-size: 1.4375rem; font-weight: var(--gewicht-licht); color: #000; text-align: justify; line-height: 1.3; letter-spacing: 0.02em; }
.qr__knoppen { display: flex; justify-content: center; gap: 105px; }
.qr__knoppen .knop-omlijnd { width: 190px; min-height: 54px; font-size: 1rem; }
@media (max-width: 1019px) {
  .qr { display: flex; flex-direction: column; }
  .qr__raster { display: contents; }
  .qr__kop { order: 0; font-size: 1.75rem; }
  .qr__video { order: 1; }
  .qr__tekst { order: 2; font-size: 1.25rem; text-align: left; }
  .qr__knoppen { order: 3; gap: 20px; margin-bottom: 28px; }
  .qr__knoppen .knop-omlijnd { flex: 1; width: auto; font-size: 1.25rem; }
  .qr__sociaal { order: 4; flex-direction: row; justify-content: center; align-self: center; margin: 0; gap: 16px; }
  .qr__sociaal a { width: 44px; height: 44px; font-size: 22px; }
}

/* Media & News ---------------------------------------------------------- */
.media { padding-top: 20px; padding-bottom: 20px; }
.media__kop { font-size: var(--tekst-kop-3); font-weight: var(--gewicht-normaal); margin-bottom: 22px; }
.nieuwslijst { list-style: none; margin: 0 0 60px; padding: 0; max-width: 700px; font-size: 1rem; }
.nieuwslijst li { margin-bottom: 22px; line-height: 1.35; }
.media__videos { max-width: 680px; }
.kanaal { position: relative; width: 640px; max-width: 100%; }
.kanaal img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kanaal::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.kanaal__titel { position: absolute; inset: 0; z-index: 1; margin: 0; display: grid; place-items: center; text-align: center; color: var(--kleur-wit); font-size: clamp(1.75rem, 6vw, 3.125rem); line-height: 1.25; padding: 0 20px; }
.videolijst { list-style: none; margin: 14px 0 0; padding: 0 5px; width: 640px; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.videokaart { position: relative; margin: 0; background: #000; }
.videokaart .embed__knop, .videokaart video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.videokaart .embed__knop img { opacity: 0.75; }
.videokaart__titel { position: absolute; left: 0; right: 0; top: 0; padding: 10px 14px 24px; color: var(--kleur-wit); font-size: 0.875rem; line-height: 1.35; font-weight: var(--gewicht-normaal); background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); pointer-events: none; }
.videokaart__duur { display: block; font-size: 0.75rem; opacity: 0.85; }
.videokaart__speel { position: absolute; left: 50%; top: 55%; width: 48px; height: 48px; transform: translate(-50%, -50%); transition: transform 0.15s; }
.videokaart .embed__knop:hover .videokaart__speel, .videokaart .embed__knop:focus-visible .videokaart__speel { transform: translate(-50%, -50%) scale(1.12); }
.videokaart--eigen .afspeelknop svg { width: 48px; height: 48px; }
.media__videos .embed__noot { margin-top: 8px; }
@media (max-width: 560px) { .videolijst { grid-template-columns: 1fr; } }

/* Blog ------------------------------------------------------------------ */
.blog { padding-top: 22px; padding-bottom: 30px; max-width: 940px; }
.blog__terug { margin: 0 0 18px; font-size: 1rem; }
.blog__terug a[aria-current] { color: #1a6fa3; }
.blog__terug a { color: #595959; text-decoration: none; font-weight: var(--gewicht-normaal); }
.blog__terug a:hover { text-decoration: underline; }
.blogpost__meta { display: flex; align-items: center; gap: 0 4px; font-size: 0.75rem; font-weight: var(--gewicht-normaal); margin: 0 0 18px; line-height: 1.35; }
.blogpost__auteurfoto { width: 32px; height: 32px; border-radius: 50%; margin-right: 8px; flex: none; }
/* Overzicht */
.bloglijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.blogkaart { display: grid; grid-template-columns: 454px 1fr; border: 1px solid #e5e5e5; min-height: 341px; }
.blogkaart__beeld { width: 100%; height: 100%; object-fit: cover; }
.blogkaart__tekst { padding: 26px 40px 30px 36px; }
.blogkaart__titel { font-size: 1.625rem; line-height: 1.3; margin-bottom: 14px; }
.blogkaart__titel a { text-decoration: none; }
.blogkaart__titel a:hover { text-decoration: underline; }
.blogkaart__samenvatting { font-size: 0.875rem; line-height: 1.55; margin: 0; }
@media (max-width: 767px) {
  .blogkaart { grid-template-columns: 1fr; }
  .blogkaart__beeld { aspect-ratio: 4 / 3; }
  .blogkaart__tekst { padding: 20px; }
}
/* Bericht */
.blogpost { border: 1px solid #e5e5e5; padding: 50px 100px 40px; }
.blogpost__titel { font-size: 1.875rem; line-height: 1.3; margin-bottom: 30px; }
.blogpost__inhoud { line-height: 1.5; }
.blogpost__inhoud::after { content: ""; display: block; clear: both; }
.blogpost__inhoud p { margin-bottom: 1.1em; }
.blogpost__inhoud .uitgevuld { text-align: justify; }
.blogpost__inhoud ol, .blogpost__inhoud ul { padding-left: 1.5em; margin-bottom: 1.1em; }
.blogpost__inhoud ul { list-style: disc; }
.blogpost__inhoud .embed { margin: 0 0 1.1em; clear: both; }
.blogbeeld { display: block; margin: 0.4em 0 1.1em; }
.blogbeeld--vol { width: 100%; clear: both; }
.blogbeeld--links { float: left; width: var(--b); max-width: 50%; margin: 0.4em 22px 12px 0; }
.blogbeeld--rechts { float: right; width: var(--b); max-width: 50%; margin: 0.4em 0 12px 22px; }
@media (max-width: 767px) {
  .blogpost { padding: 24px 18px; border: 0; }
  .blogbeeld--links, .blogbeeld--rechts { float: none; width: 100%; max-width: 100%; margin: 0.4em 0 1.1em; }
  .blogpost__inhoud .uitgevuld { text-align: left; }
}
.recent { margin-top: 40px; }
.recent__kop { display: flex; justify-content: space-between; align-items: baseline; }
.recent__kop h2 { font-size: 1rem; font-weight: var(--gewicht-normaal); margin: 0 0 12px; }
.recent__kop a { font-size: 0.875rem; font-weight: var(--gewicht-normaal); }
.recent__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.recent__lijst a { display: block; border: 1px solid #e5e5e5; text-decoration: none; height: 100%; }
.recent__lijst img { width: 100%; aspect-ratio: 289 / 162; object-fit: cover; }
.recent__lijst span { display: block; padding: 18px 16px 22px; font-size: 1.125rem; line-height: 1.35; font-weight: var(--gewicht-normaal); }
.recent__lijst a:hover span { text-decoration: underline; }
@media (max-width: 767px) { .recent__lijst { grid-template-columns: 1fr; } }