/**
 * Startseite: Einstieg, Zwei Türen, Fachbereiche, Warum wir, Ablauf.
 *
 * Nur, was Block-Attribute nicht ausdrücken können: Bildhöhe am Viewport,
 * klickbare Flächen, mitlaufende Spalten, automatische Schrittnummern und die
 * Bildkomposition je Breite (Rundbild am Bogen, gespiegeltes Blätterpaar der Türen,
 * Zuschnitte, bei denen Gesichter und Hände immer ganz in der Form bleiben).
 */

/* ---------- Einstieg ---------- */

.ezam-home-hero .ezam-hero-intro .has-large-font-size {
	max-width: 34ch;
}

/*
 * Das Schlüsselwort „Selbstständigkeit“ bricht im H1 nie mitten im Wort: Die Textspalte ist
 * nebeneinander 55 % breit, und die Schrift wächst nur so weit, dass das Wort bei jeder
 * Breite ganz in eine Zeile passt (zwei Zeilen ab 1280px, drei ab 1024px).
 */
.ezam-home-hero h1 {
	font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3rem);
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Sehr schmale Handys (unter 360px): etwas kleiner, damit das Wort in die Zeile passt. */
@media (max-width: 359.98px) {
	.ezam-home-hero h1 {
		font-size: 2rem;
	}
}

@media (min-width: 900px) {
	/*
	 * Bildhöhe an den Viewport gekoppelt: Text, Bild und Buttons passen auch bei 1280 × 800 ohne Scrollen.
	 * Nur im Frontend: In Editor-Vorschauen hängt die Viewport-Höhe vom Inhalt ab.
	 */
	:where(body:not(.editor-styles-wrapper)) .ezam-home-hero .ezam-hero-media {
		width: min(100%, calc((100svh - var(--ezam-header-offset) - 7rem) * 5 / 6));
		margin-inline-start: auto;
	}
}

/*
 * Das Rundbild hängt halb über der unteren linken Ecke des Bogens: Es verdeckt nur Ärmel und
 * Tischkante, nie die Hände der Patientin, und ragt in den freien Raum neben dem Bogen.
 */
.ezam-home-hero .ezam-hero-media .ezam-hero-inset {
	left: -13%;
	bottom: -6%;
	width: 32%;
}

/* Schmale Nebeneinander-Ansicht: weniger Überhang, damit das Rundbild Abstand zum Einleitungstext hält. */
@media (min-width: 900px) and (max-width: 1099.98px) {
	.ezam-home-hero .ezam-hero-media .ezam-hero-inset {
		left: -8%;
	}
}

/* Unter 900px stapeln Text und Bild (Text zuerst), damit die Überschrift Platz hat. */
@media (max-width: 899.98px) {
	.ezam-home-hero .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ezam-home-hero .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.ezam-home-hero .ezam-hero-intro {
		max-width: 40rem;
	}

	.ezam-home-hero .ezam-hero-media {
		width: min(88%, 30rem);
		margin-inline-start: auto;
	}

	/* Das Rundbild ragt nur so weit in den freien Raum links, wie der Seitenrand erlaubt. */
	.ezam-home-hero .ezam-hero-media .ezam-hero-inset {
		left: -12%;
		width: 34%;
	}
}

/* ---------- Zwei Türen ---------- */

/* Überschrift und Einleitung stehen untereinander, links bündig (kein geteilter Kopf). */
.ezam-audiences__head > p {
	max-width: 60ch;
}

.ezam-door {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
	box-sizing: border-box;
	border-radius: var(--ezam-radius-lg);
	overflow: hidden;
}

/* Abstände regelt die Tür selbst (gap), nicht der Fluss-Abstand von WordPress. */
.ezam-door.ezam-door > * {
	margin-block: 0;
}

.ezam-door > .wp-block-heading {
	line-height: 1.1;
}

