/* ════════════════════════════════════════════════════════════════════════════
   05-PATTERNS.CSS — Armonea block pattern styles
   All patterns registered via inc/patterns.php
   Hard rules: --site-* vars only · BEM classes · 8pt grid spacing
════════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────────
   WOONVORMEN — 4-kaarten sectie
   Pattern slug: armonea/home-woonvormen
   Blocks:  Group (section) › inner › header › 4× woon-card
   Design:  4-col card grid, 16:10 image top, badge + H3 + desc + link
   Source:  20260309 armonea-homepage-v1.html › #woonvormen
──────────────────────────────────────────────────────────────────────────── */

.woonvormen {
	background-color: var(--site-color-bg);
	padding-block: var(--site-space-xxl);
}

.woonvormen__inner {
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding-inline: var(--site-space-l);
}

.woonvormen__title {
	font-family: var(--site-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	color: var(--site-color-secondary-dark-blue);
	margin-block: var(--site-space-xs) var(--site-space-s);
	max-width: 18ch;
}

.woonvormen__subtitle {
	font-size: 1.0625rem;
	color: var(--site-color-text);
	line-height: 1.6;
	margin-block: 0 var(--site-space-xl);
	max-width: 60ch;
}

.woonvormen__grid.wp-block-columns,
.arm-cards-row.wp-block-columns {
	gap: var(--site-space-s) !important;
	flex-wrap: nowrap;
}

.arm-cards-row.wp-block-columns {
	margin-block: 0;
}

/* ── Card — wp:column carries the woon-card class ────────────────────────── */

.woon-card {
	background: white;
	border-radius: var(--site-radius-m);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-top-width: 4px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	padding: 0 !important;
}

.woon-card--wzc  { border-top-color: var(--site-color-primary); }
.woon-card--sf   { border-top-color: var(--site-color-secondary-light-yellow); }
.woon-card--srh  { border-top-color: var(--site-color-secondary-light-rose); }
.woon-card--dag  { border-top-color: var(--site-color-secondary-dark-green); }

.woon-card:hover {
	transform: translateY(-2px);
}

.woon-card--wzc:hover  { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-primary) 40%, transparent); }
.woon-card--sf:hover   { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-light-yellow) 60%, transparent); }
.woon-card--srh:hover  { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-light-rose) 50%, transparent); }
.woon-card--dag:hover  { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-dark-green) 35%, transparent); }

/* ── Colour variants — design-system colour names ──────────────────────────
   Selectable in de editor: kolom → Stijlen (is-style-card-*, zie
   inc/block-styles.php). Woonvorm-aliassen hierboven blijven werken. */

/* De is-style-kaartkleur mag op de kaart zelf staan (kolom of groep met
   .woon-card) óf op een wrapper erboven — beide vormen werken. */

.woon-card--orange, .woon-card.is-style-card-orange, .is-style-card-orange .woon-card { border-top-color: var(--site-color-primary); }
.woon-card--yellow, .woon-card.is-style-card-yellow, .is-style-card-yellow .woon-card { border-top-color: var(--site-color-secondary-light-yellow); }
.woon-card--rose,   .woon-card.is-style-card-rose,   .is-style-card-rose .woon-card   { border-top-color: var(--site-color-secondary-light-rose); }
.woon-card--green,  .woon-card.is-style-card-green,  .is-style-card-green .woon-card  { border-top-color: var(--site-color-secondary-dark-green); }
.woon-card--blue,   .woon-card.is-style-card-blue,   .is-style-card-blue .woon-card   { border-top-color: var(--site-color-secondary-dark-blue); }

.woon-card--orange:hover, .woon-card.is-style-card-orange:hover, .is-style-card-orange .woon-card:hover { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-primary) 40%, transparent); }
.woon-card--yellow:hover, .woon-card.is-style-card-yellow:hover, .is-style-card-yellow .woon-card:hover { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-light-yellow) 60%, transparent); }
.woon-card--rose:hover,   .woon-card.is-style-card-rose:hover,   .is-style-card-rose .woon-card:hover   { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-light-rose) 50%, transparent); }
.woon-card--green:hover,  .woon-card.is-style-card-green:hover,  .is-style-card-green .woon-card:hover  { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-dark-green) 35%, transparent); }
.woon-card--blue:hover,   .woon-card.is-style-card-blue:hover,   .is-style-card-blue .woon-card:hover   { box-shadow: 0 8px 32px color-mix(in srgb, var(--site-color-secondary-dark-blue) 35%, transparent); }

/* ── Card image ──────────────────────────────────────────────────────────── */

.woon-card__img {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.woon-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.woon-card:hover .woon-card__img img {
	transform: scale(1.04);
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.woon-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--site-space-s);
	gap: var(--site-space-xs);
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.woon-card__badge {
	display: inline-block;
	font-family: var(--site-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 4px;
	margin: 0;
	width: fit-content;
}

.badge--beige  { background-color: var(--site-color-primary-light);          color: var(--site-color-text); }
.badge--yellow { background-color: var(--site-color-secondary-light-yellow);  color: var(--site-color-secondary-dark-prune); }
.badge--rose   { background-color: var(--site-color-secondary-light-rose);    color: var(--site-color-text); }
.badge--orange { background-color: var(--site-color-primary);                 color: white; }

/* ── Card title ──────────────────────────────────────────────────────────── */

.woon-card__title {
	font-family: var(--site-font-heading);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--site-color-secondary-dark-blue);
	margin: var(--site-space-xs) 0 0;
}

/* ── Card description ────────────────────────────────────────────────────── */

.woon-card__desc {
	font-size: 0.9375rem;
	color: var(--site-color-text);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

/* ── Card link ───────────────────────────────────────────────────────────── */

.woon-card__link-wrap {
	margin: auto 0 0;
	padding-top: var(--site-space-s);
}

/* Style élk anchor in de link-wrap — de editor verliest de custom
   .woon-card__link class zodra een link wordt bewerkt/vervangen. */

.woon-card__link,
.woon-card__link-wrap a {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--site-color-secondary-dark-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	transition: color 0.2s ease;
}

.woon-card__link:hover,
.woon-card__link-wrap a:hover {
	color: var(--site-color-primary);
}

.woon-card--wzc  .woon-card__link-wrap a { text-decoration-color: var(--site-color-primary); }
.woon-card--sf   .woon-card__link-wrap a { text-decoration-color: var(--site-color-secondary-light-yellow); }
.woon-card--srh  .woon-card__link-wrap a { text-decoration-color: var(--site-color-secondary-light-rose); }
.woon-card--dag  .woon-card__link-wrap a { text-decoration-color: var(--site-color-secondary-dark-green); }

.woon-card--orange .woon-card__link-wrap a, .is-style-card-orange .woon-card__link-wrap a { text-decoration-color: var(--site-color-primary); }
.woon-card--yellow .woon-card__link-wrap a, .is-style-card-yellow .woon-card__link-wrap a { text-decoration-color: var(--site-color-secondary-light-yellow); }
.woon-card--rose   .woon-card__link-wrap a, .is-style-card-rose .woon-card__link-wrap a   { text-decoration-color: var(--site-color-secondary-light-rose); }
.woon-card--green  .woon-card__link-wrap a, .is-style-card-green .woon-card__link-wrap a  { text-decoration-color: var(--site-color-secondary-dark-green); }
.woon-card--blue   .woon-card__link-wrap a, .is-style-card-blue .woon-card__link-wrap a   { text-decoration-color: var(--site-color-secondary-dark-blue); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.woonvormen__grid.wp-block-columns,
	.arm-cards-row.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.woon-card.wp-block-column {
		flex-basis: calc(50% - var(--site-space-s)) !important;
	}
}

@media (max-width: 767px) {
	.woonvormen__inner {
		padding-inline: var(--site-space-m);
	}

	.woon-card.wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   HERO-FULL
   Pattern slug: armonea/home-hero
   Blocks:  Cover › Group (.hero-full__card) › Heading, Paragraph, Buttons
   Design:  glassmorphism text card on full-bleed photo
   Source:  20260309 armonea-homepage-v1.html › .hero
──────────────────────────────────────────────────────────────────────────── */

/* Cover block: full viewport height, content anchored to bottom */
.hero-full.wp-block-cover {
	min-height: 65vh !important;
	align-items: flex-end;
}

/* Replace Cover's solid overlay with the design-specified gradient scrim */
.hero-full .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgba(20, 20, 40, 0.80) 0%,
		rgba(20, 20, 40, 0.35) 45%,
		rgba(20, 20, 40, 0.08) 100%
	) !important;
	opacity: 1 !important;
}

/* Inner container: constrain width, pad to 8pt grid */
.hero-full .wp-block-cover__inner-container {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding: var(--site-space-xxl) var(--site-space-l);
}

/* ── Glassmorphism card ──────────────────────────────────────────────────── */

.hero-full__card {
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: var(--site-radius-l);
	padding: var(--site-space-l) var(--site-space-xl);
	max-width: 620px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35),
	            inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.hero-full__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--site-color-secondary-light-yellow);
	margin-bottom: var(--site-space-s);
}

/* ── H1 ─────────────────────────────────────────────────────────────────── */

.hero-full__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h1);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: white;
	margin-bottom: var(--site-space-m);
	text-decoration: none;
}

/* Accent word — em used as presentational span (no italic) */
.hero-full__title em {
	font-style: normal;
	color: var(--site-color-primary);
}

/* ── Body paragraph ──────────────────────────────────────────────────────── */

.hero-full__body {
	font-family: var(--site-font-body);
	font-size: 18px; /* between --site-size-body and --site-size-h4; by design spec */
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.6;
	margin-bottom: var(--site-space-l);
	max-width: 480px;
}

/* ── Button row ──────────────────────────────────────────────────────────── */

.hero-full__buttons {
	gap: var(--site-space-s);
	flex-wrap: wrap;
}

/* Primary button */
.hero-full__btn--primary .wp-block-button__link {
	padding: 16px 32px;
	background-color: var(--site-color-primary);
	color: var(--site-color-text);
	border: none;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
	text-decoration: none;
}

.hero-full__btn--primary .wp-block-button__link:hover {
	background-color: var(--site-color-secondary-light-yellow);
	transform: translateY(-1px);
}

/* Ghost inverse button */
.hero-full__btn--ghost-inv .wp-block-button__link {
	padding: 16px 32px;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.17s ease-out,
	            color 0.17s ease-out,
	            transform 0.17s ease-out;
	text-decoration: none;
}

.hero-full__btn--ghost-inv .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: white;
	transform: translateY(-1px);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.hero-full .wp-block-cover__inner-container {
		padding: var(--site-space-xl) var(--site-space-s);
	}

	.hero-full__card {
		padding: var(--site-space-m);
		max-width: 100%;
	}

	.hero-full__title {
		font-size: 36px;
	}

	.hero-full__body {
		font-size: var(--site-size-body);
		max-width: 100%;
	}

	.hero-full__btn--primary .wp-block-button__link,
	.hero-full__btn--ghost-inv .wp-block-button__link {
		padding: var(--site-space-s) var(--site-space-m);
		font-size: var(--site-size-body);
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   CTA BAND — ORANGE  (.cta-band-orange)
   Pattern: armonea/cta-band-orange
   Source:  20260323_cta-band-orange_v2.html
════════════════════════════════════════════════════════════════════════════ */

.cta-band-orange {
	background-color: var(--site-color-primary);
	padding: var(--site-space-xl) var(--site-space-m);
	position: relative;
	overflow: hidden;
}

.cta-band-orange::before {
	content: '«';
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--site-font-heading);
	font-size: 320px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.08);
	pointer-events: none;
	user-select: none;
}

.cta-band-orange__columns {
	gap: var(--site-space-xl);
	margin-block: 0;
}

.cta-band-orange__left {
	display: flex;
	flex-direction: column;
	gap: var(--site-space-m);
}

.cta-band-orange__tag {
	display: inline-flex;
	align-items: center;
	background-color: #fff;
	border-radius: 100px;
	padding: 5px 14px;
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-green);
	width: fit-content;
	margin-block: 0;
}

.cta-band-orange__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(26px, 3.2vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.15;
	margin-block: 0;
	text-decoration: none;
}

.cta-band-orange__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: #fff;
	line-height: 1.65;
	max-width: 52ch;
	margin-block: 0;
}

.cta-band-orange__right {
	display: flex;
	flex-direction: column;
	gap: var(--site-space-m);
}

.cta-band-orange__card {
	background-color: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--site-radius-l);
	padding: var(--site-space-m) var(--site-space-l);
	width: 100%;
}

.cta-band-orange__card-label {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-green);
	opacity: 0.65;
	margin-block: 0 var(--site-space-xs);
}

.cta-band-orange__card-title {
	font-family: var(--site-font-heading);
	font-size: 19px;
	font-weight: 600;
	color: var(--site-color-text);
	line-height: 1.3;
	margin-block: 0 var(--site-space-m);
	text-decoration: none;
}

.cta-band-orange__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 28px;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease-out,
	            color 0.18s ease-out,
	            transform 0.12s ease-out;
}

.cta-band-orange__btn .wp-block-button__link:hover {
	transform: translateY(-1px);
}

.cta-band-orange__btn--primary .wp-block-button__link {
	background-color: var(--site-color-secondary-dark-green);
	color: #fff;
	border: 2px solid var(--site-color-secondary-dark-green);
}

.cta-band-orange__btn--primary .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--site-color-secondary-dark-green) 80%, #000);
	border-color: color-mix(in srgb, var(--site-color-secondary-dark-green) 80%, #000);
}

.cta-band-orange__btn--ghost .wp-block-button__link {
	background-color: #fff;
	color: var(--site-color-secondary-dark-green);
	border: 2px solid #fff;
}

.cta-band-orange__btn--ghost .wp-block-button__link:hover {
	background-color: var(--site-color-secondary-light-yellow);
	border-color: var(--site-color-secondary-light-yellow);
}

