/* ============================================================
   PRZ Link Card
   Bild (25% Breite, füllt die volle Kachelhöhe) + Titel/Link rechts,
   bleibt auf allen Breakpoints eine Zeile (flexWrap: nowrap lt. Source-JSON).
   Button nutzt den global registrierten Block-Style
   .is-style-mehr-link (Pfeil kommt aus build/main.css, page-v2.php) —
   auf page-clean.php ohne Legacy-CSS fehlt der Pfeil, siehe Bericht.
   ============================================================ */

.prz-link-card {
	border: var(--prz-border-width) solid var(--prz-color-border);
	background-color: var(--prz-color-bg);
	/* stretch: die Bild-Figure wächst auf die volle Kachelhöhe mit, wenn
	   der Text (z. B. umbrechender Titel) die Kachel höher macht. */
	align-items: stretch;
	gap: var(--prz-space-xs);
}

.prz-link-card__image {
	position: relative;
	margin: 0;
	flex: 0 0 25%;
}

/* Bild füllt die volle Figure-Höhe (= Kachelhöhe). absolute + inset
   vermeidet die Prozent-Höhe-Falle; kein festes aspect-ratio mehr,
   damit das Bild bei wachsendem Textinhalt mitwächst. */
.prz-link-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prz-link-card__content {
	flex: 1;
	justify-content: center;
	gap: 0;
	/* rechts nur 8px (vorher 32px), damit der Titel mehr Breite hat und
	   nicht so früh/ungünstig umbricht. */
	padding: var(--prz-space-m) var(--prz-space-2xs) var(--prz-space-m) 0;
}

/* Gutenberg's is-layout-flow setzt margin-block auf Kinder — Content ist
   is-layout-flex und nutzt gap (hier 0, lt. Source-JSON), zur Sicherheit
   trotzdem resetten. */
.prz-link-card__content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.prz-link-card__title {
	font-size: var(--prz-font-size-h3);
	line-height: var(--prz-line-height-tight);
}

/* Tertiär-Link (is-style-mehr-link) eigenständig, token-basiert — nicht
   auf den globalen Block-Style aus build/main.css verlassen (der greift
   je nach Template nicht und der Button fällt auf den gefüllten Default
   zurück). Pfeil als ::after via mask + currentColor (folgt der Linkfarbe). */
.prz-link-card .wp-block-buttons {
	margin: 0;
}

.prz-link-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-link-card .wp-block-button.is-style-mehr-link .wp-block-button__link::after {
	content: "";
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjQiIHkxPSIxMiIgeDI9IjIwIiB5Mj0iMTIiLz48cG9seWxpbmUgcG9pbnRzPSIxMyA1IDIwIDEyIDEzIDE5Ii8+PC9zdmc+");
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjQiIHkxPSIxMiIgeDI9IjIwIiB5Mj0iMTIiLz48cG9seWxpbmUgcG9pbnRzPSIxMyA1IDIwIDEyIDEzIDE5Ii8+PC9zdmc+");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--prz-transition-fast);
}

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

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