/* Der Link sitzt immer unten: beide Türen enden auf einer Linie. */
.ezam-door.ezam-door > .ezam-door__link {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: lining-nums;
	/* Linktexte brechen nur zwischen Wörtern um, nie mitten in „Jugendliche“. */
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Inline-Block statt Flex: Bricht die Beschriftung auf dem Handy um, folgt der Pfeil dem letzten Wort. */
.ezam-door__link a {
	display: inline-block;
	padding-block: 0.6rem;
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Die ganze Fläche ist klickbar: der Link spannt eine unsichtbare Ebene über die Tür. */
.ezam-door__link a::before {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	border-radius: inherit;
}

.ezam-door__link a::after {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-inline-start: 0.5em;
	vertical-align: -0.3em;
	background-color: currentColor;
	-webkit-mask: url("../../icons/regular/arrow-right.svg") center / contain no-repeat;
	mask: url("../../icons/regular/arrow-right.svg") center / contain no-repeat;
}

.ezam-door:hover .ezam-door__link a {
	color: var(--wp--preset--color--coral-dark);
	text-decoration-thickness: 2px;
}

.ezam-door:hover {
	box-shadow: var(--wp--preset--shadow--soft);
}

@supports selector(:has(*)) {
	.ezam-door:has(.ezam-door__link a:focus-visible) {
		outline: 3px solid var(--ezam-focus);
		outline-offset: 4px;
	}

	.ezam-door__link a:focus-visible {
		outline: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ezam-door {
		transition:
			box-shadow var(--ezam-base) var(--ezam-ease),
			translate var(--ezam-base) var(--ezam-ease);
	}

	.ezam-door__link a::after {
		transition: translate var(--ezam-base) var(--ezam-ease);
	}

	.ezam-door:hover {
		translate: 0 -3px;
	}

	.ezam-door:hover .ezam-door__link a::after {
		translate: 0.3em 0;
	}
}

.ezam-door__photo {
	margin-block-end: var(--wp--preset--spacing--20) !important;
}

/*
 * Die beiden Fotos bilden ein gespiegeltes Blätterpaar wie die zwei Blätter im Logo: Die Spitzen
 * zeigen nach außen (Kinder oben links, Erwachsene oben rechts). Die Erwachsenen-Tür trägt das Blatt
 * des Block-Stils, die Kinder-Tür dieselbe Form gespiegelt. So bleibt die Frau links im Kinder-Foto
 * unter der kleinen Ecke ganz sichtbar.
 */
.ezam-door--kinder > .ezam-door__photo.is-style-leaf img {
	border-radius: var(--wp--custom--radius--sm, 0.75rem) 44%;
}

/* Unter 1024px stehen die Türen untereinander und nutzen die volle Breite. */
@media (max-width: 1023.98px) {
	.ezam-doors {
		flex-wrap: wrap !important;
	}

	.ezam-doors > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/*
 * Tablet: Text und Foto nebeneinander, gespiegelt (Kinder: Text links, Foto rechts; Erwachsene:
 * Foto links, Text rechts). Beide Fotos gleich groß und quadratisch, mittig zur Textspalte.
 */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.ezam-door {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--30);
	}

	.ezam-door > :not(.ezam-door__photo) {
		grid-column: 1;
	}

	.ezam-door.ezam-door > .ezam-door__photo {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
		margin: 0 !important;
	}

	.ezam-door > .ezam-door__photo img {
		aspect-ratio: 1 !important;
	}

	.ezam-door--erwachsene {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}

	.ezam-door--erwachsene > :not(.ezam-door__photo) {
		grid-column: 2;
	}

	.ezam-door--erwachsene.ezam-door > .ezam-door__photo {
		grid-column: 1;
	}

	/*
	 * Quadratischer Zuschnitt: im Kinder-Foto beide Gesichter, im Erwachsenen-Foto die Patientin mit
	 * der Hand der Therapeutin. Nur für die Theme-Fotos: Tauscht Andrea ein Bild aus, gilt ihr
	 * Fokuspunkt aus dem Bild-Block.
	 */
	.ezam-door--kinder > .ezam-door__photo img[src*="home-door-kids"] {
		object-position: 52% 50% !important;
	}

	.ezam-door--erwachsene > .ezam-door__photo img[src*="home-door-adults"] {
		object-position: 64% 50% !important;
	}
}

/* ---------- Fachbereiche ---------- */

/* Mitlaufende Einleitung nur, wo sie neben der Liste Platz hat und ganz in den Viewport passt. */
@media (min-width: 1024px) and (min-height: 760px) {
	.ezam-areas__intro {
		position: sticky;
		top: calc(var(--ezam-header-offset) + var(--wp--preset--spacing--50));
	}
}

/* Tablet: Einleitung über der Liste statt einer schmalen Spalte daneben. */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.ezam-home-areas .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.ezam-home-areas .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Einleitung links, rundes Detailbild rechts daneben. */
	.ezam-areas__intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 15rem;
		align-items: center;
		column-gap: var(--wp--preset--spacing--60);
	}

	.ezam-areas__intro > * {
		grid-column: 1;
	}

	.ezam-areas__intro > .ezam-areas__photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		max-width: none;
		margin: 0 0 0 auto !important;
	}
}

