/*
Theme Name: LSBR
Theme URI: https://www.lsbr.nl
Author: Puik Visual Creations
Description: Block theme voor de Landsteiner Stichting voor Bloedtransfusieresearch. Nagebouwd naar de Wix-site zoals die op 25 augustus 2026 online stond.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lsbr
*/

/*
De opmaak zit in theme.json. Dit bestand bevat alleen wat theme.json
niet kan uitdrukken: de @font-face-regels en een handvol patronen uit de
oude site (de kaartrasters, de tijdlijn, de filterbalk).
*/

/* --- Lettertype -------------------------------------------------------
   Montserrat, voor alles. Eén variabel font in twee subsets; de gewichten
   300 t/m 900 komen uit dezelfde bestanden, dus koppen kosten niets extra.
   -------------------------------------------------------------------- */

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("./assets/fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("./assets/fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Eén marge voor de hele site ----------------------------------------
   De brede kolom is 78rem. Deze marge is precies de ruimte die daarnaast
   overblijft, met een ondergrens voor smalle schermen. Vlakken die van rand
   tot rand lopen gebruiken hem als binnenmarge, zodat hun tekst op dezelfde
   lijn begint als de koppen erboven.
   ---------------------------------------------------------------------- */

:root {
	--lsbr-marge: max(1.25rem, (100vw - 78rem) / 2);
}

/* --- Basis --------------------------------------------------------------
   WordPress laadt zijn eigen img-reset alleen mee als er een kernblok op de
   pagina staat dat hem nodig heeft. Op een pagina met alleen eigen blokken
   ontbreekt hij, en dan wint het height-attribuut uit de HTML van de
   aspect-ratio in de CSS. Vandaar hier expliciet.
   ---------------------------------------------------------------------- */

:where(img, svg, video) {
	max-width: 100%;
}

/* :where() heeft specificiteit nul: dit verslaat wel het height-attribuut
   uit de HTML, maar niet de blokken die zelf een beeldverhouding zetten
   (zoals het uitgelichte-afbeeldingsblok). Zonder die nuance vielen de
   nieuwsafbeeldingen buiten hun kolom. */
:where(img) {
	height: auto;
}

/* --- Sectiekop ---------------------------------------------------------
   "Our Impact", "Interesting topics": groot, licht, zandkleurig.
   ---------------------------------------------------------------------- */

.lsbr-sectiekop {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 300;
	line-height: 1.1;
	color: var(--wp--preset--color--zand);
	margin-block: 0 var(--wp--preset--spacing--60);
}

/* --- Hero --------------------------------------------------------------
   Foto over de volle breedte met het marineblauwe tekstblok eroverheen.

   De hoogte komt van het tekstblok plus zijn marge, niet van een vaste maat:
   zo houdt het blok op elke breedte precies evenveel lucht boven en onder,
   en kan de parallax het nergens tegen de rand duwen. De foto ligt er
   absoluut achter en vult dus altijd exact wat er is.

   Onder 900px schuift het blok onder de foto in plaats van eroverheen.
   ---------------------------------------------------------------------- */

.lsbr-hero {
	position: relative;
	display: grid;
}

.lsbr-hero__foto img {
	width: 100%;
	height: clamp(20rem, 42vw, 30rem);
	object-fit: cover;
	display: block;
}

.lsbr-hero__blok {
	background: var(--wp--preset--color--marine);
	color: #fff;
	padding: var(--wp--preset--spacing--60);
	margin-block: 0;
}

.lsbr-hero__blok :where(h1, h2) {
	color: #fff;
	margin-block-start: 0;
}

@media (min-width: 900px) {
	.lsbr-hero {
		/* De lucht boven en onder het blok zit als padding op de hero zelf,
		   niet als marge op het blok: een marge onder een grid-item telt niet
		   mee in de rijhoogte, waardoor het blok tegen de onderrand kwam.
		   Zo is het bij constructie symmetrisch. */
		min-height: clamp(20rem, 42vw, 30rem);
		padding-block: var(--wp--preset--spacing--60);
	}

	.lsbr-hero__foto {
		position: absolute;
		inset: 0;
	}

	.lsbr-hero__foto img {
		height: 100%;
	}

	.lsbr-hero__blok {
		position: relative;
		justify-self: end;
		width: min(38rem, 50%);
		margin-block: 0;
		margin-inline-end: max(1.5rem, calc((100vw - var(--wp--style--global--wide-size)) / 2));
	}
}

/* --- Kaartraster: projecten, fellows, nieuws --------------------------- */

.lsbr-raster {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	padding: 0;
	margin: 0;
	list-style: none;
}

.lsbr-kaart {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	padding-block-end: var(--wp--preset--spacing--40);
}

.lsbr-kaart__titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
}

