/* ============================================================
   PRZ CTA Video Banner
   Full-Bleed graues Band, 2 Spalten: Video links, Content rechts
   (H2 + Body + Kontaktmodul + 2 Buttons). Gestapelt auf Mobile.
   Personen-Modul nutzt die Klassen der Kontaktkarte
   (.prz-kontaktkarte__person etc.) — Styling wird von
   prz-kontaktkarte.css geerbt, nicht dupliziert.
   ============================================================ */

.prz-cta-video-banner {
	background-color: var(--prz-color-bg-alt);
	padding-block: var(--prz-space-xl);
	/* Full-Bleed auf allen Breakpoints (alignfull allein bricht in
	   .prz-container nicht aus). */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.prz-cta-video-banner__inner {
	width: 100%;
	max-width: calc(var(--prz-container-max) + 2 * var(--prz-container-padding));
	margin-inline: auto;
	padding-inline: var(--prz-container-padding);
}

/* Spalten: Mobile gestapelt, ab Desktop 2 Spalten (Video | Content),
   vertikal zentriert. */
.prz-cta-video-banner__columns {
	display: flex;
	flex-direction: column;
	gap: var(--prz-space-l);
}

@media (min-width: 992px) {
	.prz-cta-video-banner__columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--prz-space-xl);
	}

	/* Video explizit vertikal zentrieren (verstärkt align-items: center,
	   falls ein Legacy-Stretch auf dem Video-Figure reinfunkt). */
	.prz-cta-video-banner__video {
		align-self: center;
	}
}

/* Video: füllt die Spalte, 16:9. */
.prz-cta-video-banner__video {
	margin: 0;
}

.prz-cta-video-banner__video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Mobile: Video bündig an Ober- und Seitenrändern der Box (volle Breite,
   bis oben an den Rand). Bricht aus dem Container-Padding aus und das
   obere Section-Padding entfällt. Der übrige Content bleibt eingerückt. */
@media (max-width: 991px) {
	.prz-cta-video-banner {
		padding-top: 0;
	}

	.prz-cta-video-banner__video {
		margin-inline: calc(-1 * var(--prz-container-padding));
		width: calc(100% + 2 * var(--prz-container-padding));
	}
}

/* Content-Spalte */
.prz-cta-video-banner__content {
	display: flex;
	flex-direction: column;
	gap: var(--prz-space-m);
}

.prz-cta-video-banner__content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Kopf: H2 + Body eng beieinander */
.prz-cta-video-banner__header {
	display: flex;
	flex-direction: column;
	gap: var(--prz-space-2xs);
}

.prz-cta-video-banner__header > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.prz-cta-video-banner__text {
	max-width: 640px;
}

/* Kontaktmodul (aus Kontaktkarte): den Default-Top-Abstand der
   Person-Box hier neutralisieren — Abstände regelt der Content-Gap. */
.prz-cta-video-banner__content .prz-kontaktkarte__person {
	margin-top: 0;
}

/* ============================================================
   Buttons: sekundär (Kontur) + primär (gefüllt), eigenständig
   token-basiert (template-unabhängig, wie in den anderen CTAs).
   ============================================================ */

.prz-cta-video-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prz-space-xs);
	margin: 0;
}

.prz-cta-video-banner .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--prz-space-2xs);
	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);
}

/* Das Inline-SVG (Mail) folgt der Textfarbe: blau (Kontur) → weiß (Hover). */
.prz-cta-video-banner .wp-block-button__link svg {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

/* build/main.css hängt an mailto:-Buttons ein fest-farbiges ::before-Icon.
   Wir nutzen das eigene Inline-SVG (currentColor), deshalb Legacy-Icon
   unterdrücken — sonst doppelt und in falscher Farbe. */
.prz-cta-video-banner .wp-block-button a[href*="mailto:"]::before {
	content: none;
}

.prz-cta-video-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-video-banner .wp-block-button.is-style-fill .wp-block-button__link:hover {
	background-color: var(--prz-color-primary-400);
}

.prz-cta-video-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-video-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);
}

/* Mobile: Buttons vollbreit untereinander */
@media (max-width: 991px) {
	.prz-cta-video-banner__buttons .wp-block-button,
	.prz-cta-video-banner__buttons .wp-block-button__link {
		width: 100%;
		display: block;
	}
}