/*
 * Ootes Keurmerk — keurmerk-/certificaatbanner.
 *
 * De kleuren volgen de huisstijl-tokens van het Ootes-thema
 * (--ootes-color-*). Elke var() heeft dezelfde kleur als terugvalwaarde,
 * zodat de banner ook zonder het thema correct oogt.
 */
.ootes-keurmerk {
	--ootes-keurmerk-bg: var(--ootes-color-primary-dark, #002D55);
	--ootes-keurmerk-bg-2: var(--ootes-color-secondary, #004584);
	--ootes-keurmerk-accent: var(--ootes-color-accent, #FF8F06);
	--ootes-keurmerk-accent-dark: var(--ootes-color-accent-dark, #FF5800);
	--ootes-keurmerk-logo-height: 150px;

	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 2.6rem + 3vw, 6.5rem);
	background: linear-gradient(120deg, var(--ootes-keurmerk-bg) 0%, var(--ootes-keurmerk-bg) 35%, var(--ootes-keurmerk-bg-2) 100%);
	color: rgba(255, 255, 255, .86);
}

.ootes-keurmerk *, .ootes-keurmerk *::before, .ootes-keurmerk *::after { box-sizing: border-box; }

.ootes-keurmerk__inner {
	position: relative;
	max-width: var(--ootes-container-width, 1200px);
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

/* Label met het oranje streepje ervoor. */
.ootes-keurmerk .ootes-keurmerk__eyebrow {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.1rem;
	font-family: var(--ootes-font-body, 'Inter', 'Segoe UI', sans-serif);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ootes-keurmerk-accent);
}
.ootes-keurmerk .ootes-keurmerk__eyebrow::before {
	content: '';
	flex: 0 0 2.25rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.ootes-keurmerk .ootes-keurmerk__heading {
	margin: 0 0 1rem;
	max-width: 22ch;
	font-family: var(--ootes-font-heading, 'Playfair Display', Georgia, 'Times New Roman', serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3.1rem);
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.ootes-keurmerk .ootes-keurmerk__text {
	max-width: 58ch;
	font-family: var(--ootes-font-body, 'Inter', 'Segoe UI', sans-serif);
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .86);
}
.ootes-keurmerk .ootes-keurmerk__text p { margin: 0 0 1em; color: inherit; }
.ootes-keurmerk .ootes-keurmerk__text p:last-child { margin-bottom: 0; }
.ootes-keurmerk .ootes-keurmerk__text a { color: #fff; text-decoration: underline; }

.ootes-keurmerk .ootes-keurmerk__button {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	margin-top: 2rem;
	padding: .95rem 1.9rem;
	border-radius: var(--ootes-radius-pill, 999px);
	background: var(--ootes-keurmerk-accent);
	color: #fff;
	font-family: var(--ootes-font-body, 'Inter', 'Segoe UI', sans-serif);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 14px 28px -12px var(--ootes-keurmerk-accent);
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.ootes-keurmerk .ootes-keurmerk__button:hover,
.ootes-keurmerk .ootes-keurmerk__button:focus-visible {
	background: var(--ootes-keurmerk-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}
.ootes-keurmerk .ootes-keurmerk__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ootes-keurmerk .ootes-keurmerk__arrow { flex: none; transition: transform 200ms ease; }
.ootes-keurmerk .ootes-keurmerk__button:hover .ootes-keurmerk__arrow { transform: translateX(3px); }

/* Witte kaart met het logo van het keurmerk. */
.ootes-keurmerk__media { display: flex; justify-content: flex-start; }
.ootes-keurmerk .ootes-keurmerk__card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 340px);
	padding: 2rem 2.5rem;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45);
	transition: transform 200ms ease;
}
.ootes-keurmerk a.ootes-keurmerk__card:hover { transform: translateY(-3px); }
.ootes-keurmerk .ootes-keurmerk__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--ootes-keurmerk-logo-height);
	object-fit: contain;
	filter: none;
}

@media (min-width: 860px) {
	.ootes-keurmerk__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; }
	.ootes-keurmerk--no-image .ootes-keurmerk__inner { grid-template-columns: 1fr; }
	.ootes-keurmerk__media { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ootes-keurmerk .ootes-keurmerk__button,
	.ootes-keurmerk .ootes-keurmerk__arrow,
	.ootes-keurmerk .ootes-keurmerk__card { transition: none; }
}