.lsbr-kaart__titel a {
	color: var(--wp--preset--color--rood);
	text-decoration: none;
}

.lsbr-kaart__titel a:hover,
.lsbr-kaart__titel a:focus-visible {
	text-decoration: underline;
}

.lsbr-kaart__portret img {
	width: 100%;
	display: block;
}

/* --- Gegevensregels bij een project of fellowship ---------------------- */

.lsbr-gegevens {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.lsbr-gegevens dt {
	font-weight: 700;
	color: var(--wp--preset--color--marine);
}

.lsbr-gegevens dd {
	margin: 0;
}



.lsbr-tijdlijn__datum {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	color: var(--wp--preset--color--marine);
	margin: 0 0 0.35rem;
}

/* --- Filterbalk boven de overzichten ----------------------------------- */

.lsbr-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
}

.lsbr-filter label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-block-end: 0.25rem;
}

.lsbr-filter select {
	font: inherit;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--lijn);
	background: #fff;
	min-width: 12rem;
}

.lsbr-teller {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grijs);
}

/* --- Downloadlinks ------------------------------------------------------ */

.lsbr-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--marine);
}

.lsbr-download::before {
	content: "↓";
	font-weight: 400;
}

/* --- Toegankelijkheid --------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	white-space: normal;
}

:where(a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--rood);
	outline-offset: 2px;
}

/* --- Nieuwsrijen ---------------------------------------------------------
   De titelkolom is smal; laat lange woorden alleen breken als het echt niet
   past, niet zomaar middenin.
   ---------------------------------------------------------------------- */

.wp-block-post-title {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* --- Volle breedte -------------------------------------------------------
   De hero moet van rand tot rand lopen. alignfull is daar de nette weg voor,
   maar die reikt niet verder dan de dichtstbijzijnde constrained ouder.
   Dit werkt ongeacht hoe de pagina genest is.
   ---------------------------------------------------------------------- */

.lsbr-hero.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- Personen op de contactpagina ---------------------------------------
   Drie gekleurde secties: Board op mint, de raad op marineblauw, het
   bureau op zand. Portretten vierkant, naam vet, daaronder de termijn of
   de instelling, dan de rol, dan een link naar het profiel.
   ---------------------------------------------------------------------- */

.lsbr-sectie {
	padding-block: var(--wp--preset--spacing--70);
	/* De gekleurde vlakken sluiten op elkaar aan; WordPress zet er anders
	   zijn blokafstand tussen. */
	margin-block: 0;
}

.lsbr-sectie__koprij {
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
	align-items: flex-start;
}

/* De tekstgroep is een constrained blok en rekt daardoor op tot de volle
   breedte, waardoor de knop naar de volgende regel viel. */
.lsbr-sectie__koprij > :first-child {
	flex: 1 1 18rem;
	max-width: 34rem;
}

.lsbr-sectie__koprij .wp-block-buttons {
	margin-block: 0;
}

.lsbr-sectie__kop {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	margin-block: 0 0.35rem;
}

.lsbr-sectie__intro {
	color: #fff;
	margin-block: 0;
}

.lsbr-personen {
	display: grid;
	/* Vast op drie: met auto-fill werden het er twee, omdat drie kolommen van
	   15rem plus de tussenruimte net niet in de tekstkolom pasten. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
}

/* Elke kaart een kolom, met het icoon onderaan. Zo staan de icoontjes van
   een rij op één lijn, ook als de ene naam over drie regels loopt en de
   andere over één. */
.lsbr-persoon {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.lsbr-persoon__portret {
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--wp--preset--color--zandlicht);
}

.lsbr-persoon__portret img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.lsbr-persoon:hover .lsbr-persoon__portret img {
	transform: scale(1.04);
}

.lsbr-persoon__naam {
	font-weight: 700;
	line-height: 1.4;
	margin-block: var(--wp--preset--spacing--30) 0;
}

.lsbr-persoon__zwaar {
	font-weight: 700;
}

.lsbr-persoon__rol {
	margin-block: 0.35rem 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grijs);
}

.lsbr-persoon__link {
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	display: inline-flex;
	color: var(--wp--preset--color--marine);
	line-height: 0;
	transition: color 200ms ease, transform 200ms ease;
}

.lsbr-persoon__link:hover {
	color: var(--wp--preset--color--rood);
	transform: translateY(-2px);
}

/* Op marineblauw moet alles licht zijn — ook het icoon, dat anders zwart
   op donkerblauw staat en onzichtbaar is. */
.lsbr-personen--donker .lsbr-persoon__naam {
	color: #fff;
}

.lsbr-personen--donker .lsbr-persoon__rol {
	color: rgba(255, 255, 255, 0.72);
}

.lsbr-personen--donker .lsbr-persoon__link {
	color: #fff;
}

.lsbr-personen--donker .lsbr-persoon__link:hover {
	color: var(--wp--preset--color--mint);
}

/* --- Contactformulier ---------------------------------------------------
   Velden met alleen een onderstreping, labels klein erboven, en een zwarte
   pilvormige verzendknop — zoals op de oude site.
   ---------------------------------------------------------------------- */

.lsbr-formulier {
	margin-block-end: var(--wp--preset--spacing--70);
	margin-inline: auto;
}

.lsbr-formulier__namen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.lsbr-formulier__regel {
	margin-block: 0 var(--wp--preset--spacing--50);
}

.lsbr-formulier label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	margin-block-end: 0.35rem;
}

