/* ============================================================
   PRZ CTA Image Banner
   Full-Bleed Grauband mit Bild + Text/Buttons in 2 Spalten (Desktop),
   gestapelt auf Mobile. Full-Bleed ist eigenständig gelöst (nicht über
   WPs .alignfull-Breakout), weil der nur in build/main.css bzw.
   style-editor.css steckt und auf page-clean.php fehlen würde.
   ============================================================ */

.prz-cta-image-banner {
	background-color: var(--prz-color-bg-alt);
	/* Mobile: kein Top-Padding — Bild sitzt direkt an der Oberkante des
	   Bands (siehe Figma-Mobile-Referenz), nur unten Luft nach den
	   Buttons (16px lt. Review). Ab Desktop wieder symmetrisch (siehe
	   Media Query unten). */
	padding-top: 0;
	padding-bottom: var(--prz-space-xs);
	/* Full-Bleed auf allen Breakpoints (Bild + Hintergrund gehen auch auf
	   Mobile über die volle Breite, lt. Figma-Mobile-Referenz). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@media (min-width: 992px) {
	.prz-cta-image-banner {
		padding-block: var(--prz-space-l);
	}
}

.prz-cta-image-banner__columns {
	display: flex;
	flex-direction: column;
	/* Mobile: 24px zwischen Bild und Headline (lt. Review-Nachgang,
	   vorher 32px). Desktop-Grid hat eigene Gaps, siehe Media Query. */
	gap: var(--prz-space-s);
}

@media (min-width: 992px) {
	.prz-cta-image-banner__columns {
		/* Grid statt Flex + feste %-Breiten aus dem Source-JSON (40%/50%,
		   Summe 90% wegen Gap) — 4fr/5fr gibt das gleiche ~4:5-Verhältnis
		   wieder, füllt aber sauber 100% der Breite inkl. Gap. */
		display: grid;
		grid-template-columns: 4fr 5fr;
		align-items: stretch;
		gap: var(--prz-space-l) var(--prz-space-m);
	}
}

.prz-cta-image-banner__image {
	margin: 0;
	/* Mobile: Bild bricht gezielt aus dem Innenabstand von .prz-container
	   aus und geht bündig mit dem (jetzt ebenfalls vollen) Hintergrund —
	   der Text daneben bleibt eingerückt. Ab Desktop sitzt es wieder ganz
	   normal in der Grid-Spalte (siehe Media Query unten). */
	margin-inline: calc(-1 * var(--prz-container-padding));
	width: calc(100% + 2 * var(--prz-container-padding));
}

@media (min-width: 992px) {
	.prz-cta-image-banner__image {
		margin-inline: 0;
		width: 100%;
	}
}

.prz-cta-image-banner__image img {
	display: block;
	width: 100%;
	/* Aspect-Ratio 1:1 gesperrt lt. Source-JSON (374/168), siehe
	   Workflow-Regel „Aspect-Ratios bleiben gelockt". */
	aspect-ratio: 374 / 168;
	object-fit: cover;
}

.prz-cta-image-banner__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Mobile: 24px zwischen Textblock und Buttons, Desktop großzügiger. */
	gap: var(--prz-space-s);
}

/* WPs Global Styles setzen :root :where(.is-layout-flow) > *
   { margin-block-start: 1rem } auf alle Kinder von Flow-Gruppen — das
   addiert sich unsichtbar zu unseren gaps. Abstände regeln hier
   ausschließlich die flex-gaps, deshalb Kinder-Margins resetten
   (gleiches Muster wie prz-product-teaser-card). */
.prz-cta-image-banner__columns > *,
.prz-cta-image-banner__content > *,
.prz-cta-image-banner__measure > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (min-width: 992px) {
	.prz-cta-image-banner__content {
		gap: var(--prz-space-m);
	}
}

.prz-cta-image-banner__measure {
	display: flex;
	flex-direction: column;
	/* 8px zwischen Titel und Beschreibungstext. */
	gap: var(--prz-space-2xs);
	/* Kein main-v2-Token deckt eine Text-Measure von 450px ab (nächster
	   Kandidat wäre .prz-container--narrow mit 800px — zu weit weg für
	   eine sinnvolle Snap). Als fixer Wert übernommen, siehe Bericht. */
	max-width: 450px;
}

