/**
 * Seite „Kinder & Jugendliche“ (patterns/page-kinder.php).
 *
 * Nur, was Block-Attribute nicht ausdrücken können: Icon-Raster der Einträge,
 * Trennlinien zwischen Angeboten, versetzte Pillen-Fotos, Bildgrößen je Breite.
 * Die Bildformen kommen aus den Block-Stilen, nicht von hier. Formfolge der Seite:
 * Bogen (Einstieg), Blatt (Einleitung), Kapsel + Kapsel (Angebote), Kreis (Feinmotorik),
 * Querformat mit Panel-Rundung (Ziel). Bildausschnitte (object-position) stehen beim jeweiligen Bild.
 */

/* ---------- Eintrag: Icon links, Überschrift daneben, Liste darunter ----------
 * Die Kopfzeile (Icon + H3) ist eine Flex-Gruppe. Ab 600px löst sie sich in das Raster
 * des Eintrags auf, damit die Liste bündig unter der Überschrift steht.
 * Darunter bleibt die Liste volle Breite: auf dem Handy mehr Platz für den Text.
 */
.ezam-kinder-item__head {
	flex-wrap: nowrap;
}

.ezam-kinder-item__head > .wp-block-icon {
	flex: none;
}

.ezam-kinder-item__head > .wp-block-heading {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.ezam-kinder-item > .wp-block-list {
	margin-block-end: 0;
}

@media (min-width: 600px) {
	/* Nur im Frontend: Im Editor bleibt die Kopfzeile eine eigene, gut anwählbare Gruppe. */
	.ezam-kinder-item:not(.block-editor-block-list__block) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--30);
		align-content: start;
	}

	.ezam-kinder-item:not(.block-editor-block-list__block) > .ezam-kinder-item__head {
		display: contents;
	}

	.ezam-kinder-item:not(.block-editor-block-list__block) > .ezam-kinder-item__head > .wp-block-icon {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.ezam-kinder-item:not(.block-editor-block-list__block) > .ezam-kinder-item__head > .wp-block-heading {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	/* Alles nach der Kopfzeile (Liste, ergänzte Absätze) steht bündig unter der Überschrift. */
	.ezam-kinder-item:not(.block-editor-block-list__block) > :not(.ezam-kinder-item__head) {
		grid-column: 2;
		margin-block: var(--wp--preset--spacing--10) 0;
	}
}

/* Große Überschriften: ausgeglichene Zeilen ohne Trennstrich mitten im Wort.
 * Die H3 neben dem Icon darf auf dem Handy trennen („Handgeschicklichkeit“ ist breiter als die Spalte). */
.ezam-kinder-offers__aside > .wp-block-heading {
	hyphens: manual;
	-webkit-hyphens: manual;
}

@media (min-width: 600px) {
	.ezam-kinder-item__head > .wp-block-heading {
		hyphens: manual;
		-webkit-hyphens: manual;
	}
}

/* Handy: etwas kleinere Icon-Scheiben, damit die Überschrift daneben Platz hat. */
@media (max-width: 599.98px) {
	.ezam-kinder-item__head > .wp-block-icon svg {
		width: 3.25rem !important;
	}
}

/* Kleine Handys (unter 400px): kleinere H3 und Icon-Scheiben. Die Überschrift neben dem Icon bekommt mehr Platz
 * und trennt lange Wörter seltener (ab 360px höchstens zwei Zeilen). */
@media (max-width: 399.98px) {
	.ezam-kinder-item__head > .wp-block-heading {
		font-size: var(--wp--preset--font-size--large);
	}

	.ezam-kinder-item__head > .wp-block-icon svg {
		width: 2.75rem !important;
	}
}

/* Sehr schmale Handys (unter 360px, z. B. 320px): „Handgeschicklichkeit“ passt nur ungetrennt neben das Icon,
 * wenn die Karte innen gleichmäßig schmaler polstert, Icon und Abstand etwas kleiner werden und die H3
 * auf 18px geht. So bleibt jede Überschrift bei höchstens zwei Zeilen, ohne Trennung mitten im Wort. */
@media (max-width: 359.98px) {
	.ezam-kinder-need {
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.ezam-kinder-item .ezam-kinder-item__head {
		gap: var(--wp--preset--spacing--20);
	}

	.ezam-kinder-item__head > .wp-block-heading {
		font-size: 1.125rem;
	}

	.ezam-kinder-item__head > .wp-block-icon svg {
		width: 2.5rem !important;
	}
}

/* Tablet (782 bis 1023px): Textlastige Spaltenpaare untereinander statt zweier schmaler Spalten. */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.wp-block-columns.ezam-kinder-stack-tablet {
		flex-wrap: wrap !important;
	}

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

/* ---------- Einstieg: Bogenfoto mit grüner Fläche ---------- */

.ezam-kinder-hero__actions > * {
	margin-block: 0;
}

.ezam-kinder-hero__actions > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ezam-kinder-hero__media {
	max-width: 32rem;
	margin-inline: auto;
}

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

/* Die Fläche tritt unten rechts als ruhige Form hervor, nicht nur als schmaler Rand. */
.ezam-kinder-hero__media.ezam-blob::before {
	inset: 12% -7% -6% 16%;
}

@media (max-width: 781.98px) {
	.ezam-kinder-hero__media {
		max-width: 20rem;
	}

	.ezam-kinder-hero__media.ezam-blob::before {
		inset: 10% -6% -5% 12%;
	}
}

/*
 * Tablet (782 bis 1079px): Badge und H1 über die ganze Breite (nebeneinander liefe die H1 über
 * fünf Zeilen), darunter Einleitung und Kontakt links, das Bogenfoto rechts daneben. Der Textblock
 * hängt oben an der H1, das Foto trägt als Gegengewicht nach unten. Nur im Frontend.
 */
@media (min-width: 782px) and (max-width: 1079.98px) {
	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(15rem, 36%, 19rem);
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: var(--wp--preset--spacing--60);
		row-gap: 0;
	}

	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) > .wp-block-column:first-child,
	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) .ezam-hero-intro {
		display: contents;
	}

	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) .ezam-hero-intro > :nth-child(-n + 2) {
		grid-column: 1 / -1;
	}

	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) .ezam-hero-intro > .wp-block-heading {
		margin-block-end: var(--wp--preset--spacing--40);
	}

	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) .ezam-hero-intro > :nth-child(3) {
		grid-column: 1;
		grid-row: 3;
		margin-block-start: 0;
	}

	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) .ezam-hero-intro > :nth-child(4) {
		grid-column: 1;
		grid-row: 4;
	}

	.ezam-kinder-hero .wp-block-columns:not(.block-editor-block-list__block) > .wp-block-column:last-child {
		grid-column: 2;
		grid-row: 3 / 6;
		align-self: start;
	}

	.ezam-kinder-hero__media {
		max-width: none;
		margin: 0;
	}
}