/*
 * Rundes Detailbild (Hände am Fingertrainer). Ein feiner, leicht versetzter Korallenring nimmt die
 * Korallenlinie unter der Überschrift auf: Koralle nur als Deko-Linie, wie im CD vorgesehen.
 */
.ezam-areas__photo {
	position: relative;
	isolation: isolate;
	max-width: min(100%, 23rem);
}

.ezam-areas__photo::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 6% -6% -6% 6%;
	border: 2px solid var(--wp--preset--color--coral);
	border-radius: 50%;
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 781.98px) {
	.ezam-areas__photo {
		max-width: min(88%, 17.5rem);
	}
}

.ezam-area > .wp-block-icon,
.ezam-reason > .wp-block-icon {
	flex: none;
}

.ezam-area > .wp-block-group,
.ezam-reason > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

.ezam-area .wp-block-heading {
	margin-block-start: 0.35rem;
}

.ezam-areas__list > .ezam-area:first-child {
	padding-top: 0 !important;
}

/* Handy: Symbol neben der Überschrift, der Text nutzt die volle Breite. */
@media (max-width: 781.98px) {
	.ezam-areas__list .ezam-area {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--20);
	}

	.ezam-areas__list .ezam-area > .wp-block-group {
		display: contents;
	}

	.ezam-areas__list .ezam-area .wp-block-heading,
	.ezam-areas__list .ezam-area p {
		margin: 0;
	}

	.ezam-areas__list .ezam-area p {
		grid-column: 1 / -1;
	}

	.ezam-areas__list .ezam-area > .wp-block-icon svg {
		width: 3.25rem !important;
	}
}

/* ---------- Warum wir ---------- */

/* Koralle hauchzart verschwindet auf dem hellen Grund: hier etwas kräftiger. */
.ezam-home-why .ezam-blob--coral::before {
	background: var(--wp--preset--color--coral-light);
	opacity: 0.55;
	inset: 8% -6% -5% 10%;
}

/* Gestapelt ist das Bild so breit wie der Inhalt: die Fläche ragt nur so weit hinaus, wie der Seitenrand erlaubt. */
@media (max-width: 781.98px) {
	.ezam-home-why .ezam-blob--coral::before {
		inset: 8% -3% -5% 10%;
	}
}

/* „Ergotherapie-Zentrum“ trennt nur am eigenen Bindestrich, nie mitten im Wort. */
.ezam-home-why h2,
.ezam-why__seal > p {
	hyphens: manual;
	-webkit-hyphens: manual;
}

