/**
 * HOME-CITAAT — Citaat met feitenkaart.
 *
 * Gevolgd naar het ontwerp: het citaat is een licht blauw vlak met een gele kantlijn,
 * met het klantlogo als ronde schijf links náást de tekst. De feitenkaart ernaast is
 * marineblauw en even hoog.
 */

.drieo-home-citaat__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--drieo-gap);
	align-items: stretch;
}

.drieo-home-citaat__blok {
	grid-column: span 2;
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: 44px;
	border-left: 4px solid var(--drieo-geel);
	border-radius: var(--drieo-radius-groot);
	background: var(--drieo-vlak-tint);
}

.drieo-home-citaat__logo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 130px;
	padding: 20px;
	overflow: hidden;
	border: 1px solid var(--drieo-beeld-leeg);
	border-radius: 50%;
	background: var(--drieo-wit);
}

.drieo-home-citaat__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.drieo-home-citaat__inhoud {
	min-width: 0;
}

.drieo-home-citaat__tekst {
	margin: 0 0 1.125rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--drieo-tekst-kop);
	text-wrap: pretty;
}

.drieo-home-citaat__bron {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--drieo-tekst);
}

.drieo-home-citaat__kaart {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px;
	border-radius: var(--drieo-radius-groot);
	background: var(--drieo-marine);
	color: var(--drieo-tekst-op-donker);
}

.drieo-home-citaat__kaartkop {
	margin: 0;
	color: var(--drieo-cyaan);
	font-size: var(--drieo-eyebrow);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--drieo-ls-eyebrow);
	text-transform: uppercase;
}

.drieo-home-citaat__feiten {
	display: grid;
	gap: .625rem;
	margin: 1.375rem 0 0;
	font-size: .875rem;
	line-height: 1.5;
}

/* Twee vaste kolommen: het label houdt links zijn eigen breedte, de waarde vult de rest.
   Met flex week het label mee zodra de waarde lang werd, waardoor "Wat we deden" over
   twee regels brak terwijl de waarde ernaast óók brak. */
.drieo-home-citaat__feit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: .25rem 1.25rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--drieo-lijn-op-donker);
}

.drieo-home-citaat__feit dt {
	color: var(--drieo-tekst-op-blauw);
	white-space: nowrap;
}

.drieo-home-citaat__feit dd {
	margin: 0;
	color: var(--drieo-wit);
	text-align: right;
	text-wrap: pretty;
}

.drieo-home-citaat__kaart .drieo-knop {
	margin-top: 1.5rem;
	align-self: flex-start;
}

@media (max-width: 1023px) {
	.drieo-home-citaat__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.drieo-home-citaat__blok {
		grid-column: auto;
		padding: 32px;
	}
}

@media (max-width: 767px) {
	.drieo-home-citaat__blok {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		padding: 24px 22px;
	}

	.drieo-home-citaat__logo {
		width: 96px;
		height: 96px;
		padding: 14px;
	}

	.drieo-home-citaat__tekst {
		font-size: 1.1875rem;
	}

	.drieo-home-citaat__kaart {
		padding: 28px 24px;
	}

	/* Op een smal scherm is er geen ruimte voor twee kolommen: waarde onder het label. */
	.drieo-home-citaat__feit {
		grid-template-columns: minmax(0, 1fr);
		gap: .125rem;
	}

	.drieo-home-citaat__feit dd {
		text-align: left;
	}
}