/**
 * card-catalog.css — die Katalogkarte: /bildungsangebote/ UND die Merkliste.
 *
 * Figma-Katalograster (Pakete H/K): Featured mit Bild gross über zwei Reihen,
 * sonst Textkarte; EIN Rand je geteilter Kante. Bis Paket L stand das in
 * src/catalog-more/style.css und lud nur mit dem Katalog-Block — die
 * Merkliste (ndb-core auth/profile.php, `.ndb-fav-grid.card-grid--catalog`)
 * hätte dieselbe Karte ungestaltet gezeigt. Jetzt EIN Regelsatz, neutral
 * selektiert (`.card--catalog`, `.card-grid--catalog`).
 *
 * Bedingt geladen, nicht im Kernbündel neben card.css: dort sprengte er die
 * Grundlast (check:perf, gemessen 57,6 von 54 kB). Wer lädt:
 * nebi_enqueue_card_catalog_style() in inc/enqueue.php — Seiten mit dem
 * Katalog-Block, die Profilseite, die Suche (Programmkarten mit Herz) und der
 * Editor.
 */

/*
 * Rahmen: JEDE Zelle zeichnet ihren ganzen Rand und überlappt die Nachbarn
 * links und oben um 1px — eine Linie je geteilter Kante, und eine leere Zelle
 * bleibt leer. Bis 07.10.2026 zeichnete das Raster selbst Linie oben und links,
 * die Karten nur rechts und unten: stand eine Featured-Karte über zwei Reihen
 * und fehlten Karten (Merkliste mit drei, gefilterter Katalog), lief die linke
 * Linie des Rasters an leeren Zellen entlang, und unten fehlte der Abschluss.
 * Das 1px-Polster oben und links nimmt den Überstand der ersten Reihe und Spalte.
 *
 * Die Linie ist ein Pseudo-Element ÜBER der Zelle, kein Rand der Zelle (08.10.2026):
 * Karte (`position: relative`, card.css) und Partner-Kachel (`container-type`)
 * malt der Browser nach allen normalen Rändern. Bei Zoomstufen mit Nachkommastellen
 * (90 %, 110 %, 175 % — gemessen in Chromium, Firefox und WebKit) rundete ihre
 * Fläche einen Gerätepixel anders als die Linie und deckte sie ab. Darüber gelegt,
 * kann keine Fläche sie verdecken; `pointer-events: none` lässt Klicks durch.
 */
body .nebi-programme-catalog__query .wp-block-post-template,
body .card-grid--catalog {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(322px, auto);
	gap: 0;
	/* Nur block: die Lage in der Zeile gehört dem Umfeld (Katalog mobil 16px,
	   catalog-more/style.css). Diese Datei lädt danach; `margin: 0` stach den
	   Rand seit Paket L aus — das Raster stand links (12.10.2026). */
	margin-block: 0;
	padding-block: 1px 0;
	padding-inline: 1px 0;
	list-style: none;
}

body .nebi-programme-catalog__query .wp-block-post-template > li,
body .card-grid--catalog > li {
	position: relative;
	min-inline-size: 0;
	margin-block: -1px 0;
	margin-inline: -1px 0;
}

body .nebi-programme-catalog__query .wp-block-post-template > li::after,
body .card-grid--catalog > li::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border: 1px solid var(--border-strong);
	pointer-events: none;
}

body .nebi-programme-catalog__query .wp-block-post-template > li:has(.card--catalog-featured),
body .card-grid--catalog > li:has(.card--catalog-featured) {
	grid-row: span 2;
}

/* `.card.card--catalog`, nicht `.card--catalog`: diese Datei lädt VOR dem
   Kernbündel, und `.card` (card.css) hätte bei gleicher Spezifität Fläche und
   Rand zurückgesetzt — gemessen nach dem Umzug: weisse Karte, grauer Rand. */
/* Andere Inhalte in einem Katalograster (Suche: Anbieter, Seiten) tragen dieselbe Kachel
   und dieselben Textstile wie die Katalogkarte — Figma kennt nur diese (08.10.2026). */
.card.card--catalog,
.card-grid--catalog > li > .card:not(.card--catalog) {
	min-block-size: 100%;
	padding: 24px 24px 32px;
	border: 0;
	border-radius: 0;
	background: var(--surface-base);
	box-shadow: none;
	transform: none;
}