.lsbr-formulier :where(input, textarea) {
	font: inherit;
	width: 100%;
	padding: 0.4rem 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--zwart);
	border-radius: 0;
	background: transparent;
	color: inherit;
}

.lsbr-formulier textarea {
	resize: vertical;
	min-height: 3rem;
	height: 3rem;
}

.lsbr-formulier :where(input, textarea):focus-visible {
	outline: 0;
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--marine);
}

.lsbr-formulier [aria-invalid="true"] {
	border-bottom-color: var(--wp--preset--color--signaalrood);
}

.lsbr-formulier button {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	background: var(--wp--preset--color--zwart);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 2.25rem;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.lsbr-formulier button:hover {
	background: var(--wp--preset--color--marine);
	transform: translateY(-1px);
}

.lsbr-formulier button:active {
	transform: translateY(0);
}

.lsbr-formulier__fout {
	display: block;
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--signaalrood);
}

.lsbr-formulier__fouten {
	border-inline-start: 4px solid var(--wp--preset--color--signaalrood);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
	background: #fff5f4;
}

.lsbr-formulier__fouten p {
	margin-block: 0 0.5rem;
	font-weight: 700;
}

.lsbr-formulier__fouten ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.lsbr-formulier--klaar p {
	border-inline-start: 4px solid var(--wp--preset--color--mint);
	padding: var(--wp--preset--spacing--40);
	background: #f2faf8;
	font-weight: 700;
	margin: 0;
}

.lsbr-formulier__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* De grote oranje "Organisation" boven de drie gremia. */
.lsbr-sectiekop-groot {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
}

/* --- Zoekveld in de balk -------------------------------------------------
   Het kernblok maakt de knop net zo hoog als het veld en even breed als
   een woord; op een smalle balk valt dat uit de toon. Terug naar een
   vierkantje met alleen het vergrootglas.
   ---------------------------------------------------------------------- */

.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--lijn);
	background: #fff;
	max-width: 15rem;
}

.wp-block-search .wp-block-search__input {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.35rem 0.6rem;
	border: 0;
	background: transparent;
}

.wp-block-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--marine);
	border: 0;
	padding: 0 0.5rem;
	min-width: 0;
	transition: color 200ms ease;
}

.wp-block-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--rood);
}

.wp-block-search .wp-block-search__button svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* --- Beweging ------------------------------------------------------------
   Overal dezelfde korte overgang, zodat de site reageert zonder te
   stuiteren. Wie beweging heeft uitgezet in zijn systeem krijgt niets.
   ---------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.wp-block-navigation-item__content,
.lsbr-kaart__titel a,
.lsbr-download {
	transition: color 200ms ease, background-color 200ms ease,
		transform 200ms ease, opacity 200ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* Menu: een streep die vanuit het midden uitloopt. */
.wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.25rem;
}

.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--rood);
	transform: scaleX(0);
	transition: transform 250ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wp-block-navigation-item__content:hover::after,
