/* ════════════════════════════════════════════════════════════════════════════
   09-SITE-SINGLE.CSS — Armonea location page styles
   Loaded conditionally: is_singular('armonea_site') only.
   Sections: lightbox overlay · site CPT template layout & components
════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   Lightbox
   ══════════════════════════════════════════════ */

.site-hero__main,
.site-hero__thumb {
	cursor: pointer;
}

.site-hero__main:hover .site-lightbox-zoom,
.site-hero__thumb:hover .site-lightbox-zoom,
.site-gallery__cell:hover .site-lightbox-zoom,
.site-hero__main-trigger:focus-visible .site-lightbox-zoom,
.site-hero__thumb:focus-visible .site-lightbox-zoom {
	opacity: 1;
}

/* Knop over de hoofdfoto: opent de lightbox. De CTA-link staat ernaast (niet
   erin) en ligt erboven; overlay en teller laten klikken door naar de knop. */
.site-hero__main-trigger {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Kadence kleurt elke <button> bij hover/focus/active (button:hover, 0-1-1):
   roze vlak + schaduw over de foto. Hier terugzetten. */
.site-hero__main-trigger:hover,
.site-hero__main-trigger:focus,
.site-hero__main-trigger:active {
	background: transparent;
	box-shadow: none;
}

.site-hero__main-trigger:focus-visible {
	/* .site-hero__main heeft overflow:hidden — ring binnenin tekenen.
	   Wit + blauwe rand: zichtbaar op lichte én donkere foto's. */
	outline: 3px solid var(--site-color-focus-halo);
	outline-offset: -6px;
	box-shadow: inset 0 0 0 3px var(--site-color-focus);
}

/* Lightbox staat op bijna-zwart: blauwe ring valt weg, dus wit. */
.site-lightbox-overlay :focus-visible {
	outline-color: var(--site-color-on-image);
}

.site-hero__overlay,
.site-hero__photo-count {
	pointer-events: none;
}

.site-hero__overlay .site-hero__cta {
	pointer-events: auto;
}

.site-lightbox-zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, .45);
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .18s ease;
	z-index: 3;
	pointer-events: none;
}

.site-gallery__cell {
	cursor: pointer;
}

.site-gallery__cell-hover {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .18s ease;
}

.site-gallery__cell:hover .site-gallery__cell-hover,
.site-gallery__cell:focus-visible .site-gallery__cell-hover {
	opacity: 1;
}

.site-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .9);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--site-space-s);
}

.site-lightbox-overlay.is-open {
	display: flex;
}

.site-lightbox-overlay__close {
	position: absolute;
	top: var(--site-space-m);
	right: var(--site-space-m);
	background: rgba(255, 255, 255, .1);
	border: 1.5px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--site-color-on-image);
	font-size: 20px;
	line-height: 1;
	transition: background .15s;
}

.site-lightbox-overlay__close:hover,
.site-lightbox-overlay__close:focus,
.site-lightbox-overlay__close:active {
	background: rgba(255, 255, 255, .22);
	color: var(--site-color-on-image);
	box-shadow: none;
}

.site-lightbox-overlay__frame {
	max-width: min(900px, 92vw);
	max-height: 70vh;
	position: relative;
	border-radius: var(--site-radius-l);
	overflow: hidden;
	background: rgba(25, 78, 35, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: min(900px, 92vw);
	min-height: 50vh;
}

.site-lightbox-overlay__img {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	display: block;
}

.site-lightbox-overlay__nav {
	display: flex;
	align-items: center;
	gap: var(--site-space-m);
}

.site-lightbox-overlay__btn {
	background: rgba(255, 255, 255, .1);
	border: 1.5px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--site-color-on-image);
	font-size: 18px;
	transition: background .15s;
}

.site-lightbox-overlay__btn:hover,
.site-lightbox-overlay__btn:focus,
.site-lightbox-overlay__btn:active {
	background: rgba(255, 255, 255, .22);
	color: var(--site-color-on-image);
	box-shadow: none;
}

.site-lightbox-overlay__counter {
	font-size: var(--site-size-small);
	color: rgba(255, 255, 255, .45);
	min-width: 64px;
	text-align: center;
}