.card.card--catalog,
.card-grid--catalog > li > .card:not(.card--catalog) {
	transition: background-color var(--motion-base) var(--motion-ease);
}

/* Hover über die ganze Karte: Parchment und Tomato-Rahmen aus Figma (Content Card, Variante 2;
   gefunden 13.10.2026); mit Tastatur gleich. Als Kontur nach innen, weil die Karten Kanten teilen —
   ein Rand würde dort doppelt zeichnen; z-index hebt die Kontur über die Nachbarlinien. */
.card.card--catalog:hover,
.card.card--catalog:has(a:hover),
.card.card--catalog:has(a:focus-visible),
.card-grid--catalog > li > .card:not(.card--catalog):hover,
.card-grid--catalog > li > .card:not(.card--catalog):has(a:hover),
.card-grid--catalog > li > .card:not(.card--catalog):has(a:focus-visible) {
	position: relative;
	z-index: 1;
	border: 0;
	outline: 1px solid var(--fill-accent);
	outline-offset: -1px;
	background: var(--card-hover-fill);
	box-shadow: none;
	transform: none;
}

.card--catalog .card__media {
	position: relative;
	flex: none;
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.card--catalog .card__media img {
	object-position: center;
}

.card.card--catalog-featured {
	gap: 24px;
}

.card--catalog .card__body,
.card-grid--catalog > li > .card:not(.card--catalog) .card__body {
	min-block-size: 0;
	padding: 0;
	gap: 16px;
	overflow: hidden;
}

/* Ein Wort länger als die Karte („Bundesarbeitsgemeinschaft“, 23 px Mono = 345 px) lief über und
   wurde vom overflow: hidden der Karte abgeschnitten (700 px, zwei Spalten; 320 px; 12.10.2026). */
.card { overflow-wrap: anywhere; hyphens: auto; }

.card--catalog .card__meta,
.card-grid--catalog > li > .card:not(.card--catalog) .card__meta {
	margin: 0;
	color: var(--catalog-accent, var(--text-brand));
	font-family: var(--wp--preset--font-family--mono);
	font-size: 23px;
	font-weight: 600;
	line-height: 32px;
	text-transform: uppercase;
}

.card--catalog .card__meta a,
.card-grid--catalog > li > .card:not(.card--catalog) .card__meta a {
	color: inherit;
	text-decoration: none;
}

.card--catalog .card__meta a:hover,
.card-grid--catalog > li > .card:not(.card--catalog) .card__meta a:hover {
	text-decoration: underline;
}

.card--catalog .card__meta a:focus-visible,
.card-grid--catalog > li > .card:not(.card--catalog) .card__meta a:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

.card--catalog .card__title,
.card-grid--catalog > li > .card:not(.card--catalog) .card__title {
	font-size: 28px;
	font-weight: 400;
	line-height: 34px;
}

.card--catalog .card__excerpt,
.card-grid--catalog > li > .card:not(.card--catalog) .card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--nebi-excerpt-lines, 4);
	color: var(--text-primary);
	font-size: 18px;
	line-height: 24px;
}

.card--catalog .card__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-block-start: auto;
	color: var(--catalog-accent, var(--text-brand));
	font-family: var(--wp--preset--font-family--mono);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none; /* Nutzerentscheidung 01.10.2026: Unterstrich erst bei Hover (Figma-Textknopf zeigt ihn dauerhaft). */
	white-space: nowrap;
}

.card--catalog .card__more:hover {
	text-decoration: underline;
}

.card--catalog .card__more:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

.card--catalog .card__more-arrow {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
}

/*
 * Merken-Knopf (ndb-core ndb_favorites_button()) auf JEDER Programmkarte, nicht
 * nur der Katalogkarte: Figma Outlined Button, Size S, nur Symbol (40 × 40). Hier,
 * weil diese Datei überall lädt, wo Programmkarten stehen (Katalog, Merkliste,
 * Suche; inc/enqueue.php) — nicht in member.css, die nur für Angemeldete lädt
 * (Gäste sehen das Herz als Link zur Anmeldung), und nicht im Kernbündel, dessen
 * Grundlast check:perf (a) begrenzt.
 */