@media (max-width: 767px) {
	.cta-band-orange::before {
		display: none;
	}

	.cta-band-orange__columns {
		flex-direction: column;
		gap: var(--site-space-l);
	}

	.cta-band-orange__heading {
		font-size: 26px;
	}

	.cta-band-orange__card {
		padding: var(--site-space-m);
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   GRID USP WAARDEN  (.grid-usp-waarden / .usp-card)
   Pattern: armonea/grid-usp-waarden
   Source:  20260323_grid-usp-waarden_v1.html — Voorstel A
════════════════════════════════════════════════════════════════════════════ */

.grid-usp-waarden {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xxl) var(--site-space-m);
}

.grid-usp-waarden__header {
	margin-block-end: var(--site-space-xl);
}

.grid-usp-waarden__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.grid-usp-waarden__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(28px, 3.5vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.15;
	max-width: 22ch;
	margin-block: 0;
	text-decoration: none;
}

.grid-usp-waarden__grid {
	gap: var(--site-space-m);
	margin-block: 0;
	align-items: stretch;
}

.usp-card {
	background-color: var(--site-color-bg);
	border: 1.5px solid rgba(56, 60, 114, 0.1);
	border-radius: var(--site-radius-l);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.18s ease-out, transform 0.18s ease-out;
}

.usp-card:hover {
	box-shadow: 0 8px 32px rgba(53, 53, 53, 0.1);
	transform: translateY(-2px);
}

.usp-card__image {
	margin-block: 0;
	display: block;
	flex-shrink: 0;
}

.usp-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

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

.usp-card__h3 {
	font-family: var(--site-font-heading);
	font-size: 22px;
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.25;
	margin-block: 0;
	text-decoration: none;
}

.usp-card__p {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	flex: 1;
	margin-block: 0;
}

.usp-card__cta {
	margin-block: var(--site-space-xs) 0;
}

.usp-card__cta a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
	text-decoration: none;
	border-bottom: 2px solid var(--site-color-primary);
	padding-bottom: 2px;
	transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.usp-card__cta a:hover {
	color: var(--site-color-primary);
	border-color: var(--site-color-secondary-dark-green);
}

@media (max-width: 767px) {
	.grid-usp-waarden {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.grid-usp-waarden__grid {
		flex-direction: column;
	}

	.grid-usp-waarden__heading {
		font-size: 28px;
		max-width: 100%;
	}

	.usp-card:hover {
		transform: none;
		box-shadow: none;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   GRID USP 2COL  (.grid-usp-2col)
   Patterns: armonea/grid-usp-2col-d · armonea/grid-usp-2col-e
             armonea/grid-usp-2col-d-headless · armonea/grid-usp-2col-e-headless
   Source:  20260324_grid-usp-waarden_v2.html — Variant D & E
════════════════════════════════════════════════════════════════════════════ */

.grid-usp-2col {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xxl) var(--site-space-m);
}

/* Headless variant: no top padding — connects to the section above */
.grid-usp-2col--headless {
	padding-block-start: 0;
}

.grid-usp-2col__header {
	margin-block-end: var(--site-space-xl);
}

.grid-usp-2col__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.grid-usp-2col__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(28px, 3.5vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.15;
	max-width: 22ch;
	margin-block: 0;
	text-decoration: none;
}

.grid-usp-2col__columns {
	gap: var(--site-space-m);
	margin-block: 0;
	align-items: stretch;
}

/* ── Card modifiers — image height ───────────────────────────────────────── */

/* Fixed image height keeps both cards equal regardless of column width */
.usp-card--large .usp-card__image img,
.usp-card--small .usp-card__image img {
	height: 280px;
	aspect-ratio: unset;
	width: 100%;
	object-fit: cover;
}

/* Large card: bigger heading, more generous body padding */
.usp-card--large .usp-card__body {
	padding: var(--site-space-l) var(--site-space-l) var(--site-space-xl);
}

.usp-card--large .usp-card__h3 {
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
}

.usp-card--large .usp-card__p {
	font-size: var(--site-size-body);
}

@media (max-width: 767px) {
	.grid-usp-2col {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.grid-usp-2col--headless {
		padding-block-start: 0;
	}

	.grid-usp-2col__heading {
		font-size: 28px;
		max-width: 100%;
	}

	.usp-card--large .usp-card__image img,
	.usp-card--small .usp-card__image img {
		height: 220px;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING HERO  (.landing-hero)
   Pattern: armonea/landing-hero
   Blocks:  Group (section) › Columns › Column L (eyebrow+H1+p+btns) · Column R (image)
   BG:      --site-color-primary-light (beige)
════════════════════════════════════════════════════════════════════════════ */

.landing-hero {
	background-color: var(--site-color-primary-light);
	padding: var(--site-space-xxl) var(--site-space-m);
	overflow: hidden;
}

.landing-hero__inner {
	max-width: var(--site-container-max);
	margin-inline: auto;
}

.landing-hero__columns {
	display: flex;
	align-items: center;
	gap: var(--site-space-xl);
	margin-block: 0;
}

.landing-hero__left,
.landing-hero__right {
	min-width: 0;
}

.landing-hero__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.landing-hero__title {
	font-family: var(--site-font-heading);
	font-size: clamp(32px, 4vw, var(--site-size-h1));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--site-color-text);
	margin-block: 0 var(--site-space-m);
	text-decoration: none;
}

.landing-hero__title em {
	font-style: normal;
	color: var(--site-color-secondary-dark-prune);
}

.landing-hero__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	max-width: 52ch;
	margin-block: 0 var(--site-space-l);
}

.landing-hero__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--site-radius-l);
	display: block;
}

.landing-hero__btn--primary .wp-block-button__link {
	padding: 14px 28px;
	background-color: var(--site-color-primary);
	color: var(--site-color-text);
	border: none;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.landing-hero__btn--primary .wp-block-button__link:hover {
	background-color: var(--site-color-secondary-light-yellow);
	transform: translateY(-1px);
}

.landing-hero__btn--ghost .wp-block-button__link {
	padding: 14px 28px;
	background-color: transparent;
	color: var(--site-color-text);
	border: 2px solid var(--site-color-border);
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.landing-hero__btn--ghost .wp-block-button__link:hover {
	background-color: var(--site-color-surface);
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.landing-hero {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.landing-hero__columns {
		flex-direction: column-reverse;
		gap: var(--site-space-m);
	}

	.landing-hero__title {
		font-size: 32px;
	}

	.landing-hero__image img {
		aspect-ratio: 16 / 9;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING INTRO SECTION  (.landing-intro)
   Pattern: armonea/landing-intro
   Blocks:  Group (section) › Paragraph (eyebrow) + H2 + Paragraph
   Use:     Section opener between larger content blocks
════════════════════════════════════════════════════════════════════════════ */

.landing-intro {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xl) var(--site-space-m);
	text-align: center;
}

.landing-intro__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.landing-intro__title {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.2;
	margin-block: 0 var(--site-space-m);
	text-decoration: none;
}

.landing-intro__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.7;
	max-width: 66ch;
	margin-inline: auto;
	margin-block: 0;
}

@media (max-width: 767px) {
	.landing-intro {
		text-align: left;
	}

	.landing-intro__body {
		margin-inline: 0;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING BENEFITS 4COL  (.landing-benefits / .benefit-card)
   Pattern: armonea/landing-benefits-4col
   Blocks:  Group (section) › header group + Columns 4×
   BG:      --site-color-primary-light (beige)
════════════════════════════════════════════════════════════════════════════ */

.landing-benefits {
	background-color: var(--site-color-primary-light);
	padding: var(--site-space-xxl) var(--site-space-m);
}

.landing-benefits__header {
	margin-block-end: var(--site-space-xl);
}

.landing-benefits__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.landing-benefits__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.2;
	max-width: 30ch;
	margin-block: 0;
	text-decoration: none;
}

.landing-benefits__grid {
	gap: var(--site-space-m);
	margin-block: 0;
	align-items: stretch;
}

.benefit-card {
	background-color: var(--site-color-bg);
	border-radius: var(--site-radius-l);
	padding: var(--site-space-m);
	display: flex;
	flex-direction: column;
	gap: var(--site-space-s);
	height: 100%;
}

.benefit-card__icon {
	font-size: 28px;
	line-height: 1;
	margin-block: 0 var(--site-space-xs);
}

.benefit-card__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 600;
	color: var(--site-color-text);
	line-height: 1.3;
	margin-block: 0;
	text-decoration: none;
}

.benefit-card__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	margin-block: 0;
}

@media (max-width: 767px) {
	.landing-benefits {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.landing-benefits__grid {
		flex-direction: column;
	}

	.landing-benefits__heading {
		max-width: 100%;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING STEPS  (.landing-steps / .step-card)
   Pattern: armonea/landing-steps
   Blocks:  Group (section) › header group + Columns 4×
   BG:      white
════════════════════════════════════════════════════════════════════════════ */

.landing-steps {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xxl) var(--site-space-m);
}

.landing-steps__header {
	margin-block-end: var(--site-space-xl);
}

.landing-steps__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.landing-steps__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.2;
	max-width: 30ch;
	margin-block: 0;
	text-decoration: none;
}

.landing-steps__grid {
	gap: var(--site-space-m);
	margin-block: 0;
	align-items: start;
}

.step-card__number {
	font-family: var(--site-font-heading);
	font-size: 48px;
	font-weight: 700;
	color: var(--site-color-primary);
	line-height: 1;
	margin-block: 0 var(--site-space-s);
}

.step-card__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 600;
	color: var(--site-color-text);
	line-height: 1.3;
	margin-block: 0;
	text-decoration: none;
}

.step-card__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	margin-block: 0;
}

@media (max-width: 767px) {
	.landing-steps {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.landing-steps__grid {
		flex-direction: column;
		gap: var(--site-space-l);
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING PULL QUOTE  (.landing-pull-quote)
   Pattern: armonea/landing-pull-quote
   Blocks:  Group (section) › Quote block
   BG:      --site-color-primary-light (beige)
════════════════════════════════════════════════════════════════════════════ */

.landing-pull-quote {
	background-color: var(--site-color-primary-light);
	padding: var(--site-space-xxl) var(--site-space-m);
}

.landing-pull-quote__quote {
	border: none;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	max-width: 680px;
}

.landing-pull-quote__quote::before {
	content: '\201C';
	display: block;
	font-family: var(--site-font-heading);
	font-size: 80px;
	line-height: 0.7;
	color: var(--site-color-primary);
	margin-block-end: var(--site-space-m);
	font-style: normal;
}

.landing-pull-quote__quote p {
	font-family: var(--site-font-heading);
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 600;
	font-style: italic;
	color: var(--site-color-text);
	line-height: 1.45;
	margin-block: 0 var(--site-space-m);
}

.landing-pull-quote__quote cite {
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	color: var(--site-color-text-muted);
	font-style: normal;
	display: block;
}

@media (max-width: 767px) {
	.landing-pull-quote {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.landing-pull-quote__quote p {
		font-size: 20px;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING FAQ  (.landing-faq / .faq-item)
   Pattern: armonea/landing-faq
   Blocks:  Group (section) › header group + Details blocks
   BG:      white
   Note:    FAQPage JSON-LD schema added via schema.php hook
════════════════════════════════════════════════════════════════════════════ */

.landing-faq {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xxl) var(--site-space-m);
}

.landing-faq__header {
	margin-block-end: var(--site-space-xl);
}

.landing-faq__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.landing-faq__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.2;
	max-width: 30ch;
	margin-block: 0;
	text-decoration: none;
}

.faq-item {
	border-bottom: 1px solid rgba(56, 60, 114, 0.15);
	padding-block: var(--site-space-m);
}

.faq-item:first-of-type {
	border-top: 1px solid rgba(56, 60, 114, 0.15);
	margin-block-start: var(--site-space-xs);
}

.faq-item > summary,
.faq-item .wp-block-details__summary {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 600;
	color: var(--site-color-text);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--site-space-m);
	padding: 0;
	transition: color 0.15s ease-out;
}

.faq-item > summary::-webkit-details-marker,
.faq-item .wp-block-details__summary::-webkit-details-marker {
	display: none;
}

.faq-item > summary::after,
.faq-item .wp-block-details__summary::after {
	content: '+';
	font-family: var(--site-font-body);
	font-size: 22px;
	font-weight: 300;
	color: var(--site-color-primary);
	flex-shrink: 0;
	line-height: 1;
}

.faq-item[open] > summary::after,
.faq-item[open] .wp-block-details__summary::after {
	content: '\2212'; /* − minus sign */
}

.faq-item > summary:hover,
.faq-item .wp-block-details__summary:hover {
	color: var(--site-color-secondary-dark-green);
}

.faq-item p,
.faq-item .faq-item__answer {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.7;
	padding-block: var(--site-space-s) 0;
	margin-block: 0;
}

@media (max-width: 767px) {
	.landing-faq {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.faq-item > summary,
	.faq-item .wp-block-details__summary {
		font-size: var(--site-size-body);
		font-weight: 600;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING CTA GREEN  (.landing-cta-green)
   Pattern: armonea/landing-cta-green
   Blocks:  Group (section) › H2 + Paragraph + Buttons
   BG:      --site-color-secondary-dark-green
   Heading: --site-color-secondary-light-orange · Body: white 0.82
════════════════════════════════════════════════════════════════════════════ */

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

.landing-cta-green__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(26px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-secondary-light-orange);
	line-height: 1.2;
	text-decoration: none;
	margin-block: 0 var(--site-space-m);
}

.landing-cta-green__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: white;
	opacity: 0.82;
	line-height: 1.65;
	margin-block: 0 var(--site-space-l);
}

.landing-cta-green__btn .wp-block-button__link {
	padding: 14px 32px;
	background-color: var(--site-color-primary);
	color: var(--site-color-text);
	border: none;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.landing-cta-green__btn .wp-block-button__link:hover {
	background-color: var(--site-color-secondary-light-yellow);
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.landing-cta-green {
		padding: var(--site-space-xl) var(--site-space-m);
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE HEADER  (.article-header)
   Pattern: armonea/article-header
   Blocks:  Group (header) › Paragraph (meta) + H1 + Paragraph (intro)
   BG:      --site-color-primary-light (beige) · Centered · 820px
════════════════════════════════════════════════════════════════════════════ */

.article-header {
	background-color: var(--site-color-primary-light);
	padding: var(--site-space-xl) var(--site-space-m) var(--site-space-l);
	text-align: center;
}

.article-header__tag {
	display: inline-block;
	background-color: var(--site-color-secondary-light-rose);
	color: var(--site-color-text);
	padding: 3px 10px;
	border-radius: var(--site-radius-s);
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-block: 0 var(--site-space-xs);
}

.article-header__date {
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	color: var(--site-color-text-muted);
	margin-block: 0 var(--site-space-m);
}

.article-header__title {
	font-family: var(--site-font-heading);
	font-size: clamp(28px, 4vw, var(--site-size-h1));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--site-color-text);
	max-width: 22ch;
	margin-inline: auto;
	margin-block: 0 var(--site-space-m);
	text-decoration: none;
}

.article-header__intro {
	font-family: var(--site-font-body);
	font-size: 18px;
	color: var(--site-color-text);
	line-height: 1.65;
	opacity: 0.85;
	max-width: 58ch;
	margin-inline: auto;
	margin-block: 0;
}

@media (max-width: 767px) {
	.article-header {
		text-align: left;
		padding: var(--site-space-l) var(--site-space-m) var(--site-space-m);
	}

	.article-header__tag,
	.article-header__date {
		text-align: left;
	}

	.article-header__title {
		font-size: 28px;
		max-width: 100%;
		margin-inline: 0;
	}

	.article-header__intro {
		font-size: var(--site-size-body);
		margin-inline: 0;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE PULL QUOTE  (.article-pull-quote)
   Pattern: armonea/article-pull-quote
   Blocks:  Quote block (native WP)
   Use:     Inline breakpoint in article body content
════════════════════════════════════════════════════════════════════════════ */

.article-pull-quote {
	border-left: 4px solid var(--site-color-primary);
	border-top: none;
	border-right: none;
	border-bottom: none;
	padding: var(--site-space-s) 0 var(--site-space-s) var(--site-space-m);
	margin-block: var(--site-space-l);
	margin-inline: 0;
}

.article-pull-quote p {
	font-family: var(--site-font-heading);
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: 600;
	font-style: italic;
	color: var(--site-color-text);
	line-height: 1.4;
	margin-block: 0 var(--site-space-s);
}

.article-pull-quote cite {
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	color: var(--site-color-text-muted);
	font-style: normal;
	display: block;
}


/* ════════════════════════════════════════════════════════════════════════════
   ARTICLE INLINE CTA  (.article-cta)
   Pattern: armonea/article-cta
   Blocks:  Group (div) › H3 + Paragraph + Buttons
   BG:      --site-color-primary-light (beige) · border-radius-l
   Use:     Mid-article or end-of-article action prompt
════════════════════════════════════════════════════════════════════════════ */

.article-cta {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-l);
	padding: var(--site-space-l);
	margin-block: var(--site-space-l);
}

.article-cta__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h3);
	font-weight: 600;
	color: var(--site-color-text);
	line-height: 1.3;
	margin-block: 0 var(--site-space-s);
	text-decoration: none;
}

.article-cta__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	margin-block: 0 var(--site-space-m);
}

.article-cta__btn .wp-block-button__link {
	padding: 12px 24px;
	background-color: var(--site-color-primary);
	color: var(--site-color-text);
	border: none;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.article-cta__btn .wp-block-button__link:hover {
	background-color: var(--site-color-secondary-light-yellow);
	transform: translateY(-1px);
}


/* ════════════════════════════════════════════════════════════════════════════
   LANDING HERO — ACHTERGRONDAFBEELDING  (.landing-hero-bg)
   Pattern: armonea/landing-hero-bg
   Blocks:  Cover (bg image + scrim) › Group (.landing-hero-bg__text) › eyebrow, H1, p, Buttons
   Readable by: strong bottom-to-top gradient scrim — NO glassmorphism card
════════════════════════════════════════════════════════════════════════════ */

.landing-hero-bg.wp-block-cover {
	min-height: 65vh;
	align-items: flex-end;
}

.landing-hero-bg .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgba(10, 10, 30, 0.88) 0%,
		rgba(10, 10, 30, 0.55) 40%,
		rgba(10, 10, 30, 0.15) 75%,
		transparent 100%
	) !important;
	opacity: 1 !important;
}

.landing-hero-bg .wp-block-cover__inner-container {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding: var(--site-space-xxl) var(--site-space-l);
}

/* Text container — structural only, no visual card */
.landing-hero-bg__text {
	max-width: 640px;
}

.landing-hero-bg__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--site-color-secondary-light-yellow);
	margin-block: 0 var(--site-space-s);
}

.landing-hero-bg__title {
	font-family: var(--site-font-heading);
	font-size: clamp(32px, 4.5vw, var(--site-size-h1));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: white;
	margin-block: 0 var(--site-space-m);
	text-decoration: none;
}

.landing-hero-bg__title em {
	font-style: normal;
	color: var(--site-color-primary);
}

.landing-hero-bg__body {
	font-family: var(--site-font-body);
	font-size: 18px;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.6;
	margin-block: 0 var(--site-space-l);
}

.landing-hero-bg__btn--primary .wp-block-button__link {
	padding: 16px 32px;
	background-color: var(--site-color-primary);
	color: var(--site-color-text);
	border: none;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.landing-hero-bg__btn--primary .wp-block-button__link:hover {
	background-color: var(--site-color-secondary-light-yellow);
	transform: translateY(-1px);
}

.landing-hero-bg__btn--ghost-inv .wp-block-button__link {
	padding: 16px 32px;
	background-color: transparent;
	color: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.landing-hero-bg__btn--ghost-inv .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: white;
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.landing-hero-bg .wp-block-cover__inner-container {
		padding: var(--site-space-xl) var(--site-space-s);
	}

	.landing-hero-bg__title {
		font-size: 32px;
	}

	.landing-hero-bg__body {
		font-size: var(--site-size-body);
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   CONTENT GRID — 2 / 3 / 4 kolommen  (.content-grid / .content-grid__card)
   Patterns: armonea/grid-content-2col · 3col · 4col
   Blocks:   Group (section) › H2 + Columns N× › Group (card) › H3 + Paragraph
   No eyebrow · No images · Cards on white bg, section on beige or white
════════════════════════════════════════════════════════════════════════════ */

.content-grid {
	background-color: var(--site-color-bg);
	padding: var(--site-space-xxl) var(--site-space-m);
}

.content-grid__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.2;
	max-width: 30ch;
	margin-block: 0 var(--site-space-xl);
	text-decoration: none;
}

.content-grid__columns {
	gap: var(--site-space-m);
	margin-block: 0;
	align-items: stretch;
}

.content-grid__card {
	background-color: var(--site-color-primary-light);
	border-radius: var(--site-radius-l);
	padding: var(--site-space-m) var(--site-space-m) var(--site-space-l);
	display: flex;
	flex-direction: column;
	gap: var(--site-space-s);
	height: 100%;
	transition: box-shadow 0.18s ease-out, transform 0.18s ease-out;
}

.content-grid__card:hover {
	box-shadow: 0 6px 24px rgba(53, 53, 53, 0.08);
	transform: translateY(-2px);
}

.content-grid__card-title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h4);
	font-weight: 600;
	color: var(--site-color-text);
	line-height: 1.3;
	margin-block: 0;
	text-decoration: none;
}

.content-grid__card-body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	margin-block: 0;
}

@media (max-width: 767px) {
	.content-grid {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.content-grid__columns {
		flex-direction: column;
	}

	.content-grid__heading {
		max-width: 100%;
	}

	.content-grid__card:hover {
		transform: none;
		box-shadow: none;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   ARTIKEL TL;DR  (.article-tldr)
   Pattern: armonea/article-tldr
   Blocks:  Group (aside) › H4 (label) + List
   Float:   Right on desktop · Full-width on mobile
   Use:     Short key-takeaways block placed inline in article body
════════════════════════════════════════════════════════════════════════════ */

.article-tldr {
	float: right;
	clear: right;
	width: 260px;
	margin-left: var(--site-space-m);
	margin-bottom: var(--site-space-m);
	background-color: var(--site-color-secondary-light-yellow);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-m);
}

.article-tldr__label {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin-block: 0 var(--site-space-s);
	text-decoration: none;
}

.article-tldr .wp-block-list,
.article-tldr ul {
	margin-block: 0;
	padding-left: var(--site-space-m);
}

.article-tldr .wp-block-list li,
.article-tldr ul li {
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	color: var(--site-color-secondary-dark-prune);
	line-height: 1.55;
	margin-block: 0 var(--site-space-xs);
}

.article-tldr .wp-block-list li:last-child,
.article-tldr ul li:last-child {
	margin-block-end: 0;
}

@media (max-width: 767px) {
	.article-tldr {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-bottom: var(--site-space-m);
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   WOONVORMEN HUB HERO
   Pattern slug: armonea/woonvormen-hub-hero
   Blocks:  Group (section) › Columns ›
            Col L: breadcrumb · eyebrow · H1 · body · buttons · stats row
            Col R: decision widget (4 colour-coded anchor options)
   Source:  20260430_woonvormen-hub-wireframe_v1.html › .hero-hub
──────────────────────────────────────────────────────────────────────────── */

.woonvormen-hub-hero.wp-block-group {
	background: var(--site-color-primary-light);
	padding-block: var(--site-space-xxl);
	padding-inline: var(--site-space-l);
}

.woonvormen-hub-hero__columns.wp-block-columns {
	align-items: center !important;
	gap: var(--site-space-xl) !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.woonvormen-hub-hero__breadcrumb {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .55;
	margin-block-end: var(--site-space-s) !important;
}

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

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.woonvormen-hub-hero__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block-end: var(--site-space-xs) !important;
}

/* ── H1 ──────────────────────────────────────────────────────────────────── */

.woonvormen-hub-hero__h1.wp-block-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.1;
	margin-block-end: var(--site-space-s) !important;
}

.woonvormen-hub-hero__h1.wp-block-heading em {
	font-style: normal;
	color: var(--site-color-primary);
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.woonvormen-hub-hero__body {
	font-size: 15px;
	color: var(--site-color-text);
	line-height: 1.6;
	max-width: 44ch;
	opacity: .8;
	margin-block-end: var(--site-space-m) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.woonvormen-hub-hero__btn--primary .wp-block-button__link {
	background: var(--site-color-primary);
	color: var(--site-color-text);
	border: 2px solid var(--site-color-primary);
	border-radius: var(--site-radius-m);
	font-weight: 600;
	padding: 12px 24px;
}

.woonvormen-hub-hero__btn--primary .wp-block-button__link:hover {
	background: var(--site-color-secondary-dark-green);
	border-color: var(--site-color-secondary-dark-green);
	color: #fff;
}

.woonvormen-hub-hero__btn--ghost .wp-block-button__link {
	background: transparent;
	color: var(--site-color-secondary-dark-green);
	border: 2px solid var(--site-color-secondary-dark-green);
	border-radius: var(--site-radius-m);
	font-weight: 600;
	padding: 12px 24px;
}

.woonvormen-hub-hero__btn--ghost .wp-block-button__link:hover {
	background: var(--site-color-secondary-dark-green);
	color: #fff;
}

/* ── Stats row ───────────────────────────────────────────────────────────── */

.woonvormen-hub-hero__stats.wp-block-group {
	display: flex;
	flex-direction: row;
	gap: var(--site-space-l);
	margin-block-start: var(--site-space-l);
	padding-block-start: var(--site-space-m);
	border-top: 1px solid rgba(56, 60, 114, .12);
}

.hub-stat__number {
	font-family: var(--site-font-heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1;
	margin-block-end: 4px !important;
}

.hub-stat__label {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: .6;
	margin: 0 !important;
}

/* ── Decision Widget ─────────────────────────────────────────────────────── */

.decision-widget.wp-block-group {
	background: var(--site-color-bg);
	border-radius: var(--site-radius-l);
	border: 1.5px solid rgba(56, 60, 114, .12);
	padding: var(--site-space-m);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.decision-widget__title.wp-block-heading {
	font-family: var(--site-font-heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--site-color-text);
	margin-block-end: 4px !important;
}

.decision-widget__sub {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .55;
	margin-block-end: var(--site-space-s) !important;
}

.decision-options.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.decision-option.wp-block-group {
	position: relative;
	padding: var(--site-space-xs) var(--site-space-s);
	border-radius: var(--site-radius-m);
	border: 1.5px solid rgba(56, 60, 114, .12);
	transition: border-color .15s, background .15s;
}

/* Stretch the link over the full card */
.decision-option__label a {
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	font-size: var(--site-size-small);
}

.decision-option__label a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.decision-option__sub {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: .55;
	margin: 0 !important;
}

.decision-option--wzc { border-color: rgba(25, 78, 35, .3);  background: rgba(25, 78, 35, .04); }
.decision-option--wzc:hover { background: rgba(25, 78, 35, .08); }
.decision-option--sf  { border-color: rgba(243, 147, 105, .4); background: rgba(243, 147, 105, .05); }
.decision-option--sf:hover  { background: rgba(243, 147, 105, .1); }
.decision-option--kv  { border-color: rgba(56, 60, 114, .3);  background: rgba(56, 60, 114, .04); }
.decision-option--kv:hover  { background: rgba(56, 60, 114, .08); }
.decision-option--dvc { border-color: rgba(88, 31, 50, .3);   background: rgba(88, 31, 50, .04); }
.decision-option--dvc:hover { background: rgba(88, 31, 50, .08); }

.decision-widget__footer {
	font-size: var(--site-size-caption);
	color: var(--site-color-secondary-dark-green);
	font-weight: 600;
	text-align: center;
	border-top: 1px solid rgba(0, 0, 0, .06);
	padding-block-start: var(--site-space-s);
	margin-block-start: var(--site-space-xs) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.woonvormen-hub-hero.wp-block-group {
		padding-block: var(--site-space-xl);
		padding-inline: var(--site-space-s);
	}

	.woonvormen-hub-hero__stats.wp-block-group {
		gap: var(--site-space-m);
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   WOONVORMEN CARDS
   Pattern slug: armonea/woonvormen-cards
   Blocks:  Group (section) › header + 4× card group (columns: image | content)
            Alternating layout via .woonvorm-card--reverse (flex-direction: row-reverse)
   Source:  20260430_woonvormen-hub-wireframe_v1.html › .woonvormen-cards (section 03)
──────────────────────────────────────────────────────────────────────────── */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.woonvormen-cards.wp-block-group {
	background: var(--site-color-bg);
	padding-block: var(--site-space-xxl);
	padding-inline: var(--site-space-l);
}

/* ── Section header ──────────────────────────────────────────────────────── */

.woonvormen-cards__header.wp-block-group {
	margin-block-end: var(--site-space-xl);
}

.woonvormen-cards__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block-end: var(--site-space-xs) !important;
}

.woonvormen-cards__heading.wp-block-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin: 0 !important;
}

/* ── Individual card ─────────────────────────────────────────────────────── */

.woonvorm-card.wp-block-group {
	border: 1.5px solid rgba(56, 60, 114, .1);
	border-radius: var(--site-radius-l);
	overflow: hidden;
	margin-block-end: var(--site-space-xs);
}

.woonvorm-card.wp-block-group:last-child {
	margin-block-end: 0;
}

/* Standalone patterns sit as top-level blocks; the constrained/flow layout adds
   block-gap as margin-block-start on each following sibling. Neutralise it so the
   gap between stacked cards is governed only by our margin-block-end above. */
.woonvorm-card.wp-block-group + .woonvorm-card.wp-block-group {
	margin-block-start: 0 !important;
}

.woonvorm-card .wp-block-columns {
	gap: 0 !important;
	margin-block: 0 !important;
}

/* ── Image column ────────────────────────────────────────────────────────── */

.woonvorm-card__image-col.wp-block-column {
	flex-basis: 50% !important;
	min-height: 340px;
	padding: 0 !important;
}

.woonvorm-card__image-col .wp-block-image {
	height: 100%;
	margin: 0;
}

.woonvorm-card__image-col .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Content column ──────────────────────────────────────────────────────── */

.woonvorm-card__content-col.wp-block-column {
	flex-basis: 50% !important;
	padding: var(--site-space-m) var(--site-space-l) !important;
	background: var(--site-color-bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Reverse layout (image right) ────────────────────────────────────────── */

.woonvorm-card--reverse .wp-block-columns {
	flex-direction: row-reverse;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.woonvorm-card__badge {
	display: inline-block;
	width: fit-content;
	padding: 4px 12px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-block-end: var(--site-space-s) !important;
}

.woonvorm-card__badge--wzc { background: var(--site-color-secondary-dark-green); color: #fff; }
.woonvorm-card__badge--sf  { background: var(--site-color-primary); color: var(--site-color-text); }
.woonvorm-card__badge--kv  { background: var(--site-color-secondary-dark-blue); color: #fff; }
.woonvorm-card__badge--dvc { background: var(--site-color-secondary-dark-prune); color: #fff; }

/* ── H2 ──────────────────────────────────────────────────────────────────── */

.woonvorm-card__h2.wp-block-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.15;
	margin-block-end: var(--site-space-xs) !important;
}

/* ── Tagline ─────────────────────────────────────────────────────────────── */

.woonvorm-card__tagline {
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	opacity: .6;
	margin-block-end: var(--site-space-s) !important;
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.woonvorm-card__body {
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.6;
	margin-block-end: var(--site-space-s) !important;
}

/* ── Features ────────────────────────────────────────────────────────────── */

.woonvorm-card__features.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: var(--site-space-s) !important;
}

.woonvorm-card__feature {
	display: flex;
	align-items: center;
	gap: var(--site-space-xs);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	margin: 0 !important;
}

.woonvorm-card__feature::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
}

.woonvorm-card--wzc .woonvorm-card__feature::before { background: var(--site-color-secondary-dark-green); color: #fff; }
.woonvorm-card--sf  .woonvorm-card__feature::before { background: var(--site-color-primary); color: var(--site-color-text); }
.woonvorm-card--kv  .woonvorm-card__feature::before { background: var(--site-color-secondary-dark-blue); color: #fff; }
.woonvorm-card--dvc .woonvorm-card__feature::before { background: var(--site-color-secondary-dark-prune); color: #fff; }

/* ── Voor wie box ────────────────────────────────────────────────────────── */

.woonvorm-card__voor-wie.wp-block-group {
	background: var(--site-color-primary-light);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-xs) var(--site-space-s);
	margin-block-end: var(--site-space-m) !important;
}

.woonvorm-card__voor-wie-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--site-color-text);
	opacity: .55;
	margin-block-end: 4px !important;
}

.woonvorm-card__voor-wie-text {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	line-height: 1.5;
	margin: 0 !important;
}

/* ── CTA row ─────────────────────────────────────────────────────────────── */

.woonvorm-card__cta-row.wp-block-buttons {
	align-items: center;
	flex-wrap: wrap;
	gap: var(--site-space-s) !important;
}

.woonvorm-card__btn-primary .wp-block-button__link {
	border-radius: var(--site-radius-m);
	font-weight: 600;
	font-size: var(--site-size-small);
	padding: 10px 20px;
	border: 2px solid transparent;
}

.woonvorm-card--wzc .woonvorm-card__btn-primary .wp-block-button__link { background: var(--site-color-secondary-dark-green); border-color: var(--site-color-secondary-dark-green); color: #fff; }
.woonvorm-card--sf  .woonvorm-card__btn-primary .wp-block-button__link { background: var(--site-color-primary); border-color: var(--site-color-primary); color: var(--site-color-text); }
.woonvorm-card--kv  .woonvorm-card__btn-primary .wp-block-button__link { background: var(--site-color-secondary-dark-blue); border-color: var(--site-color-secondary-dark-blue); color: #fff; }
.woonvorm-card--dvc .woonvorm-card__btn-primary .wp-block-button__link { background: var(--site-color-secondary-dark-prune); border-color: var(--site-color-secondary-dark-prune); color: #fff; }

.woonvorm-card__btn-ghost .wp-block-button__link {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--site-color-secondary-dark-green) !important;
	border-bottom: 1.5px solid var(--site-color-primary) !important;
	border-radius: 0 !important;
	padding: 0 0 2px !important;
	font-size: var(--site-size-small);
	font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.woonvormen-cards.wp-block-group {
		padding-inline: var(--site-space-s);
		padding-block: var(--site-space-xl);
	}

	.woonvorm-card .wp-block-columns,
	.woonvorm-card--reverse .wp-block-columns {
		flex-direction: column !important;
	}

	.woonvorm-card__image-col.wp-block-column {
		min-height: 220px;
	}

	.woonvorm-card__content-col.wp-block-column {
		padding: var(--site-space-m) !important;
	}
}



/* ════════════════════════════════════════════════════════════════════════════
   VERGELIJKINGSTABEL  (.vergelijk)
   Pattern: armonea/vergelijkingstabel
   Blocks:  Group (section) › header group + Custom HTML (table) + Buttons
   BG:      --site-color-primary-light (beige)
   Source:  20260430_woonvormen-hub-wireframe_v1.html › .vergelijk (section 04)
════════════════════════════════════════════════════════════════════════════ */

.vergelijk.wp-block-group {
	background: var(--site-color-primary-light);
	padding-block: var(--site-space-xxl);
	padding-inline: var(--site-space-l);
}

.vergelijk__header.wp-block-group {
	margin-block-end: var(--site-space-xl);
}

.vergelijk__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block-end: var(--site-space-xs) !important;
}

.vergelijk__heading.wp-block-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	margin-block-end: var(--site-space-xs) !important;
}

.vergelijk__subtitle {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .65;
	margin: 0 !important;
}

.vergelijk-table-wrap {
	overflow-x: auto;
	border-radius: var(--site-radius-l);
	border: 1.5px solid rgba(56, 60, 114, .1);
	-webkit-overflow-scrolling: touch;
}

.vergelijk-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--site-color-bg);
	font-size: var(--site-size-small);
	font-family: var(--site-font-body);
}

.vergelijk-table thead th {
	padding: 14px 16px;
	text-align: center;
	font-weight: 700;
	font-size: 12px;
	border-bottom: 2px solid rgba(56, 60, 114, .12);
	white-space: nowrap;
	vertical-align: middle;
}

.vergelijk-table thead th:first-child {
	text-align: left;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(53, 53, 53, .5);
}

.vergelijk-table thead th.th--wzc { color: var(--site-color-secondary-dark-green); }
.vergelijk-table thead th.th--sf  { color: var(--site-color-primary); }
.vergelijk-table thead th.th--kv  { color: var(--site-color-secondary-dark-blue); }
.vergelijk-table thead th.th--dvc { color: var(--site-color-secondary-dark-prune); }

.vergelijk-table tbody td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid rgba(56, 60, 114, .06);
	vertical-align: middle;
}

.vergelijk-table tbody td:first-child {
	text-align: left;
	font-weight: 600;
}

.vergelijk-table tbody tr:last-child td { border-bottom: none; }
.vergelijk-table tbody tr:nth-child(even) td { background: rgba(56, 60, 114, .02); }

.check-yes {
	display: inline-block;
	color: var(--site-color-secondary-dark-green);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.check-no {
	display: inline-block;
	color: #bbb;
	font-size: 18px;
	line-height: 1;
}

.check-partial {
	display: inline-block;
	background: var(--site-color-secondary-light-yellow);
	color: var(--site-color-text);
	border-radius: 100px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.vergelijk__footer.wp-block-group {
	margin-block-start: var(--site-space-l);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--site-space-m);
}

.vergelijk__footer-note {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: .55;
	margin: 0 !important;
}

.vergelijk__btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--site-color-secondary-dark-green);
	border: 2px solid var(--site-color-secondary-dark-green);
	border-radius: var(--site-radius-m);
	font-weight: 600;
	font-size: var(--site-size-small);
	padding: 10px 24px;
	text-decoration: none;
	transition: background .17s ease-out, color .17s ease-out;
}

.vergelijk__btn-ghost .wp-block-button__link:hover {
	background: var(--site-color-secondary-dark-green);
	color: #fff;
}

@media (max-width: 767px) {
	.vergelijk.wp-block-group {
		padding-inline: var(--site-space-s);
		padding-block: var(--site-space-xl);
	}

	.vergelijk__heading.wp-block-heading {
		font-size: 24px;
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   LOCATIEZOEKER  (.locatiezoeker)
   Pattern: armonea/locatiezoeker
   Blocks:  Group (section) › Paragraph (label) + Custom HTML (form)
   BG:      white · border top + bottom
   Status:  MOCKUP — swap wp:html block for WP Grid Builder widget when ready
   Source:  20260430_woonvormen-hub-wireframe_v1.html › .search-bar (section 05)
════════════════════════════════════════════════════════════════════════════ */

.locatiezoeker.wp-block-group {
	background: var(--site-color-bg);
	padding-block: var(--site-space-l);
	padding-inline: var(--site-space-l);
	border-top: 1px solid rgba(56, 60, 114, .08);
	border-bottom: 1px solid rgba(56, 60, 114, .08);
}

.locatiezoeker__label {
	font-size: var(--site-size-small);
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
	margin-block-end: var(--site-space-s) !important;
}

/* ── Search form row ─────────────────────────────────────────────────────── */

.locatiezoeker__form {
	display: flex;
	gap: var(--site-space-xs);
	align-items: center;
	flex-wrap: wrap;
	margin-block-end: var(--site-space-s);
}

.locatiezoeker__input {
	flex: 1;
	min-width: 200px;
	height: 48px;
	border: 1.5px solid rgba(56, 60, 114, .2);
	border-radius: var(--site-radius-m);
	padding: 0 var(--site-space-s);
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	background: var(--site-color-bg);
	appearance: none;
	outline: none;
	transition: border-color .15s ease-out;
}

.locatiezoeker__input::placeholder {
	color: var(--site-color-text);
	opacity: .4;
}

.locatiezoeker__input:focus {
	border-color: var(--site-color-secondary-dark-green);
}

.locatiezoeker__filter {
	height: 48px;
	border: 1.5px solid rgba(56, 60, 114, .2);
	border-radius: var(--site-radius-m);
	padding: 0 var(--site-space-s);
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	background: var(--site-color-bg);
	appearance: none;
	cursor: pointer;
	white-space: nowrap;
	outline: none;
}

/* Pre-selected / active filter state (woonvormen on woonvormen hub page) */
.locatiezoeker__filter--active {
	border-color: rgba(25, 78, 35, .4);
	background: rgba(25, 78, 35, .06);
	color: var(--site-color-secondary-dark-green);
	font-weight: 600;
}

.locatiezoeker__btn {
	height: 48px;
	padding: 0 var(--site-space-l);
	background: var(--site-color-secondary-dark-green);
	color: #fff;
	border: none;
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-small);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .17s ease-out;
}

.locatiezoeker__btn:hover {
	background: color-mix(in srgb, var(--site-color-secondary-dark-green) 85%, #000);
}

/* Geocoding in progress (set by assets/js/locatiezoeker.js) */
.locatiezoeker__form.is-loading .locatiezoeker__btn {
	opacity: .65;
	cursor: progress;
}

/* ── Popular cities ──────────────────────────────────────────────────────── */

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

.locatiezoeker__popular-label {
	font-size: var(--site-size-caption);
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
}

.locatiezoeker__popular-tag {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: .6;
	text-decoration: none;
	transition: opacity .15s ease-out;
}

.locatiezoeker__popular-tag:hover {
	opacity: 1;
	color: var(--site-color-secondary-dark-green);
}


/* ── Mockup notice (editor-only, hidden on front-end) ────────────────────── */

.locatiezoeker__mockup-notice {
	display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.locatiezoeker.wp-block-group {
		padding-inline: var(--site-space-s);
	}

	.locatiezoeker__form {
		flex-direction: column;
		align-items: stretch;
	}

	.locatiezoeker__input,
	.locatiezoeker__filter,
	.locatiezoeker__btn {
		width: 100%;
	}

	.locatiezoeker__popular {
		gap: var(--site-space-s);
	}
}


/* ════════════════════════════════════════════════════════════════════════════
   ZORGTHEMA'S TEASER  (.zorgthemas-teaser / .thema-card)
   Pattern: armonea/zorgthemas-teaser
   Blocks:  Group (section) › header columns + Query Loop (3-col grid)
   BG:      white
   Filter:  Posts in category "uitgelicht" (slug), max 3, ordered by date
   Source:  20260430_woonvormen-hub-wireframe_v1.html › .themas-teaser (section 06)
════════════════════════════════════════════════════════════════════════════ */

.zorgthemas-teaser.wp-block-group {
	background: var(--site-color-bg);
	padding-block: var(--site-space-xxl);
	padding-inline: var(--site-space-l);
}

/* ── Section header ──────────────────────────────────────────────────────── */

.zorgthemas-teaser__header.wp-block-columns {
	align-items: flex-end !important;
	margin-block-end: var(--site-space-xl) !important;
	gap: var(--site-space-l) !important;
}

.zorgthemas-teaser__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block-end: var(--site-space-xs) !important;
}

.zorgthemas-teaser__heading.wp-block-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(22px, 2.8vw, 28px);
	font-weight: 700;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.2;
	margin: 0 !important;
}

.zorgthemas-teaser__link-col.wp-block-column {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.zorgthemas-teaser__all-link .wp-block-button__link {
	background: transparent;
	color: var(--site-color-secondary-dark-green);
	border: 2px solid var(--site-color-secondary-dark-green);
	border-radius: var(--site-radius-m);
	font-size: var(--site-size-small);
	font-weight: 600;
	padding: 9px 20px;
	text-decoration: none;
	transition: background .17s ease-out, color .17s ease-out;
	white-space: nowrap;
}

.zorgthemas-teaser__all-link .wp-block-button__link:hover {
	background: var(--site-color-secondary-dark-green);
	color: #fff;
}

/* ── Query grid ──────────────────────────────────────────────────────────── */

.zorgthemas-teaser .wp-block-query {
	margin-block: 0;
}

.zorgthemas-teaser .wp-block-post-template {
	gap: var(--site-space-m) !important;
	margin-block: 0 !important;
}

/* ── Thema card ──────────────────────────────────────────────────────────── */

.thema-card.wp-block-group {
	background: var(--site-color-bg);
	border: 1.5px solid rgba(56, 60, 114, .08);
	border-radius: var(--site-radius-l);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow .18s ease-out, transform .18s ease-out;
}

.thema-card.wp-block-group:hover {
	box-shadow: 0 6px 24px rgba(53, 53, 53, .08);
	transform: translateY(-2px);
}

.thema-card__image.wp-block-post-featured-image {
	margin-block: 0;
	flex-shrink: 0;
}

.thema-card__image.wp-block-post-featured-image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.thema-card__body.wp-block-group {
	padding: var(--site-space-m);
	display: flex;
	flex-direction: column;
	gap: var(--site-space-xs);
	flex: 1;
}

.thema-card__category.wp-block-post-terms {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-prune);
	margin: 0 !important;
}

.thema-card__category.wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.thema-card__title.wp-block-post-title {
	font-family: var(--site-font-heading);
	font-size: 17px;
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
	line-height: 1.3;
	margin: 0 !important;
}

.thema-card__title.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.thema-card__title.wp-block-post-title a:hover {
	color: var(--site-color-primary);
}

.thema-card__excerpt.wp-block-post-excerpt {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	line-height: 1.6;
	opacity: .75;
	margin: 0 !important;
	flex: 1;
}

.thema-card__excerpt.wp-block-post-excerpt p {
	margin: 0;
}

.thema-card__readmore.wp-block-read-more {
	font-size: var(--site-size-small);
	font-weight: 600;
	color: var(--site-color-secondary-dark-green);
	text-decoration: none;
	border-bottom: 1.5px solid var(--site-color-primary);
	padding-bottom: 1px;
	width: fit-content;
	margin-block-start: var(--site-space-xs) !important;
	transition: color .15s ease-out, border-color .15s ease-out;
}

.thema-card__readmore.wp-block-read-more:hover {
	color: var(--site-color-primary);
	border-color: var(--site-color-secondary-dark-green);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.zorgthemas-teaser.wp-block-group {
		padding-inline: var(--site-space-s);
		padding-block: var(--site-space-xl);
	}

	.zorgthemas-teaser__header.wp-block-columns {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: var(--site-space-m) !important;
	}

	.zorgthemas-teaser__link-col.wp-block-column {
		justify-content: flex-start;
	}

	.zorgthemas-teaser .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	.thema-card.wp-block-group:hover {
		transform: none;
		box-shadow: none;
	}
}


/* ── 07 · Testimonials Goodays ──────────────────────────────────────────── */
.testimonials-goodays {
  background: var(--site-color-primary-light);
  padding-top: 64px;
  padding-bottom: 64px;
}

.testimonials-goodays__inner {
  max-width: 1040px;
  margin-inline: auto;
}

.testimonials-goodays__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.testimonials-goodays__eyebrow {
  font-family: var(--site-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-color-secondary-dark-green);
  margin: 0 0 8px;
}

.testimonials-goodays__heading {
  font-family: var(--site-font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--site-color-text);
  margin: 0;
  line-height: 1.25;
}

.testimonials-goodays__score-block {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.testimonials-goodays__score-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials-goodays__score-number {
  font-family: var(--site-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--site-color-secondary-dark-green);
  line-height: 1;
}

.testimonials-goodays__score-label {
  font-size: 0.6875rem;
  color: var(--site-color-text);
  opacity: 0.6;
  margin-top: 4px;
}

.testimonials-goodays__score-divider {
  width: 1px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
}

.testimonials-goodays__powered-by {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--site-color-text);
  opacity: 0.5;
}

.testimonials-goodays__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Testimonial card */
.testi-card {
  background: #ffffff;
  border: 1.5px solid rgba(56, 60, 114, 0.1);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.testi-card__stars {
  color: var(--site-color-primary);
  font-size: 0.875rem;
  letter-spacing: 2px;
}

.testi-card__score {
  display: inline-block;
  background: var(--site-color-primary-light);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--site-color-secondary-dark-green);
  align-self: flex-start;
}

.testi-card__quote {
  margin: 0;
  padding: 0;
  border: none;
}

.testi-card__quote p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--site-color-text);
  margin: 0;
}

.testi-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.testi-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--site-color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--site-color-secondary-dark-green);
  flex-shrink: 0;
}

.testi-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.testi-card__relation {
  font-size: 0.6875rem;
  color: var(--site-color-text);
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
  .testimonials-goodays__grid {
    grid-template-columns: 1fr;
  }

  .testimonials-goodays__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonials-goodays__score-block {
    align-self: flex-start;
  }
}


/* ────────────────────────────────────────────────────────────────────────────
   HERO-EDITORIAL
   Pattern slug: armonea/hero-editorial
   Blocks:  wp:media-text (imageFill, mediaPosition right) — fully native/editable
   Design:  Beige left panel (diagonal clip-path + green accent bar) + right photo
   Source:  20260504_hero-editorial_v2.html › Variant A
──────────────────────────────────────────────────────────────────────────── */

/* ── Media-text container ────────────────────────────────────────────────── */

.hero-editorial.wp-block-media-text {
	min-height: 100vh;
	grid-template-columns: 1fr 1fr !important;
	align-items: stretch;
	gap: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Left: content panel ─────────────────────────────────────────────────── */

/* Panel must span the full hero height — beat core's
   .is-vertically-aligned-center align-self:center (0,3,0 specificity) */
.hero-editorial.wp-block-media-text .wp-block-media-text__content {
	align-self: stretch;
}

.hero-editorial .wp-block-media-text__content {
	position: relative;
	background: var(--site-color-primary-light);
	padding: var(--site-space-xxl) var(--site-space-xl) var(--site-space-xxl) calc(50vw - 640px + var(--site-space-xl));
	clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Solid green left accent bar */
.hero-editorial .wp-block-media-text__content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 100%;
	background: var(--site-color-secondary-dark-green);
}

/* ── Right: photo panel ──────────────────────────────────────────────────── */

.hero-editorial .wp-block-media-text__media {
	margin-left: -64px;
	z-index: 1;
	overflow: hidden;
	position: relative;
}

/* Photo always covers the panel — even when the editor's
   "Crop image to fill" (imageFill) toggle is switched off */
.hero-editorial .wp-block-media-text__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bottom green-tinted scrim */
.hero-editorial .wp-block-media-text__media::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: linear-gradient(to top, rgba(25, 78, 35, 0.35) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.hero-editorial__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--site-space-xs);
	font-family: var(--site-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--site-color-secondary-dark-green);
	margin-bottom: var(--site-space-m);
}

.hero-editorial__eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 2px;
	background: var(--site-color-secondary-dark-green);
	flex-shrink: 0;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */

.hero-editorial__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(38px, 4vw, 58px) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em !important;
	color: var(--site-color-text) !important;
	margin-bottom: var(--site-space-m) !important;
	max-width: 520px;
}

/* <em> = italic green (applied via rich text formatting in editor) */
.hero-editorial__heading em {
	font-style: italic;
	color: var(--site-color-secondary-dark-green);
	font-weight: 600;
}

/* <strong> = prune colour + orange underline accent */
.hero-editorial__heading strong {
	position: relative;
	font-weight: 700;
	color: var(--site-color-secondary-dark-prune);
}

.hero-editorial__heading strong::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--site-color-primary);
	border-radius: 2px;
}

/* ── Body copy ───────────────────────────────────────────────────────────── */

.hero-editorial__body {
	font-family: var(--site-font-body) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: var(--site-color-text) !important;
	opacity: 0.85;
	max-width: 440px;
	margin-bottom: var(--site-space-l) !important;
}

/* ── CTA buttons ─────────────────────────────────────────────────────────── */

.hero-editorial__cta-row.wp-block-buttons {
	gap: var(--site-space-s);
	margin-top: 0;
}

.hero-editorial__btn--primary .wp-block-button__link {
	background: var(--site-color-primary) !important;
	color: var(--site-color-text) !important;
	border: none !important;
	padding: 14px 28px !important;
	border-radius: var(--site-radius-m) !important;
	font-family: var(--site-font-body);
	font-weight: 500;
	font-size: 16px;
	transition: background 0.2s ease, transform 0.15s ease;
}

.hero-editorial__btn--primary .wp-block-button__link:hover {
	background: var(--site-color-secondary-light-yellow) !important;
	transform: translateY(-1px);
}

.hero-editorial__btn--ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--site-color-text) !important;
	border: 1.5px solid rgba(53, 53, 53, 0.35) !important;
	padding: 14px 28px !important;
	border-radius: var(--site-radius-m) !important;
	font-family: var(--site-font-body);
	font-weight: 500;
	font-size: 16px;
	transition: background 0.2s ease, transform 0.15s ease;
}

.hero-editorial__btn--ghost .wp-block-button__link:hover {
	background: rgba(53, 53, 53, 0.06) !important;
	transform: translateY(-1px);
}

/* ── Responsive: tablet ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
	.hero-editorial.wp-block-media-text {
		grid-template-columns: 1fr !important;
		min-height: auto;
	}

	.hero-editorial .wp-block-media-text__content {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
		padding: var(--site-space-xl) var(--site-space-l);
		padding-bottom: calc(var(--site-space-xl) + 40px);
	}

	/* Media moves below content on tablet/mobile (wp:media-text default stacking) */
	.hero-editorial .wp-block-media-text__media {
		height: 400px;
		margin-left: 0;
		margin-top: -40px;
		order: 1;
	}

	.hero-editorial__heading {
		max-width: 100%;
	}
}