/* Variante „Text breit": Text-Measure-Cap aufheben, damit die Zeilen die
   komplette Content-Spalte (~640px bei 1200er-Container) füllen statt bei
   450px umzubrechen. Nur der Cap ändert sich — Grid, Bild, Buttons bleiben
   identisch zur Standard-Variante. */
.prz-cta-image-banner--text-wide .prz-cta-image-banner__measure {
	max-width: none;
}

@media (min-width: 992px) {
	/* Bild soll die volle Höhe der Content-Spalte daneben annehmen, statt
	   auf dem gelockten 374:168-Verhältnis (= kurz) stehen zu bleiben.
	   „Bild füllt Box"-Muster: figure stretcht per Grid auf die Zeilenhöhe
	   (die der Content vorgibt), <img> absolut + object-fit: cover füllt sie
	   ohne Verzerrung. Nur in dieser Variante, nur ab Desktop — Mobile bleibt
	   gestapelt mit 374:168. */
	.prz-cta-image-banner--text-wide .prz-cta-image-banner__image {
		position: relative;
		align-self: stretch;
	}

	.prz-cta-image-banner--text-wide .prz-cta-image-banner__image img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/* Content oben am Bild ausrichten statt vertikal zentriert. */
	.prz-cta-image-banner--text-wide .prz-cta-image-banner__content {
		justify-content: flex-start;
	}
}

.prz-cta-image-banner__content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prz-space-xs);
	margin: 0;
}

@media (max-width: 991px) {
	.prz-cta-image-banner__content .wp-block-buttons {
		flex-direction: column;
	}

	/* Beide Ebenen brauchen die volle Breite: width:100% nur auf dem
	   inneren <a> läuft ins Leere, weil dessen Wrapper-Div
	   (.wp-block-button) sonst auto-breit bleibt — Buttons sollen so
	   breit sein wie der Textblock (lt. Review). */
	.prz-cta-image-banner__content .wp-block-buttons .wp-block-button,
	.prz-cta-image-banner__content .wp-block-buttons .wp-block-button__link {
		width: 100%;
		display: block;
	}
}

/* Buttons: main-v2's .prz-btn-Klassen lassen sich hier nicht direkt
   nutzen — Gutenberg setzt die className des Button-Blocks immer auf
   den äußeren .wp-block-button-Wrapper, .prz-btn ist aber für <a>
   gebaut. Deshalb (wie schon in prz-cta-banner.css so gelöst)
   eigenständiges, token-basiertes CSS direkt auf .wp-block-button__link,
   über die (bereits registrierten) Style-Klassen is-style-fill /
   is-style-outline-prz unterschieden. Komplett eigenständig statt auf
   deren globale Styles zu vertrauen, aus dem gleichen Grund wie oben
   (build/main.css fehlt auf page-clean.php). */
.prz-cta-image-banner .wp-block-button .wp-block-button__link {
	display: inline-block;
	padding: var(--prz-space-2xs) var(--prz-space-s);
	font-size: var(--prz-font-size-body);
	font-weight: var(--prz-font-weight-medium);
	text-align: center;
	text-decoration: none;
	border: var(--prz-border-width) solid transparent;
	border-radius: var(--prz-border-radius);
	transition: background-color var(--prz-transition-fast),
	            color var(--prz-transition-fast),
	            border-color var(--prz-transition-fast);
}

.prz-cta-image-banner .wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--prz-color-primary-500);
	color: var(--prz-color-white);
}

.prz-cta-image-banner .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--prz-color-primary-400);
}

.prz-cta-image-banner .wp-block-button.is-style-outline-prz .wp-block-button__link {
	background-color: transparent;
	color: var(--prz-color-primary-500);
	border-color: var(--prz-color-primary-500);
}

.prz-cta-image-banner .wp-block-button.is-style-outline-prz .wp-block-button__link:hover {
	background-color: var(--prz-color-primary-500);
	color: var(--prz-color-white);
}