/* ---------------------------------------------------------------------------
 * Blok: Quotes. Twee kolommen met een groot blauw aanhalingsteken, grote
 * quote-tekst en naam plus functie eronder. Standaard op een donkerblauw
 * vlak (casepagina's), via de instelling ook op licht. Maten uit het
 * ontwerp (1920): kolommen 644px met 112px tussenruimte, aanhalingsteken
 * 52x46, quote 36/48 semibold met -1.95px letterafstand, naam 22 medium,
 * functie 18 in grijs.
 * ------------------------------------------------------------------------- */

.blok-quotes {
	padding-block: 60px;
}

.blok-quotes--donker {
	padding-block: 90px;
	background: var(--c-donkerblauw);
	color: var(--c-wit);
}

.blok-quotes--licht {
	color: var(--c-donkerblauw);
}

.blok-quotes__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 112px;
	row-gap: 80px;
}

/* Een enkele quote houdt de kolombreedte van het ontwerp. */
.blok-quotes__item {
	margin: 0;
}

.blok-quotes__teken {
	display: block;
	color: var(--c-blauw);
}

.blok-quotes__teken svg {
	display: block;
	width: 52px;
	height: 46px;
}

.blok-quotes__quote {
	margin: 27px 0 0;
}

.blok-quotes__tekst {
	font-size: 36px;
	line-height: 48px;
	font-weight: 600;
	letter-spacing: -0.054em; /* -1.95px op 36px uit het ontwerp */
}

.blok-quotes__tekst p {
	margin: 0 0 48px;
}

.blok-quotes__tekst p:last-child {
	margin-bottom: 0;
}

.blok-quotes__bron {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 27px;
}

.blok-quotes__naam {
	font-size: 22px;
	font-weight: 500;
	line-height: normal;
}

.blok-quotes__functie {
	font-size: 18px;
	line-height: normal;
	color: var(--c-grijs-4);
}

/* --------------------------------------------------------------------------
 * Smallere schermen: quote-tekst schaalt mee, daaronder een kolom.
 * ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
	.blok-quotes__items {
		column-gap: 60px;
	}

	.blok-quotes__tekst {
		font-size: 28px;
		line-height: 40px;
	}

	.blok-quotes__tekst p {
		margin-bottom: 40px;
	}
}

@media (max-width: 1023px) {
	.blok-quotes__items {
		grid-template-columns: 1fr;
		row-gap: 60px;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel (geen ontwerp beschikbaar): een kolom in de schaal van de
 * andere blokken, aanhalingsteken en tekst kleiner.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blok-quotes {
		padding-block: 40px;
	}

	.blok-quotes--donker {
		padding-block: 60px;
	}

	.blok-quotes__items {
		row-gap: 50px;
	}

	.blok-quotes__teken svg {
		width: 40px;
		height: 35px;
	}

	.blok-quotes__quote {
		margin-top: 18px;
	}

	.blok-quotes__tekst {
		font-size: 22px;
		line-height: 30px;
		letter-spacing: -0.03em;
	}

	.blok-quotes__tekst p {
		margin-bottom: 30px;
	}

	.blok-quotes__bron {
		gap: 3px;
		margin-top: 20px;
	}

	.blok-quotes__naam {
		font-size: 18px;
	}

	.blok-quotes__functie {
		font-size: 14px;
	}
}