/* ── Responsive: mobile ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.hero-editorial__heading {
		font-size: 36px !important;
	}

	.hero-editorial .wp-block-media-text__content {
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.hero-editorial .wp-block-media-text__media {
		height: 300px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   HERO-WOONVORM — Detail page hero
   Pattern slug: armonea/woonvorm-hero
   Blocks:  wp:group (alignfull, dark green bg) › wp:columns (CSS-constrained)
            Left col (60%): wp:image (native img, object-fit cover)
            Right col (40%): tag, H2, intro, buttons, trust strip
   Source:  20260430_woonvorm-detail-wireframe_v1.html › section 02
   v3:      full-width green band + native img (no imageFill background trick)
──────────────────────────────────────────────────────────────────────────── */

/* ── Outer band — full viewport width, dark green ───────────────────────── */

.hero-woonvorm.wp-block-group {
	background: var(--site-color-secondary-dark-green);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Inner columns — constrained to token width, stretch to fill band ────── */

.hero-woonvorm__cols.wp-block-columns {
	max-width: var(--site-container-max);
	margin-inline: auto;
	min-height: 480px;
	align-items: stretch !important;
	gap: 0 !important;
}

/* ── Left column — flex container so image fills full height ─────────────── */

.hero-woonvorm__img-col.wp-block-column {
	display: flex !important;
	padding: 0 !important;
	overflow: hidden;
}

.hero-woonvorm__img-col figure.wp-block-image {
	flex: 1;
	margin: 0;
	display: flex;
	overflow: hidden;
}

.hero-woonvorm__img-col .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Right column — content panel, dark green, flex column ──────────────── */

.hero-woonvorm__content-col.wp-block-column {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: var(--site-space-m);
	padding: var(--site-space-xl) var(--site-space-xl) var(--site-space-xl) var(--site-space-l) !important;
}

/* ── Tag / eyebrow pill ──────────────────────────────────────────────────── */

.hero-woonvorm__tag {
	display: inline-block;
	align-self: flex-start;
	background: color-mix(in srgb, var(--site-color-primary) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--site-color-primary) 40%, transparent);
	color: var(--site-color-primary) !important;
	border-radius: 100px;
	padding: 4px 14px;
	font-family: var(--site-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0 !important;
}

/* ── H2 heading ──────────────────────────────────────────────────────────── */

.hero-woonvorm__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(26px, 3vw, 36px) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: var(--site-color-bg) !important;
	margin-bottom: 0 !important;
}