.site-lightbox-overlay__caption {
	font-size: var(--site-size-small);
	color: rgba(255, 255, 255, .45);
	font-style: italic;
	max-width: min(900px, 92vw);
	text-align: center;
}


/* ────────────────────────────────────────────────────────────────────────────
   SITE SINGLE — armonea_site CPT detail page
   Template: single-armonea_site.php
   Design:   20260604_woonvorm-single-page-wireframe_v3.html
──────────────────────────────────────────────────────────────────────────── */

/* ── Override Kadence #inner-wrap constraint on armonea_site singles ── */

body.single-armonea_site #inner-wrap {
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

/* ── Unique container — avoids .site-container Kadence name collision ──
   .site-page-container moved to 04-layout.css: event singles use it too
   but never load this file. ── */

/* ── Body layout: 2/3 main + 1/3 sticky sidebar ── */

.site-body-wrap {
	background-color: var(--site-color-bg);
}

.site-body-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	align-items: start;
}

.site-body-main {
	padding: var(--site-space-xl) var(--site-space-xl) var(--site-space-xl) 0;
	border-right: 1px solid rgba(56, 60, 114, .07);
}

.site-body-sidebar {
	padding: var(--site-space-l) var(--site-space-m);
	position: sticky;
	top: 80px;
}

/* ── §01 Hero ── */

.site-hero {
	background-color: var(--site-color-text);
}

.site-hero__breadcrumb {
	background-color: var(--site-color-primary-light);
	padding: var(--site-space-xs) 0;
	font-size: var(--site-size-caption);
	display: flex;
	gap: var(--site-space-xs);
	align-items: center;
	flex-wrap: wrap;
}

.site-hero__breadcrumb a {
	color: var(--site-color-secondary-dark-green);
	font-weight: 500;
	text-decoration: none;
}

.site-hero__breadcrumb a:hover {
	text-decoration: underline;
}

.site-hero__grid {
	/* Mozaïek: grote foto + kolom met de kleine, gestapeld. De maten komen
	   uit de foto's zelf (--r0, --rc, --R, --h; zie armonea_site_mosaic_css()
	   in inc/site-photo-picks.php), dus geen enkele foto wordt bijgesneden,
	   welke mix van staand en liggend er ook gekozen is.
	   Flex verdeelt de breedte in de verhouding r0 : rc (×100: telt flex-grow
	   samen op tot minder dan 1, dan deelt de browser maar dat deel van de
	   ruimte uit; één staande foto werd zo 75% breed); aspect-ratio R op
	   het blok geeft dan exact de hoogte waarbij alles past.
	   Hoogte: normaal 560px. Haalt een combinatie daarmee de volle breedte
	   niet (staande of 4:3-foto's), dan mag het blok tot 25% hoger worden
	   (700px) om breder te kunnen. Is het daarna nog tot 12% te smal, dan
	   vult het tóch de breedte en snijdt het die paar procent af; anders
	   oogt het blok uit lijn met de titel. Pas bij een groter tekort wordt
	   het smaller en centreert het op de donkere band.
	   --hero-grow = de 25%: één getal om bij te stellen. */
	--hero-h: 560px;
	--hero-grow: 1.25;
	display: flex;
	gap: 3px;
	width: min(100%, calc(var(--hero-h) * var(--hero-grow) * var(--R, 2.25) * 1.12));
	max-height: calc(var(--hero-h) * var(--hero-grow));
	aspect-ratio: var(--R, 2.25);
	margin-inline: auto;
}

.site-hero__main {
	flex: calc(var(--r0, 1.5) * 100) 1 0;
	min-width: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background-color: rgba(25, 78, 35, .4);
}

.site-hero__main-img,
.site-hero__thumb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-hero__main-placeholder,
.site-hero__thumb-placeholder {
	position: absolute;
	inset: 0;
	background-color: rgba(25, 78, 35, .25);
}

.site-hero__photo-count {
	position: absolute;
	top: var(--site-space-s);
	right: var(--site-space-s);
	background-color: rgba(0, 0, 0, .5);
	color: var(--site-color-on-image);
	border-radius: var(--site-radius-m);
	padding: 5px var(--site-space-xs);
	font-size: var(--site-size-caption);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 5px;
	z-index: 2;
}