.current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Kaarten in de overzichten: de titel kleurt mee en de kaartlijn licht op. */
.lsbr-kaart {
	transition: border-color 200ms ease;
}

.lsbr-kaart:hover {
	border-bottom-color: var(--wp--preset--color--rood);
}

.lsbr-kaart__portret {
	overflow: hidden;
}

.lsbr-kaart__portret img {
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.lsbr-kaart:hover .lsbr-kaart__portret img {
	transform: scale(1.04);
}

.lsbr-download:hover {
	color: var(--wp--preset--color--rood);
}

.lsbr-download::before {
	transition: transform 200ms ease;
}

.lsbr-download:hover::before {
	transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.lsbr-persoon:hover .lsbr-persoon__portret img,
	.lsbr-kaart:hover .lsbr-kaart__portret img {
		transform: none;
	}
}

/* --- Uitlijning ----------------------------------------------------------
   Twee dingen die het raster onrustig maakten: kaarten met een korte titel
   trokken hun gegevensblok omhoog, en de labelkolom in dat blok werd per
   kaart even breed als het langste woord erin.
   ---------------------------------------------------------------------- */

.lsbr-kaart {
	display: flex;
	flex-direction: column;
}

.lsbr-kaart .lsbr-gegevens {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

.lsbr-gegevens {
	grid-template-columns: minmax(0, 9.5rem) 1fr;
	column-gap: var(--wp--preset--spacing--30);
}

/* Een project zonder samenvatting liet een gat vallen tussen de streep en
   de knop eronder. */
.wp-block-post-content:empty {
	display: none;
}

/* Detailpagina's: de scheidingslijn liep breder dan de tekst erboven. */
.wp-block-separator:not(.alignwide):not(.alignfull) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: 0;
}

/* --- Footer --------------------------------------------------------------
   De kolommen begonnen op verschillende hoogtes omdat de logo's korter zijn
   dan de adresregels ernaast.
   ---------------------------------------------------------------------- */

footer .wp-block-group.alignwide {
	align-items: start;
}

footer .wp-block-image {
	margin-block: 0;
}

footer a {
	transition: color 200ms ease;
}

footer a:hover {
	color: var(--wp--preset--color--rood);
}

/* --- Downloadregels ------------------------------------------------------
   Met wat lucht ertussen; ze stonden tegen elkaar aan geplakt.
   ---------------------------------------------------------------------- */

.lsbr-download {
	padding-block: 0.15rem;
}

/* --- Overzichtspagina's --------------------------------------------------
   Kop, intro en filter staan in een brede groep met een leesbare
   tekstbreedte erin, zodat hun linkerlijn gelijkloopt met het kaartraster
   eronder. Zonder die groep begon de tekst 240px verder naar rechts dan de
   kaarten.
   ---------------------------------------------------------------------- */

.lsbr-inleiding > * {
	margin-inline: 0;
}

.lsbr-inleiding {
	margin-block-end: var(--wp--preset--spacing--60);
}


/* --- Our Impact ----------------------------------------------------------
   Vier kwadranten van een halve schermbreedte met wisselende vlakken. De
   tekst erin blijft op 26rem, want een regel van 700px leest niet.
   ---------------------------------------------------------------------- */

.lsbr-kwadranten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
}

/* WordPress zet blockGap als margin op elk volgend kind; in een raster
   duwt dat het tweede vlak omlaag ten opzichte van het eerste. */
.lsbr-kwadranten > * {
	margin-block: 0;
}

.lsbr-kwadrant {
	display: flex;
	flex-direction: column;
	min-height: 24rem;
	padding: var(--wp--preset--spacing--70) var(--lsbr-marge);
}

.lsbr-kwadrant > * {
	max-width: 26rem;
	margin-inline: 0;
}

.lsbr-kwadrant h3 {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.lsbr-kwadrant p {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.lsbr-kwadrant .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--30);
}

.lsbr-kwadrant .wp-block-image {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* Onder 48rem naast elkaar zetten werkt niet meer: dan is elk vlak 190px
   breed en past er geen regel tekst in. */
@media (max-width: 48rem) {
	.lsbr-kwadranten {
		grid-template-columns: 1fr;
	}

	.lsbr-kwadrant {
		min-height: 0;
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	}
}

/* Van rand tot rand, net als de hero. */
.lsbr-kwadranten.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- Video ---------------------------------------------------------------
   De poster met een eigen afspeelknop. Pas bij klikken komt de YouTube-speler
   erin, dus tot dat moment staat er geen kanaallogo of "Watch on YouTube"
   overheen — en worden er ook geen cookies van Google gezet.
   ---------------------------------------------------------------------- */

.lsbr-video {
	margin-block: var(--wp--preset--spacing--50);
}

.lsbr-video__start {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--marine);
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.lsbr-video__start img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 300ms ease;
}

