/* Projectenpagina's (aanvulling op style.css) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* Kaarten met foto */
.page-projecten .project-media { display: block; height: auto; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden }
.page-projecten .project-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease }
.page-projecten .project-card:hover .project-media img { transform: scale(1.03) }
.page-projecten .project-title a { color: inherit; text-decoration: none }
.page-projecten .project-title a:hover { color: var(--primary) }
.page-projecten .project-actions .btn { margin-top: 0 }
.page-projecten .leeg-melding { text-align: center; color: var(--muted); max-width: 640px; margin: 10px auto 0 }
.page-projecten .projects-cta .btn { margin-top: 6px }

/* Projectpagina */
.page-project header { text-align: left; padding-bottom: 26px }
.page-project header .wrap { max-width: 1000px; margin: 0 auto }
.page-project header h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 6px 0 6px }
.page-project header .sub { text-align: left; margin: 10px 0 0; max-width: 760px; font-size: 1.08rem }
.page-project main .wrap { max-width: 1000px }
.kruimel { font-size: .9rem; color: var(--muted) }
.kruimel a { color: var(--primary); text-decoration: none }
.kruimel a:hover { text-decoration: underline }
.project-kop-meta { margin: 0; color: var(--primary); font-weight: 800 }

.voorna { display: grid; gap: 18px; margin-bottom: 30px }
.voorna-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.voorna figure, .galerij figure { margin: 0 }
.voorna img, .galerij img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; background: var(--bg); box-shadow: var(--shadow) }
.voorna figcaption, .galerij figcaption { font-size: .9rem; color: var(--muted); margin-top: 6px; line-height: 1.5 }
.voorna figcaption b { color: var(--primary) }

.project-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start }
.project-tekst p { margin: 0 0 14px; line-height: 1.75 }
.project-tekst h2 { text-align: left; font-size: 1.25rem; margin: 22px 0 10px }
.werk-lijst { margin: 0; padding-left: 20px }
.werk-lijst li { margin: 4px 0 }
.project-cta-kaart { background: var(--card); border-radius: var(--radius); border: 1px solid rgba(17, 24, 39, .06); box-shadow: var(--shadow); padding: 20px; position: sticky; top: 90px }
.project-cta-kaart h2 { text-align: left; font-size: 1.2rem; margin: 0 0 8px }
.project-cta-kaart p { margin: 0; color: var(--muted) }
.project-cta-kaart .btn { margin-top: 14px; width: 100% }
.project-cta-kaart .cta-klein { margin-top: 12px; font-size: .9rem }
.project-cta-kaart a:not(.btn) { color: var(--primary) }

.galerij { margin-top: 34px }
.galerij h2, .meer-projecten h2 { font-size: 1.4rem }
.galerij-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px }
.meer-projecten { margin-top: 46px }
.zoom { display: block; cursor: zoom-in }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh }
.lightbox::backdrop { background: rgba(10, 12, 30, .86) }
.lightbox img { max-width: 100%; max-height: 86vh; display: block; margin: 0 auto; border-radius: 8px }
.lightbox p { color: #fff; text-align: center; margin: 8px 0 0 }
.lb-x { position: fixed; top: 14px; right: 18px; background: rgba(255, 255, 255, .15); color: #fff; border: 0; border-radius: 999px; width: 40px; height: 40px; font-size: 18px; cursor: pointer }

@media (max-width: 820px) {
  .project-detail { grid-template-columns: 1fr }
  .project-cta-kaart { position: static }
}
@media (max-width: 520px) {
  .voorna-paar { grid-template-columns: 1fr }
}

/* Nette uitlijning en ruimte */
.page-projecten .project-title { text-align: left; line-height: 1.35 }
.page-project main section { padding: 0; max-width: none }
.page-project .voorna { margin-top: 8px }
.page-project .galerij h2, .page-project .meer-projecten h2 { margin-bottom: 16px }
.page-project main { padding-top: 24px }