.site-hero__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
	padding: var(--site-space-xl) var(--site-space-l) var(--site-space-m);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-hero__type-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(243, 147, 105, .2);
	border: 1px solid rgba(243, 147, 105, .45);
	color: var(--site-color-primary);
	border-radius: var(--site-radius-s);
	padding: 3px var(--site-space-xs);
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	margin-bottom: var(--site-space-xs);
}

.site-hero__name {
	font-family: var(--site-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--site-color-on-image);
	line-height: 1.1;
	margin-bottom: var(--site-space-2xs);
}

.site-hero__city {
	font-size: var(--site-size-small);
	color: rgba(255, 255, 255, .65);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: var(--site-space-m);
}

.site-hero__cta {
	display: inline-flex;
	width: fit-content;
}

.site-hero__title-wrap {
	background: #fff;
	padding: var(--site-space-m) 0 var(--site-space-m);
}

.site-hero__title-eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin-bottom: var(--site-space-xs);
}

.site-hero__h1 {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h2);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.2;
	margin-bottom: var(--site-space-s);
}

.site-hero__col {
	flex: calc(var(--rc, .75) * 100) 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.site-hero__thumb {
	/* Aandeel in de kolomhoogte = 1/r, dus elke foto krijgt zijn eigen vorm. */
	flex: calc(var(--h, 1) * 100) 1 0;
	min-height: 0;
	position: relative;
	overflow: hidden;
	background-color: rgba(25, 78, 35, .2);
}

/* ── §03 Intro ── */

.site-intro {
	margin-bottom: var(--site-space-l);
}

.site-intro__eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin-bottom: var(--site-space-xs);
}

.site-intro__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h3);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.25;
	margin-bottom: var(--site-space-s);
}

.site-intro__body {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--site-color-text);
	margin-bottom: var(--site-space-m);
}

.site-intro__care {
	margin-block: var(--site-space-m);
}

.site-intro__care-label {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--site-color-text);
	opacity: .5;
	margin-bottom: var(--site-space-xs);
}

.site-intro__care-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
}

.site-intro__care-tag {
	background: rgba(25, 78, 35, .08);
	border: 1px solid rgba(25, 78, 35, .18);
	color: var(--site-color-secondary-dark-green);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: var(--site-size-caption);
	font-weight: 500;
}

.site-intro__cta {
	display: inline-flex;
}

/* ── Photo break ── */

/* Justified row: beide foto's even hoog, elke breedte volgt de eigen
   verhouding. flex-grow = --r (breedte/hoogte) met flex-basis 0 maakt de
   breedtes evenredig, aspect-ratio maakt de hoogtes dan gelijk. --r komt
   per tegel uit armonea_site_mosaic_css() (inc/site-photo-picks.php). */
.site-photo-break {
	display: flex;
	align-items: flex-start;
	gap: 3px;
	margin-block: var(--site-space-l);
	border-radius: var(--site-radius-m);
	overflow: hidden;
}

.site-photo-break__main,
.site-photo-break__side {
	position: relative;
	flex: calc(var(--r, 1.5) * 100) 1 0;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: var(--r, 1.5);
	background-color: var(--site-color-primary-light);
}

.site-photo-break__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Vangt alleen het afrondingsverschil met de vaste verhouding op. */
	object-fit: cover;
}

/* ── Video ── */

.site-video {
	margin-block: var(--site-space-l);
}

.site-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--site-radius-m);
	overflow: hidden;
	background-color: var(--site-color-primary-light);
}

.site-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── §05 Faciliteiten ── */

.site-facilities {
	padding-block: var(--site-space-l);
	margin-block: var(--site-space-l);
	border-top: 1px solid rgba(56, 60, 114, .08);
}

.site-facilities__eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin-bottom: var(--site-space-xs);
}

.site-facilities__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-m);
}

.site-facilities__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--site-space-m) var(--site-space-xl);
}

.site-facilities__col-title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-small);
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-s);
	padding-bottom: var(--site-space-xs);
	border-bottom: 1.5px solid rgba(25, 78, 35, .15);
	display: flex;
	align-items: center;
	gap: 7px;
}

.site-facilities__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.site-facilities__item {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	display: flex;
	align-items: baseline;
	gap: 7px;
	line-height: 1.4;
}

.site-facilities__item::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--site-color-secondary-dark-green);
	flex-shrink: 0;
	margin-top: 4px;
}