.lsbr-video__start:hover img {
	transform: scale(1.03);
	opacity: 0.85;
}

.lsbr-video__knop {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5rem;
	height: 5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(13, 7, 93, 0.85);
	color: #fff;
	transition: background-color 250ms ease, transform 250ms ease;
}

.lsbr-video__start:hover .lsbr-video__knop {
	background: var(--wp--preset--color--rood);
	transform: scale(1.08);
}

.lsbr-video__knop svg {
	margin-inline-start: 0.2rem;
}

.lsbr-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.lsbr-video__start:hover img,
	.lsbr-video__start:hover .lsbr-video__knop {
		transform: none;
	}
}

/* --- Detailpagina's ------------------------------------------------------
   Alles in één kolom die links begint: portret, titel, gegevens, video en
   tekst delen dezelfde linkerlijn. Eerder stond het portret op de brede
   maat en de tekst gecentreerd op de smalle, met twee verschillende
   linkerlijnen als resultaat.
   ---------------------------------------------------------------------- */

.lsbr-detail__portret {
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--wp--preset--color--zandlicht);
}

/* Zelfde vierkant als in het overzicht, zodat het portret bij het doorklikken
   zijn vorm houdt. */
.lsbr-detail__portret img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* De regellengte begrenzen zonder de kolom te versmallen: 36rem is ongeveer
   70 tekens bij 17px, wat prettig leest. */
.lsbr-detail .wp-block-post-content > :where(p, ul, ol, h2, h3, h4) {
	max-width: 40rem;
}

.lsbr-detail .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* --- Tijdlijn op Apply for funding ---------------------------------------
   Een omkaderde tabel: datum links, toelichting rechts. Op smal scherm
   klapt de datum boven zijn eigen tekst.
   ---------------------------------------------------------------------- */

.lsbr-tijdlijn {
	border: 1px solid var(--wp--preset--color--lijn);
	margin-block: var(--wp--preset--spacing--60);
}

.lsbr-tijdlijn__rij {
	display: grid;
	grid-template-columns: minmax(0, 12rem) 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--lijn);
}

.lsbr-tijdlijn__rij:last-child {
	border-block-end: 0;
}

.lsbr-tijdlijn__datum {
	font-weight: 700;
	margin: 0;
}

.lsbr-tijdlijn__inhoud p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.lsbr-tijdlijn__inhoud p:last-child {
	margin-block-end: 0;
}

