/* ============================================================
   PRZ Product Teaser Card
   Bild (25% Breite, volle Karten-Höhe) + Titel/Link rechts, bleibt
   auf allen Breakpoints eine Zeile (flexWrap: nowrap lt. Source-JSON).
   Link nutzt den Block-Style is-style-mehr-link, aber komplett
   eigenständig gestylt (siehe unten) statt sich auf die globalen
   Styles zu verlassen — die stecken nur in build/main.css (fehlt auf
   page-clean.php) und werden auf page-v2.php zusätzlich von main.css'
   generischer Button-Fill-Regel überschrieben.
   ============================================================ */

.prz-product-teaser-card {
	border: var(--prz-border-width) solid var(--prz-color-border);
	background-color: var(--prz-color-bg);
	/* Mobile: Bild ist ein festes Quadrat, zentriert in der Zeile.
	   Ab Desktop wechselt das auf stretch (randlos), siehe Media Query. */
	align-items: center;
	gap: var(--prz-space-s);
}

.prz-product-teaser-card__image {
	margin: 0;
	/* Mobile: feste, bewusst etwas großzügigere Breite als Desktop (32%
	   statt 25%) — Höhe ergibt sich ganz normal aus aspect-ratio (kein
	   Stretch-Zusammenspiel, das ist die zuverlässige Variante). Dadurch
	   ist das Quadrat bei kurzem Titel + einzeiligem Link i. d. R. genauso
	   hoch wie der Content daneben, ohne sichtbaren Spalt. Bei sehr langen
	   Titeln (Umbruch auf 2+ Zeilen) kann trotzdem ein kleiner Spalt
	   entstehen — das lässt sich mit reinem CSS bei variabler Textlänge
	   nicht zu 100 % ausschließen.
	*/
	flex: 0 0 32%;
	aspect-ratio: 1;
}

.prz-product-teaser-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 992px) {
	.prz-product-teaser-card {
		/* Ab Desktop soll das Bild randlos die volle Kartenhöhe füllen
		   (kein Quadrat mehr) statt zentriert zu bleiben. */
		align-items: stretch;
	}

	.prz-product-teaser-card__image {
		position: relative;
		flex: 0 0 25%;
		aspect-ratio: auto;
	}

	/* absolute + inset statt height:100% — ein Kind mit Prozent-Höhe in
	   einer auto-hohen Flex-Zeile hat keine auflösbare Referenzhöhe, der
	   Browser fällt sonst auf die intrinsische Bildgröße zurück (macht die
	   ganze Karte riesig). Absolute Positionierung nimmt das Bild komplett
	   aus dem Sizing raus. Auf Mobile nicht nötig, da dort die Breite fix
	   ist und die Höhe ganz normal aus aspect-ratio folgt. */
	.prz-product-teaser-card__image img {
		position: absolute;
		inset: 0;
	}
}

.prz-product-teaser-card__content {
	flex: 1;
	justify-content: center;
	gap: var(--prz-space-2xs);
	padding: var(--prz-space-m) var(--prz-space-l) var(--prz-space-m) 0;
}

/* Gutenberg's is-layout-flow setzt margin-block auf Kinder — Content ist
   is-layout-flex und regelt Abstände über gap, zur Sicherheit trotzdem
   resetten. */
.prz-product-teaser-card__content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Component-scoped Override für den globalen .is-style-mehr-link Block-Style
   (Text + Pfeil), template-unabhängig funktionsfähig (siehe Kommentar oben). */
.prz-product-teaser-card .wp-block-button.is-style-mehr-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--prz-space-2xs);
	padding: 0;
	background: transparent;
	color: var(--prz-color-link);
	border: 0;
	box-shadow: none;
	text-decoration: none;
}

.prz-product-teaser-card .wp-block-button.is-style-mehr-link .wp-block-button__link::after {
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("https://praezi.com/wp-content/uploads/2025/10/arrow-right.png");
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform var(--prz-transition-fast);
}

.prz-product-teaser-card .wp-block-button.is-style-mehr-link .wp-block-button__link:hover {
	color: var(--prz-color-link-hover);
}

.prz-product-teaser-card .wp-block-button.is-style-mehr-link .wp-block-button__link:hover::after {
	transform: translateX(4px);
}