/* ── Intro paragraph ─────────────────────────────────────────────────────── */

.hero-woonvorm__intro {
	font-family: var(--site-font-body) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: color-mix(in srgb, var(--site-color-bg) 82%, transparent) !important;
	max-width: 340px;
	margin-bottom: 0 !important;
}

/* ── CTA buttons ─────────────────────────────────────────────────────────── */

.hero-woonvorm__ctas.wp-block-buttons {
	gap: var(--site-space-xs);
	margin-top: var(--site-space-xs);
}

.hero-woonvorm__btn--primary .wp-block-button__link {
	background: var(--site-color-primary) !important;
	color: var(--site-color-text) !important;
	border: none !important;
	padding: 12px 24px !important;
	border-radius: var(--site-radius-m) !important;
	font-family: var(--site-font-body);
	font-weight: 500;
	font-size: 15px;
}

.hero-woonvorm__btn--primary .wp-block-button__link:hover {
	background: var(--site-color-secondary-light-yellow) !important;
}

.hero-woonvorm__btn--ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--site-color-bg) !important;
	border: 1.5px solid color-mix(in srgb, var(--site-color-bg) 50%, transparent) !important;
	padding: 12px 24px !important;
	border-radius: var(--site-radius-m) !important;
	font-family: var(--site-font-body);
	font-weight: 500;
	font-size: 15px;
}

