/**
 * Gemeinsame Abschnitte: Leitsatz (statement), Kontakt-Abschluss (cta-contact), Kostenträger (kostentraeger).
 *
 * Farben, Schriften und Abstände kommen aus den Block-Attributen (theme.json-Presets).
 * Hier steht nur, was Attribute nicht ausdrücken können.
 */

/* ---------- Leitsatz ---------- */

/*
 * Der Zweig sitzt unten rechts auf der Kante: ohne Beschnitt ragte er in den nächsten Abschnitt
 * (und auf dem Tablet über den rechten Rand). „clip“ statt „hidden“: kein Scroll-Container,
 * im Leitsatz gibt es keine fokussierbaren Elemente, deren Fokusrahmen abgeschnitten würde.
 */
.ezam-statement {
	overflow: clip;
}

/* Tablet: Zweig ein Stück aus dem Rand schieben, damit er die langen Zeilen des Leitsatzes nicht berührt. */
@media (min-width: 600px) and (max-width: 1179.98px) {
	.ezam-statement.ezam-leaf-accent::after {
		right: -2.25rem;
	}
}

.ezam-statement__text {
	text-wrap: balance;
	font-variant-numeric: lining-nums;
	/* Große Schrift: lieber ganze Wörter umbrechen als mitten im Wort trennen. */
	hyphens: manual;
	-webkit-hyphens: manual;
}

.ezam-statement__text mark {
	background: none;
}

/* Auf dem Handy läge der Zweig unter dem Text: dort weglassen, damit der Leitsatz ruhig lesbar bleibt. */
@media (max-width: 599.98px) {
	.ezam-statement.ezam-leaf-accent::after {
		content: none;
	}
}

/* ---------- Kontakt-Abschluss ---------- */

/* Auf dem Handy: Anrufen und WhatsApp als gleich breite, große Tippflächen untereinander. */
@media (max-width: 599.98px) {
	.ezam-cta__actions {
		align-self: stretch;
	}

	.ezam-cta__actions > .wp-block-ezam-contact {
		flex: 1 1 100%;
	}

	.ezam-cta__actions .wp-element-button {
		width: 100%;
	}
}

.ezam-cta__panel {
	border: 1px solid rgb(188 202 210 / 0.7);
	border-radius: var(--wp--custom--radius--lg);
}

/* Lange E-Mail-Adresse bricht auf schmalen Bildschirmen um, statt seitlich zu überlaufen. */
.ezam-cta .wp-block-ezam-contact,
.ezam-cta .wp-block-ezam-contact a,
.ezam-cta .wp-block-ezam-contact span {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

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

/* Außenabstände kommen vom Block-Abstand der Gruppe, deshalb hier nur Innenabstand und Aufzählungszeichen zurücksetzen.
   Doppelte Klasse schlägt „:root :where(.wp-block-list)“ aus theme.json auch im Editor. */
.wp-block-list.ezam-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding: 0;
	/* Unsichtbares Aufzählungszeichen statt „none“: so bleibt die Liste für VoiceOver eine Liste. */
	list-style-type: "\200B";
}

.ezam-pill-list > li {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	max-width: 100%;
	margin: 0;
	padding: 0.55rem 1.15rem 0.55rem 0.8rem;
	border: 1px solid var(--wp--preset--color--sage-light);
	border-radius: var(--wp--custom--radius--pill);
	background-color: rgb(252 252 251 / 0.75);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	line-height: 1.35;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* Sehr schmale Bildschirme (320px, Pille in einer Karte mit Innenabstand): etwas weniger Innenabstand und Schrift,
   damit „Berufsgenossenschaften“ ganz in eine Zeile passt statt mitten im Wort zu brechen. */
@media (max-width: 399.98px) {
	.ezam-pill-list > li {
		padding-inline: 0.6rem 0.8rem;
		font-size: 1rem;
	}
}

.ezam-pill-list > li::before {
	content: "";
	flex: none;
	width: 1.3em;
	height: 1.3em;
	background-color: var(--wp--preset--color--sage-dark);
	-webkit-mask: url("../../icons/regular/check-circle.svg") center / contain no-repeat;
	mask: url("../../icons/regular/check-circle.svg") center / contain no-repeat;
}

/* Symbol steht auf Höhe der ersten Textzeile (Layout „oben ausrichten“), auch wenn der Satz auf dem Handy umbricht. */
.ezam-kostentraeger__note > p {
	margin: 0;
	hyphens: manual;
	-webkit-hyphens: manual;
}

.ezam-kostentraeger__note .wp-block-icon {
	flex: none;
	margin-top: 0.05em;
	line-height: 0;
	color: var(--wp--preset--color--sage-dark);
}

/* Eingebettet in dunkle Abschnitte: Symbol hell, Pillen behalten ihre helle Fläche. */
:where(.is-style-section-blue, .is-style-section-sage-strong) .ezam-kostentraeger__note .wp-block-icon {
	color: var(--wp--preset--color--base);
}

@media print {
	.ezam-pill-list > li {
		border-color: currentColor;
		background: none;
	}
}