/* ---------- Einleitung: Foto in Blattform innerhalb der Fläche ----------
 * Das Blatt schneidet oben links nur die Schulter im Anschnitt und unten rechts die Hand:
 * Gesicht und Puzzle bleiben frei. Untereinander steht das Foto bündig links über dem Text. */

.ezam-kinder-intro__image {
	margin: 0;
}

.ezam-kinder-intro__image img {
	width: 100%;
	height: auto;
}

@media (max-width: 1023.98px) {
	.ezam-kinder-intro__image {
		max-width: 22rem;
	}
}

/* ---------- Anlässe: 2 × 2, im Wechsel gefüllt und offen ---------- */

.ezam-kinder-need {
	height: 100%;
}

/* ---------- Angebote: Liste mit feinen Trennlinien ---------- */

.ezam-kinder-offer-list > .ezam-kinder-offer {
	margin-block: 0;
}

.ezam-kinder-offer-list > .ezam-kinder-offer + .ezam-kinder-offer {
	border-top: 1px solid var(--wp--preset--color--sage-light);
}

.ezam-kinder-offer-list > .ezam-kinder-offer:first-child {
	padding-top: 0 !important;
}

.ezam-kinder-offer-list > .ezam-kinder-offer:last-child {
	padding-bottom: 0 !important;
}

/* Zwei Kapsel-Fotos, versetzt wie im Flyer, auf einer gemeinsamen grünen Fläche.
 * Beide Fotos haben das Format der Originale (3/2): Die Kapsel schneidet nur Hintergrund,
 * Kopf und Hände des schreibenden Jungen bleiben im linken Halbkreis vollständig. */
.ezam-kinder-photos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.ezam-kinder-photos > .wp-block-image {
	width: 82%;
	margin: 0;
}

.ezam-kinder-photos > .ezam-kinder-photos__second {
	align-self: flex-end;
}

.ezam-kinder-photos img {
	width: 100%;
	height: auto;
}