.hero-woonvorm__btn--ghost .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--site-color-bg) 8%, transparent) !important;
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */

.hero-woonvorm__trust.wp-block-group {
	border-top: 1px solid color-mix(in srgb, var(--site-color-bg) 12%, transparent);
	padding-top: var(--site-space-m);
	margin-top: var(--site-space-xs);
	gap: var(--site-space-m);
	align-items: center;
}

.hero-woonvorm__trust-stat.wp-block-group {
	gap: 2px;
}

.hero-woonvorm__trust-score {
	font-family: var(--site-font-heading) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--site-color-primary) !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.hero-woonvorm__trust-label {
	font-family: var(--site-font-body) !important;
	font-size: 11px !important;
	color: color-mix(in srgb, var(--site-color-bg) 55%, transparent) !important;
	margin: 0 !important;
}

.hero-woonvorm__trust-text {
	font-family: var(--site-font-body) !important;
	font-size: 12px !important;
	color: color-mix(in srgb, var(--site-color-bg) 55%, transparent) !important;
	margin: 0 !important;
	border-left: 1px solid color-mix(in srgb, var(--site-color-bg) 15%, transparent);
	padding-left: var(--site-space-m);
}

.hero-woonvorm__trust-text strong {
	color: color-mix(in srgb, var(--site-color-bg) 85%, transparent);
	font-weight: 500;
}

/* ── Responsive: tablet — stack photo above content ─────────────────────── */

@media (max-width: 1023px) {
	.hero-woonvorm__cols.wp-block-columns {
		flex-direction: column !important;
		min-height: auto !important;
	}

	.hero-woonvorm__img-col.wp-block-column {
		min-height: 340px;
		flex-basis: auto !important;
	}

	.hero-woonvorm__content-col.wp-block-column {
		flex-basis: auto !important;
		padding: var(--site-space-l) !important;
	}

	.hero-woonvorm__intro {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.hero-woonvorm__img-col.wp-block-column {
		min-height: 260px;
	}

	.hero-woonvorm__content-col.wp-block-column {
		padding: var(--site-space-l) var(--site-space-m) !important;
	}

	.hero-woonvorm__trust.wp-block-group {
		flex-wrap: wrap;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WOONVORM-INTRO — Intro + Voor wie
   Pattern slug: armonea/woonvorm-intro
   Blocks:  Group (section, constrained) › Columns (60/40)
            Left: Paragraph (eyebrow) › H2 › 2× Paragraph › Buttons
            Right: Group (beige card) › H3 › List › Paragraph (note)
   Source:  20260430_woonvorm-detail-wireframe_v1.html › section 02 .intro-section
──────────────────────────────────────────────────────────────────────────── */

.woonvorm-intro.wp-block-group {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
	background-color: var(--site-color-bg);
}

.woonvorm-intro__eyebrow {
	font-family: var(--site-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--site-color-primary) !important;
	margin-bottom: 8px !important;
}

.woonvorm-intro__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(22px, 2.5vw, 28px) !important;
	font-weight: 700 !important;
	color: var(--site-color-secondary-dark-green) !important;
	line-height: 1.3 !important;
	margin-bottom: 16px !important;
}

.woonvorm-intro__body {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var(--site-color-text) !important;
	margin-bottom: 12px !important;
}

.woonvorm-intro__cta {
	margin-top: 8px !important;
}

.woonvorm-intro__btn--ghost .wp-block-button__link {
	background: transparent !important;
	border: 1.5px solid var(--site-color-secondary-dark-green) !important;
	color: var(--site-color-secondary-dark-green) !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	transition: background 0.18s, color 0.18s;
}

.woonvorm-intro__btn--ghost .wp-block-button__link:hover {
	background: var(--site-color-secondary-dark-green) !important;
	color: #fff !important;
}

/* Voor wie card */

.voor-wie-card.wp-block-group {
	background-color: var(--site-color-primary-light) !important;
	position: sticky;
	top: 24px;
}

.voor-wie-card__title {
	font-family: var(--site-font-heading) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-bottom: 16px !important;
}

.voor-wie-card__list.wp-block-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 16px !important;
}

.voor-wie-card__list li {
	display: flex !important;
	gap: 10px !important;
	align-items: flex-start !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--site-color-text) !important;
	margin-bottom: 10px !important;
	padding: 0 !important;
}

