/**
 * Yinga Blocks — front-end.
 *
 * Bewust géén harde kleuren, maten of fonts: alles komt uit de tokens op de
 * instellingenpagina. De fallbacks hieronder zijn alleen een vangnet.
 */

/* -------------------------------------------------------------------------
 * Sectie
 * ---------------------------------------------------------------------- */

.yb-section {
	position: relative;
	box-sizing: border-box;
	font-family: var(--yb-font-body, system-ui, sans-serif);
	font-size: var(--yb-size-body, 1rem);
	line-height: var(--yb-leading-body, 1.65);
	color: var(--yb-color-text, #2b3a44);
	background-color: var(--yb-color-surface, #fff);
}

.yb-section *,
.yb-section *::before,
.yb-section *::after {
	box-sizing: inherit;
}

.yb-section--bg-white { background-color: var(--yb-color-surface, #fff); }
.yb-section--bg-light { background-color: var(--yb-color-surface-alt, #f4f8fb); }
.yb-section--bg-blue { background-color: var(--yb-color-primary, #0082c8); }
.yb-section--bg-blue-dark { background-color: var(--yb-color-primary-dark, #0b5c96); }
.yb-section--bg-green { background-color: var(--yb-color-accent, #1a9629); }

.yb-section.yb-section--dark,
.yb-section.yb-section--dark .yb-title,
.yb-section.yb-section--dark .yb-text,
.yb-section.yb-section--dark .yb-list__item {
	color: var(--yb-color-on-dark, #fff);
}

.yb-section--top-none { padding-top: 0; }
.yb-section--top-sm { padding-top: var(--yb-space-sm, 2rem); }
.yb-section--top-md { padding-top: var(--yb-space-md, 4rem); }
.yb-section--top-lg { padding-top: var(--yb-space-lg, 6rem); }

.yb-section--bottom-none { padding-bottom: 0; }
.yb-section--bottom-sm { padding-bottom: var(--yb-space-sm, 2rem); }
.yb-section--bottom-md { padding-bottom: var(--yb-space-md, 4rem); }
.yb-section--bottom-lg { padding-bottom: var(--yb-space-lg, 6rem); }

.yb-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(var(--yb-container, 1200px) + var(--yb-gutter, 2rem) * 2);
	margin-inline: auto;
	padding-inline: var(--yb-gutter, 2rem);
}

.yb-container--narrow {
	max-width: calc(var(--yb-container-narrow, 820px) + var(--yb-gutter, 2rem) * 2);
}

.yb-container--wide {
	max-width: calc(var(--yb-container-wide, 1400px) + var(--yb-gutter, 2rem) * 2);
}

/* Blad-patroon op gekleurde vlakken. */
.yb-section--pattern {
	overflow: hidden;
}

/* Het patroon achter de tekst op gekleurde secties. Welke afbeelding dat is —
   het beeldmerk uit het logo — en hoe groot, waar en hoe vaag hij staat, zet je
   in het ontwerpscherm onder Patroon. Zonder afbeelding is er geen patroon. */
.yb-pattern {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	opacity: var(--yb-pattern-alpha, 0.12);
	background-image: var(--yb-pattern-image, none);
	background-repeat: var(--yb-pattern-repeat, no-repeat);
	background-size: var(--yb-pattern-size, 55%);
	background-position: var(--yb-pattern-position, 105% -15%);
}

/* Per blok een andere hoek. De maat en de doorzichtigheid blijven van het
   ontwerpscherm; alleen de plek verschuift. Ze steken bewust een stuk over de
   rand, zodat je er een hoek van ziet in plaats van het hele merkteken. */
.yb-pattern--tl { background-position: -18% -20%; }
.yb-pattern--tr { background-position: 118% -20%; }
.yb-pattern--bl { background-position: -18% 120%; }
.yb-pattern--br { background-position: 118% 120%; }
.yb-pattern--center { background-position: 50% 50%; }

.yb-pattern--flip {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------------------
 * Typografie
 * ---------------------------------------------------------------------- */

/* Twee klassen diep, net als de knoppen: het thema schrijft `.elementor-kit-9 h2`
   en `.elementor-kit-9 a` weg, en die winnen van één klasse. In de editor staat
   die kit-CSS er niet, dus daar zag alles er wél goed uit — vandaar dat een kop
   in het CMS blauw en vet was en op de site zwart en dunner. */
.yb-section .yb-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 1em;
	font-size: var(--yb-size-eyebrow, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yb-color-accent, #1a9629);
}

.yb-section.yb-section--dark .yb-eyebrow {
	color: var(--yb-color-on-dark, #fff);
}

.yb-eyebrow__line {
	display: block;
	width: 1.75em;
	height: 2px;
	background: currentColor;
	flex: none;
}

.yb-section .yb-eyebrow--blue { color: var(--yb-color-primary, #0082c8); }

.yb-section .yb-title {
	margin: 0 0 0.5em;
	font-family: var(--yb-font-heading, system-ui, sans-serif);
	font-size: var(--yb-size-h2, 2rem);
	font-weight: var(--yb-weight-heading, 600);
	line-height: var(--yb-leading-heading, 1.12);
	color: var(--yb-color-primary, #0082c8);
	text-wrap: balance;
}

.yb-section .yb-title--hero {
	font-size: var(--yb-size-h1, 3rem);
	color: var(--yb-color-on-dark, #fff);
	max-width: 18ch;
}

.yb-section.yb-hero--align-center .yb-title--hero {
	max-width: none;
}

.yb-section .yb-text {
	margin: 0;
	max-width: 62ch;
	color: var(--yb-color-text-muted, #5c6b75);
}

.yb-section .yb-text p {
	margin: 0 0 1em;
}

.yb-section .yb-text p:last-child {
	margin-bottom: 0;
}

.yb-section .yb-text--lead {
	max-width: 46ch;
	color: var(--yb-color-on-dark, #fff);
}

.yb-section.yb-section--dark .yb-text {
	color: var(--yb-color-on-dark, #fff);
}

.yb-list {
	margin: 1.5em 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7em;
}

.yb-list__item {
	position: relative;
	padding-left: 2em;
	font-weight: 600;
	font-size: 0.95em;
}

.yb-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: var(--yb-color-accent, #1a9629);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 0.8em;
	background-position: center;
	background-repeat: no-repeat;
}

.yb-section--dark .yb-list__item::before {
	background-color: var(--yb-color-on-dark, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5c96' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.yb-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.yb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: var(--yb-btn-padding, 0.9em 1.6em);
	border: 2px solid transparent;
	border-radius: var(--yb-radius-button, 999px);
	font-family: var(--yb-font-body, inherit);
	font-size: var(--yb-btn-size, 0.95rem);
	font-weight: var(--yb-btn-weight, 600);
	letter-spacing: var(--yb-btn-tracking, 0);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.yb-btn:focus-visible {
	outline: 3px solid var(--yb-color-accent, #1a9629);
	outline-offset: 3px;
}

.yb-section .yb-btn--primary {
	background: var(--yb-color-accent, #1a9629);
	border-color: var(--yb-color-accent, #1a9629);
	color: var(--yb-color-on-dark, #fff);
}

.yb-section .yb-btn--primary:hover {
	background: var(--yb-color-accent-dark, #147a20);
	border-color: var(--yb-color-accent-dark, #147a20);
	color: var(--yb-color-on-dark, #fff);
}

.yb-section .yb-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: var(--yb-color-accent, #1a9629);
}

.yb-section.yb-section--dark .yb-btn--secondary {
	color: var(--yb-color-on-dark, #fff);
}

.yb-section .yb-btn--secondary:hover {
	background: var(--yb-color-accent, #1a9629);
	border-color: var(--yb-color-accent, #1a9629);
	color: var(--yb-color-on-dark, #fff);
}

.yb-section .yb-btn--tertiary {
	padding-inline: 0;
	background: none;
	border-color: transparent;
	color: var(--yb-color-accent, #1a9629);
}

.yb-btn--tertiary .yb-btn__label::after {
	content: " →";
}

.yb-btn--tertiary:hover .yb-btn__label::after {
	content: " →";
	padding-left: 0.2em;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.yb-hero {
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	color: var(--yb-color-on-dark, #fff);
	background-color: var(--yb-color-primary-dark, #0b5c96);
}

.yb-hero--full {
	min-height: clamp(28rem, 62vh, 42rem);
	padding-block: clamp(4rem, 10vw, 7rem);
}

.yb-hero--compact {
	min-height: clamp(16rem, 34vh, 24rem);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.yb-hero--align-center {
	text-align: center;
	align-items: center;
}

.yb-section.yb-hero--align-center .yb-eyebrow,
.yb-hero--align-center .yb-buttons {
	justify-content: center;
}

.yb-section.yb-hero--align-center .yb-text {
	margin-inline: auto;
}

.yb-hero__media,
.yb-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.yb-hero__media img,
.yb-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yb-hero__overlay {
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.10) 100%);
}

.yb-hero--align-center .yb-hero__overlay {
	background: rgba(0, 0, 0, 0.42);
}

.yb-hero__content {
	position: relative;
	z-index: 2;
}

.yb-section.yb-hero .yb-eyebrow {
	color: var(--yb-color-on-dark, #fff);
}

/* -------------------------------------------------------------------------
 * Tekst + media
 * ---------------------------------------------------------------------- */

.yb-grid {
	display: grid;
	gap: var(--yb-gap, 3rem);
	align-items: center;
}

.yb-grid--split {
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.yb-grid--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yb-text-media--media-left .yb-grid__text {
		order: 2;
	}

	.yb-text-media--media-left .yb-grid__media {
		order: 1;
	}
}

.yb-grid__media {
	position: relative;
	min-width: 0;
}

.yb-media {
	margin: 0;
	position: relative;
	overflow: hidden;
}

.yb-section .yb-media img,
.yb-section .yb-media video,
.yb-section .yb-media iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ook de afbeelding zelf ronden: dan klopt de vorm ook als een thema of
	   Elementor de clipping van de figure om zeep helpt. */
	border-radius: inherit;
}

.yb-media--image,
.yb-media--video {
	aspect-ratio: 4 / 3;
}

.yb-section.yb-shape-blob .yb-media--image,
.yb-section.yb-shape-blob .yb-media--video {
	border-radius: var(--yb-radius-blob, 8px 90px 8px 90px);
}

.yb-section.yb-shape-soft .yb-media--image,
.yb-section.yb-shape-soft .yb-media--video {
	border-radius: var(--yb-radius-soft, 28px);
}

/* Een pasfoto is staand. In het standaard liggende kader sneed `cover` het
   hoofd of de schouders eraf; 4:5 laat de hele persoon staan. */
.yb-section.yb-shape-portret .yb-media--image,
.yb-section.yb-shape-portret .yb-media--video {
	border-radius: var(--yb-radius-soft, 28px);
	aspect-ratio: 4 / 5;
}

.yb-section.yb-shape-circle .yb-media--image,
.yb-section.yb-shape-circle .yb-media--video {
	border-radius: 50%;
	aspect-ratio: 1;
}

.yb-section.yb-shape-square .yb-media--image,
.yb-section.yb-shape-square .yb-media--video {
	border-radius: 0;
}

.yb-media--embed {
	aspect-ratio: 16 / 9;
	border-radius: var(--yb-radius-soft, 28px);
}

.yb-media--embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Video-facade: pas laden na klik. */
.yb-section .yb-video {
	cursor: pointer;
	background: var(--yb-color-primary-dark, #0b5c96);
}

.yb-video__poster {
	transition: transform 0.4s ease;
}

.yb-video:hover .yb-video__poster {
	transform: scale(1.03);
}

/* Een thema dat `button` opmaakt — Bootstrap-resten in een child-theme
   bijvoorbeeld — maakte hiervan een roze balk over de volle breedte. Daarom
   twee klassen diep, en padding, breedte en vorm expliciet terug. */
.yb-section .yb-video__play {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	inset: 0;
	margin: auto;
	box-sizing: border-box;
	width: 5rem;
	min-width: 0;
	max-width: none;
	height: 5rem;
	min-height: 0;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	text-transform: none;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.yb-section .yb-video__play:hover {
	transform: scale(1.06);
	background: #fff;
}

/* Het driehoekje is een randtruc: nul bij nul groot, met alleen een linkerrand.
   Zet een thema er een hoogte of breedte op, dan wordt het een blauw blokje —
   vandaar de nullen met zoveel woorden. */
.yb-section .yb-video__triangle {
	display: block;
	box-sizing: border-box;
	width: 0;
	min-width: 0;
	height: 0;
	min-height: 0;
	padding: 0;
	margin-left: 0.35rem;
	background: none;
	border-style: solid;
	border-width: 0.85rem 0 0.85rem 1.35rem;
	border-color: transparent transparent transparent var(--yb-color-primary-dark, #0b5c96);
	border-radius: 0;
}

/* Formulier of embed in een kaart. */
.yb-form-card {
	background: var(--yb-color-surface, #fff);
	border-radius: var(--yb-radius-md, 20px);
	box-shadow: var(--yb-shadow-card, 0 18px 40px rgba(11, 92, 150, 0.1));
	padding: clamp(1.5rem, 3vw, 2.5rem);
	color: var(--yb-color-text, #2b3a44);
}

.yb-form-card__title {
	margin: 0 0 1.25rem;
	font-family: var(--yb-font-heading, inherit);
	font-size: var(--yb-size-h3, 1.4rem);
	font-weight: var(--yb-weight-heading, 600);
	color: var(--yb-color-text, #2b3a44);
}

.yb-form-card__note {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	text-align: center;
	color: var(--yb-color-text-muted, #5c6b75);
}

/* Alleen tekst: smalle leeskolom, ook binnen een brede container. */
.yb-text-media--single .yb-grid__text {
	max-width: var(--yb-container-narrow, 820px);
}

.yb-section.yb-text-media--single .yb-text {
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.yb-btn,
	.yb-video__poster,
	.yb-section .yb-video__play {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Linkbalk (deeplinks / filterbalk)
 * ---------------------------------------------------------------------- */

.yb-linkbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

/* Op een breed scherm blijft de balk één regel: kopje links, keuzes in het
   midden, link rechts. Op mobiel mag hij wél afbreken — anders wordt het kopje
   tot niets geknepen. */
@media (min-width: 900px) {
	.yb-linkbar--scroll .yb-linkbar__inner {
		flex-wrap: nowrap;
	}
}

.yb-linkbar__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yb-color-on-dark, #fff);
	flex: none;
}

.yb-linkbar__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
	min-width: 0;
}

/* Horizontaal schuiven: tien keuzes passen niet op één regel, maar de balk moet
   wel één regel hoog blijven. Alleen de keuzes schuiven — het kopje links en de
   link rechts blijven staan. */
.yb-linkbar--scroll .yb-linkbar__items {
	/* flex-basis 0, niet auto: met auto wordt de natuurlijke breedte van tien
	   keuzes de basis, en dan wipt de balk alsnog naar drie regels in plaats van
	   te schuiven. */
	flex: 1 1 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	/* Een dunne balk, en alleen wanneer er écht iets te schuiven valt — de
	   browser toont hem vanzelf pas bij overloop. Helemaal verbergen zou het
	   schuiven onvindbaar maken. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
	/* Ruimte voor de focusring van de laatste keuze, anders snijdt de overflow
	   hem af. */
	padding: 4px 4px 0.5rem;
	margin: -4px -4px -0.35rem;
}

.yb-linkbar--scroll .yb-linkbar__items::-webkit-scrollbar {
	height: 6px;
}

.yb-linkbar--scroll .yb-linkbar__items::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
}

.yb-linkbar--scroll .yb-linkbar__items > li {
	flex: none;
	scroll-snap-align: start;
}

/* Op een lichte balk is een witte scrollbar onzichtbaar. */
.yb-linkbar--scroll:not(.yb-section--dark) .yb-linkbar__items {
	scrollbar-color: rgba(12, 43, 64, 0.3) transparent;
}

.yb-linkbar--scroll:not(.yb-section--dark) .yb-linkbar__items::-webkit-scrollbar-thumb {
	background: rgba(12, 43, 64, 0.3);
}

.yb-section .yb-pill {
	display: inline-block;
	padding: 0.5em 1.1em;
	border: 1px solid rgba(255, 255, 255, 0.35);
	/* Een eigen ronding, los van de buttons: de keuzes in "Ik zoek hulp voor"
	   zijn geen buttons maar een rij labels, en die mogen ronder blijven. */
	border-radius: var(--yb-radius-chip, 999px);
	background: rgba(255, 255, 255, 0.08);
	color: var(--yb-color-on-dark, #fff);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

a.yb-pill:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.6);
}

.yb-linkbar__action {
	flex: none;
	margin-left: auto;
}

.yb-linkbar .yb-buttons,
.yb-cards__action .yb-buttons {
	margin-top: 0;
}

.yb-section .yb-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--yb-color-on-dark, #fff);
	padding-block: 0.55em;
}

.yb-section .yb-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: var(--yb-color-on-dark, #fff);
}

/* -------------------------------------------------------------------------
 * Kaarten
 * ---------------------------------------------------------------------- */

.yb-cards__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.yb-cards__intro .yb-title {
	margin-bottom: 0;
}

.yb-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--yb-cols, 3), minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yb-cards--cols-2 { --yb-cols: 2; }
.yb-cards--cols-3 { --yb-cols: 3; }
.yb-cards--cols-4 { --yb-cols: 4; }
.yb-cards--cols-5 { --yb-cols: 5; }
.yb-cards--cols-6 { --yb-cols: 6; }

@media (max-width: 1100px) {
	.yb-cards--cols-4,
	.yb-cards--cols-5,
	.yb-cards--cols-6 { --yb-cols: 3; }
}

@media (max-width: 860px) {
	.yb-cards__grid { --yb-cols: 2; }
}

@media (max-width: 560px) {
	.yb-cards__grid { --yb-cols: 1; }
}

.yb-card {
	margin: 0;
	display: flex;
}

.yb-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

a.yb-card__inner:hover {
	transform: translateY(-3px);
}

.yb-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.yb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yb-card__body {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.1rem, 2vw, 1.6rem);
}

.yb-card__title {
	font-family: var(--yb-font-heading, inherit);
	font-size: var(--yb-size-h3, 1.4rem);
	font-weight: var(--yb-weight-heading, 600);
	line-height: var(--yb-leading-heading, 1.15);
}

.yb-card__text {
	font-size: 0.92rem;
	line-height: 1.55;
}

.yb-card__link {
	margin-top: auto;
	padding-top: 1.25rem;
	align-self: flex-end;
	font-size: 0.85rem;
	font-weight: 600;
}

.yb-card__link::after {
	content: " →";
}

/* Groene kaart met foto erin. */
.yb-cards--green .yb-card__inner {
	min-height: 230px;
	background: var(--yb-color-accent, #1a9629);
	color: var(--yb-color-on-dark, #fff);
}

.yb-cards--green.yb-cards--filter .yb-card__media::after,
.yb-cards--location.yb-cards--filter .yb-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--yb-color-accent, #1a9629);
	opacity: 0.82;
}

.yb-cards--green .yb-card__media,
.yb-cards--location .yb-card__media {
	position: absolute;
}

/* Locatiekaart. */
.yb-cards--location .yb-card__inner {
	min-height: 210px;
	background: var(--yb-color-accent, #1a9629);
	color: var(--yb-color-on-dark, #fff);
	justify-content: flex-end;
}

.yb-cards--location .yb-card__title {
	font-size: 1.05rem;
	line-height: 1.2;
}

/* Bij de blad-vorm hapt de grote hoek uit de kaart; daar extra ruimte laten. */
.yb-cards.yb-shape-blob .yb-card__body {
	padding-right: clamp(1.4rem, 3vw, 2.2rem);
}

.yb-cards.yb-shape-blob.yb-cards--location .yb-card__body {
	padding-bottom: clamp(1.2rem, 2vw, 1.6rem);
}

.yb-cards--location .yb-card__text {
	font-size: 0.78rem;
	opacity: 0.9;
}

.yb-card__pin {
	width: 1.4rem;
	height: 1.4rem;
	margin-bottom: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Foto boven, tekst eronder. */
.yb-cards--photo .yb-card__inner {
	background: none;
	color: var(--yb-color-text, #2b3a44);
	overflow: visible;
}

.yb-cards--photo .yb-card__media {
	position: relative;
	inset: auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.yb-cards--photo .yb-card__body {
	padding: 1.1rem 0 0;
}

.yb-cards--photo .yb-card__title {
	color: var(--yb-color-accent, #1a9629);
}

.yb-cards--photo .yb-card__text {
	color: var(--yb-color-text-muted, #5c6b75);
}

.yb-cards--photo .yb-card__link {
	align-self: flex-start;
	color: var(--yb-color-accent, #1a9629);
}

/* Kaartvorm. */
.yb-cards.yb-shape-blob .yb-card__inner,
.yb-cards.yb-shape-blob .yb-cards--photo .yb-card__media {
	border-radius: var(--yb-radius-blob, 8px 90px 8px 90px);
}

.yb-cards.yb-shape-blob.yb-cards--photo .yb-card__media {
	border-radius: var(--yb-radius-blob, 8px 90px 8px 90px);
}

/* Rond: voor portretten. De bladvorm hapt een hoek uit het beeld, en dat valt
   precies op de plek waar bij een pasfoto een schouder of een oor zit. Een
   cirkel snijdt overal evenveel weg en staat naast elkaar rustiger. */
.yb-cards.yb-shape-circle .yb-card__inner,
.yb-cards.yb-shape-circle.yb-cards--photo .yb-card__media {
	border-radius: 50%;
}

.yb-cards.yb-shape-circle.yb-cards--photo .yb-card__media {
	aspect-ratio: 1;
	/* Een cirkel over de volle kolombreedte wordt bij drie kolommen een schotel.
	   Dit houdt hem op pasfotoformaat en zet hem midden boven de naam: groot
	   genoeg om een gezicht te herkennen, klein genoeg dat een rij van vier niet
	   het halve scherm vult. */
	width: 100%;
	max-width: 10.5rem;
	margin-inline: auto;
}

.yb-cards.yb-shape-circle.yb-cards--photo .yb-card__body {
	align-items: center;
	text-align: center;
}

.yb-cards.yb-shape-circle.yb-cards--photo .yb-card__link {
	align-self: center;
}

/* Nog geen foto: dezelfde vorm, met de initialen erin. Zo blijven de namen in
   het raster op één lijn staan in plaats van dat de kaart omhoog schuift. */
.yb-card__media--leeg {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--yb-color-primary, #0082c8) 10%, var(--yb-color-surface, #fff));
}

@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.yb-card__media--leeg {
		background: #e6f1f8;
	}
}

.yb-card__initialen {
	font-family: var(--yb-font-heading, inherit);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--yb-color-primary, #0082c8);
}

.yb-section--dark .yb-card__media--leeg {
	background: rgba(255, 255, 255, 0.12);
}

.yb-section--dark .yb-card__initialen {
	color: var(--yb-color-on-dark, #fff);
}

.yb-cards.yb-shape-soft .yb-card__inner,
.yb-cards.yb-shape-soft.yb-cards--photo .yb-card__media {
	border-radius: var(--yb-radius-soft, 28px);
}

.yb-cards.yb-shape-square .yb-card__inner,
.yb-cards.yb-shape-square.yb-cards--photo .yb-card__media {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * Reviews
 * ---------------------------------------------------------------------- */

.yb-reviews__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.yb-section--dark .yb-reviews__head .yb-title {
	color: var(--yb-color-on-dark, #fff);
}

.yb-reviews__score {
	margin: 0;
	text-align: right;
	flex: none;
	color: var(--yb-color-on-dark, #fff);
}

.yb-reviews__number {
	display: block;
	font-family: var(--yb-font-heading, inherit);
	font-size: var(--yb-size-h2, 2.5rem);
	font-weight: var(--yb-weight-heading, 600);
	line-height: 1;
}

.yb-reviews__source {
	font-size: 0.72rem;
	opacity: 0.85;
}

.yb-reviews__slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* De baan is een flex-item naast de twee pijlen. Zonder flex/min-width bepaalt
   de inhoud de breedte, en dan rekent `grid-auto-columns` in procenten tegen
   zichzelf: de kaarten kropen samen tot een smalle kolom links. */
.yb-reviews__track {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.yb-reviews__track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 860px) {
	.yb-reviews__track {
		grid-auto-columns: minmax(0, calc((100% - 2 * clamp(0.75rem, 1.5vw, 1.25rem)) / 3));
	}

	/* Staan er minder dan drie reviews, dan vullen ze de rij zelf. Op een
	   derde blijven staan gaf één smal kaartje met een leeg vlak ernaast. */
	.yb-reviews__track--n1 {
		/* Eén review over de volle 1200px leest niet; dit is ongeveer twee
		   kaarten breed, met rust ernaast. */
		grid-auto-columns: minmax(0, min(100%, 640px));
	}

	.yb-reviews__track--n2 {
		grid-auto-columns: minmax(0, calc((100% - clamp(0.75rem, 1.5vw, 1.25rem)) / 2));
	}

	/* Twee reviews passen op desktop naast elkaar; dan hebben de pijlen
	   niets te doen. Op mobiel blijven ze staan, daar moet je wél schuiven. */
	.yb-reviews__slider:has(.yb-reviews__track--n2) .yb-slider__nav {
		display: none;
	}
}

/* Eén review schuift nergens heen, op geen enkel scherm. */
.yb-reviews__slider:has(.yb-reviews__track--n1) .yb-slider__nav {
	display: none;
}

.yb-review {
	scroll-snap-align: start;
	padding: clamp(1rem, 2vw, 1.5rem);
	border-radius: var(--yb-radius-md, 20px);
	background: rgba(255, 255, 255, 0.12);
	color: var(--yb-color-on-dark, #fff);
}

.yb-section--bg-white .yb-review,
.yb-section--bg-light .yb-review {
	background: var(--yb-color-surface, #fff);
	color: var(--yb-color-text, #2b3a44);
	box-shadow: var(--yb-shadow-card, 0 18px 40px rgba(11, 92, 150, 0.1));
}

.yb-review__stars {
	margin: 0 0 0.6rem;
	color: var(--yb-color-star, #f2a93b);
	font-size: 0.95rem;
	letter-spacing: 0.1em;
}

.yb-review__quote {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.yb-review__meta {
	margin: 1rem 0 0;
	font-size: 0.8rem;
}

.yb-review__name {
	display: block;
	font-weight: 700;
}

.yb-review__place {
	display: block;
	opacity: 0.8;
}

.yb-section .yb-slider__nav {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	box-sizing: border-box;
	width: 2.25rem;
	min-width: 0;
	height: 2.25rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	box-shadow: none;
	cursor: pointer;
	position: relative;
}

.yb-section .yb-slider__nav:hover {
	background: rgba(255, 255, 255, 0.32);
}

.yb-section .yb-slider__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	color: var(--yb-color-on-dark, #fff);
}

.yb-slider__nav--prev::before {
	transform: translateX(2px) rotate(-135deg);
}

.yb-slider__nav--next::before {
	transform: translateX(-2px) rotate(45deg);
}

.yb-section--bg-white .yb-slider__nav,
.yb-section--bg-light .yb-slider__nav {
	background: rgba(0, 0, 0, 0.06);
}

.yb-section--bg-white .yb-slider__nav::before,
.yb-section--bg-light .yb-slider__nav::before {
	color: var(--yb-color-text, #2b3a44);
}

.yb-slider__nav[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Contactregels
 * ---------------------------------------------------------------------- */

.yb-contact {
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.85rem;
}

.yb-contact__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: 0.95rem;
}

.yb-contact__item a {
	color: inherit;
	text-decoration: none;
}

.yb-contact__item a:hover {
	text-decoration: underline;
}

.yb-contact__item::before {
	content: "";
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	background: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.yb-contact__item--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.63 2.62a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.46-1.2a2 2 0 0 1 2.11-.45c.84.3 1.72.51 2.62.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.63 2.62a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.46-1.2a2 2 0 0 1 2.11-.45c.84.3 1.72.51 2.62.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.yb-contact__item--whatsapp::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.1 14.9l-.4-.2-2.4.6.6-2.3-.2-.4A8 8 0 0 1 12 4zm-3 4c-.3 0-.6.1-.8.4-.3.3-.9.9-.9 2s.9 2.3 1 2.5c.1.2 1.7 2.8 4.2 3.8 2.1.8 2.5.7 3 .6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.6-.3-1.6-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5v-.5l-.8-1.8c-.2-.4-.4-.4-.6-.4H9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 2a8 8 0 1 1-4.1 14.9l-.4-.2-2.4.6.6-2.3-.2-.4A8 8 0 0 1 12 4zm-3 4c-.3 0-.6.1-.8.4-.3.3-.9.9-.9 2s.9 2.3 1 2.5c.1.2 1.7 2.8 4.2 3.8 2.1.8 2.5.7 3 .6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.6-.3-1.6-.8c-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5v-.5l-.8-1.8c-.2-.4-.4-.4-.6-.4H9z'/%3E%3C/svg%3E");
}

.yb-contact__item--mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

.yb-contact__item--pin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Titelkleuren
 * ---------------------------------------------------------------------- */

.yb-section .yb-title--green { color: var(--yb-color-accent, #1a9629); }
.yb-section .yb-title--blue { color: var(--yb-color-primary, #0082c8); }
.yb-section .yb-title--dark { color: var(--yb-color-text, #2b3a44); }
.yb-section .yb-title--white { color: var(--yb-color-on-dark, #fff); }

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.yb-faq__list {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--yb-color-border, #dce6ed);
}

.yb-faq__item {
	border-bottom: 1px solid var(--yb-color-border, #dce6ed);
}

.yb-faq__question {
	position: relative;
	display: block;
	padding: 1.1em 2.5rem 1.1em 0;
	font-family: var(--yb-font-heading, inherit);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--yb-color-text, #2b3a44);
	cursor: pointer;
	list-style: none;
}

.yb-faq__question::-webkit-details-marker {
	display: none;
}

.yb-faq__question:hover {
	color: var(--yb-color-primary, #0082c8);
}

.yb-faq__question::after {
	content: "";
	position: absolute;
	right: 0.4rem;
	top: 1.5em;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--yb-color-accent, #1a9629);
	border-bottom: 2px solid var(--yb-color-accent, #1a9629);
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.2s ease;
}

.yb-faq__item[open] .yb-faq__question::after {
	transform: translateY(-25%) rotate(225deg);
}

.yb-faq__answer {
	padding: 0 2.5rem 1.4em 0;
	color: var(--yb-color-text-muted, #5c6b75);
}

.yb-faq__answer p {
	margin: 0 0 0.8em;
}

.yb-faq__answer p:last-child {
	margin-bottom: 0;
}

.yb-section--dark .yb-faq__question,
.yb-section--dark .yb-faq__answer {
	color: var(--yb-color-on-dark, #fff);
}

.yb-section--dark .yb-faq__list,
.yb-section--dark .yb-faq__item {
	border-color: rgba(255, 255, 255, 0.25);
}

/* -------------------------------------------------------------------------
 * CTA-balk (afspraak kort)
 * ---------------------------------------------------------------------- */

.yb-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.yb-cta--center .yb-cta__inner {
	flex-direction: column;
	text-align: center;
}

.yb-cta__text {
	margin: 0;
	font-family: var(--yb-font-heading, inherit);
	font-size: var(--yb-size-h3, 1.4rem);
	font-weight: var(--yb-weight-heading, 600);
	line-height: 1.25;
	color: var(--yb-color-on-dark, #fff);
}

.yb-section--bg-white .yb-cta__text,
.yb-section--bg-light .yb-cta__text {
	color: var(--yb-color-text, #2b3a44);
}

.yb-cta__action .yb-buttons {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Filter en paginering (kennisbank)
 * ---------------------------------------------------------------------- */

.yb-filter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	margin: clamp(1.25rem, 2.5vw, 2rem) 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--yb-color-border, #dce6ed);
}

.yb-filter__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yb-color-text-muted, #5c6b75);
}

.yb-filter__group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.yb-filter .yb-pill {
	border-color: var(--yb-color-border, #dce6ed);
	background: transparent;
	color: var(--yb-color-text, #2b3a44);
	border-radius: var(--yb-radius-button, 999px);
}

.yb-filter a.yb-pill:hover {
	border-color: var(--yb-color-primary, #0082c8);
	background: transparent;
	color: var(--yb-color-primary, #0082c8);
}

.yb-filter .yb-pill.is-active {
	background: var(--yb-color-primary, #0082c8);
	border-color: var(--yb-color-primary, #0082c8);
	color: var(--yb-color-on-dark, #fff);
}

.yb-filter__reset {
	align-self: flex-end;
	font-size: 0.85rem;
	color: var(--yb-color-text-muted, #5c6b75);
}

/* Hoofdgroepen, onderwerpen en de uitklapper --------------------------------- */

.yb-filter__group-label,
.yb-filter__sub-label {
	margin: 0 0 0.1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yb-color-text-muted, #5c6b75);
}

/* De hoofdgroep waar je in zit: omlijnd, maar niet gevuld — gevuld is het
   filter dat écht aanstaat. */
.yb-filter .yb-pill.is-open {
	border-color: var(--yb-color-primary, #0082c8);
	color: var(--yb-color-primary, #0082c8);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--yb-color-primary, #0082c8);
}

.yb-filter__sub {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 0 0.25rem 1rem;
	border-left: 3px solid var(--yb-color-accent, #1a9629);
}

.yb-filter .yb-pill--sub {
	font-size: 0.9rem;
	padding-block: 0.4em;
}

.yb-filter__more {
	width: 100%;
}

.yb-filter__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	list-style: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--yb-color-primary, #0082c8);
}

.yb-filter__more > summary::-webkit-details-marker {
	display: none;
}

.yb-filter__more > summary::before {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: 60% 60%;
	transition: transform 0.15s ease;
}

.yb-filter__more[open] > summary::before {
	transform: rotate(-135deg);
}

.yb-filter__more > summary:focus-visible {
	outline: 2px solid var(--yb-color-primary, #0082c8);
	outline-offset: 3px;
}

.yb-filter__more .yb-filter__group {
	margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.yb-filter__more > summary::before {
		transition: none;
	}
}

.yb-section.yb-section--dark .yb-filter .yb-pill {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--yb-color-on-dark, #fff);
}

.yb-section--dark .yb-filter .yb-pill.is-active {
	background: var(--yb-color-on-dark, #fff);
	color: var(--yb-color-primary-dark, #0b5c96);
}

.yb-archive__empty {
	margin: 2rem 0;
	padding: 1.5rem;
	border-radius: var(--yb-radius-md, 20px);
	background: var(--yb-color-surface-alt, #f4f8fb);
	color: var(--yb-color-text-muted, #5c6b75);
	text-align: center;
}

/* Zoekveld ---------------------------------------------------------------- */
/* Eén regel: veld en knop tegen elkaar. Het veld en de knop krijgen expliciet
   hun eigen uiterlijk — het child-theme maakt `button` en `input` op (resten
   van Bootstrap), en die regels winnen van één klasse. */

.yb-search {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: stretch;
}

.yb-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.yb-section .yb-search__veld {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: 1 1 14rem;
	min-width: 0;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0.85rem 1.1rem;
	border: 2px solid var(--yb-color-border, rgba(12, 43, 64, 0.15));
	border-radius: var(--yb-radius-button, 999px);
	background: var(--yb-color-surface, #fff);
	box-shadow: none;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--yb-color-text, #0c2b40);
}

.yb-section .yb-search__veld:focus {
	outline: 0;
	border-color: var(--yb-color-primary, #0082c8);
}

.yb-section .yb-search__knop {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: var(--yb-radius-button, 999px);
	background: var(--yb-color-accent, #1a9629);
	box-shadow: none;
	font: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
	cursor: pointer;
}

.yb-section .yb-search__knop:hover,
.yb-section .yb-search__knop:focus {
	background: var(--yb-color-primary, #0082c8);
	color: #fff;
}

.yb-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.yb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.6em;
	border: 1px solid var(--yb-color-border, #dce6ed);
	border-radius: var(--yb-radius-sm, 8px);
	color: var(--yb-color-text, #2b3a44);
	text-decoration: none;
	font-size: 0.9rem;
}

.yb-pagination .page-numbers:hover {
	border-color: var(--yb-color-primary, #0082c8);
	color: var(--yb-color-primary, #0082c8);
}

.yb-pagination .page-numbers.current {
	background: var(--yb-color-primary, #0082c8);
	border-color: var(--yb-color-primary, #0082c8);
	color: var(--yb-color-on-dark, #fff);
}

/* -------------------------------------------------------------------------
 * Afspraak per vestiging
 * ---------------------------------------------------------------------- */

.yb-appointment__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 860px) {
	.yb-appointment__grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

.yb-appointment__title {
	margin: 0 0 1rem;
}

.yb-section--dark .yb-appointment__title {
	color: var(--yb-color-on-dark, #fff);
}

.yb-appointment__place {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-weight: 600;
}

/* Woord en vestigingsnaam in één label: "Vestiging: Tilburg". Twee losse
   onderdelen lazen als twee dingen die niets met elkaar te maken hadden. */
.yb-section .yb-appointment__badge {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 0.3rem 0.85rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--yb-badge-text, #fff);
	background-color: var(--yb-badge-bg, transparent);
	border-color: var(--yb-badge-border, transparent);
	text-decoration: none;
}

/* Vijf varianten, want wat leesbaar is hangt af van de achtergrond van de
   sectie. Wit op donkerblauw is de standaard: groen op donkerblauw haalde
   de contrasteis van 4.5:1 niet en las daardoor slecht. */
.yb-appointment__badge--white {
	--yb-badge-bg: var(--yb-color-surface, #fff);
	--yb-badge-text: var(--yb-color-primary-dark, #0b5c96);
}

.yb-appointment__badge--accent {
	--yb-badge-bg: var(--yb-color-accent, #1a9629);
	--yb-badge-text: var(--yb-color-on-dark, #fff);
}

.yb-appointment__badge--blue {
	--yb-badge-bg: var(--yb-color-primary-dark, #0b5c96);
	--yb-badge-text: var(--yb-color-on-dark, #fff);
}

.yb-appointment__badge--outline {
	--yb-badge-bg: transparent;
	--yb-badge-text: currentcolor;
	--yb-badge-border: currentcolor;
}

.yb-appointment__badge--plain {
	padding-left: 0;
	padding-right: 0;
	--yb-badge-bg: transparent;
	--yb-badge-text: currentcolor;
}

.yb-section a.yb-appointment__badge:hover,
.yb-section a.yb-appointment__badge:focus-visible {
	background-color: color-mix(in srgb, var(--yb-badge-bg, #fff) 88%, #000);
	color: var(--yb-badge-text, #fff);
}

a.yb-appointment__badge--outline:hover,
a.yb-appointment__badge--plain:hover,
a.yb-appointment__badge--outline:focus-visible,
a.yb-appointment__badge--plain:focus-visible {
	background-color: color-mix(in srgb, currentcolor 12%, transparent);
}

/* Geen opacity meer: dat maakte juist het woord "Vestiging:" onleesbaar.
   Het verschil tussen woord en naam komt nu alleen uit het gewicht. */
.yb-appointment__badge-label {
	font-weight: 500;
}

.yb-appointment__badge-naam {
	font-weight: 700;
}

.yb-appointment__text p:last-child {
	margin-bottom: 0;
}

.yb-appointment__treatments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.yb-appointment__treatments li {
	padding: 0.3rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.85rem;
	opacity: 0.85;
}

.yb-appointment__panel {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--yb-radius-md, 20px);
	color: var(--yb-color-text, #2b3a44);
	background-color: var(--yb-color-surface, #fff);
	box-shadow: 0 18px 40px rgba(11, 40, 61, 0.12);
}

.yb-appointment__form > *:last-child {
	margin-bottom: 0;
}

.yb-appointment__note {
	margin-bottom: 1rem;
}

.yb-appointment__note p:last-child {
	margin-bottom: 0;
}

.yb-appointment__contact-title {
	margin: 0 0 0.5rem;
	font-family: var(--yb-font-heading, inherit);
	font-weight: 600;
	color: var(--yb-color-primary, #0082c8);
}

.yb-appointment__contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yb-appointment__contact-item + .yb-appointment__contact-item {
	margin-top: 0.4rem;
}

.yb-section .yb-appointment__contact-item a {
	color: var(--yb-color-primary, #0082c8);
	text-decoration: none;
	font-weight: 600;
}

.yb-section .yb-appointment__contact-item a:hover,
.yb-section .yb-appointment__contact-item a:focus {
	text-decoration: underline;
}

.yb-appointment--form .yb-appointment__contact-title,
.yb-appointment--form .yb-appointment__contact {
	margin-top: 1.25rem;
}

/* Vestigingsgegevens ------------------------------------------------------- */
/* Drie panelen naast elkaar: adres, openingstijden en de kaart. Elk paneel
   heeft zijn eigen, net iets andere ondergrond — genoeg om ze uit elkaar te
   houden, niet zoveel dat het een bonte boel wordt. Ze zijn even hoog en de
   tekst begint overal op dezelfde lijn. */

.yb-locinfo__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: 1fr;
	align-items: stretch;
}

@media (min-width: 640px) {
	.yb-locinfo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yb-locinfo__col--map {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.yb-locinfo__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
	}

	.yb-locinfo__col--map {
		grid-column: auto;
	}
}

.yb-locinfo__col {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	border-radius: var(--yb-radius-md, 20px);
	background: var(--yb-color-surface, #fff);
}

/* Eén tint verschil, zodat de kolommen zich van elkaar onderscheiden zonder
   randen. Op een lichte sectie is dat een tikje blauwer, op wit een tikje
   grijzer — daarom via color-mix met de eigen achtergrond. */
.yb-locinfo__col--uren {
	background: color-mix(in srgb, var(--yb-color-primary, #0082c8) 7%, var(--yb-color-surface, #fff));
}

@supports not (background: color-mix(in srgb, red 7%, blue)) {
	.yb-locinfo__col--uren {
		background: #eef6fb;
	}
}

.yb-locinfo__col--map {
	padding: 0;
	overflow: hidden;
	background: var(--yb-color-surface-alt, #f4f8fb);
	min-height: 260px;
}

/* Elk pand zijn eigen kaart: twee kaarten onder elkaar in dezelfde kolom, met
   een dunne scheiding. Ze delen de hoogte, zodat de kolom niet twee keer zo
   lang wordt als de andere twee. */
.yb-locinfo--panden .yb-locinfo__col--map {
	display: grid;
	grid-auto-rows: minmax(0, 1fr);
	gap: 2px;
}

.yb-locinfo--panden .yb-locinfo__map,
.yb-locinfo--panden .yb-locinfo__map iframe {
	min-height: 180px;
}

/* De naam over de kaart, niet ernaast: anders duwt hij de kaart plat. */
.yb-locinfo__map-naam {
	position: absolute;
	z-index: 1;
	top: 0.5rem;
	left: 0.5rem;
	max-width: calc(100% - 1rem);
	margin: 0;
	padding: 0.3rem 0.6rem;
	border-radius: var(--yb-radius-sm, 8px);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 3px rgba(12, 43, 64, 0.18);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--yb-color-text, #0c2b40);
}

.yb-locinfo__label {
	margin: 0 0 0.75rem;
	font-family: var(--yb-font-heading, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yb-color-primary, #0082c8);
}

.yb-locinfo__address {
	margin: 0 0 1rem;
	font-style: normal;
	line-height: 1.7;
}

.yb-locinfo__route {
	margin: 0 0 1.25rem;
}

/* Meer dan één pand op dezelfde plaats. Het blijft één praktijk, dus de
   panden staan onder elkaar in dezelfde kolom — met een streep ertussen zodat
   je ziet dat het twee adressen zijn en niet één lange. */
.yb-locinfo__pand + .yb-locinfo__pand {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--yb-color-border, rgba(12, 43, 64, 0.12));
}

.yb-locinfo__pand-naam {
	margin: 0 0 0.35rem;
	font-weight: 700;
}

.yb-locinfo__pand-info {
	margin: -0.5rem 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--yb-color-text-muted, #5c6b75);
}

/* Bij twee panden is het laatste adres het einde van de kolom; de marge van de
   routelink eronder maakt dan een gat. */
.yb-locinfo__pand:last-child .yb-locinfo__route {
	margin-bottom: 0;
}

.yb-locinfo__col--adres .yb-locinfo__contact {
	margin-top: 1.25rem;
}

/* Telefoon en e-mail zijn van de hele vestiging, niet van het laatste pand;
   zonder streep eronder lijken ze bij dat adres te horen. */
.yb-locinfo--panden .yb-locinfo__col--adres .yb-locinfo__contact {
	padding-top: 1.25rem;
	border-top: 1px solid var(--yb-color-border, rgba(12, 43, 64, 0.12));
}

.yb-section .yb-locinfo__route a,
.yb-section .yb-locinfo__contact-item a {
	color: var(--yb-color-primary, #0082c8);
	text-decoration: none;
	font-weight: 600;
}

.yb-locinfo__route a:hover,
.yb-locinfo__route a:focus,
.yb-locinfo__contact-item a:hover,
.yb-locinfo__contact-item a:focus {
	text-decoration: underline;
}

.yb-locinfo__contact {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
}

/* Openingstijden: dag links, tijd rechts, cijfers netjes onder elkaar. */
.yb-locinfo__hours {
	margin: 0;
	display: grid;
	gap: 0.15rem;
}

.yb-locinfo__hours-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--yb-color-primary, #0082c8) 14%, transparent);
}

.yb-locinfo__hours-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.yb-locinfo__hours dt {
	font-weight: 600;
}

.yb-locinfo__hours dd {
	margin: 0;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--yb-color-text-muted, #5c6b75);
}

.yb-locinfo__map {
	position: relative;
	height: 100%;
	min-height: 260px;
}

.yb-locinfo__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	border: 0;
}

.yb-locinfo--map-sm .yb-locinfo__col--map,
.yb-locinfo--map-sm .yb-locinfo__map,
.yb-locinfo--map-sm .yb-locinfo__map iframe {
	min-height: 200px;
}

.yb-locinfo--map-lg .yb-locinfo__col--map,
.yb-locinfo--map-lg .yb-locinfo__map,
.yb-locinfo--map-lg .yb-locinfo__map iframe {
	min-height: 360px;
}

.yb-section--dark .yb-locinfo__col {
	background: rgba(255, 255, 255, 0.06);
}

.yb-section--dark .yb-locinfo__col--uren {
	background: rgba(255, 255, 255, 0.12);
}

.yb-section--dark .yb-locinfo__pand + .yb-locinfo__pand,
.yb-section--dark.yb-locinfo--panden .yb-locinfo__contact {
	border-top-color: rgba(255, 255, 255, 0.24);
}

.yb-section--dark .yb-locinfo__pand-info {
	color: rgba(255, 255, 255, 0.78);
}

.yb-section.yb-section--dark .yb-locinfo__label,
.yb-section.yb-section--dark .yb-locinfo__route a,
.yb-section.yb-section--dark .yb-locinfo__contact-item a {
	color: var(--yb-color-on-dark, #fff);
}

/* Lange tekst ------------------------------------------------------------- */
/* Artikelen en overgenomen pagina's: koppen, lijsten en tabellen die in de
   ingevoerde HTML zitten, in plaats van in een veld. Alleen wat in lange tekst
   voorkomt, zodat korte intro's op de homepage hier niets van merken. */

.yb-section .yb-container--narrow .yb-text {
	color: var(--yb-color-text, #16323f);
	max-width: none;
}

.yb-section .yb-text h2,
.yb-section .yb-text h3,
.yb-section .yb-text h4 {
	font-family: var(--yb-font-heading, inherit);
	color: var(--yb-color-primary, #0082c8);
	line-height: 1.25;
	text-wrap: balance;
	margin: 1.8em 0 0.5em;
}

.yb-text > :first-child {
	margin-top: 0;
}

.yb-section .yb-text h2 { font-size: var(--yb-size-h3, 1.6rem); }
.yb-section .yb-text h3 { font-size: var(--yb-size-h3, 1.25rem); }
.yb-section .yb-text h4 { font-size: 1.05rem; }

.yb-text ul,
.yb-text ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.yb-text li {
	margin-bottom: 0.4em;
}

.yb-text ul {
	list-style: none;
	padding-left: 1.5em;
}

.yb-text ul > li {
	position: relative;
}

.yb-text ul > li::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--yb-color-accent, #1a9629);
}

.yb-section .yb-text a {
	color: var(--yb-color-primary, #0082c8);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.yb-text img {
	max-width: 100%;
	height: auto;
	border-radius: var(--yb-radius-md, 12px);
}

.yb-text table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: 0.95em;
}

.yb-text th,
.yb-text td {
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
	border-bottom: 1px solid var(--yb-color-border, rgba(0, 0, 0, 0.1));
}

.yb-text thead th,
.yb-text tr:first-child th {
	font-family: var(--yb-font-heading, inherit);
	color: var(--yb-color-primary, #0082c8);
	border-bottom-width: 2px;
}

.yb-text blockquote {
	margin: 0 0 1.2em;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--yb-color-accent, #1a9629);
	font-style: italic;
}

.yb-section.yb-section--dark .yb-text h2,
.yb-section.yb-section--dark .yb-text h3,
.yb-section.yb-section--dark .yb-text h4,
.yb-section.yb-section--dark .yb-text a,
.yb-section.yb-section--dark .yb-text thead th {
	color: var(--yb-color-on-dark, #fff);
}

/* Hero met een afbeelding naast de titel ------------------------------------ */
/* Geen achtergrondfoto maar een beeld ernaast, in dezelfde vormen als de rest
   van de site. De achtergrondkleur van de sectie blijft gewoon staan, dus de
   tekst houdt zijn contrast zonder overlay. */

.yb-hero__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.yb-hero--media-side .yb-hero__beeld {
	margin: 0;
	width: 100%;
}

.yb-hero--media-side .yb-hero__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	max-width: 100%;
}

/* De beeldvorm bepaalt ook hier de verhouding, anders bleef een portret in
   een liggend kader hangen. */
.yb-section.yb-shape-portret .yb-hero__beeld img { aspect-ratio: 4 / 5; }
.yb-section.yb-shape-circle .yb-hero__beeld img { aspect-ratio: 1; }

/* Een staande foto mag niet de hele sectie hoog worden. De maat moest op het
   kader, niet op de afbeelding: met alleen een max-height op de <img> hield het
   kader zijn volle kolombreedte (512 px → 640 px hoog bij 4:5) en stond er 160
   px leegte onder de foto. Dat maakte de header te hoog en scheef verdeeld. */
.yb-section.yb-shape-portret .yb-hero__beeld {
	max-width: 20rem;
	margin-inline: auto;
}

/* Een ronde pasfoto om dezelfde reden, maar krapper: een cirkel van een halve
   kolom breed werd een schotel naast de naam. */
.yb-section.yb-shape-circle .yb-hero__beeld {
	max-width: 13rem;
	margin-inline: auto;
}

/* En omdat "te groot" smaak is: per blok in te stellen, zodat een portret dat
   ergens anders juist wél de aandacht mag pakken niet dezelfde maat hoeft. */
.yb-hero--beeld-sm .yb-hero__beeld {
	max-width: 10rem;
}

.yb-hero--beeld-lg .yb-hero__beeld {
	max-width: 20rem;
}

.yb-section.yb-shape-portret.yb-hero--beeld-sm .yb-hero__beeld {
	max-width: 14rem;
}

.yb-section.yb-shape-portret.yb-hero--beeld-lg .yb-hero__beeld {
	max-width: 26rem;
}

@media (min-width: 880px) {
	/* De beeldkolom pakt alleen de ruimte die de foto nodig heeft, zodat de
	   tekst ernaast niet in een smal hoekje wordt geduwd. */
	.yb-hero--media-side.yb-shape-portret .yb-hero__inner,
	.yb-hero--media-side.yb-shape-circle .yb-hero__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

@media (min-width: 880px) {
	.yb-hero--media-side .yb-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	}

	.yb-hero--media-side.yb-hero--beeld-left .yb-hero__content {
		order: 2;
	}

	.yb-hero--media-side.yb-hero--beeld-left .yb-hero__beeld {
		order: 1;
	}
}

/* De compacte paginaheader mag met beeld ernaast wat meer lucht krijgen dan
   zonder — anders raakt de foto de onder- en bovenrand. */
.yb-hero--compact.yb-hero--media-side {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.yb-hero--media-side .yb-hero__content {
	max-width: 46ch;
}

/* -------------------------------------------------------------------------
 * Lange adressen en links
 *
 * Een e-mailadres van 29 tekens past niet in een kolom van 329 px. Zonder
 * afbreekregel stak hij het witte kaartje uit; nu breekt hij netjes af.
 * ---------------------------------------------------------------------- */

.yb-locinfo__contact-item a,
.yb-locinfo__route a,
.yb-appointment__contact-item a,
.yb-card__text a {
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Video's in een raster
 *
 * De oude oefeningenpagina was een rij knoppen naar YouTube: elke klik bracht
 * de bezoeker van de site af. Hier speelt de video in de kaart zelf.
 * ---------------------------------------------------------------------- */

.yb-videos__head {
	max-width: 62ch;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.yb-videos__group {
	margin: clamp(1.75rem, 3vw, 2.75rem) 0 1rem;
	font-family: var(--yb-font-heading, inherit);
	font-size: var(--yb-size-h3, 1.35rem);
	font-weight: var(--yb-weight-heading, 600);
	line-height: var(--yb-leading-heading, 1.2);
	color: var(--yb-color-primary, #0082c8);
}

.yb-section--dark .yb-videos__group {
	color: var(--yb-color-on-dark, #fff);
}

.yb-videos__group:first-child {
	margin-top: 0;
}

.yb-videos__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Het aantal kolommen is een maximum, geen dwang: past er minder, dan zakken
   ze vanzelf. Daarom auto-fit met een bovengrens per variant. */
@media (min-width: 700px) {
	.yb-videos--cols-2 .yb-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yb-videos--cols-3 .yb-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yb-videos--cols-4 .yb-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.yb-videos--cols-3 .yb-videos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.yb-videos--cols-4 .yb-videos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.yb-videocard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--yb-radius-md, 20px);
	background: var(--yb-color-surface, #fff);
	box-shadow: var(--yb-shadow-card, 0 18px 40px rgba(11, 92, 150, 0.1));
}

.yb-section--bg-white .yb-videocard {
	background: var(--yb-color-surface-alt, #f4f8fb);
	box-shadow: none;
}

.yb-videocard__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--yb-color-primary-dark, #0b5c96);
	border-radius: 0;
}

.yb-videocard__media--link {
	display: grid;
	place-items: center;
	text-decoration: none;
}

/* Een item zonder video wijst door naar een pagina; dan een pijl in plaats van
   een afspeelknop, zodat je ziet dat er iets anders gebeurt. */
.yb-videocard__arrow {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--yb-color-on-dark, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5c96' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-size: 1.4rem;
	background-position: center;
	background-repeat: no-repeat;
}

.yb-videocard__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(0.9rem, 1.6vw, 1.25rem);
}

.yb-videocard__title {
	margin: 0;
	font-family: var(--yb-font-heading, inherit);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--yb-color-primary-dark, #0b5c96);
}

.yb-section .yb-videocard__title a {
	color: inherit;
	text-decoration: none;
}

.yb-section .yb-videocard__title a:hover {
	text-decoration: underline;
}

.yb-videocard__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--yb-color-text-muted, #5c6b75);
}

/* Knop zonder link — alleen in het voorbeeld in de editor ------------------ */
/* Grijs en gestreept, zodat je ziet dat hij er wél staat maar nog niet af is.
   Op de site komt deze klasse nooit voor. */
.yb-section .yb-btn--placeholder {
	background: repeating-linear-gradient(135deg, #e9eef2 0 6px, #f6f8fa 6px 12px);
	border: 2px dashed #9fb0bd;
	color: #4b5a66;
	cursor: help;
}

.yb-section .yb-btn--placeholder .yb-btn__leeg {
	margin-left: 0.6em;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	background: #c98a12;
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Afspraakblok: de bezoeker kiest een vestiging ---------------------------- */
/* Op een algemene pagina is er geen vestiging om een formulier van te tonen.
   Dan één rij per vestiging: naam, telefoonnummer, en een link naar het
   afspraakblok van die vestiging. Twee klassen diep, want het zijn links en
   het thema kleurt links. */

.yb-appointment__choices {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yb-appointment__choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	border-radius: var(--yb-radius-sm, 8px);
	background: var(--yb-color-surface-alt, #f4f8fb);
}

.yb-section .yb-appointment__choice-link {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
	color: var(--yb-color-text, #2b3a44);
	text-decoration: none;
}

.yb-appointment__choice-naam {
	font-weight: 700;
	color: var(--yb-color-primary-dark, #0b5c96);
}

.yb-appointment__choice-actie {
	flex: none;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--yb-color-accent, #1a9629);
	white-space: nowrap;
}

.yb-section .yb-appointment__choice-link:hover .yb-appointment__choice-actie,
.yb-section .yb-appointment__choice-link:focus .yb-appointment__choice-actie {
	text-decoration: underline;
}

.yb-section .yb-appointment__choice-tel {
	flex: none;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	color: var(--yb-color-text-muted, #5c6b75);
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 540px) {
	.yb-appointment__choice {
		flex-wrap: wrap;
	}

	.yb-section .yb-appointment__choice-tel {
		flex-basis: 100%;
	}
}