/**
 * IF.DIGITAL Mega-Navigationsliste – Frontend
 *
 * Alle Groessen, Farben und Abstaende kommen aus den Design-Tokens der
 * theme.json (--wp--preset--*). Jeder Wert hat einen Rueckfallwert, damit das
 * Plugin auch in Themes ohne diese Presets brauchbar aussieht - die Tokens
 * sind die Vorgabe, nicht die Voraussetzung.
 *
 * Die Werte des Blocks selbst stehen als eigene Variablen oben: so laesst sich
 * eine einzelne Liste im Editor oder per CSS anpassen, ohne die Regeln
 * anzufassen.
 */

.wp-block-ifdigital-mega-links {
	/* Vom Block gesetzt (Seitenleiste "Raster"), sonst drei. */
	--ifd-mega-links-columns: 3;

	--ifd-mega-links-gap: var( --wp--preset--spacing--40, 1rem );
	--ifd-mega-links-min: 15rem;
	--ifd-mega-link-icon: 80px;
	--ifd-mega-link-radius: var( --ifd-radius, 0.25rem );
	--ifd-mega-link-padding: var( --wp--preset--spacing--20, 0.5rem );
	/* Unterzeile: wie bei den Reitern ein durchscheinendes Schwarz statt eines
	   Palette-Tokens (die Palette kennt kein Grau fuer Text). */
	--ifd-mega-link-description-color: var(
		--ifd-tabs-subline-color,
		rgb( 0 0 0 / 0.6 )
	);
	--ifd-mega-link-description-size: var(
		--wp--preset--font-size--small,
		0.875em
	);
	/* Wie die Reiter links: dieselbe Flaeche, dieselbe Farbe. */
	--ifd-mega-link-hover-bg: var(
		--ifd-tabs-active-bg,
		var( --wp--preset--color--white, #fff )
	);

	display: grid;
	/*
	 * Obergrenze der Spaltenzahl ueber die Spurbreite: auto-fit kennt keine
	 * Hoechstzahl, aber wenn die Mindestbreite einer Spur nie unter den Anteil
	 * einer Spalte faellt, passen nie mehr nebeneinander. Nach unten faellt das
	 * Raster von selbst auf zwei und schliesslich eine Spalte.
	 */
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var( --ifd-mega-links-min ),
				calc(
					(
							100% - ( var( --ifd-mega-links-columns ) - 1 ) *
								var( --ifd-mega-links-gap )
						) / var( --ifd-mega-links-columns )
				)
			),
			1fr
		)
	);
	gap: var( --ifd-mega-links-gap );
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-ifdigital-mega-link {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-ifdigital-mega-link__inner {
	display: grid;
	grid-template-columns: var( --ifd-mega-link-icon ) 1fr;
	align-items: center;
	column-gap: var( --wp--preset--spacing--30, 0.75rem );
	/* Innenabstand und Rundung wie bei den Reitern links, damit die
	   Hover-Flaeche dieselbe Form bekommt und nicht am Inhalt klebt. */
	padding: var( --ifd-mega-link-padding );
	border-radius: var( --ifd-mega-link-radius );
	color: inherit;
	font-size: var( --wp--preset--font-size--normal, 1rem );
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-ifdigital-mega-link__media {
	display: block;
	line-height: 0;
}

.wp-block-ifdigital-mega-link__image {
	display: block;
	width: var( --ifd-mega-link-icon );
	height: var( --ifd-mega-link-icon );
	border-radius: var( --ifd-mega-link-radius );
	object-fit: cover;
}

/* Ohne Bild keine leere Bildspalte - der Text nimmt die ganze Breite. */
.wp-block-ifdigital-mega-link__inner.has-no-media {
	grid-template-columns: 1fr;
}

.wp-block-ifdigital-mega-link__text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.wp-block-ifdigital-mega-link__label {
	min-width: 0;
}

/* Mit Unterzeile traegt der Titel etwas mehr Gewicht, damit die beiden
   Zeilen als Titel + Erlaeuterung lesbar sind. */
.wp-block-ifdigital-mega-link__text:has( .wp-block-ifdigital-mega-link__description )
	.wp-block-ifdigital-mega-link__label {
	font-weight: var( --ifd-mega-link-label-weight, 600 );
}

.wp-block-ifdigital-mega-link__description {
	color: var( --ifd-mega-link-description-color );
	font-size: var( --ifd-mega-link-description-size );
	font-weight: 400;
	line-height: 1.35;
}

/* Hover wie bei den Reitern links: die ganze Kachel bekommt Flaeche, nicht nur
   der Text einen Unterstrich. Das trifft besser (Fitts) und sieht im Overlay
   zusammenhaengend aus. */
a.wp-block-ifdigital-mega-link__inner:hover,
a.wp-block-ifdigital-mega-link__inner:focus-visible {
	/*
	 * Kein Unterstrich: Das Theme zeichnet Links beim Ueberfahren an
	 * (theme.json, elements.link:hover). Hier ist der Link aber keine Zeile im
	 * Fliesstext, sondern eine Kachel aus Bild und Beschriftung - die Rueck-
	 * meldung gibt die Flaeche. Ein Unterstrich unter der Beschriftung waere
	 * eine zweite, die nur einen Teil der Kachel markiert.
	 */
	text-decoration: none;
	background: var( --ifd-mega-link-hover-bg );
	/* Derselbe zurueckhaltende Schatten wie an den Reitern - dort definiert,
	   damit beide Hover-Flaechen im Overlay aus einer Quelle kommen. */
	box-shadow: var(
		--ifd-tabs-hover-shadow,
		0 1px 2px rgb( 0 0 0 / 0.05 ), 0 6px 16px -6px rgb( 0 0 0 / 0.12 )
	);
}

/* Der Fokusrahmen gehoert um den ganzen Eintrag, nicht nur um den Text -
   sonst ist bei Tastaturbedienung nicht zu sehen, welche Kachel gemeint ist. */
a.wp-block-ifdigital-mega-link__inner:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: var( --ifd-mega-link-radius );
}