.voor-wie-card__list li::before {
	content: "✓" !important;
	color: var(--site-color-primary) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

.voor-wie-card__note {
	font-size: 11px !important;
	line-height: 1.5 !important;
	color: var(--site-color-text) !important;
	opacity: 0.7 !important;
	border-top: 1px solid rgba(56, 60, 114, 0.1) !important;
	padding-top: 16px !important;
	margin-top: 0 !important;
}

.voor-wie-card__note a {
	color: var(--site-color-secondary-dark-green) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

/* Responsive: stack columns on tablet */

@media (max-width: 1023px) {
	.woonvorm-intro.wp-block-group .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.woonvorm-intro.wp-block-group .wp-block-column {
		flex-basis: 100% !important;
		min-width: 100% !important;
	}

	.voor-wie-card.wp-block-group {
		position: static;
	}
}

@media (max-width: 767px) {
	.woonvorm-intro.wp-block-group {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WOONVORM-ZORGAANBOD — Zorgaanbod icon grid
   Pattern slug: armonea/woonvorm-zorgaanbod
   Blocks:  Group (section, beige, constrained 1280px) › Paragraph (eyebrow) › H2
            › Paragraph (sub) › Group (grid, 3 col) › 6× Group (card, flex row)
   Source:  20260430_woonvorm-detail-wireframe_v1.html › section 03 .zorgaanbod
──────────────────────────────────────────────────────────────────────────── */

.woonvorm-zorgaanbod.wp-block-group {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
	background-color: var(--site-color-primary-light) !important;
}

.woonvorm-zorgaanbod__eyebrow {
	font-family: var(--site-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--site-color-primary) !important;
	margin-bottom: var(--site-space-xs) !important;
}

.woonvorm-zorgaanbod__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(22px, 2.5vw, var(--site-size-h3)) !important;
	font-weight: 700 !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-bottom: var(--site-space-xs) !important;
}

.woonvorm-zorgaanbod__sub {
	font-size: var(--site-size-small) !important;
	color: var(--site-color-text) !important;
	opacity: 0.7 !important;
	margin-bottom: var(--site-space-l) !important;
}

/* Grid container */

.zorgaanbod__grid.wp-block-group {
	gap: var(--site-space-s) !important;
}

/* Card */

.zorg-card.wp-block-group {
	background: var(--site-color-bg) !important;
	border-radius: var(--site-radius-m) !important;
	padding: var(--site-space-m) !important;
	gap: var(--site-space-m) !important;
	align-items: flex-start !important;
	/* Fill the grid cell so every card matches the tallest one in its row
	   (prevents card 6 growing taller when its text wraps an extra line). */
	height: 100% !important;
}

/* Icon box */

.zorg-card__icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: var(--site-radius-m);
	background: color-mix(in srgb, var(--site-color-secondary-dark-green) 8%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--site-color-secondary-dark-green);
}

/* Content group */

.zorg-card__content.wp-block-group {
	gap: 5px !important;
}

.zorg-card__title {
	font-weight: 700 !important;
	font-size: 13px !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin: 0 !important;
}

.zorg-card__body {
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--site-color-text) !important;
	opacity: 0.75 !important;
	margin: 0 !important;
}

/* Responsive: 2-col at tablet, 1-col at mobile */

@media (max-width: 1023px) {
	.zorgaanbod__grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.woonvorm-zorgaanbod.wp-block-group {
		padding-top: var(--site-space-l);
		padding-bottom: var(--site-space-l);
	}

	.zorgaanbod__grid.wp-block-group {
		grid-template-columns: 1fr !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WOONVORM-OPNAME — Opname-proces stappenplan
   Pattern slug: armonea/woonvorm-opname
   Blocks:  Group (section, beige, constrained 1280px) › Paragraph (eyebrow) › H2
            › Paragraph (sub) › Group (steps grid, 4 col) › 4× Group (stap, flex col)
            each stap: Paragraph (number circle) + Paragraph (title) + Paragraph (body)
            › Group (note callout, constrained 640px) › Paragraph
   Source:  20260430_woonvorm-detail-wireframe_v1.html › section 05 .opname
──────────────────────────────────────────────────────────────────────────── */

.woonvorm-opname.wp-block-group {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
}

.woonvorm-opname__eyebrow {
	font-family: var(--site-font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin-bottom: var(--site-space-xs) !important;
}

.woonvorm-opname__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(22px, 2.5vw, var(--site-size-h3)) !important;
	font-weight: 700 !important;
	margin-bottom: var(--site-space-xs) !important;
}

.woonvorm-opname__sub {
	font-size: var(--site-size-small) !important;
	opacity: 0.75 !important;
	margin-bottom: var(--site-space-l) !important;
}

/* Steps grid — connector line via ::before */

.opname__steps.wp-block-group {
	position: relative !important;
	gap: 0 !important;
}

.opname__steps.wp-block-group::before {
	content: '';
	position: absolute;
	top: 24px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: color-mix(in srgb, currentColor 25%, transparent);
	z-index: 0;
	pointer-events: none;
}

/* Individual step */

.stap.wp-block-group {
	position: relative;
	z-index: 1;
	padding: 0 var(--site-space-s);
	align-items: center !important;
}

/* Step number — circle; background + text colour set via block style attribute.
   padding:0 overrides Gutenberg's automatic padding on .has-background paragraphs. */

.stap__num {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	padding: 0 !important;
	font-family: var(--site-font-heading) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 48px !important;
	display: block !important;
	text-align: center !important;
	margin: 0 auto var(--site-space-s) !important;
}

.stap__title {
	font-weight: 700 !important;
	font-size: 13px !important;
	margin-bottom: 6px !important;
}

.stap__body {
	font-size: 12px !important;
	line-height: 1.5 !important;
	opacity: 0.75 !important;
	margin: 0 !important;
}

/* Note callout — background set via block style attribute; border inherits block text colour */

.opname-note.wp-block-group {
	margin-top: var(--site-space-m) !important;
	padding: var(--site-space-s) var(--site-space-m) !important;
	border-left: 3px solid currentColor;
	border-radius: 0 var(--site-radius-s) var(--site-radius-s) 0 !important;
}

.opname-note__text {
	font-size: 12px !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.opname-note__text strong {
	font-weight: 700;
}

/* Responsive: 2-col at tablet, 1-col at mobile (connector hidden) */

@media (max-width: 1023px) {
	.opname__steps.wp-block-group {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.opname__steps.wp-block-group::before {
		display: none;
	}

	.stap.wp-block-group {
		padding: 0 var(--site-space-xs);
	}
}

@media (max-width: 767px) {
	.woonvorm-opname.wp-block-group {
		padding-top: var(--site-space-l);
		padding-bottom: var(--site-space-l);
	}

	.opname__steps.wp-block-group {
		grid-template-columns: 1fr !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   PAGE-TITLE — Woonvorm
   Pattern slug: armonea/page-title-woonvorm
   Blocks:  Group (full, beige via block attr) › Paragraph (label) › H1 › Shortcode
   Source:  20260430_woonvorm-detail-wireframe_v1.html › section 01
──────────────────────────────────────────────────────────────────────────── */

.page-title.wp-block-group {
	border-bottom: 1px solid rgba(56, 60, 114, 0.1);
}

/* New markup: inner wrapper constrains content */
.page-title__inner {
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding: var(--site-space-l) var(--site-space-l) var(--site-space-m);
}

/* Old markup fallback: constrain each direct child block */
.page-title.wp-block-group > *:not(.page-title__inner) {
	max-width: var(--site-container-max);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--site-space-l);
	box-sizing: border-box;
}

/* Small contextual label above the H1 */
.page-title__label {
	font-family: var(--site-font-body) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--site-color-secondary-dark-green);
	opacity: 0.65;
	margin-bottom: 4px !important; /* tight — reduced from --site-space-xs */
}

/* H1 page title */
.page-title__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-top: 0 !important;
	margin-bottom: var(--site-space-s) !important;
}

/* Breadcrumb nav — output by [armonea_breadcrumb] shortcode */
.page-title__breadcrumb {
	margin-top: 4px;
}

.page-title__breadcrumb-list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.page-title__breadcrumb-link {
	font-family: var(--site-font-body);
	font-size: 12px;
	font-weight: 500;
	color: var(--site-color-secondary-dark-green);
	text-decoration: none;
}

.page-title__breadcrumb-link:hover {
	text-decoration: underline;
}

.page-title__breadcrumb-sep {
	font-size: 11px;
	color: var(--site-color-text);
	opacity: 0.35;
}

.page-title__breadcrumb-current {
	font-family: var(--site-font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--site-color-text);
	opacity: 0.55;
}

@media (max-width: 767px) {
	.page-title__inner,
	.page-title.wp-block-group > *:not(.page-title__inner) {
		padding: var(--site-space-m) var(--site-space-m) var(--site-space-s);
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   FAQ-BLOCK — [armonea_faq] shortcode output
   Used on: WZC detail page, thema-pagina's, overzicht FAQ
   Schema:  FAQPage JSON-LD inline
──────────────────────────────────────────────────────────────────────────── */

.faq-block {
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
}

/* Hub reuses .faq-block inside its own constrained grid/columns —
   let it fill that container instead of re-clamping to 1280px. */
.faq-hub .faq-block {
	max-width: none;
}

.faq-block__heading {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(20px, 2vw, 26px) !important;
	font-weight: 700 !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-bottom: var(--site-space-m) !important;
}

.faq-block__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid color-mix(in srgb, var(--site-color-secondary-dark-blue) 15%, transparent);
}

.faq-block__item {
	border-bottom: 1px solid color-mix(in srgb, var(--site-color-secondary-dark-blue) 15%, transparent);
}

.faq-block__item[open] > .faq-block__question {
	color: var(--site-color-secondary-dark-green);
}

.faq-block__item[open] .faq-block__icon {
	transform: rotate(180deg);
}

.faq-block__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--site-space-m);
	padding: var(--site-space-m) 0;
	font-family: var(--site-font-body) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--site-color-text);
	cursor: pointer;
	list-style: none;
}

.faq-block__question::-webkit-details-marker {
	display: none;
}

.faq-block__question:hover {
	color: var(--site-color-secondary-dark-green);
}

.faq-block__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--site-color-primary);
	transition: transform 0.2s ease;
}

.faq-block__answer {
	padding: 0 0 var(--site-space-m);
	font-family: var(--site-font-body) !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--site-color-text);
	max-width: 720px;
}

.faq-block__answer p { margin-bottom: var(--site-space-s); }
.faq-block__answer p:last-child { margin-bottom: 0; }
.faq-block__answer a {
	color: var(--site-color-secondary-dark-green);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.faq-block__question {
		font-size: 15px !important;
	}
}

/* =============================================================================
   TRUST STRIP — armonea/home-trust-strip
   ============================================================================= */

.trust-strip.wp-block-group {
	background: var(--site-color-secondary-dark-green);
	padding-top: var(--site-space-l);
	padding-bottom: var(--site-space-l);
}

.trust-strip__inner.wp-block-columns {
	max-width: var(--site-container-max);
	margin-inline: auto;
	text-align: center;
}

.trust-stat__number {
	font-family: var(--site-font-heading);
	font-size: clamp(2rem, 4vw, 2.625rem);
	font-weight: 700;
	color: var(--site-color-primary);
	line-height: 1;
	margin-bottom: 6px !important;
}

.trust-stat__label {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.4;
	margin: 0 !important;
}

@media (max-width: 599px) {
	.trust-strip__inner.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--site-space-l);
	}
}

/* ── FAQ Homepage Section ────────────────────────────────────────────────── */
.faq-section.wp-block-group {
	background: var(--site-color-bg, #fff);
	padding-top: var(--site-space-xxl);
	padding-bottom: var(--site-space-xxl);
	padding-inline: max(var(--site-space-l), calc((100% - var(--site-container-max)) / 2));
}

.faq-section__inner.wp-block-columns,
.faq-directory-wrap.wp-block-columns {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.faq-section__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--site-space-m);
}

.faq-section__title {
	font-family: var(--site-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	color: var(--site-color-text);
	line-height: 1.15;
}

.faq-section__intro {
	color: var(--site-color-text);
	opacity: 0.7;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Accordion items */
.faq-block__list {
	display: flex;
	flex-direction: column;
}

.faq-block__item {
	border-bottom: 1px solid rgba(56, 60, 114, 0.12);
}

.faq-block__item:first-child {
	border-top: 1px solid rgba(56, 60, 114, 0.12);
}

.faq-block__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--site-space-m);
	padding: var(--site-space-m) 0;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: var(--site-color-text);
	list-style: none;
}

.faq-block__question::-webkit-details-marker {
	display: none;
}

.faq-block__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--site-color-primary);
	transition: transform 0.2s ease;
}

.faq-block__item[open] .faq-block__icon {
	transform: rotate(180deg);
}

.faq-block__answer {
	padding-bottom: var(--site-space-m);
	font-size: 0.9375rem;
	color: var(--site-color-text);
	line-height: 1.7;
}

.faq-block__answer p { margin-bottom: var(--site-space-s); }
.faq-block__answer p:last-child { margin-bottom: 0; }

.faq-block__answer a {
	color: var(--site-color-secondary-dark-blue);
	text-decoration: underline;
}

/* Footer CTA row — nu direct in .faq-section__list kolom */
.faq-section__list .faq-section__footer-label {
	font-size: 0.875rem;
	color: var(--site-color-text);
	opacity: 0.6;
	margin-top: var(--site-space-l) !important;
	margin-bottom: var(--site-space-s) !important;
	padding-top: var(--site-space-m);
	border-top: 1px solid rgba(56, 60, 114, 0.12);
}

/* FAQ Directory */
.faq-directory-wrap {
	border-top: 1px solid rgba(56, 60, 114, 0.1);
}

.faq-directory__heading {
	font-family: var(--site-font-heading);
	font-size: 1.125rem;
	color: var(--site-color-text);
	margin-bottom: var(--site-space-m) !important;
}

.faq-directory__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--site-space-s);
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-directory__link {
	display: flex;
	align-items: center;
	gap: var(--site-space-s);
	padding: var(--site-space-s) var(--site-space-m);
	border: 1px solid rgba(56, 60, 114, 0.12);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.faq-directory__link:hover {
	border-color: var(--site-color-primary);
	background: var(--site-color-primary-light);
}

.faq-directory__icon {
	font-size: 1.25rem;
	flex-shrink: 0;
}

.faq-directory__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--site-color-text);
	flex: 1;
}

.faq-directory__count {
	font-size: 0.75rem;
	color: var(--site-color-text);
	opacity: 0.5;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.faq-directory__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.faq-directory__list {
		grid-template-columns: 1fr;
	}
}

/* ── CTA Callout (3 varianten) ───────────────────────────────────────────── */

/* Outer: full-width transparent wrapper */
.cta-callout.wp-block-group {
	padding-top: var(--site-space-l);
	padding-bottom: var(--site-space-l);
}

/* Inner: colored card — max 1280px, centered, rounded */
.cta-callout__inner.wp-block-columns {
	max-width: var(--site-container-max);
	margin-inline: auto;
	border-radius: var(--site-radius-l);
	padding: var(--site-space-xl);
	position: relative;
	overflow: hidden;
	align-items: center;
}

/* Decoratieve cirkel rechts */
.cta-callout__inner.wp-block-columns::after {
	content: '';
	position: absolute;
	right: -80px;
	top: 50%;
	transform: translateY(-50%);
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	pointer-events: none;
}

.cta-callout__inner.wp-block-columns::before {
	content: '';
	position: absolute;
	right: 60px;
	top: 50%;
	transform: translateY(-50%);
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

/* Text column (~60%) */
.cta-callout__text.wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	z-index: 1;
}

/* Actions column (~40%) */
.cta-callout__actions-col.wp-block-column {
	flex: 0 0 40%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	z-index: 1;
}

.cta-callout__actions.wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: 280px;
}

/* Eyebrow override for dark backgrounds */
.cta-callout .section-eyebrow,
.cta-callout .cta-callout__eyebrow {
	color: var(--site-color-primary);
	opacity: 1;
}

/* Heading */
.cta-callout .cta-callout__heading,
.cta-callout h2 {
	line-height: 1.15;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Body text */
.cta-callout .cta-callout__body {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	opacity: 0.82;
}

/* ── Colour variants ────────────────────────────────────── */

/* Green: Vert Nature + Orange 70s */
.cta-callout--green .cta-callout__inner {
	background: var(--site-color-secondary-dark-green);
}
.cta-callout--green .cta-callout__heading,
.cta-callout--green h2 {
	color: var(--site-color-primary);
}
.cta-callout--green .cta-callout__body {
	color: #fff;
}
.cta-callout--green .wp-block-button__link {
	background: var(--site-color-primary);
	color: var(--site-color-text);
	border-color: var(--site-color-primary);
}
.cta-callout--green .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
}
.cta-callout--green .is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.4);
}
.cta-callout--green .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Blue: Blue Profond + Jaune Solaire */
.cta-callout--blue .cta-callout__inner {
	background: var(--site-color-secondary-dark-blue);
}
.cta-callout--blue .cta-callout__eyebrow {
	color: var(--site-color-secondary-light-yellow) !important;
	opacity: 0.6 !important;
}
.cta-callout--blue .cta-callout__heading,
.cta-callout--blue h2 {
	color: var(--site-color-secondary-light-yellow);
}
.cta-callout--blue .cta-callout__body {
	color: #fff;
}
.cta-callout--blue .wp-block-button__link {
	background: var(--site-color-secondary-light-yellow);
	color: var(--site-color-text);
	border-color: var(--site-color-secondary-light-yellow);
}
.cta-callout--blue .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
}
.cta-callout--blue .is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.4);
}
.cta-callout--blue .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Prune: Prune Acide + Rose Bonbon */
.cta-callout--prune .cta-callout__inner {
	background: var(--site-color-secondary-dark-prune);
}
.cta-callout--prune .cta-callout__eyebrow {
	color: var(--site-color-secondary-light-rose) !important;
	opacity: 0.6 !important;
}
.cta-callout--prune .cta-callout__heading,
.cta-callout--prune h2 {
	color: var(--site-color-secondary-light-rose);
}
.cta-callout--prune .cta-callout__body {
	color: #fff;
}
.cta-callout--prune .wp-block-button__link {
	background: var(--site-color-secondary-light-rose);
	color: var(--site-color-text);
	border-color: var(--site-color-secondary-light-rose);
}
.cta-callout--prune .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
}
.cta-callout--prune .is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.4);
}
.cta-callout--prune .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Responsive: stack op mobiel */
@media (max-width: 767px) {
	.cta-callout__inner.wp-block-columns {
		padding: var(--site-space-l);
	}
	.cta-callout__actions-col.wp-block-column {
		justify-content: flex-start;
	}
	.cta-callout__actions.wp-block-buttons {
		max-width: 100%;
	}
	.cta-callout__inner.wp-block-columns::after,
	.cta-callout__inner.wp-block-columns::before {
		display: none;
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   FAQ CATEGORY ARCHIVE
   Template: taxonomy-category.php
   Sections: __hero · __faqs · __directory
   CTA callout reuses: .cta-callout--{green|blue|prune} (see above)
──────────────────────────────────────────────────────────────────────────── */

/* ── Shared inner centering ──────────────────────────────────────────────── */
.faq-archive__hero-inner,
.faq-archive__faqs-inner,
.faq-archive__directory-inner {
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding-inline: var(--site-space-l);
}

/* ── 1 · Hero strip ──────────────────────────────────────────────────────── */
.faq-archive__hero.wp-block-group {
	background-color: var(--site-color-primary-light);
	padding-block: var(--site-space-xl) var(--site-space-xxl);
}

.faq-archive__hero .section-eyebrow {
	margin-block-end: var(--site-space-xs);
}

.faq-archive__title {
	font-family: var(--site-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.15;
	color: var(--site-color-secondary-dark-blue);
	margin-block: 0 var(--site-space-s);
}

.faq-archive__intro {
	max-width: 65ch;
	color: var(--site-color-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.faq-archive__intro p:last-child {
	margin-block-end: 0;
}

/* ── 2 · FAQ accordion ───────────────────────────────────────────────────── */
.faq-archive__faqs.wp-block-group {
	padding-block: var(--site-space-xxl);
}

/* ── 3 · Directory ───────────────────────────────────────────────────────── */
.faq-archive__directory.wp-block-group {
	background-color: var(--site-color-primary-light);
	padding-block: var(--site-space-xl) var(--site-space-xxl);
}

.faq-directory__heading {
	font-family: var(--site-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--site-color-secondary-dark-blue);
	margin-block-end: var(--site-space-l);
}

/* ── 2c · Related articles (leaf only) ──────────────────────────────────── */
.faq-archive__articles.wp-block-group {
	padding-block: var(--site-space-xxl);
	background-color: var(--site-color-primary-light);
}

.faq-archive__articles-inner {
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding-inline: var(--site-space-l);
}

.faq-archive__faqs-header {
	margin-block-end: var(--site-space-l);
}

.faq-archive__faqs-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--site-color-secondary-dark-blue);
	margin: 0;
}

.faq-archive__articles-header {
	margin-block-end: var(--site-space-l);
}

.faq-archive__articles-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--site-color-secondary-dark-blue);
	margin: 0;
}

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

.faq-archive__article-card {
	background: white;
	border-radius: var(--site-radius-m);
	overflow: hidden;
}

.faq-archive__article-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease;
}