.site-facilities__item--absent {
	opacity: .38;
}

.site-facilities__item--absent::before {
	background-color: rgba(56, 60, 114, .3);
}

/* ── §06 Zorgaanbod ── */

.site-care {
	padding-block: var(--site-space-l);
	margin-block: var(--site-space-l);
	border-top: 1px solid rgba(56, 60, 114, .08);
}

.site-care__eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin-bottom: var(--site-space-xs);
}

.site-care__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-m);
}

.site-care__highlights {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--site-space-xs);
	margin-bottom: var(--site-space-m);
}

.site-care__highlight {
	background-color: var(--site-color-secondary-dark-green);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-s) var(--site-space-m);
	display: flex;
	align-items: center;
	gap: var(--site-space-s);
	color: var(--site-color-on-image);
}

.site-care__highlight-icon {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, .12);
	border-radius: var(--site-radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.site-care__highlight-label {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h5);
	font-weight: 700;
}

.site-care__services {
	list-style: none;
	columns: 2;
	gap: var(--site-space-m);
	margin-bottom: var(--site-space-m);
}

.site-care__service-item {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin-bottom: 6px;
	break-inside: avoid;
}

.site-care__service-item::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: rgba(25, 78, 35, .4);
	flex-shrink: 0;
	margin-top: 4px;
}

/* ── Sidebar ── */

.site-sidebar-card {
	background-color: var(--site-color-bg);
	border: 1px solid rgba(56, 60, 114, .12);
	border-radius: var(--site-radius-l);
	overflow: hidden;
	box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
}

.site-sidebar-card__header {
	background-color: var(--site-color-secondary-dark-green);
	padding: var(--site-space-m);
}

.site-sidebar-card__eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin-bottom: var(--site-space-2xs);
}

.site-sidebar-card__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h5);
	font-weight: 700;
	color: var(--site-color-on-image);
	line-height: 1.2;
}

.site-sidebar-card__body {
	padding: var(--site-space-m);
	display: flex;
	flex-direction: column;
	gap: var(--site-space-s);
}

.site-sidebar__divider {
	border: none;
	border-top: 1px solid rgba(56, 60, 114, .09);
	margin: 0;
}

.site-sidebar__team {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--site-space-s);
}

.site-sidebar__person {
	display: flex;
	align-items: center;
	gap: var(--site-space-xs);
}

.site-sidebar__person-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: rgba(25, 78, 35, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--site-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	flex-shrink: 0;
}

.site-sidebar__person-name {
	font-size: var(--site-size-small);
	font-weight: 600;
	color: var(--site-color-text);
	margin: 0;
}

.site-sidebar__person-role {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: .5;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 1px 0 0;
}

.site-sidebar__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--site-space-xs);
	font-size: var(--site-size-small);
}

.site-sidebar__contact-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--site-color-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--site-color-secondary-dark-green);
	flex-shrink: 0;
}

.site-sidebar__contact-label {
	font-size: var(--site-size-caption);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--site-color-text);
	opacity: .45;
	margin: 0 0 2px;
}

.site-sidebar__contact-value,
.site-sidebar__contact-value a {
	font-weight: 500;
	color: var(--site-color-secondary-dark-green);
	text-decoration: none;
	line-height: 1.4;
}

.site-sidebar__contact-value a:hover {
	text-decoration: underline;
}

.site-sidebar__address {
	font-style: normal;
}

.site-sidebar__address-line {
	display: block;
}

.site-sidebar__social {
	display: flex;
	align-items: center;
	gap: var(--site-space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-sidebar__social-item a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--site-color-primary-light);
	color: var(--site-color-secondary-dark-green);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease;
}

.site-sidebar__social-item a:hover {
	background-color: var(--site-color-primary);
	color: var(--site-color-bg);
}

.site-sidebar__map-iframe {
	display: block;
	border: none;
	border-radius: var(--site-radius-m);
}

.site-sidebar__map-placeholder {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-m);
	height: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--site-space-xs);
	color: var(--site-color-secondary-dark-green);
	font-size: var(--site-size-caption);
	font-weight: 600;
	opacity: .55;
}

.site-sidebar__cta {
	width: 100%;
}