@media (min-width: 782px) and (max-width: 1099.98px) {
	.ezam-home-why .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 38% !important;
	}

	.ezam-home-why .wp-block-columns > .wp-block-column:last-child {
		flex-basis: 62% !important;
	}
}

.ezam-why__seal > p {
	margin: 0;
	line-height: 1.35;
}

.ezam-reason .wp-block-heading {
	margin-block-start: 0.4rem;
}

/*
 * Handy: flacherer Zuschnitt über dem Text. Der Fokuspunkt im Bild-Block (oberes Drittel) hält
 * beide Gesichter im Blatt, die kleine Ecke oben rechts lässt die Therapeutin ganz frei.
 */
@media (max-width: 781.98px) {
	.ezam-why__media img {
		aspect-ratio: 5 / 4 !important;
	}
}

/*
 * Nebeneinander steht das Bild oben bündig mit der Überschrift und läuft beim Lesen der Gründe mit,
 * statt verloren in der Mitte der Spalte zu schweben. Auf großen Bildschirmen nur, wenn das ganze
 * Bild unter dem Header Platz hat.
 */
@media (min-width: 782px) and (max-width: 1099.98px), (min-width: 1100px) and (min-height: 800px) {
	.ezam-home-why .wp-block-columns > .wp-block-column:first-child {
		align-self: stretch;
	}

	.ezam-why__media {
		position: sticky;
		top: calc(var(--ezam-header-offset) + var(--wp--preset--spacing--50));
	}
}

/* ---------- Ablauf ---------- */

.ezam-steps {
	--ezam-step-dot: 3.25rem;
	--ezam-steps-gap: var(--wp--preset--spacing--50);
	counter-reset: ezam-step;
	display: grid;
	gap: var(--ezam-steps-gap);
	list-style: none;
}

.ezam-steps > .ezam-step {
	position: relative;
	margin: 0;
	padding-inline-start: calc(var(--ezam-step-dot) + var(--wp--preset--spacing--30));
	counter-increment: ezam-step;
}

/* Die Nummer zählt automatisch mit, auch wenn Schritte im Editor verschoben werden. */
.ezam-step::before {
	content: counter(ezam-step);
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--ezam-step-dot);
	height: var(--ezam-step-dot);
	border: 2px solid var(--wp--preset--color--blue);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}

.ezam-step:last-child::before {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--base);
}

/* Verbindungslinie: auf dem Handy senkrecht, ab Tablet-Querformat waagerecht. */
.ezam-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--ezam-step-dot) + 0.5rem);
	bottom: calc(-1 * var(--ezam-steps-gap) + 0.5rem);
	left: calc(var(--ezam-step-dot) / 2 - 1px);
	width: 2px;
	background: var(--wp--preset--color--coral);
	opacity: 0.55;
	border-radius: 2px;
}

.ezam-step .wp-block-heading {
	margin-block-start: 0.55rem;
}

@media (min-width: 960px) {
	.ezam-steps {
		--ezam-steps-gap: var(--wp--preset--spacing--40);
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ezam-steps > .ezam-step {
		padding-inline-start: 0;
		padding-block-start: calc(var(--ezam-step-dot) + var(--wp--preset--spacing--30));
	}

	.ezam-step .wp-block-heading {
		margin-block-start: 0;
	}

	.ezam-step:not(:last-child)::after {
		top: calc(var(--ezam-step-dot) / 2 - 1px);
		bottom: auto;
		left: calc(var(--ezam-step-dot) + 0.75rem);
		right: calc(-1 * var(--ezam-steps-gap) + 0.75rem);
		width: auto;
		height: 2px;
	}
}

/* ---------- Editor ---------- */

/* Im Editor liegt keine klickbare Ebene über den Türen, damit alle Texte bearbeitbar bleiben. */
.editor-styles-wrapper .ezam-door__link a::before {
	content: none;
}

.editor-styles-wrapper .ezam-door:hover {
	translate: none;
	box-shadow: none;
}