.faq-archive__article-thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.faq-archive__article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.faq-archive__article-card:hover .faq-archive__article-thumb img {
	transform: scale(1.04);
}

.faq-archive__article-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--site-space-m);
	gap: var(--site-space-s);
}

.faq-archive__article-card:hover {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.faq-archive__article-title {
	font-family: var(--site-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--site-color-secondary-dark-blue);
	margin: 0;
	line-height: 1.3;
}

.faq-archive__article-excerpt {
	font-size: 0.9375rem;
	color: var(--site-color-text);
	line-height: 1.55;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.faq-archive__article-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--site-color-secondary-dark-blue);
	margin-top: auto;
	transition: gap 0.2s ease, color 0.2s ease;
}

.faq-archive__article-link:hover .faq-archive__article-cta {
	gap: 10px;
	color: var(--site-color-primary);
}

/* ── Hub mode: child category sections ───────────────────────────────────── */
.faq-archive__hub.wp-block-group {
	padding-block: var(--site-space-xxl);
}

.faq-archive__hub-inner {
	width: 100%;
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding-inline: var(--site-space-l);
	display: flex;
	flex-direction: column;
	gap: var(--site-space-xxl);
}

.faq-archive__child-section {
	border-top: 2px solid var(--site-color-primary-light);
	padding-top: var(--site-space-xl);
}

.faq-archive__child-section:first-child {
	border-top: none;
	padding-top: 0;
}

.faq-archive__child-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--site-space-m);
	margin-block-end: var(--site-space-m);
	flex-wrap: wrap;
}

.faq-archive__child-heading {
	font-family: var(--site-font-heading);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	color: var(--site-color-secondary-dark-blue);
	margin: 0;
}

.faq-archive__child-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--site-color-secondary-dark-blue);
	text-decoration: none;
	white-space: nowrap;
	transition: gap 0.2s ease, color 0.2s ease;
}

.faq-archive__child-link:hover {
	gap: 10px;
	color: var(--site-color-primary);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.faq-archive__articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.faq-archive__hero-inner,
	.faq-archive__faqs-inner,
	.faq-archive__directory-inner,
	.faq-archive__articles-inner {
		padding-inline: var(--site-space-m);
	}

	.faq-archive__hub-inner {
		padding-inline: var(--site-space-m);
		gap: var(--site-space-xl);
	}

	.faq-archive__child-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--site-space-xs);
	}

	.faq-archive__articles-grid {
		grid-template-columns: 1fr;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WOONVORM-HERO-FULL — Fullwidth cover hero with gradient overlay
   Pattern slug: armonea/woonvorm-hero-full
   Blocks:  Cover (alignfull, dimRatio 0) › Paragraph (eyebrow) › H1 › Paragraph
            › Buttons (primary + outline) › Group (trust strip, flex)
────────────────────────────────────────────────────────────────────────────── */

.woonvorm-hero-full.wp-block-cover {
	min-height: 480px;
}

.woonvorm-hero-full .wp-block-cover__background {
	background: linear-gradient(135deg, rgba(25,78,35,0.88) 0%, rgba(56,60,114,0.75) 100%) !important;
	opacity: 1 !important;
}

.woonvorm-hero-full .wp-block-cover__inner-container {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
	max-width: var(--site-container-max);
	margin-inline: auto;
	width: 100%;
}

.woonvorm-hero-full__eyebrow {
	margin-bottom: var(--site-space-xs) !important;
}

.woonvorm-hero-full__title {
	font-family: var(--site-font-heading) !important;
	font-size: clamp(28px, 4vw, var(--site-size-h1)) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	margin-bottom: var(--site-space-s) !important;
}

.woonvorm-hero-full__intro {
	font-size: var(--site-size-body) !important;
	line-height: 1.65 !important;
	max-width: 56ch !important;
	margin-bottom: var(--site-space-m) !important;
}

.woonvorm-hero-full__buttons {
	margin-bottom: var(--site-space-l) !important;
}

.woonvorm-hero-full__trust {
	border-top: 1px solid rgba(255,255,255,0.18);
	padding-top: var(--site-space-s);
	gap: var(--site-space-m) !important;
}

.woonvorm-hero-full__trust-item {
	font-size: var(--site-size-small) !important;
	color: rgba(255,255,255,0.72) !important;
	margin: 0 !important;
}

.woonvorm-hero-full__trust-item strong {
	font-size: 1.15em;
	color: var(--site-color-primary);
}

@media (max-width: 767px) {
	.woonvorm-hero-full.wp-block-cover {
		min-height: 360px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WOONVORM-VERWACHTEN — "Wat mag je verwachten" 3-column info block
   Pattern slug: armonea/woonvorm-verwachten
   Blocks:  Group (section, white) › Group (header, centred) ›
            Columns (3× Column › Group (verwacht-card))
   Notes:   Editors add a second wp:columns below for B2 (40%/60%) variant.
            Accent colour set via border-top on each card variant class.
────────────────────────────────────────────────────────────────────────────── */

.woonvorm-verwachten.wp-block-group {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
}

.woonvorm-verwachten__header {
	text-align: center;
	margin-bottom: var(--site-space-l);
}

.woonvorm-verwachten__grid.wp-block-columns {
	gap: var(--site-space-m) !important;
	align-items: stretch !important;
}

/* Card shell */
.verwacht-card.wp-block-column {
	border: 1px solid rgba(56,60,114,0.1);
	border-radius: var(--site-radius-m);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: var(--site-space-m) !important;
}

/* Colour accent — top border per variant */
.verwacht-card--green { border-top: 4px solid var(--site-color-secondary-dark-green) !important; }
.verwacht-card--blue  { border-top: 4px solid var(--site-color-secondary-dark-blue) !important; }
.verwacht-card--orange { border-top: 4px solid var(--site-color-primary) !important; }

.verwacht-card__heading {
	font-family: var(--site-font-heading) !important;
	font-size: var(--site-size-h4) !important;
	font-weight: 700 !important;
	margin-bottom: var(--site-space-xs) !important;
}

.verwacht-card--green .verwacht-card__heading { color: var(--site-color-secondary-dark-green) !important; }
.verwacht-card--blue  .verwacht-card__heading { color: var(--site-color-secondary-dark-blue) !important; }
.verwacht-card--orange .verwacht-card__heading { color: var(--site-color-primary) !important; }

.verwacht-card__body {
	font-size: var(--site-size-small) !important;
	color: var(--site-color-text) !important;
	line-height: 1.6 !important;
	margin-bottom: var(--site-space-s) !important;
}

.verwacht-card__checks.wp-block-list {
	font-size: var(--site-size-small) !important;
	color: var(--site-color-text) !important;
	padding-left: 0 !important;
	list-style: none !important;
	margin-bottom: var(--site-space-s) !important;
	border-top: 1px solid rgba(0,0,0,0.07);
	padding-top: var(--site-space-s);
}

.verwacht-card__checks.wp-block-list li {
	padding-left: 1.4em;
	position: relative;
	margin-bottom: 4px;
}

.verwacht-card__checks.wp-block-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--site-color-secondary-dark-green);
	font-weight: 700;
}

.verwacht-card__links {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.verwacht-card__link {
	display: block;
	background: color-mix(in srgb, var(--site-color-primary-light) 60%, transparent);
	border-radius: var(--site-radius-s);
	padding: 5px 10px !important;
	font-size: var(--site-size-caption) !important;
	font-weight: 600 !important;
	text-decoration: none;
	transition: background 0.2s;
}

.verwacht-card--green .verwacht-card__link { color: var(--site-color-secondary-dark-green) !important; }
.verwacht-card--blue  .verwacht-card__link { color: var(--site-color-secondary-dark-blue) !important; }
.verwacht-card--orange .verwacht-card__link { color: var(--site-color-primary) !important; }

.verwacht-card__link:hover {
	background: var(--site-color-primary-light);
}

@media (max-width: 767px) {
	.woonvorm-verwachten__grid.wp-block-columns {
		flex-direction: column !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   WOONVORM-FAQ-COLS — FAQ in 2 or 3 columns with per-column category filter
   Pattern slug: armonea/woonvorm-faq-cols
   Blocks:  Group (section, beige) › Group (header) ›
            Columns (2-3× Column › Paragraph (label) › Shortcode › Paragraph (link))
────────────────────────────────────────────────────────────────────────────── */

.woonvorm-faq-cols.wp-block-group {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
}

.woonvorm-faq-cols__header {
	text-align: center;
	margin-bottom: var(--site-space-l);
}

.woonvorm-faq-cols__grid.wp-block-columns {
	gap: var(--site-space-l) !important;
	align-items: start !important;
}

.woonvorm-faq-cols__col-label {
	font-family: var(--site-font-body) !important;
	font-size: var(--site-size-caption) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.07em !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-bottom: var(--site-space-s) !important;
}

.woonvorm-faq-cols__col-link {
	font-size: var(--site-size-small) !important;
	font-weight: 600 !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-top: var(--site-space-s) !important;
}

@media (max-width: 767px) {
	.woonvorm-faq-cols__grid.wp-block-columns {
		flex-direction: column !important;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   FAQ-HUB — FAQ overview hub page
   Pattern slug: armonea/faq-hub
   Blocks:  Group (section) › Hero › Featured strip › Category rows
────────────────────────────────────────────────────────────────────────────── */

.faq-hub {
	padding-top: var(--site-space-xl);
	padding-bottom: var(--site-space-xl);
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.faq-hub__hero {
	text-align: center;
	padding-bottom: var(--site-space-l);
}

/* ── Featured strip ────────────────────────────────────────────────────────── */
.faq-hub__featured {
	background-color: var(--site-color-primary-light);
	border-radius: 12px;
	padding: var(--site-space-l);
	margin-bottom: var(--site-space-xl);
}

.faq-hub__strip-label {
	font-family: var(--site-font-body) !important;
	font-size: var(--site-size-caption) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.07em !important;
	color: var(--site-color-secondary-dark-green) !important;
	margin-bottom: var(--site-space-m) !important;
}

/* 3-column grid for featured FAQ items.
   The spec lists .faq-hub__featured-grid but no wrapper div is needed —
   the shortcode output (.faq-block__list) is the grid container. */
.faq-hub__featured .faq-block__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--site-space-m);
	align-items: start;
}

/* ── Category rows ──────────────────────────────────────────────────────────── */
/* Each parent category carries a brand accent (--faq-accent) set via a
   modifier class output by armonea_faq_hub_shortcode(). */
.faq-hub__category {
	margin-bottom: var(--site-space-xl);
	--faq-accent: var(--site-color-secondary-dark-green);
}

.faq-hub__category--blue  { --faq-accent: var(--site-color-secondary-dark-blue); }
.faq-hub__category--prune { --faq-accent: var(--site-color-secondary-dark-prune); }

.faq-hub__category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--site-space-s);
	margin-bottom: var(--site-space-m);
	background: var(--faq-accent);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-s) var(--site-space-m);
}

.faq-hub__category-header .wp-block-heading,
.faq-hub__category-header h2 {
	margin-bottom: 0 !important;
	font-size: var(--site-size-h3) !important;
	color: var(--site-color-on-image) !important;
}

.faq-hub__category-header a {
	font-size: var(--site-size-small);
	font-weight: 600;
	color: var(--faq-accent);
	background: var(--site-color-bg);
	padding: var(--site-space-2xs) var(--site-space-s);
	border-radius: var(--site-radius-pill);
	white-space: nowrap;
	text-decoration: none;
}

.faq-hub__category-header a:hover {
	background: var(--site-color-secondary-light-yellow);
	color: var(--site-color-text);
}

/* ── Two-column FAQ card grid (parent + child sections) ─────────────────────── */
.faq-hub__category .faq-block__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--site-space-s);
	border-top: none;
	align-items: start;
}

.faq-hub__category .faq-block__item {
	border: 1px solid color-mix(in srgb, var(--faq-accent) 25%, transparent);
	border-radius: var(--site-radius-m);
	background: var(--site-color-bg);
}

.faq-hub__category .faq-block__question {
	padding: var(--site-space-s);
}

.faq-hub__category .faq-block__answer {
	padding: 0 var(--site-space-s) var(--site-space-s);
}

.faq-hub__category .faq-block__question:hover {
	color: var(--faq-accent);
}

.faq-hub__category .faq-block__item[open] {
	background: color-mix(in srgb, var(--faq-accent) 6%, var(--site-color-bg));
	border-color: var(--faq-accent);
}

.faq-hub__category .faq-block__item[open] > .faq-block__question {
	color: var(--faq-accent);
}

.faq-hub__question-count {
	display: inline-block;
	background: var(--site-color-primary-light);
	color: var(--site-color-text);
	font-size: var(--site-size-caption);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
	margin-left: var(--site-space-xs);
}

/* ── Child category rows ─────────────────────────────────────────────────────── */
.faq-hub__category-child {
	margin-top: var(--site-space-l);
	padding-left: var(--site-space-m);
	border-left: 3px solid var(--site-color-primary);
}

.faq-hub__category-child .faq-hub__category-header {
	background: var(--site-color-primary-light);
	padding: var(--site-space-xs) var(--site-space-s);
}

.faq-hub__category-child .faq-hub__category-header .wp-block-heading,
.faq-hub__category-child .faq-hub__category-header h3 {
	margin-bottom: 0 !important;
	font-size: var(--site-size-h5) !important;
	color: var(--faq-accent) !important;
}

.faq-hub__category-child .faq-hub__category-header a {
	background: var(--faq-accent);
	color: var(--site-color-on-image);
}

.faq-hub__category-child .faq-hub__category-header a:hover {
	background: var(--site-color-secondary-light-yellow);
	color: var(--site-color-text);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.faq-hub__featured .faq-block__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.faq-hub__category .faq-block__list {
		grid-template-columns: 1fr;
	}

	.faq-hub__category-header {
		flex-wrap: wrap;
		padding: var(--site-space-s);
	}
}

@media (max-width: 600px) {
	.faq-hub__featured .faq-block__list {
		grid-template-columns: 1fr;
	}

	.faq-hub__featured {
		padding: var(--site-space-m);
	}

	.faq-hub__category-child {
		padding-left: var(--site-space-s);
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTENT PARAGRAPH  (.content-paragraph)
   Pattern: armonea/content-paragraph
   Blocks:  Group (section, alignfull, adaptable bg) › eyebrow + H2 + p + button
   BG:      transparent by default — set via Color panel in editor
════════════════════════════════════════════════════════════════════════════ */

.content-paragraph {
	padding: var(--site-space-xl) var(--site-space-m);
}

.content-paragraph__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0 var(--site-space-s);
}

.content-paragraph__title {
	font-family: var(--site-font-heading);
	font-size: clamp(24px, 3vw, var(--site-size-h2));
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1.2;
	margin-block: 0 var(--site-space-m);
}

.content-paragraph__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.7;
	max-width: var(--site-prose-max);
	margin-block: 0;
}