/* Die Fläche füllt die beiden freien Ecken des versetzten Paars (oben rechts, unten links). */
.ezam-kinder-photos.ezam-blob::before {
	inset: 16% 2% 14% 4%;
	border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%;
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	.ezam-kinder-photos {
		flex-direction: row;
		gap: var(--wp--preset--spacing--30);
	}

	.ezam-kinder-photos > .wp-block-image {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	/* Nebeneinander: die Fläche liegt als flaches Oval unter der Mitte des Paars. */
	.ezam-kinder-photos > .ezam-kinder-photos__second {
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.ezam-kinder-photos.ezam-blob::before {
		inset: 22% 18% -8% 14%;
	}
}

/*
 * Feinmotorik und Grafomotorik: Rundbild (Schere, Stoff, zwei Hände) rechts neben Überschrift und Liste,
 * auf allen Breiten als Medienobjekt. Der Bildausschnitt liegt auf Schere und Händen (62 %).
 * Ab 600px bekommt das Rundbild gut ein Drittel des Eintrags (höchstens 12rem Spur): Auch bei 1024px,
 * wo die Angebotsspalte am schmalsten ist, bleibt es etwa so hoch wie die Liste daneben.
 * Nur im Frontend; im Editor steht das Foto unter der Liste.
 */
.ezam-kinder-offer__image {
	margin-block: var(--wp--preset--spacing--30) 0;
	max-width: 11rem;
}

.ezam-kinder-offer__image img {
	width: 100%;
	height: auto;
	object-position: 62% 50%;
}

.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) > .wp-block-image {
	max-width: none;
	margin: 0;
	align-self: center;
}

@media (max-width: 599.98px) {
	.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 30vw, 8rem);
		column-gap: var(--wp--preset--spacing--30);
	}

	.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) > .ezam-kinder-item__head {
		grid-column: 1 / -1;
	}

	.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) > .wp-block-list {
		grid-column: 1;
		grid-row: 2;
		align-self: center;
	}

	.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) > .wp-block-image {
		grid-column: 2;
		grid-row: 2;
		margin-block-start: var(--wp--preset--spacing--20);
	}
}

@media (min-width: 600px) {
	.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) {
		grid-template-columns: auto minmax(0, 1fr) clamp(9rem, 34%, 12rem);
	}

	.ezam-kinder-item.ezam-kinder-offer--media:not(.block-editor-block-list__block) > .wp-block-image {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin-inline-start: var(--wp--preset--spacing--30);
	}
}

/* ---------- Zusammenarbeit ----------
 * Überschrift und Einleitung stehen untereinander, links bündig, wie auf der Startseite (kein geteilter Kopf). */

.ezam-kinder-team__head > p {
	max-width: 60ch;
}

.ezam-kinder-team__side > .ezam-kinder-team__item {
	margin-block: 0;
}

@media (min-width: 782px) {
	.ezam-kinder-team__side {
		padding-block-start: var(--wp--preset--spacing--40);
	}
}

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

.ezam-kinder-why__credential > .wp-block-icon {
	flex: none;
}

.ezam-kinder-why__credential > p {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.ezam-kinder-why__list > .wp-block-heading {
	margin-block-start: 0;
}

@media (max-width: 1023.98px) {
	.ezam-kinder-why__list {
		border-left: 0 !important;
		border-top: 1px solid var(--wp--preset--color--sage-light);
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---------- Ziel: Querformat mit Panel-Rundung unter dem Text ----------
 * Etwas breiter als der Text (46rem), damit das Foto den Abschnitt trägt. Kein „aligncenter“:
 * Core macht die Figur dann zur Tabelle, und das Bild mit 100 % Breite fiele auf 0px zusammen. */

.ezam-kinder-goal > p {
	text-wrap: balance;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Auf dem Handy würde die Pflanzenzeichnung das Foto überdecken. Bis 1023px reicht das Foto
 * fast bis an den Rand: Die Zeichnung wandert nach oben rechts, statt hinter dem Foto hervorzulugen. */
@media (max-width: 599.98px) {
	.ezam-kinder-goal.ezam-leaf-accent::after {
		content: none;
	}
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	.ezam-kinder-goal.ezam-leaf-accent::after {
		top: calc(var(--ezam-wave-h) + var(--wp--preset--spacing--20));
		bottom: auto;
	}
}

.ezam-kinder-goal .ezam-kinder-goal__image {
	max-width: min(100%, 46rem);
	margin-bottom: 0;
}

.ezam-kinder-goal__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* ---------- Kostenträger als Infokasten ---------- */

.ezam-kinder-costs > .wp-block-icon {
	flex: none;
}

/* Auf dem Handy brauchen die Kostenträger-Pillen die volle Breite, das Symbol ist nur Schmuck. */
@media (max-width: 599.98px) {
	.ezam-kinder-costs > .wp-block-icon {
		display: none;
	}
}

.ezam-kinder-costs > .ezam-kostentraeger {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

@media (min-width: 600px) {
	.ezam-kinder-costs > .ezam-kostentraeger > .wp-block-heading {
		min-height: 4rem;
		display: flex;
		align-items: center;
		margin: 0;
	}
}