.ndb-fav-btn--card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--button-block-size-sm);
	block-size: var(--button-block-size-sm);
	padding: 0;
	border: var(--button-border-width) solid var(--border-strong);
	border-radius: var(--button-radius);
	background: var(--card-hover-fill); /* Creme wie Label und Karten-Hover (12.10.2026) */
	color: var(--text-primary);
	text-decoration: none;
	cursor: pointer;
	/* Kein --icon-size: das Herz erbt die Grundgröße (24px, tokens.css), nicht die
	   16px des S-Knopfs — es ist das einzige Zeichen im Knopf, und klein verlaufen
	   seine Pixel ineinander. */
}
.ndb-fav-btn--card:hover { background: var(--surface-raised); }

/*
 * Das Herz (inc/ndb-template.php): Umriss über der Tomato-Fläche, beide in
 * einer Rasterzelle. Gemerkt heißt aria-pressed — das Attribut, das Skript und
 * Server ohnehin setzen; die Form (gefüllt) trägt den Zustand, nicht nur die Farbe.
 */
.ndb-fav-btn__heart { display: inline-grid; }
.ndb-fav-btn__heart > .nebi-icon { grid-area: 1 / 1; }
.ndb-fav-btn__fill {
	color: var(--fill-accent);
	visibility: hidden;
}
.ndb-fav-btn[aria-pressed="true"] .ndb-fav-btn__fill { visibility: visible; }

/*
 * Merken-Knopf oben rechts (seit 07.10.2026 auf jeder Katalogkarte): mittig zur
 * ersten Zeile (Dachzeile 32px, Knopf 40px), bei Featured auf dem Bild. Die erste
 * Zeile einer Textkarte macht ihm Platz.
 */
.card.card--catalog { position: relative; }

.card--catalog .card__actions {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-end: 24px;
	margin: 0;
}

.card--catalog-featured .card__actions {
	inset-block-start: 40px;
	inset-inline-end: 40px;
}

/*
 * Kennzeichnung bezahlter Platzierungen (Option „Premium-Label“, leer = aus): IBM Plex Mono,
 * Großbuchstaben, Charcoal statt Onyx, auf Creme (derselbe Ton wie der Karten-Hover) —
 * oben rechts auf dem Bild, oben bündig mit dem Herz, der Balken nur so hoch wie der Text (Nutzer 12.10.2026). Ohne Bild steht
 * sie als erste Zeile der Karte.
 */
.card--catalog .card__premium {
	margin: 0;
	color: var(--card-premium-label);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
}

.card--catalog .card__media .card__premium {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 64px;
	max-inline-size: calc(100% - 80px);
	z-index: 1;
	padding: 2px 8px;
	background: var(--card-hover-fill);
	pointer-events: none;
}

.card--catalog:not(.card--catalog-featured) .card__body > :first-child {
	padding-inline-end: 56px;
}

.card--catalog .card__editor-note {
	color: var(--state-warning);
	font-size: 14px;
}

/* Unter `large` eine Spalte wie der Startseiten-Auszug (12.10.2026): zwei Spalten bei 600–1023 px
   gaben 300 px Textbreite — Dachzeilen brachen im Wort, der Nutzer fand es „komisch“. */
@media (width < 1024px) {

	body .nebi-programme-catalog__query .wp-block-post-template,
	body .card-grid--catalog {
		grid-template-columns: 1fr;
	}
}

@media (width < 600px) {

	body .nebi-programme-catalog__query .wp-block-post-template,
	body .card-grid--catalog {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(276px, auto);
	}

	body .nebi-programme-catalog__query .wp-block-post-template > li:has(.card--catalog-featured),
	body .card-grid--catalog > li:has(.card--catalog-featured) {
		grid-row: auto;
	}

	.card.card--catalog,
	.card-grid--catalog > li > .card:not(.card--catalog) {
		padding: 24px 24px 32px;
	}

	.card--catalog .card__body,
	.card-grid--catalog > li > .card:not(.card--catalog) .card__body {
		gap: 16px;
	}

	.card.card--catalog-featured {
		min-block-size: 546px;
		gap: 24px;
	}

	.card--catalog .card__meta,
	.card-grid--catalog > li > .card:not(.card--catalog) .card__meta {
		font-size: 18px;
		line-height: 24px;
	}

	.card--catalog .card__title,
	.card-grid--catalog > li > .card:not(.card--catalog) .card__title {
		font-size: 18px;
		line-height: 23px;
	}

	.card--catalog .card__excerpt,
	.card-grid--catalog > li > .card:not(.card--catalog) .card__excerpt {
		font-size: 16px;
		line-height: 22px;
	}

	.card--catalog .card__more {
		font-size: 18px;
		line-height: 24px;
	}
}