.site-sidebar__capacity {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-s);
	display: flex;
	align-items: center;
	gap: var(--site-space-s);
	margin-top: var(--site-space-xs);
}

.site-sidebar__capacity-num {
	font-family: var(--site-font-heading);
	font-size: 2rem;
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1;
}

.site-sidebar__capacity-label {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: .65;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0;
}

.site-sidebar__capacity-sub {
	font-size: 11px;
	color: var(--site-color-text);
	opacity: .45;
	margin: 1px 0 0;
}

/* ── §07 Gallery ── */

.site-gallery {
	background-color: var(--site-color-text);
	padding-bottom: var(--site-space-m);
}

/* Donkere achtergrond loopt browserbreed, de inhoud niet. Zonder dit rekt het
   raster mee tot de volle viewport: op brede schermen worden de cellen extreem
   breed en laag, en snijdt object-fit: cover de foto's zwaar af. De rijhoogtes
   hieronder (350/300px) zijn op deze containerbreedte ontworpen. */
.site-gallery__header,
.site-gallery__tabs,
.site-gallery__grid {
	max-width: var(--site-container-max);
	margin-inline: auto;
}

.site-gallery__header {
	padding: var(--site-space-m) var(--site-space-l) 0;
}

.site-gallery__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 700;
	color: var(--site-color-on-image);
}

.site-gallery__tabs {
	display: flex;
	gap: var(--site-space-xs);
	padding: var(--site-space-m) var(--site-space-l);
	flex-wrap: wrap;
}

.site-gallery__tab {
	padding: 7px var(--site-space-s);
	border-radius: var(--site-radius-pill);
	font-size: var(--site-size-caption);
	font-weight: 600;
	border: 1.5px solid rgba(255, 255, 255, .2);
	color: rgba(255, 255, 255, .55);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}

.site-gallery__tab--active,
.site-gallery__tab:hover {
	background-color: var(--site-color-primary);
	border-color: var(--site-color-primary);
	color: var(--site-color-text);
}

/* Masonry via CSS-kolommen: elke foto houdt zijn eigen beeldverhouding, dus
   staand en liggend door elkaar geeft geen bijgesneden of half gevulde cellen.
   Bewust géén vaste celhoogtes en géén object-fit — de hoogte volgt de foto. */
.site-gallery__grid {
	display: none;
	columns: 3;
	column-gap: 3px;
}

.site-gallery__grid--active {
	display: block;
}

.site-gallery__cell {
	position: relative;
	overflow: hidden;
	break-inside: avoid;
	margin-bottom: 3px;
}

.site-gallery__img {
	display: block;
	width: 100%;
	height: auto;
}

.site-gallery__cell--placeholder {
	background-color: #EEEDF2;
}

/* Geen foto om de hoogte te bepalen, dus zelf een tegelvorm aanhouden. */
.site-gallery__cell--overflow {
	aspect-ratio: 4 / 3;
	background-color: rgba(0, 0, 0, .55);
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-gallery__overflow-label {
	font-family: var(--site-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--site-color-on-image);
}

/* ── §08 Location ── */

.site-location {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xl) 0;
}

.site-location__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-2xs);
}

.site-location__subtitle {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .6;
	margin-bottom: var(--site-space-m);
}

.site-location__map-iframe {
	display: block;
	border: none;
	border-radius: var(--site-radius-m);
	width: 100%;
}

.site-location__actions {
	display: flex;
	gap: var(--site-space-xs);
	margin-top: var(--site-space-s);
	flex-wrap: wrap;
}

.site-location__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--site-space-xs);
	margin-top: var(--site-space-m);
}

.site-location__chip {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-pill);
	padding: 5px var(--site-space-s);
	font-size: var(--site-size-small);
	font-weight: 500;
	color: var(--site-color-text);
}

/* ── §08b Iriscare — wettelijke informatie ── */

.site-iriscare {
	background-color: var(--site-color-bg);
	padding: 0 0 var(--site-space-xl);
}

.site-iriscare__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-2xs);
}

.site-iriscare__subtitle {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .6;
	margin-bottom: var(--site-space-m);
}

.site-iriscare__list {
	display: grid;
	gap: var(--site-space-s);
	margin: 0;
}

.site-iriscare__item {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-s);
}

