/**
 * Seite „Erwachsene & Senioren“ (Pattern page-erwachsene).
 *
 * Farben, Schriften und Abstände kommen aus den Block-Attributen (theme.json-Presets).
 * Hier steht nur, was Attribute nicht ausdrücken können: Umbrüche für Tablets,
 * Raster mit festen Spaltenzahlen, Trennlinien, zweispaltige Listen und die mitlaufende Randspalte.
 */

/* ---------- Tablet: breite Zweier-Aufteilungen erst ab 1024px nebeneinander ---------- */

@media (min-width: 782px) and (max-width: 1023.98px) {
	.wp-block-columns.ezam-erw-stack-md {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.ezam-erw-stack-md > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Drei Gründe nebeneinander brauchen mindestens 1280px, sonst brechen die Überschriften mehrfach um. */
@media (min-width: 782px) and (max-width: 1279.98px) {
	.wp-block-columns.ezam-erw-stack-lg {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.ezam-erw-stack-lg > .wp-block-column {
		flex-basis: 100% !important;
	}
}

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

.ezam-erw-hero__title {
	/* Zwei kurze Sätze, jeder auf eigener Zeile: lieber ganze Wörter umbrechen als trennen. */
	hyphens: manual;
	-webkit-hyphens: manual;
}

@media (min-width: 1024px) {
	/* Neben dem Bild wächst die Schrift mit der Spalte, damit „Mehr Selbstständigkeit.“ auf einer Zeile bleibt. */
	.ezam-erw-hero__title {
		font-size: clamp(2.25rem, 3.9vw, 3.3rem);
	}
}

/*
 * Tablet (782 bis 1023px): Text und Bild bleiben nebeneinander, damit Anruf-Button und Bild
 * gemeinsam ohne Scrollen sichtbar sind. Engerer Abstand, Textspalte etwas breiter und eine
 * Überschriftengröße, bei der „Mehr Selbstständigkeit.“ in die Spalte passt.
 */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.wp-block-columns.ezam-erw-hero__cols {
		column-gap: var(--wp--preset--spacing--50);
	}

	.wp-block-columns.ezam-erw-hero__cols > .wp-block-column:first-child {
		flex-basis: 58% !important;
	}

	.wp-block-columns.ezam-erw-hero__cols > .wp-block-column:last-child {
		flex-basis: 42% !important;
	}

	.ezam-erw-hero__title {
		font-size: clamp(2.125rem, 4.4vw, 2.5rem);
	}
}

.ezam-erw-hero__facts {
	padding-top: var(--wp--preset--spacing--10);
}

.ezam-erw-fact {
	align-items: center;
}

.ezam-erw-fact > p {
	margin: 0;
	font-weight: 500;
}

.ezam-erw-fact .wp-block-icon,
.ezam-erw-offer .wp-block-icon,
.ezam-erw-area .wp-block-icon,
.ezam-erw-reason .wp-block-icon {
	flex: none;
}

/*
 * Bogenbild: Das Foto hat genau das Format 4/5, es wird also nichts beschnitten.
 * Der Kopf sitzt oben links der Mitte im Bogen, das Gesicht bleibt bei jeder Breite frei.
 */
.ezam-erw-hero__media {
	max-width: 32rem;
	margin-inline: auto;
}

.ezam-erw-hero__media img {
	width: 100%;
	height: auto;
}

/* Koralle hauchzart verschwindet auf dem hellen Grund: hier kräftiger und nach rechts unten versetzt,
   damit die Fläche als Form hinter dem Bogen steht und nicht als dünner Rand. */
.ezam-erw-hero__media.ezam-blob--coral::before {
	background: var(--wp--preset--color--coral-light);
	opacity: 0.5;
	inset: 20% -9% -8% 22%;
}

/* Handy: Bild bündig mit der linken Textkante, die Fläche hat rechts Luft. */
@media (max-width: 781.98px) {
	.ezam-erw-hero__media {
		max-width: 20rem;
		margin-inline: 0 auto;
	}

	/* Die Fläche ragt nur so weit hinaus, wie der Seitenrand erlaubt. */
	.ezam-erw-hero__media.ezam-blob--coral::before {
		inset: 14% -4% -4% 16%;
	}
}

/* Große Handys und kleine Tablets: Das Bild steht wie auf dem Desktop rechts, der Blick läuft diagonal vom Text zum Bild. */
@media (min-width: 600px) and (max-width: 781.98px) {
	.ezam-erw-hero__media {
		max-width: 22rem;
		margin-inline: auto 0;
	}
}

/* ---------- Gemeinsame Ziele ---------- */

/* Vier Ziele als ruhige Typo-Zeile zwischen zwei feinen Linien, ohne Symbole: 1, 2 oder 4 Spalten, nie 3 + 1. */
.ezam-erw-goals {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-block: 1px solid var(--wp--preset--color--sage-light);
}

.ezam-erw-goals > .ezam-erw-goal {
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	line-height: 1.2;
	hyphens: manual;
	-webkit-hyphens: manual;
	font-variant-numeric: lining-nums;
}

.ezam-erw-goals > .ezam-erw-goal + .ezam-erw-goal {
	border-top: 1px solid var(--wp--preset--color--sage-light);
}

@media (min-width: 600px) {
	.ezam-erw-goals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--50);
	}

	.ezam-erw-goals > .ezam-erw-goal:nth-child(2) {
		border-top: 0;
	}
}

