/* ============================================================
   PRZ CTA Text Card
   Reine Text-Box: H3 + Body + Button. Padding 16px Mobile / 32px
   Desktop, 1px Border. Button auf Mobile vollbreit, ab Desktop
   auto-breit linksbündig.
   ============================================================ */

.prz-cta-text-card {
	background-color: var(--prz-color-bg-alt);
	border: var(--prz-border-width) solid var(--prz-color-border);
	padding: var(--prz-space-xs); /* Mobile: 16px */
	/* Abstand Textblock -> Button */
	gap: var(--prz-space-m);
	align-items: flex-start;
}

/* Desktop: 32px Padding (--prz-space-m löst ab 992px auf 32px auf). */
@media (min-width: 992px) {
	.prz-cta-text-card {
		padding: var(--prz-space-m);
	}
}

.prz-cta-text-card__text {
	/* Abstand Überschrift -> Beschreibung */
	gap: var(--prz-space-2xs);
}

/* Desktop: Body-Text auf eine angenehme Lesebreite begrenzen (nur der
   Absatz, die Überschrift darf weiter laufen). 700px = Wert der alten
   cta-banner (contentSize) — kein Token deckt eine Text-Measure ab,
   deshalb fixer Wert, siehe Bericht. Auf Mobile keine Begrenzung. */
@media (min-width: 992px) {
	.prz-cta-text-card__text p {
		max-width: 700px;
	}
}

/* h3 + p haben über main-v2 bereits margin:0 — defensiver Reset, falls
   WPs Flow-Margins durchschlagen (gleiches Muster wie andere Comps). */
.prz-cta-text-card__text > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.prz-cta-text-card .wp-block-buttons {
	margin: 0;
}

/* Button: eigenständig token-basiert (is-style-fill nur als Hook), damit
   template-unabhängig — die globalen Styles stecken nur in build/main.css
   und werden dort zusätzlich von der generischen Button-Fill-Regel
   überschrieben. */
.prz-cta-text-card .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);
}

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

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

/* Mobile: Button füllt die volle Kartenbreite (beide Ebenen brauchen die
   Breite, sonst bleibt der Wrapper auto-breit). */
@media (max-width: 991px) {
	.prz-cta-text-card {
		align-items: stretch;
	}

	.prz-cta-text-card .wp-block-buttons .wp-block-button,
	.prz-cta-text-card .wp-block-buttons .wp-block-button__link {
		width: 100%;
		display: block;
	}
}