/* Atsma — aanvullende vormgeving bovenop theme.json */

/* Logo */
.atsma-logo { display: inline-flex; align-items: last baseline; gap: 12px; text-decoration: none; color: #000; }
.atsma-logo:hover { color: #000; }
.atsma-logo__tekst { display: inline-block; }
.atsma-logo__naam { display: block; font-size: 38px; line-height: 1; font-weight: 400; }
.atsma-logo__payoff { display: block; font-size: 11px; line-height: 1; margin-top: 3px; width: 0; min-width: 100%; text-align: justify; text-align-last: justify; white-space: nowrap; }
.atsma-logo--groot .atsma-logo__naam { font-size: 48px; }
.atsma-logo--groot .atsma-logo__payoff { font-size: 13px; }
.atsma-logo--wit, .atsma-logo--wit:hover { color: #fff; }

/* Kopregel blijft staan; bij scrollen blijft alleen de rode A over */
header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.atsma-kop { background: #fff; transition: box-shadow .3s ease; }
.atsma-kop__binnen { padding-top: 20px; padding-bottom: 20px; transition: padding .3s ease; }
.atsma-logo__tekst { overflow: hidden; white-space: nowrap; max-width: 260px; transition: max-width .35s ease, opacity .25s ease; }
.is-compact .atsma-kop { box-shadow: 0 1px 0 #E4E4E1; }
.is-compact .atsma-kop__binnen { padding-top: 10px; padding-bottom: 10px; }
.is-compact .atsma-kop .atsma-logo__tekst { max-width: 0; opacity: 0; }

/* De A rijst op bij het laden van de pagina */
@keyframes atsma-rijzen { from { transform: translateY(14px); clip-path: inset(100% 0 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
.atsma-kop .atsma-mark { animation: atsma-rijzen .9s cubic-bezier(.2,.7,.2,1) .1s both; }

/* Menu */
.wp-block-navigation .wp-block-navigation-item__content { font-weight: 500; padding: 10px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.wp-block-navigation .wp-block-navigation-item__content:hover { color: inherit; border-color: #E30613; }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] { border-color: #000; }
.wp-block-navigation .cta > .wp-block-navigation-item__content { background: #E30613; color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; }
.wp-block-navigation .cta > .wp-block-navigation-item__content:hover { background: #B8050F; color: #fff; }

/* Kleine label boven een kop: rood driehoekje + grijze tekst */
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #4A4D52; margin: 0; }
.eyebrow::before { content: ""; width: 14px; height: 13px; background: #E30613; clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: 0 0 auto; }

/* Rode categorie- en sectorlabels */
.rood-label, .rood-label a, .wp-block-post-terms.rood-label a { color: #E30613; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }

/* Kolommen met een lijn erboven (opsommingen) */
.lijn { border-top: 1px solid #000; padding-top: 16px; }
.lijn--rood { border-top: 2px solid #E30613; padding-top: 15px; }
.lijn h3 { margin: 0 0 8px; }
.lijn p { margin: 0; font-size: 16px; line-height: 1.55; }

/* Drie A's onder elkaar, elk met een woord */
.drie-a { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.drie-a li { display: flex; align-items: flex-end; gap: 22px; font-size: clamp(32px, 4vw, 48px); line-height: 1; font-weight: 400; }
.drie-a li::before { content: ""; flex: 0 0 auto; width: 52px; height: 48px; background: #E30613; clip-path: polygon(50% 0, 100% 100%, 63% 100%, 50% 72%, 37% 100%, 0 100%); margin-bottom: 0.08em; }

/* Drie A's naast elkaar (Rij met klasse drie-a-rij), op mobiel onder elkaar */
@media (max-width: 781px) {
	.drie-a-rij { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
	.drie-a-rij .drie-a { flex-direction: column; }
}

/* Sociale pictogrammen (LinkedIn) als vierkantjes */
.wp-block-social-links .wp-social-link { border-radius: 8px !important; }
.wp-block-social-links.has-normal-icon-size .wp-social-link a, .wp-block-social-links:not([class*="icon-size"]) .wp-social-link a { padding: 10px; }

/* Cijfers */
.stat { font-size: 52px; font-weight: 500; line-height: 1; margin: 0; }

/* Kaarten */
.kaart { border-radius: 12px; transition: transform .25s; }
.kaart:hover { transform: translateY(-4px); }
/* Logo's en beelden in kaarten: even hoog, links, nooit afgeknipt */
.logo-kaart .wp-block-image { text-align: left; margin: 0 0 20px; }
.logo-kaart .wp-block-image img { height: 80px !important; width: auto !important; max-width: 100%; aspect-ratio: auto !important; object-fit: contain !important; }
.wp-block-post-featured-image img { transition: transform .35s; }
.wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.015); }
.wp-block-post-featured-image { overflow: hidden; }

/* Link met rode onderstreping */
.meer a, a.meer { text-decoration: none; font-weight: 500; border-bottom: 2px solid #E30613; padding-bottom: 2px; }

/* Projectarchief: elke vijfde kaart over de volle breedte */
.archief .wp-block-post-template.is-layout-grid > li:nth-child(5n+1) { grid-column: 1 / -1; }
.archief .wp-block-post-template.is-layout-grid > li:nth-child(5n+1) .wp-block-post-featured-image img { aspect-ratio: 21 / 9 !important; }
.archief .wp-block-post-template.is-layout-grid > li:nth-child(5n+1) .wp-block-post-title { font-size: 30px; }
.atsma-projectregel { font-size: 15px; color: #4A4D52; margin: 0; }

/* Projecten als mozaïek: foto's in hun eigen verhouding, door elkaar */
.wp-block-gallery.mozaiek { --kolommen: 3; --rand: clamp(16px, 2.5vw, 40px); --tussen: 28px; display: grid !important; grid-template-columns: repeat(var(--kolommen), 1fr); grid-auto-rows: calc((var(--atsma-vw, 100vw) - 2 * var(--rand) - (var(--kolommen) - 1) * var(--tussen)) / var(--kolommen) * 0.72); grid-auto-flow: dense; gap: var(--tussen) !important; }
.wp-block-gallery.mozaiek.columns-2 { --kolommen: 2; }
.wp-block-gallery.mozaiek.columns-4 { --kolommen: 4; }
.wp-block-gallery.mozaiek.columns-5 { --kolommen: 5; }
.wp-block-gallery.mozaiek > .wp-block-image { position: relative; width: auto !important; height: 100%; margin: 0 !important; border-radius: 10px; overflow: hidden; }
.wp-block-gallery.mozaiek > .wp-block-image a { display: block; height: 100%; }
.wp-block-gallery.mozaiek > .wp-block-image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* Vanzelf afwisseling in formaat (zolang een foto geen eigen formaat-klasse heeft) */
.wp-block-gallery.mozaiek > .wp-block-image:not(.breed):not(.hoog):not(.groot):not(.heel-breed):nth-child(10n+1) { grid-column: span 2; grid-row: span 2; }
.wp-block-gallery.mozaiek > .wp-block-image:not(.breed):not(.hoog):not(.groot):not(.heel-breed):nth-child(10n+5) { grid-row: span 2; }
.wp-block-gallery.mozaiek > .wp-block-image:not(.breed):not(.hoog):not(.groot):not(.heel-breed):nth-child(10n+8) { grid-row: span 2; }
.wp-block-gallery.mozaiek > .wp-block-image:not(.breed):not(.hoog):not(.groot):not(.heel-breed):nth-child(10n+10) { grid-row: span 2; }
/* Zelf de samenstelling bepalen met een extra klasse op een foto */
.wp-block-gallery.mozaiek > .breed { grid-column: span 2; }
.wp-block-gallery.mozaiek > .hoog { grid-row: span 2; }
.wp-block-gallery.mozaiek > .groot { grid-column: span 2; grid-row: span 2; }
.wp-block-gallery.mozaiek > .heel-breed { grid-column: 1 / -1; grid-row: span 2; }
.wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-height: none; padding: 40px 14px 12px; text-align: left; font-size: 14px; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); opacity: 0; transition: opacity .25s; }
.wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image:hover figcaption { opacity: 1; }
@media (hover: none) { .wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image figcaption { opacity: 1; } }
/* Foto's die naar een projectpagina linken: rood kader + label, bijschrift altijd zichtbaar */
.wp-block-gallery.mozaiek > .is-project { overflow: visible; outline: 3px solid #E30613; outline-offset: 6px; border-radius: 10px; }
.wp-block-gallery.mozaiek > .is-project a { border-radius: 10px; overflow: hidden; position: relative; }
.wp-block-gallery.mozaiek > .is-project a::after { content: "Nieuwsgierig naar dit project? \2192"; position: absolute; right: 0; bottom: 0; z-index: 3; padding: 12px 18px; background: #E30613; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; border-radius: 10px 0 10px 0; transition: background .2s; }
.wp-block-gallery.mozaiek > .is-project:hover a::after { background: #B8050F; }
.wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image.is-project figcaption { padding-right: 300px !important; z-index: 2; }
@media (max-width: 700px) { .wp-block-gallery.mozaiek > .is-project a::after { font-size: 13px; padding: 10px 14px; } .wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image.is-project figcaption { padding-right: 14px !important; padding-bottom: 52px !important; } }
.wp-block-gallery.has-nested-images.mozaiek figure.is-project figcaption { opacity: 1; border-radius: 0 0 10px 10px; pointer-events: none; }
.wp-block-gallery.mozaiek > .is-project img { transition: transform .35s; }
.wp-block-gallery.mozaiek > .is-project:hover img { transform: scale(1.02); }
@media (max-width: 900px) { .wp-block-gallery.mozaiek { --kolommen: 2 !important; --tussen: 16px; } }
@media (max-width: 560px) {
	.wp-block-gallery.mozaiek { --kolommen: 1 !important; grid-auto-rows: auto; }
	.wp-block-gallery.mozaiek > .wp-block-image { grid-column: auto !important; grid-row: auto !important; height: auto; }
	.wp-block-gallery.mozaiek > .wp-block-image img { height: auto !important; aspect-ratio: 4 / 3; }
}

/* Filterknoppen */
.atsma-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.atsma-chip { padding: 9px 16px; border-radius: 999px; border: 1.5px solid #D0D0CD; font-size: 15px; font-weight: 500; text-decoration: none; color: #000; background: #fff; transition: border-color .2s, background .2s, color .2s; }
.atsma-chip:hover { border-color: #000; color: #000; }
.atsma-chip.is-actief { background: #000; border-color: #000; color: #fff; }

/* Feitenlijst op een projectpagina */
.atsma-feiten { display: grid; grid-template-columns: auto 1fr; gap: 14px 20px; margin: 0; border-top: 1px solid #000; padding-top: 20px; font-size: 16px; line-height: 1.45; }
.atsma-feiten dt { color: #4A4D52; }
.atsma-feiten dd { margin: 0; }

/* Vergelijking op de adviespagina */
.vergelijk { border: 1px solid #000; border-radius: 12px; overflow: hidden; gap: 0 !important; }
.vergelijk > .wp-block-column { padding: 36px; }
.vergelijk > .wp-block-column + .wp-block-column { background: #F5F5F3; }

/* Fotovlak (zolang er nog geen foto is) */
.wp-block-image img:not([src]), .wp-block-image img[src=""] { display: block; width: 100%; aspect-ratio: 16 / 9; background: #E4E4E1; }

@media (prefers-reduced-motion: reduce) {
	.atsma-kop .atsma-mark { animation: none; }
	.atsma-kop, .atsma-kop__binnen, .atsma-logo__tekst,
	.kaart, .wp-block-post-featured-image img, .atsma-chip, .wp-block-navigation .wp-block-navigation-item__content { transition: none; }
}

/* Filterknoppen boven het mozaïek */
.mozaiek-filter { margin: 0 0 28px; }
button.atsma-chip { font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.wp-block-gallery.mozaiek > .wp-block-image[hidden] { display: none !important; }

/* WordPress legt zelf een waas onder bijschriften; die vervangen we door ons eigen verloop */
.wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image::before { display: none !important; content: none !important; }
.wp-block-gallery.has-nested-images.mozaiek figure.wp-block-image figcaption { text-align: left !important; font-size: 14px !important; padding: 40px 14px 12px !important; max-height: none !important; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; backdrop-filter: none !important; text-shadow: none; }
/* Mozaïek over de volle breedte, met een kleine rand */
/* Altijd van rand tot rand, ongeacht de uitlijning in de editor */
html, body { overflow-x: clip; }
body .wp-block-gallery.wp-block-gallery.mozaiek { box-sizing: border-box; width: var(--atsma-vw, 100vw) !important; max-width: none !important; margin-left: calc(50% - var(--atsma-vw, 100vw) / 2) !important; margin-right: 0 !important; padding-left: var(--rand) !important; padding-right: var(--rand) !important; }
@media (min-width: 1700px) { .wp-block-gallery.mozaiek.columns-3 { --kolommen: 4; } }

/* Mozaïek: klikbare foto's */
.wp-block-gallery.mozaiek > .is-vergrootbaar img { cursor: zoom-in; transition: transform .35s; }
.wp-block-gallery.mozaiek > .is-vergrootbaar:hover img { transform: scale(1.02); }
.wp-block-gallery.mozaiek > .wp-block-image img:focus-visible { outline: 3px solid #E30613; outline-offset: -3px; }
.wp-block-gallery.mozaiek > .is-project a { cursor: pointer; }

/* Lightbox */
.atsma-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(0,0,0,.92); }
.atsma-lightbox.is-open { display: flex; }
.atsma-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(1400px, calc(100vw - 160px)); }
.atsma-lightbox img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: 4px; }
.atsma-lightbox figcaption { color: #fff; font-size: 15px; text-align: center; }
.atsma-lightbox button { flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s; }
.atsma-lightbox button:hover, .atsma-lightbox button:focus-visible { background: #E30613; outline: none; }
.atsma-lightbox .atsma-lightbox__sluit { position: absolute; top: 16px; right: 16px; font-size: 28px; }
.atsma-geen-scroll { overflow: hidden; }
@media (max-width: 700px) {
	.atsma-lightbox { padding: 12px; }
	.atsma-lightbox figure { max-width: 100%; }
	.atsma-lightbox .atsma-lightbox__vorige, .atsma-lightbox .atsma-lightbox__volgende { position: absolute; bottom: 20px; }
	.atsma-lightbox .atsma-lightbox__vorige { left: 20px; }
	.atsma-lightbox .atsma-lightbox__volgende { right: 20px; }
}