/*
 * 28 — ATELIER & WERKWIJZE (pagina /atelier/)
 * Hero met beeldvlakken, troeven op antraciet, werkwijze in rijen, werkgebied
 * met kaart. Reviews komen uit 27-reviews.css.
 */

/* Hero */
.mi-atelier-hero .mi-kicker {
	margin: 0 0 24px;
}

.mi-atelier-hero .mi-atelier-titel {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; /* links in de 1560px-container, ook op brede schermen */
	margin: 0;
	line-height: 1.02;
	letter-spacing: -0.012em;
	max-width: 980px;
}

.mi-atelier-hero .mi-atelier-hero-grid {
	gap: 28px;
	margin-top: clamp(40px, 4.5vw, 64px);
}

.mi-atelier-hero .wp-block-column > * {
	margin: 0;
}

.mi-atelier-hero .mi-zacht {
	margin-bottom: 20px;
	line-height: 1.72;
	color: color-mix(in srgb, currentColor 85%, transparent);
}

.mi-atelier-hero .mi-zacht + .mi-zacht {
	margin-bottom: 32px;
}

.mi-atelier-hero .mi-atelier-beeld img {
	display: block;
	width: 100%;
	height: 480px;
	object-fit: cover;
	background-color: var(--wp--preset--color--surface);
}

.mi-atelier-hero .mi-atelier-portret {
	max-width: 340px;
}

.mi-atelier-hero .mi-atelier-portret img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center top;
	background-color: var(--wp--preset--color--surface);
}

.mi-atelier-hero .mi-portret-naam {
	margin: 12px 2px 0;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}

/* Troeven op antraciet (hergebruikt de statement-stijl van de homepage). */
.mi-atelier-troeven .mi-statement-kop {
	max-width: 900px;
	margin-bottom: 48px;
}

.mi-atelier-troeven .mi-troeven {
	gap: 40px;
	padding-top: 40px;
}

.mi-atelier-troeven .mi-troef-titel {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.mi-atelier-troeven .mi-zacht {
	font-size: var(--wp--preset--font-size--small);
}

/* Werkwijze in rijen. */
.mi-atelier-werkwijze .mi-atelier-werkwijze-kop {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; /* links in de 1560px-container, ook op brede schermen */
	max-width: 880px;
	margin: 0 0 20px;
	line-height: 1.14;
}

.mi-atelier-werkwijze .mi-atelier-werkwijze-intro {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; /* links in de 1560px-container, ook op brede schermen */
	max-width: 640px;
	margin: 0 0 60px;
	font-size: 1rem;
	line-height: 1.7;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}

.mi-stap-rij {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 32px;
	align-items: start;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	padding: 40px 0;
}

/* Drie klassen diep: WordPress zet zelf ":root :where(.is-layout-flow) > *"
   met een blokmarge op elk kind, en die regel wint anders van ons. */
.mi-atelier-werkwijze .mi-stap-rij > * {
	margin: 0;
}

.mi-atelier-werkwijze .mi-stap-rij .mi-nummer {
	justify-self: start;
	/* Badge op het midden van de eerste titelregel: halve regelhoogte van de
	   kop (lijnhoogte 1.15) min halve badgehoogte (ca. 22px). */
	margin-block-start: calc(var(--wp--preset--font-size--kop-rij) * 0.575 - 11px);
}

.mi-stap-rij h3 {
	line-height: 1.15;
}

.mi-stap-rij .mi-zacht {
	font-size: 0.9375rem;
	line-height: 1.7;
}

@media (max-width: 781px) {
	.mi-stap-rij {
		grid-template-columns: 60px 1fr;
		row-gap: 10px;
		padding: 28px 0;
	}

	.mi-stap-rij .mi-zacht {
		grid-column: 2;
	}
}

/* Werkgebied: tekst en kaart. */
.mi-werkgebied .mi-werkgebied-grid {
	gap: clamp(32px, 4vw, 64px);
}

.mi-werkgebied .wp-block-column > * {
	margin: 0;
}

.mi-werkgebied .mi-kicker {
	margin-bottom: 14px;
}

.mi-werkgebied h2 {
	margin-bottom: 22px;
	line-height: 1.15;
}

.mi-werkgebied .mi-zacht {
	line-height: 1.72;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}

.mi-werkgebied iframe {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
}

/* Complianz-placeholder voor de kaart, tot de bezoeker toestemming geeft. */
.mi-werkgebied .cmplz-placeholder-element,
.mi-werkgebied .cmplz-blocked-content-container {
	min-height: 400px;
	background-color: var(--wp--preset--color--surface);
	background-image: none !important;
}