/* Erst ab 1200px ist jede Spalte breit genug für „Selbstständigkeit“ ohne Trennung. */
@media (min-width: 1200px) {
	.ezam-erw-goals {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 0;
	}

	.ezam-erw-goals > .ezam-erw-goal {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.ezam-erw-goals > .ezam-erw-goal:first-child {
		padding-left: 0;
	}

	.ezam-erw-goals > .ezam-erw-goal + .ezam-erw-goal {
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--sage-light);
	}
}

/* Zweispaltige Listen (Ziele, Krankheitsbilder) ab 600px. */
.ezam-erw-cols2 > li {
	break-inside: avoid;
	/* Nur lange Wörter trennen: kurze Einträge bleiben für ältere Leserinnen und Leser ganz. */
	hyphenate-limit-chars: 14 6 6;
}

@media (min-width: 600px) {
	.ezam-erw-cols2 {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* ---------- Wann kann Ergotherapie helfen? ---------- */

.ezam-erw-areas > .ezam-erw-area {
	margin: 0;
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--sage-light);
}

.ezam-erw-areas > .ezam-erw-area:first-child {
	padding-top: 0;
	border-top: 0;
}

.ezam-erw-areas > .ezam-erw-area:last-child {
	padding-bottom: 0;
}

.ezam-erw-area > .is-layout-flex,
.ezam-erw-reason > .is-layout-flex {
	align-items: center;
}

.ezam-erw-area h3,
.ezam-erw-reason h3 {
	margin: 0;
}

/* Randspalte läuft auf großen Bildschirmen mit, solange sie ins Fenster passt. */
@media (min-width: 1024px) and (min-height: 760px) {
	.ezam-erw-aside {
		position: sticky;
		top: calc(var(--ezam-header-offset) + var(--wp--preset--spacing--40));
	}
}

/*
 * Handtherapie-Bild in Blattform: Das Foto hat genau 4/3, die Hände liegen rechts der Mitte,
 * die großen Blattecken (oben links, unten rechts) schneiden nur Tuch und Unterarm.
 * Zwischen 640 und 1023px stehen die Bereiche untereinander: Überschrift und Einleitung
 * links, das Bild rechts daneben, statt eines halbbreiten Bildes mit leerer Fläche daneben.
 */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.ezam-erw-aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: var(--wp--preset--spacing--50);
	}

	.ezam-erw-aside > .wp-block-heading {
		grid-column: 1;
		align-self: end;
	}

	.ezam-erw-aside > p {
		grid-column: 1;
		align-self: start;
	}

	.ezam-erw-aside > .ezam-erw-areas__image {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		margin: 0 !important;
	}
}

/* ---------- Therapieangebote ---------- */

/* Kopfzeile: Text links, Rundbild rechts. Auf Handys steht das Bild zwischen Einleitung und Angeboten. */
.ezam-erw-offers-head > .wp-block-column:first-child > * {
	max-width: 40rem;
}

/*
 * Rundbild: Das Foto ist quadratisch, der Kreis zeigt es ohne Beschnitt.
 * Rechtsbündig an der Inhaltskante wie das Bogenbild im Einstieg; auf Handys bündig mit dem Text.
 */