.site-iriscare__label {
	font-size: var(--site-size-small);
	font-weight: 700;
	color: var(--site-color-secondary-dark-blue);
	margin: 0;
}

.site-iriscare__value {
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	margin: var(--site-space-2xs) 0 0;
}

.site-iriscare__line {
	margin: 0;
}

.site-iriscare__file {
	font-weight: 600;
	color: var(--site-color-secondary-dark-blue);
	text-decoration: underline;
}

.site-iriscare__file-meta {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .6;
	margin-left: var(--site-space-2xs);
}

/* ── §10 Testimonials ── */

.site-testimonials {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xl) var(--site-space-l);
}

.site-testimonials__eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin-bottom: var(--site-space-2xs);
}

.site-testimonials__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-l);
}

.site-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--site-space-s);
}

.site-testi-card {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-m);
	display: flex;
	flex-direction: column;
	gap: var(--site-space-xs);
}

.site-testi-card__stars {
	color: var(--site-color-secondary-dark-prune);
	font-size: var(--site-size-small);
	letter-spacing: 2px;
}

.site-testi-card__quote {
	font-size: var(--site-size-small);
	line-height: 1.7;
	color: var(--site-color-text);
	font-style: italic;
	flex: 1;
}

.site-testi-card__author {
	display: flex;
	align-items: center;
	gap: var(--site-space-xs);
	padding-top: var(--site-space-xs);
	border-top: 1px solid rgba(56, 60, 114, .08);
}

.site-testi-card__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(25, 78, 35, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--site-font-heading);
	font-size: var(--site-size-small);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	flex-shrink: 0;
}

.site-testi-card__name {
	font-size: var(--site-size-caption);
	font-weight: 600;
	color: var(--site-color-text);
}

.site-testi-card__relation {
	font-size: 11px;
	color: var(--site-color-text);
	opacity: .5;
}

/* ── §11 Hard CTA ── */

.site-cta {
	background-color: var(--site-color-secondary-dark-green);
	padding: var(--site-space-xxl) var(--site-space-l);
}

.site-cta__inner {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--site-space-xl);
	align-items: center;
	max-width: var(--site-prose-max);
	margin-inline: auto;
}

.site-cta__eyebrow {
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--site-color-secondary-light-yellow);
	margin-bottom: var(--site-space-xs);
}

.site-cta__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h3);
	font-weight: 700;
	color: var(--site-color-on-image);
	line-height: 1.2;
	margin-bottom: var(--site-space-xs);
}

.site-cta__body {
	font-size: var(--site-size-small);
	color: rgba(255, 255, 255, .75);
	line-height: 1.7;
}

.site-cta__form-wrap {
	background-color: var(--site-color-bg);
	border-radius: var(--site-radius-l);
	padding: var(--site-space-m);
}

.site-cta__btn {
	display: flex;
	width: 100%;
	justify-content: center;
}

.site-cta__form-placeholder {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: .5;
	text-align: center;
	padding: var(--site-space-m);
}

/* ── Responsive ── */

@media (max-width: 1024px) {
	.site-body-grid {
		grid-template-columns: 1fr;
	}

	.site-body-sidebar {
		position: static;
		padding: var(--site-space-m) var(--site-space-l);
	}

	.site-cta__inner {
		grid-template-columns: 1fr;
	}

	.site-testimonials__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-gallery__grid {
		columns: 2;
	}
}

@media (max-width: 767px) {
	/* Gsm: alleen de grote foto, in zijn eigen verhouding; een staande
	   wordt begrensd op 4:5, anders vult hij het hele scherm. */
	.site-hero__grid {
		width: 100%;
		max-height: none;
		aspect-ratio: max(var(--r0, 1.5), .8);
	}

	.site-hero__col {
		display: none;
	}

	.site-facilities__cols {
		grid-template-columns: 1fr;
		gap: var(--site-space-m);
	}

	.site-care__services {
		columns: 1;
	}

	.site-gallery__grid {
		columns: 1;
	}

	.site-testimonials__grid {
		grid-template-columns: 1fr;
	}

	/* Eén foto op gsm, in zijn eigen verhouding; staand begrensd op 4:5. */
	.site-photo-break__main {
		aspect-ratio: max(var(--r, 1.5), .8);
	}

	.site-photo-break__side {
		display: none;
	}
}