/* ITX Kopfbereiche & Linkboxen - Linkboxen (Struktur)
   ----------------------------------------------------------------
   Spaltenbreite und Farb-Schachbrett (opt-in) werden pro Grid-
   Instanz dynamisch erzeugt. Diese Datei enthaelt nur das
   strukturell Noetige; Feintuning ueber CSS-Variablen unten.
   ---------------------------------------------------------------- */

body {
	/* Layout */
	--hlc-linkboxes-gap:                75px;
	--hlc-linkboxes-max-width:          1600px;
	--hlc-linkboxes-aspect-ratio:       1 / 1;
	--hlc-linkboxes-hover-transition:   0.3s;

	/* Textbereich */
	--hlc-linkboxes-text-padding:       15px;
	--hlc-linkboxes-text-gap:           8px;

	/* Titel */
	--hlc-linkboxes-title-lines:        2;
	--hlc-linkboxes-title-font-weight:  700;

	/* Kurzbeschreibung */
	--hlc-linkboxes-desc-lines:         3;
	--hlc-linkboxes-desc-font-weight:   400;

	/* Button */
	--hlc-linkboxes-button-font-weight: 600;

	/* Hover-Overlay - nur wirksam bei aktivem Schachbrett-Farbschema */
	--hlc-overlay-primary:   rgba(157, 201, 27, 0.5);
	--hlc-overlay-secondary: rgba(63, 69, 74, 0.5);
}

.hlc-linkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hlc-linkboxes-gap);
	justify-content: center; /* unvollstaendige letzte Zeile bleibt zentriert */
	margin: 0 auto;
	width: var(--hlc-linkboxes-max-width);
	max-width: 100%;
}

.hlc-linkboxes__box {
	position: relative;
	display: block;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	aspect-ratio: var(--hlc-linkboxes-aspect-ratio);
}

/* Hover-Overlay - Farbe wird pro Grid dynamisch gesetzt (opt-in) */
.hlc-linkboxes__box::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--hlc-linkboxes-hover-transition) ease;
	pointer-events: none;
	z-index: 1;
}

.hlc-linkboxes__box:hover::before,
.hlc-linkboxes__box:focus::before {
	opacity: 1;
}

/* Textbereich am unteren Boxrand */
.hlc-linkboxes__text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	box-sizing: border-box;
	padding: var(--hlc-linkboxes-text-padding);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--hlc-linkboxes-text-gap);
}

/* Gleiche Texthoehe ueber alle Boxen einer Zeile durch reservierte
   Zeilen (Titel/Beschreibung). Laengerer Text wird abgeschnitten. */
.hlc-linkboxes__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hlc-linkboxes-title-lines);
	line-clamp: var(--hlc-linkboxes-title-lines);
	overflow: hidden;
	min-height: calc(var(--hlc-linkboxes-title-lines) * 1lh);
	font-weight: var(--hlc-linkboxes-title-font-weight);
}

.hlc-linkboxes__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--hlc-linkboxes-desc-lines);
	line-clamp: var(--hlc-linkboxes-desc-lines);
	overflow: hidden;
	min-height: calc(var(--hlc-linkboxes-desc-lines) * 1lh);
	font-weight: var(--hlc-linkboxes-desc-font-weight);
}

.hlc-linkboxes__button {
	margin-top: auto;
	font-weight: var(--hlc-linkboxes-button-font-weight);
}