/*
 * Compendion Network-Grid – Layout fuer den Block `compendion/network-grid`
 * auf der Dachmarken-Netzwerk-Seite (`compendion.net/netzwerk/`).
 *
 * Layout-Verhalten (loest das alte Podlove-Template `network-overview` ab):
 *   - Desktop:  auto-fill / minmax(180px, 1fr) – viele mittelgrosse Kacheln
 *     nebeneinander, ca. 8-9 Spalten auf 1800px Wide-Layout.
 *   - Mobile (<= 480px): 2 feste Spalten, damit die Cards nicht volle
 *     Bildschirmbreite einnehmen.
 *   - Cover-Bild quadratisch (aspect-ratio 1/1) und object-fit cover, damit
 *     Logos unterschiedlicher Hoehe einheitlich beschnitten erscheinen.
 *
 * Farben/Spacings aus den Theme-Tokens (--wp--preset--*) – keine
 * Hardcoded-Farben.
 */

.compendion-network-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: clamp(0.875rem, 2vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 480px) {
	.compendion-network-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}

.compendion-network-grid__card {
	margin: 0;
	padding: 0;
	list-style: none;
}

.compendion-network-grid__link {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	color: inherit;
	text-decoration: none;
	transition: transform 150ms ease, opacity 150ms ease;
}

.compendion-network-grid__link:hover,
.compendion-network-grid__link:focus-visible {
	transform: translateY(-2px);
	outline: none;
}

.compendion-network-grid__link:focus-visible .compendion-network-grid__cover {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

.compendion-network-grid__cover {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent);
	/* Cover-Glow wie bei den Content-Cards (Arne 2026-06-12): weisser Ring +
	 * dunkler Schein, neutral statt Token - muss auch auf der gelben
	 * Dachmarken-Flaeche sichtbar sein. Kein overflow:hidden im Karten-Pfad,
	 * daher kein Clipping-Risiko. Trifft auch den Initialen-Fallback (traegt
	 * beide Klassen). */
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.85),
		0 0 6px 3px rgba(0, 0, 0, 0.5);
}

/*
 * Cover-Fallback fuer Cards ohne gepflegtes Cover/Logo (z.B. CFY, MT2, BQP).
 * Erbt Aspect-Ratio + Radius von `__cover`, fuellt die Box mit der Primaer-
 * Farbe und zentriert die Initialen in Weiss.
 */
.compendion-network-grid__cover-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--primary, #888);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.compendion-network-grid__name {
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 600;
	line-height: 1.25;
}

.compendion-network-grid__tagline {
	font-size: 0.875rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 70%, transparent);
}

.compendion-network-grid--empty,
.compendion-network-grid--unavailable {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
}

/*
 * `compendion/own-projects` teilt sich dieses Stylesheet – gleiches Markup,
 * gleiche Layout-Regeln. Wrapper-Klasse `compendion-own-projects` setzt der
 * Block selbst zusaetzlich; eigene Regeln dazu erst bei Bedarf.
 */