.ezam-erw-offers__image {
	max-width: 19rem;
	margin: 0 0 0 auto;
}

.ezam-erw-offers__image img {
	width: 100%;
	height: auto;
}

@media (max-width: 599.98px) {
	.ezam-erw-offers__image {
		max-width: 14rem;
		margin-inline: 0 auto;
	}
}

@media (min-width: 600px) and (max-width: 781.98px) {
	.ezam-erw-offers__image {
		max-width: 16rem;
	}
}

/* Zwei beschriftete Gruppen statt Symbolraster: je eine ruhige Liste mit feinen Trennlinien. */
.ezam-erw-cluster > h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.ezam-erw-cluster > .ezam-erw-offer {
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--coral-light);
}

.ezam-erw-cluster > .ezam-erw-offer:last-child {
	padding-bottom: 0;
}

.ezam-erw-offer {
	align-items: center;
}

.ezam-erw-offer > p {
	margin: 0;
	line-height: 1.3;
	/* Nur sehr lange Komposita („Koordinationstraining“) dürfen in schmalen Spalten getrennt werden. */
	hyphenate-limit-chars: 14 6 6;
}

/* ---------- Hausbesuche ---------- */

.ezam-erw-homevisit {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

/*
 * Bogen als Tür: Der Blick fällt durch den Bogen in die Wohnküche.
 * Das quadratische Foto wird auf 4/5 beschnitten, der Ausschnitt (60 % waagerecht) hält
 * Therapeutin, Tisch und Patient zusammen; oben im Bogen liegen nur Regal und Wand.
 */
.ezam-erw-homevisit__image {
	max-width: 23rem;
	margin: 0 auto;
}

.ezam-erw-homevisit__image img {
	width: 100%;
	height: auto;
}

/* Tablet: nebeneinander bleiben, aber mit engerem Abstand, damit die Überschrift Platz hat. */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.ezam-erw-homevisit > .wp-block-columns {
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* Handy: Bild über dem Text, bündig mit dessen linker Kante. */
@media (max-width: 781.98px) {
	.ezam-erw-homevisit__image {
		max-width: 15rem;
		margin-inline: 0 auto;
	}
}

/*
 * Schmale Handys: Die blaue Fläche liegt schon im Seitenrand, 2,5rem Innenabstand links und rechts
 * ließen dem Text nur gut 200px. Mit dem kleineren Abstand passen Telefonnummer und
 * „WhatsApp schreiben“ auch bei 320px und vergrößertem Zeichenabstand (WCAG 1.4.12) in ihre Buttons.
 * Oben und unten bleibt der große Abstand, damit der Inhalt frei von den runden Ecken steht.
 * Die Innenabstände stehen als Inline-Style am Block, daher !important.
 */
@media (max-width: 599.98px) {
	.ezam-erw-homevisit.ezam-erw-homevisit {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

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

.ezam-erw-reason--panel {
	border-radius: var(--wp--custom--radius--lg);
}

@media (min-width: 1280px) {
	/* Die freien Spalten stehen auf Höhe des Panel-Inhalts. */
	.ezam-erw-reasons > .ezam-erw-reason:not(.ezam-erw-reason--panel) {
		padding-top: var(--wp--preset--spacing--50);
	}
}

.ezam-erw-promise > p {
	max-width: 30ch;
	margin-inline: auto;
	line-height: 1.3;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* ---------- Kostenträger ---------- */

.ezam-erw-costs {
	border: 1px solid var(--wp--preset--color--sage-light);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--sage-wash);
}

/* ---------- Pflanzenzeichnungen ---------- */

/* Auf Handys läge der Zweig hinter Listen und Leitsatz: dort weglassen. */
@media (max-width: 781.98px) {
	.ezam-erw-accent::after {
		content: none;
	}
}

/*
 * Tablets: In „Gemeinsame Ziele“ steht die Häkchenliste unter der Überschrift statt rechts daneben,
 * der linke Zweig läge dann über Häkchen und Text. Erst ab 1024px hat er wieder freien Rand.
 * Die Ranke in „Warum wir“ bleibt, sie steht neben dem Leitsatz frei.
 */
@media (max-width: 1023.98px) {
	.ezam-erw-accent.ezam-leaf-accent--left::after {
		content: none;
	}
}