@media (max-width: 40rem) {
	.lsbr-tijdlijn__rij {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* --- Subsidievormen ------------------------------------------------------
   Gekleurde vlakken over de volle breedte: regular en fellowship naast
   elkaar, de Early Career Grant daaronder over de hele breedte in
   marineblauw met omgekeerde knoppen.
   ---------------------------------------------------------------------- */

.lsbr-subsidies {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.wp-block-group.alignfull:has(> .lsbr-subsidies) {
	margin-block: var(--wp--preset--spacing--70) 0;
	padding-inline: 0;
}

/* De gekleurde vlakken sluiten op elkaar aan; alleen boven het eerste en
   onder het laatste komt lucht. */
.wp-block-group.alignfull:has(> .lsbr-subsidies)
	+ .wp-block-group.alignfull:has(> .lsbr-subsidies) {
	margin-block-start: 0;
}

.wp-block-group.alignfull:has(> .lsbr-subsidies--een) {
	margin-block-end: var(--wp--preset--spacing--70);
}

.lsbr-subsidies--een {
	grid-template-columns: 1fr;
}

.lsbr-subsidie {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.lsbr-subsidie--mint {
	background: var(--wp--preset--color--mint);
}

.lsbr-subsidie--zand {
	background: var(--wp--preset--color--zand);
}

.lsbr-subsidie--marine {
	background: var(--wp--preset--color--marine);
}

.lsbr-subsidie__binnen {
	max-width: 30rem;
	margin-inline: auto;
}

.lsbr-subsidie h2 {
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.lsbr-subsidie__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	text-align: center;
	color: var(--wp--preset--color--rood);
	font-size: var(--wp--preset--font-size--small);
	margin-block: 0 var(--wp--preset--spacing--40);
}

.lsbr-subsidie p {
	font-size: var(--wp--preset--font-size--small);
}

.lsbr-subsidie__noot {
	color: var(--wp--preset--color--rood);
	margin-block: var(--wp--preset--spacing--30);
}

.lsbr-subsidie__knop {
	display: block;
	text-align: center;
	text-decoration: none;
	background: var(--wp--preset--color--marine);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.7rem 1.25rem;
	margin-block: var(--wp--preset--spacing--40) 0;
	transition: background-color 200ms ease, transform 200ms ease;
}

.lsbr-subsidie__knop:hover {
	background: var(--wp--preset--color--blauwgrijs);
	color: #fff;
	transform: translateY(-1px);
}

/* Op marineblauw draait alles om: witte tekst, mintkleurige knoppen. */
.lsbr-subsidie--donker {
	color: #fff;
}

.lsbr-subsidie--donker h2 {
	color: #fff;
}

.lsbr-subsidie--donker .lsbr-subsidie__meta,
.lsbr-subsidie--donker .lsbr-subsidie__noot {
	color: rgba(255, 255, 255, 0.85);
}

.lsbr-subsidie--donker .lsbr-subsidie__knop {
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--marine);
}

.lsbr-subsidie--donker .lsbr-subsidie__knop:hover {
	background: #fff;
}

@media (max-width: 48rem) {
	.lsbr-subsidies {
		grid-template-columns: 1fr;
	}

	.lsbr-subsidie {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	}
}

/* --- Aansluiting op de menubalk ------------------------------------------
   WordPress zet blockGap tussen de hoofdsecties, dus tussen de balk en de
   inhoud viel een streep wit. Vlakken die van rand tot rand lopen (de hero,
   de kwadranten) moeten er juist tegenaan sluiten; gewone tekst krijgt wel
   lucht.
   ---------------------------------------------------------------------- */

.wp-site-blocks > main {
	margin-block-start: 0;
}

main > :first-child:not(.alignfull),
main > .wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Begint de pagina met een vlak van rand tot rand, dan mag ook de
   inhoudswrapper er geen lucht boven zetten. */
main > .wp-block-post-content:has(> :first-child.alignfull) {
	margin-block-start: 0;
}

/* --- Lijst met research grants -------------------------------------------
   Eén kolom omkaderde kaarten op ongeveer halve paginabreedte, links onder
   de kop — zoals op de oude site. Een raster van drie maakte de titels te
   smal en de kaarten ongelijk hoog.
   ---------------------------------------------------------------------- */

.lsbr-lijst {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

/* WordPress zet blockGap tussen de kaarten bovenop de gap van het raster;
   dat maakte de tussenruimte vier keer zo groot als bedoeld. */
.lsbr-lijst > * {
	margin-block: 0;
}

.lsbr-grant {
	position: relative;
	border: 1px solid var(--wp--preset--color--lijn);
	padding: var(--wp--preset--spacing--50);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.lsbr-grant:hover {
	border-color: var(--wp--preset--color--rood);
	box-shadow: 0 2px 12px rgb(0 0 0 / 6%);
}

.lsbr-grant__titel {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.lsbr-grant__titel a {
	color: var(--wp--preset--color--rood);
	text-decoration: none;
}

.lsbr-grant__titel a:hover {
	text-decoration: underline;
}

.lsbr-grant .lsbr-gegevens {
	margin-block-start: 0;
}

/* --- Documentknoppen -----------------------------------------------------
   Twee knoppen naast elkaar boven de lijst.
   ---------------------------------------------------------------------- */

.lsbr-documentknoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
}

.lsbr-documentknop {
	background: var(--wp--preset--color--marine);
	color: #fff;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.7rem 1.25rem;
	transition: background-color 200ms ease, transform 200ms ease;
}

.lsbr-documentknop:hover {
	background: var(--wp--preset--color--blauwgrijs);
	color: #fff;
	transform: translateY(-1px);
}

/* Het hele vlak van een grant is klikbaar. De link blijft op de titel staan
   — dat houdt de voorleesvolgorde en het toetsenbord intact — maar zijn
   klikgebied wordt over de kaart uitgerekt. */
.lsbr-grant__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lsbr-grant:hover .lsbr-grant__titel a {
	text-decoration: underline;
}

.lsbr-grant:focus-within {
	border-color: var(--wp--preset--color--rood);
}

/* Tekst in de kaart blijft selecteerbaar ondanks het uitgerekte klikgebied. */
.lsbr-grant .lsbr-gegevens {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.lsbr-grant .lsbr-gegevens a {
	pointer-events: auto;
}

/* --- Fellowspagina -------------------------------------------------------
   Kop links, jaarfilter rechts. Daaronder een raster van kaarten: portret
   met het jaartal erop, en een mintvlak met de projecttitel en de naam.
   ---------------------------------------------------------------------- */

.lsbr-fellowskop {
	margin-block-end: var(--wp--preset--spacing--70);
	gap: var(--wp--preset--spacing--50);
}

.lsbr-fellowskop h1 {
	margin-block: 0;
}

.lsbr-jaarfilter__label {
	font-size: var(--wp--preset--font-size--small);
	margin-block: 0 0.5rem;
}

.lsbr-jaarfilter__knoppen {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.4rem;
}

.lsbr-jaarknop {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--marine);
	border: 1px solid var(--wp--preset--color--marine);
	padding: 0.25rem 0.5rem;
	transition: background-color 200ms ease, color 200ms ease;
}

.lsbr-jaarknop:hover,
.lsbr-jaarknop--aan {
	background: var(--wp--preset--color--marine);
	color: #fff;
}

.lsbr-fellows {
	display: grid;
	/* 20rem als ondergrens geeft drie kolommen op de brede maat, net als op
	   de oude site; bij vier werden de titels te smal. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.lsbr-fellows > * {
	margin-block: 0;
}

.lsbr-fellow {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.lsbr-fellow__beeld {
	position: relative;
	display: block;
	overflow: hidden;
	/* Vierkant, en overal even groot. */
	aspect-ratio: 1;
	background: var(--wp--preset--color--zandlicht);
}

/* Het vierkant wordt gevuld. Uitgelijnd op de bovenkant, want deze
   portretten hebben het hoofd bovenin; met centreren viel er een kruin af. */
.lsbr-fellow__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.lsbr-fellow:hover .lsbr-fellow__beeld img {
	transform: scale(1.04);
}

/* Het jaartal als wit label rechtsboven op de foto. */
.lsbr-fellow__jaar {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	background: #fff;
	color: var(--wp--preset--color--zwart);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
}

.lsbr-fellow__tekst {
	display: block;
	background: #E4EFEA;
	padding: var(--wp--preset--spacing--40);
	flex: 1;
	transition: background-color 200ms ease;
}

.lsbr-fellow:hover .lsbr-fellow__tekst {
	background: var(--wp--preset--color--mint);
}

.lsbr-fellow__titel {
	display: block;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--marine);
}

.lsbr-fellow__naam {
	display: block;
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--zwart);
}

@media (max-width: 48rem) {
	.lsbr-jaarfilter__knoppen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lsbr-fellow:hover .lsbr-fellow__beeld img {
		transform: none;
	}
}

@media (max-width: 48rem) {
	.lsbr-personen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 30rem) {
	.lsbr-personen {
		grid-template-columns: 1fr;
	}
}

/* --- Tijdlijn van toekenningen -------------------------------------------
   Gestapelde kolommen: onderop de reguliere subsidies, daarboven de vier
   programmasubsidies die anders het hele beeld zouden platdrukken. Elke
   kolom is een link naar dat jaar.

   De twee kleuren zijn getoetst met de palletvalidator: lichtheidsband,
   chroma, kleurenblindheidsafstand (ΔE 25,6 bij protanopie) en contrast —
   alle checks slagen. Niet op gevoel gekozen.
   ---------------------------------------------------------------------- */

.lsbr-tl {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--70);
}

.lsbr-tl__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-block-end: var(--wp--preset--spacing--40);
	padding: 0;
}

.lsbr-tl__totaal {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--marine);
}