.content-paragraph__buttons {
	margin-block: var(--site-space-l) 0;
}

@media (max-width: 767px) {
	.content-paragraph {
		padding: var(--site-space-l) var(--site-space-s);
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HUB HERO  (.hub-hero)
   Editorial split: beige diagonal-clip left · dark-green photo/gradient right
   Used on: page-zorgthemas.php, page-zorgthemas-hub.php
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-hero {
	background-color: var(--site-color-secondary-dark-green);
	overflow: hidden;
}

.hub-hero__inner {
	max-width: var(--site-container-max);
	margin-inline: auto;
	display: flex;
	min-height: 400px;
}

.hub-hero__left {
	flex: 0 0 55%;
	background-color: var(--site-color-primary-light);
	padding: var(--site-space-xl) calc(var(--site-space-xl) + 48px) var(--site-space-xl) var(--site-space-m);
	clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--site-space-s);
	position: relative;
	z-index: 1;
}

.hub-hero__right {
	flex: 1;
	position: relative;
	overflow: hidden;
	background-color: var(--site-color-secondary-dark-green);
	margin-left: -48px;
}

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

.hub-hero__breadcrumb {
	font-size: var(--site-size-caption);
	color: var(--site-color-secondary-dark-green);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--site-space-xs);
	margin-block-end: var(--site-space-xs);
}

.hub-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

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

.hub-hero__breadcrumb-sep {
	opacity: 0.5;
}

.hub-hero__eyebrow {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-color-primary);
	margin-block: 0;
}

.hub-hero__title {
	font-family: var(--site-font-heading);
	font-size: clamp(32px, 4vw, var(--site-size-h1));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--site-color-text);
	margin-block: 0;
}

.hub-hero__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	line-height: 1.65;
	max-width: 48ch;
	margin-block: 0;
}

.hub-hero__meta {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: 0.7;
	margin-block: 0;
}

@media (max-width: 767px) {
	.hub-hero__inner {
		flex-direction: column;
	}

	.hub-hero__left {
		flex: none;
		clip-path: none;
		padding: var(--site-space-xl) var(--site-space-m);
	}

	.hub-hero__right {
		height: 220px;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MASTER INDEX — Theme cards  (.hub-theme-grid, .theme-card)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-theme-grid {
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding: var(--site-space-xl) var(--site-space-m);
}

.hub-theme-grid__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h2);
	color: var(--site-color-text);
	margin-block: 0 var(--site-space-l);
}

.hub-theme-grid__count {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: 0.6;
	font-family: var(--site-font-body);
	font-weight: 400;
	margin-inline-start: var(--site-space-xs);
}

.hub-theme-grid__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--site-space-s);
}

.theme-card {
	border: 1px solid var(--site-color-border);
	border-radius: var(--site-radius-m);
	background: var(--site-color-bg);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
	overflow: hidden;
}

.theme-card:hover {
	box-shadow: 0 4px 16px color-mix(in srgb, var(--site-color-text) 8%, transparent);
	border-color: var(--site-color-primary);
}

.theme-card__top {
	padding: var(--site-space-m) var(--site-space-m) var(--site-space-s);
	flex: 1;
}

.theme-card__accent {
	height: 4px;
	width: 32px;
	border-radius: 2px;
	margin-block-end: var(--site-space-m);
}

.theme-card__accent--0 { background: var(--site-color-secondary-dark-green); }
.theme-card__accent--1 { background: var(--site-color-primary); }
.theme-card__accent--2 { background: var(--site-color-secondary-dark-blue); }
.theme-card__accent--3 { background: var(--site-color-secondary-dark-prune); }

.theme-card__name {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-body);
	color: var(--site-color-text);
	margin-block: 0 var(--site-space-xs);
	display: block;
}

.theme-card__desc {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: 0.75;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-block: 0;
}

.theme-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--site-space-s) var(--site-space-m);
	border-top: 1px solid var(--site-color-border);
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
}

.theme-card__arrow {
	color: var(--site-color-primary);
	font-size: 1.1em;
}

@media (max-width: 767px) {
	.hub-theme-grid__grid {
		grid-template-columns: 1fr;
	}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HUB EDITORIAL ZONE  (.hub-editorial)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-editorial {
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding: var(--site-space-xl) var(--site-space-m) 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PER-THEME HUB — Body layout  (.hub-body, .hub-card, .hub-sidebar)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-body {
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding: var(--site-space-xl) var(--site-space-m);
	display: grid;
	grid-template-columns: 1fr 272px;
	gap: var(--site-space-xl);
	align-items: start;
}

.hub-main {
	min-width: 0;
}

/* ── Article card grid ─────────────────────────────────────────────────── */

.hub-card-grid__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h3);
	color: var(--site-color-text);
	margin-block: 0 var(--site-space-l);
}

.hub-card-grid__count {
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	opacity: 0.6;
	font-family: var(--site-font-body);
	font-weight: 400;
	margin-inline-start: var(--site-space-xs);
}

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

.hub-card {
	border: 1px solid var(--site-color-border);
	border-radius: var(--site-radius-m);
	background: var(--site-color-bg);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.hub-card:hover {
	box-shadow: 0 4px 16px color-mix(in srgb, var(--site-color-text) 8%, transparent);
	border-color: var(--site-color-primary);
}

.hub-card__image {
	height: 140px;
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--site-color-secondary-dark-green);
}

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

.hub-card__image--fallback {
	background: linear-gradient(
		135deg,
		var(--site-color-secondary-dark-green) 0%,
		color-mix(in srgb, var(--site-color-secondary-dark-green) 60%, var(--site-color-primary-dark)) 100%
	);
}

.hub-card__body {
	padding: var(--site-space-s);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--site-space-xs);
}

.hub-card__reading-time {
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: 0.6;
	font-family: var(--site-font-body);
	margin-block: 0;
}

.hub-card__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-small);
	color: var(--site-color-secondary-dark-blue);
	margin-block: 0;
	line-height: 1.3;
}

.hub-card__excerpt {
	font-family: var(--site-font-body);
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
	margin-block: 0;
}

.hub-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--site-space-s);
	border-top: 1px solid var(--site-color-border);
	font-size: var(--site-size-caption);
	color: var(--site-color-text);
	opacity: 0.75;
}

.hub-card__arrow {
	color: var(--site-color-primary);
	font-size: 1.1em;
	opacity: 1;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */

.hub-sidebar {
	position: sticky;
	top: calc(var(--site-header-height, 80px) + var(--site-space-m));
	display: flex;
	flex-direction: column;
	gap: var(--site-space-m);
}

.hub-other-themes {
	background: var(--site-color-bg);
	border: 1px solid var(--site-color-border);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-m);
}

.hub-other-themes__title {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h3);
	color: var(--site-color-text);
	margin-block: 0 var(--site-space-m);
}

.hub-other-themes__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hub-other-themes__item a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--site-space-xs) 0;
	font-size: var(--site-size-small);
	color: var(--site-color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--site-color-border);
	transition: color 0.15s;
}

.hub-other-themes__item:last-child a {
	border-bottom: none;
}

.hub-other-themes__item a:hover {
	color: var(--site-color-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HUB CTA BAND  (.hub-cta-band)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hub-cta-band {
	background-color: var(--site-color-secondary-dark-green);
	padding: var(--site-space-xl) var(--site-space-m);
	text-align: center;
}

.hub-cta-band__inner {
	max-width: 640px;
	margin-inline: auto;
}

.hub-cta-band__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h2);
	color: var(--site-color-bg);
	margin-block: 0 var(--site-space-s);
}

.hub-cta-band__body {
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	color: var(--site-color-bg);
	opacity: 0.85;
	margin-block: 0 var(--site-space-l);
	line-height: 1.65;
}

.hub-cta-band__btn {
	display: inline-block;
	padding: 16px 32px;
	background-color: var(--site-color-primary);
	color: var(--site-color-text);
	border-radius: var(--site-radius-m);
	font-family: var(--site-font-body);
	font-size: var(--site-size-body);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.17s ease-out, transform 0.17s ease-out;
}

.hub-cta-band__btn:hover {
	background-color: var(--site-color-secondary-light-yellow);
	transform: translateY(-1px);
}

/* ── Responsive collapse ────────────────────────────────────────────────── */

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

	.hub-sidebar {
		position: static;
	}
}

@media (max-width: 767px) {
	.hub-card-grid {
		grid-template-columns: 1fr;
	}
}




/* ────────────────────────────────────────────────────────────────────────────
   NOTE: global on purpose — used by [goodays_general_scores] shortcode on
   regular pages AND by template-parts/site/goodays.php on location singles.
──────────────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────────────
   SITE GOODAYS — scores section (dark green bg + tilted card)
──────────────────────────────────────────────────────────────────────────── */

.site-goodays {
	position: relative;
	background: var(--site-color-bg);
	max-width: 1280px;
	margin: var(--site-space-xl) auto 0;
	padding: 0;
	overflow: hidden;
}

/* SVG fills the section as a scalable trapezoid bg */
.site-goodays__shape {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: 0;
}

.site-goodays__inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin: 0 auto;
	padding: 64px var(--site-space-m) var(--site-space-m);
}

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

.site-goodays__heading {
	font-family: var(--site-font-heading);
	font-size: var(--site-size-h2);
	font-weight: 700;
	color: #fff;
	line-height: 1.15;
	margin: 0;
}

.site-goodays__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--site-space-s);
}

/* White score boxes on green bg */
.site-goodays__col {
	background: var(--site-color-bg);
	border-radius: var(--site-radius-m);
	padding: var(--site-space-m);
}

.site-goodays__col-label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--site-color-text);
	margin: 0 0 var(--site-space-s);
	line-height: 1.35;
}

.site-goodays__score {
	font-family: var(--site-font-heading);
	font-size: 3rem;
	font-weight: 700;
	color: var(--site-color-text);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: var(--site-space-xs);
}

.site-goodays__stars {
	display: flex;
	gap: 4px;
	margin-bottom: var(--site-space-xs);
}

.site-goodays__stars .goodays-star {
	font-size: 1.25rem;
	line-height: 1;
}

.site-goodays__count {
	display: block;
	font-size: 0.9375rem;
	color: var(--site-color-text-muted);
	margin-top: var(--site-space-2xs);
}

.site-goodays__source {
	display: block;
	margin-top: var(--site-space-2xs);
	font-size: 0.75rem;
	color: var(--site-color-text-muted);
	font-style: italic;
}

.site-goodays__attribution {
	margin-top: var(--site-space-m);
	padding-top: var(--site-space-s);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.04em;
}

@media (max-width: 640px) {
	.site-goodays__inner {
		padding-top: 48px;
	}

	.site-goodays__heading {
		font-size: var(--site-size-h3);
	}

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

	.site-goodays__score {
		font-size: 2.75rem;
	}
}



/* ────────────────────────────────────────────────────────────────────────────
   FACTS STRIP — armonea/facts-strip
   Blocks:  Group (section, alignfull) › Columns › Column × N (stat + label)
   Colors:  Default dark-green/orange. Override via modifier or Gutenberg controls.
   Source:  screenshot reference 2026-06-10
──────────────────────────────────────────────────────────────────────────── */

/* Color tokens — override per variant or via Gutenberg inline style */
.facts-strip {
	--_fs-bg:    var(--site-color-secondary-dark-green);
	--_fs-stat:  var(--site-color-primary);
	--_fs-label: rgba(255, 255, 255, 0.82);
	--_fs-bold:  #fff;
}

.facts-strip--blue {
	--_fs-bg: var(--site-color-secondary-dark-blue);
}

.facts-strip--prune {
	--_fs-bg: var(--site-color-secondary-dark-prune);
}

.facts-strip--beige {
	--_fs-bg:    var(--site-color-primary-light);
	--_fs-stat:  var(--site-color-secondary-dark-green);
	--_fs-label: var(--site-color-text);
	--_fs-bold:  var(--site-color-text);
}

.facts-strip.wp-block-group {
	background-color: var(--_fs-bg);
	padding-block: var(--site-space-l);
}

.facts-strip__inner.wp-block-columns {
	max-width: var(--site-container-max);
	margin-inline: auto;
	padding-inline: var(--site-space-l);
	text-align: center;
}

.facts-strip__stat {
	font-family: var(--site-font-heading);
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 700;
	color: var(--_fs-stat);
	line-height: 1;
	margin-block: 0 var(--site-space-xs) !important;
}

.facts-strip__label {
	font-size: var(--site-size-small);
	color: var(--_fs-label);
	line-height: 1.5;
	margin: 0 !important;
}

.facts-strip__label strong {
	color: var(--_fs-bold);
	font-weight: 700;
}

/* Divider between columns */
.facts-strip__col + .facts-strip__col {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.facts-strip--beige .facts-strip__col + .facts-strip__col {
	border-left-color: rgba(0, 0, 0, 0.1);
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.facts-strip__inner.wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--site-space-l) var(--site-space-m);
		padding-inline: var(--site-space-s);
	}

	.facts-strip__col + .facts-strip__col {
		border-left: none;
	}

	.facts-strip__col:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}

	.facts-strip--beige .facts-strip__col:nth-child(odd) {
		border-right-color: rgba(0, 0, 0, 0.1);
	}
}


/* ────────────────────────────────────────────────────────────────────────────
   IMAGE TEXT SPLIT — 2-col image + content with trapezium cut
   Pattern slugs: armonea/image-text-left · armonea/image-text-right
   Blocks:  Group (section) › Columns › Column (media) + Column (content)
   Design:  50/50 columns, diagonal clip-path on image, italic serif heading
   Source:  20260610_image-text-split_v1.html
──────────────────────────────────────────────────────────────────────────── */

.image-text-split.wp-block-group {
	padding-block: var(--site-space-m);
}

/* Kill default column gap */
.image-text-split .wp-block-columns {
	gap: 0 !important;
	align-items: stretch;
	min-height: 480px;
}

/* Remove default column padding on the image column */
.image-text-split__media-col.wp-block-column {
	padding: 0;
}

/* Image wrapper — clip-path lives here */
.image-text-split__media.wp-block-group {
	height: 100%;
	min-height: 480px;
	padding: 0;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
	overflow: hidden;
}

/* Right variant: mirror clip-path */
.image-text-split__media--right.wp-block-group {
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

/* Image fills container */
.image-text-split__media .wp-block-image {
	height: 100%;
	margin: 0;
}

.image-text-split__media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content column padding — image is on the left */
.image-text-split__content.wp-block-column {
	padding: var(--site-space-xl) var(--site-space-xl) var(--site-space-xl) var(--site-space-l);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Content column padding — image is on the right (--reverse) */
.image-text-split--reverse .image-text-split__content.wp-block-column {
	padding: var(--site-space-xl) var(--site-space-l) var(--site-space-xl) var(--site-space-xl);
}

.image-text-split__title {
	font-family: var(--site-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	font-style: italic;
	line-height: 1.2;
	color: var(--site-color-secondary-dark-green);
	margin-block: 0 var(--site-space-m);
}

.image-text-split__body {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--site-color-text);
	max-width: 52ch;
	margin-block: 0 var(--site-space-m);
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.image-text-split .wp-block-columns {
		flex-direction: column !important;
	}

	.image-text-split .image-text-split__media-col.wp-block-column {
		width: 100% !important;
		flex-basis: auto !important;
	}

	.image-text-split__media.wp-block-group,
	.image-text-split__media--right.wp-block-group {
		clip-path: none;
		min-height: 260px;
		aspect-ratio: 16 / 9;
	}

	.image-text-split__content.wp-block-column,
	.image-text-split--reverse .image-text-split__content.wp-block-column {
		padding: var(--site-space-m) var(--site-space-m) var(--site-space-l) !important;
	}

	/* Stack image below text on mobile for --reverse */
	.image-text-split--reverse .wp-block-columns {
		flex-direction: column-reverse !important;
	}
}