/* Maries maakt het — WordPress-aanpassingen voor hero, specialismen en Over Maries.
 *
 * site.css is een ongewijzigde kopie van de goedgekeurde preview. De patronen gebruiken
 * dezelfde klassen, maar de kernblokken voegen eigen wrappers (figure, .wp-block-button)
 * en layoutmarges toe. Hier worden die rechtgezet, alleen binnen deze drie secties.
 */

/* ---------- Layoutmarges van WordPress neutraliseren ----------
 * WP geeft kinderen van .is-layout-flow een margin-block-start (blockGap). De preview
 * werkt met eigen marges; die worden hieronder per element teruggezet. */
.hero .is-layout-flow > *,
.specialismen .is-layout-flow > *,
.over .is-layout-flow > *,
.hero.is-layout-flow > *,
.specialismen.is-layout-flow > *,
.over.is-layout-flow > * {
	margin-block: 0;
}
.hero .is-layout-flow > p,
.specialismen .is-layout-flow > p,
.over .is-layout-flow > p {
	margin-block-end: 1em;
}

/* ---------- Hero ---------- */
.hero .hero__tekst > .kicker { margin-bottom: 1rem; }
.hero .hero__tekst > .hero__intro { margin: 1.5rem 0 2rem; }
.hero .hero__tekst > .vinklijst { margin: 2.25rem 0 0; }

/* Knoppen: core/button krijgt dezelfde vorm als .button / .button--ghost */
.hero .hero__knoppen.is-layout-flex { gap: .75rem; }
.hero__knoppen .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 52px; padding: .8rem 1.6rem;
	border: 2px solid var(--geel); border-radius: 999px;
	background: var(--geel); color: var(--bruin-diep);
	font: 700 1rem/1 var(--font); text-decoration: none; cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero__knoppen .wp-block-button__link:hover {
	background: var(--geel-diep); border-color: var(--geel-diep); color: var(--bruin-diep); transform: translateY(-2px);
}
.hero__knoppen .is-style-outline > .wp-block-button__link {
	background: transparent; border-color: var(--bruin); color: var(--bruin);
}
.hero__knoppen .is-style-outline > .wp-block-button__link:hover {
	background: var(--bruin); border-color: var(--bruin); color: var(--creme);
}
@media (prefers-reduced-motion: reduce) {
	.hero__knoppen .wp-block-button__link { transition: none; }
}
@media (max-width: 480px) {
	.hero__knoppen .wp-block-button { flex: 1 1 0; }
	.hero__knoppen .wp-block-button__link { width: 100%; }
}

/* Variant A: core/image zit in een <figure>; de figure vult het kader, de img staat zoals in de preview */
.hero__variant--a > .hero__vrijstaand {
	position: absolute; inset: 0; left: 0;
	width: 100%; height: 100%; max-width: none; margin: 0;
	filter: none;
}
.hero__variant--a > .hero__vrijstaand img {
	position: absolute; bottom: 0; left: -16%;
	width: auto; height: 100%; max-width: none;
	object-fit: contain; object-position: bottom center;
	border-radius: 0;
	filter: drop-shadow(0 12px 14px rgba(90, 50, 41, .14));
}

/* Variant B (patroon "Hero (foto in afgerond kader)") */
.hero--foto .hero__variant--b { display: block; }
.hero--foto .hero__variant--a { display: none; }
.hero__variant--b > .hero__foto { margin: 0; overflow: hidden; }
.hero__variant--b > .hero__foto img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; border-radius: 0;
}
.hero--foto .beschikbaar { right: auto; left: -2%; bottom: 14%; }

/* Beschikbaarheidskaart: groepblok met één alinea; het groene stipje is decoratie */
.beschikbaar::before {
	content: ""; position: relative; flex: none;
	width: 12px; height: 12px; border-radius: 50%; background: #3f8f4f;
	box-shadow: 0 0 0 5px rgba(63, 143, 79, .18);
}
.hero .beschikbaar > p { margin: 0; max-width: none; }

/* ---------- Specialismen ---------- */
.specialismen .specialisme > .specialisme__nr { margin: 0 0 1.25rem; max-width: none; color: var(--geel); }
.specialismen .specialisme > .specialisme__titel { margin: 0 0 .4rem; color: inherit; }
.specialismen .specialisme > p:last-child { margin: 0; }
@media (max-width: 520px) {
	.specialismen .specialisme > .specialisme__nr { margin: 0; }
}

/* ---------- Over Maries ---------- */
.over .over__tekst > .kicker { margin-bottom: 1rem; }
.over .over__tekst > .over__intro { margin: 1.5rem 0 2.5rem; }

.over__beeld > .over__foto { margin: 0; overflow: hidden; }
.over__beeld > .over__foto img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; border-radius: 0;
}

/* Citaat: core/quote in plaats van figure + blockquote + figcaption */
.over .wp-block-quote.citaat { margin: 0; border: 0; }
.wp-block-quote.citaat::before {
	content: ""; display: block; width: 46px; aspect-ratio: 48 / 36; margin-bottom: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath fill='%23edae4f' d='M0 36V22.6C0 9.9 6.3 2.4 18.9 0l2 4.6C13.8 6.6 10.4 10.7 10.2 17H20v19H0Zm28 0V22.6C28 9.9 34.3 2.4 46.9 0l2 4.6c-7.1 2-10.5 6.1-10.7 12.4H48v19H28Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.over .wp-block-quote.citaat > p {
	max-width: none; margin: 0;
	font-size: clamp(1.1rem, 1.55vw, 1.3rem); line-height: 1.6;
}
.over .wp-block-quote.citaat > cite {
	display: block; margin-top: 1.5rem;
	font-size: inherit; font-style: normal; font-weight: 700; color: inherit;
}