.lsbr-tl__onder {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--grijs);
}

.lsbr-tl__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: var(--wp--preset--spacing--30);
}

.lsbr-tl__legenda span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

/* Rechthoekje bij een staafgrafiek, geen streepje: het spiegelt de vorm. */
.lsbr-tl__legenda i {
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 2px;
}

.lsbr-tl__vlak {
	position: relative;
}

.lsbr-tl__vlak svg {
	display: block;
	width: 100%;
	height: 260px;
	overflow: visible;
}

.lsbr-tl__raster {
	stroke: var(--wp--preset--color--lijn);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.lsbr-tl__rasterlabel,
.lsbr-tl__jaar {
	fill: var(--wp--preset--color--grijs);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
}

.lsbr-tl__jaar {
	text-anchor: middle;
}

.lsbr-tl__kolom {
	cursor: pointer;
	text-decoration: none;
}

.lsbr-tl__kolom path {
	transition: opacity 160ms ease;
}

/* De aangewezen kolom licht op doordat de rest terugtreedt. */
.lsbr-tl__vlak:hover .lsbr-tl__kolom path {
	opacity: 0.45;
}

.lsbr-tl__vlak .lsbr-tl__kolom:hover path,
.lsbr-tl__vlak .lsbr-tl__kolom:focus-visible path,
.lsbr-tl__kolom--aan path {
	opacity: 1;
}

.lsbr-tl__kolom--aan .lsbr-tl__jaar {
	fill: var(--wp--preset--color--marine);
	font-weight: 700;
}

.lsbr-tl__kolom:focus-visible {
	outline: 2px solid var(--wp--preset--color--marine);
	outline-offset: 2px;
}

.lsbr-tl__tip {
	position: absolute;
	inset-block-start: 0;
	transform: translateX(-50%);
	background: var(--wp--preset--color--marine);
	color: #fff;
	padding: 0.6rem 0.85rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	pointer-events: none;
	white-space: nowrap;
	display: grid;
	gap: 0.15rem;
	z-index: 2;
}

.lsbr-tl__tip strong {
	font-size: var(--wp--preset--font-size--medium);
}

.lsbr-tl__tip span {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

/* In de tooltip een streepje in plaats van een blokje: op die dichtheid is
   een gevuld vierkant te veel inkt voor wat een label doet. */
.lsbr-tl__sleutel {
	width: 0.8rem;
	height: 2px;
	flex: none;
}

.lsbr-tl__sleutel--regulier {
	background: #4A42AA;
}

.lsbr-tl__sleutel--bijzonder {
	background: #E13A11;
}

.lsbr-tl__tipaantal {
	color: rgba(255, 255, 255, 0.7);
}

.lsbr-tl__tabel {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.lsbr-tl__tabel summary {
	cursor: pointer;
	color: var(--wp--preset--color--marine);
}

.lsbr-tl__tabel table {
	width: 100%;
	border-collapse: collapse;
	margin-block-start: var(--wp--preset--spacing--30);
}

.lsbr-tl__tabel :where(th, td) {
	text-align: left;
	padding: 0.35rem 0.75rem 0.35rem 0;
	border-block-end: 1px solid var(--wp--preset--color--lijn);
}

@media (max-width: 40rem) {
	.lsbr-tl__vlak svg {
		height: 200px;
	}

	.lsbr-tl__jaar {
		font-size: 14px;
	}
}

/* --- Beeld nooit bijsnijden ----------------------------------------------
   De bronbeelden lopen van 0,66 tot 2,0 in verhouding. Een vaste
   beeldverhouding met object-fit: cover knipte daar flink vanaf. Overal op
   de site tonen beelden nu op eigen proportie; deze regel houdt dat zo, ook
   als een kernblok er zelf cover op zet.

   Twee uitzonderingen met opzet: de portretrasters op /fellows en /contact
   (daar is een gevuld vierkant het ontwerp) en de hero (een schermbrede
   band die gevuld moet worden).
   ---------------------------------------------------------------------- */

:where(.wp-block-post-featured-image, .lsbr-kaart__portret) img {
	object-fit: contain;
	aspect-ratio: auto;
	height: auto;
}

/* De tussenlaag voor de pagina-overgang mag de opmaak niet veranderen: hij
   vult zijn ouder precies, zodat een percentagehoogte op de afbeelding
   blijft werken. */
.lsbr-morphlaag {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* --- Bestuursbesluiten ----------------------------------------------------
   De notulen komen uit het post type `besluit` en worden door het blok
   lsbr/besluitenlijst op de pagina gezet. Ze dragen dus niet de klassen die
   losse blokken meekrijgen; die maten staan daarom hier. Waarden gelijk aan
   wat er stond: kop op spacing 60, tekst op de kleine maat. */
.lsbr-besluit h2 {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 0;
}

.lsbr-besluit p {
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--style--block-gap);
	margin-bottom: 0;
}