/* ==========================================================================
   ITX-Logo-Link-Liste
   Ausgabe via Shortcode [itx_logolink_liste]

   Spalten und deren Breakpoints kommen aus den Modul-Einstellungen und
   werden pro Shortcode-Instanz als Inline-CSS angehaengt (kein festes
   Media-Query-Set fuer Spalten in diesem File -- sonst zwei konkurrierende
   Sets). Die restlichen responsiven Anpassungen (Grid-Gap, Box-Padding)
   verwenden hier feste Standard-Breakpoints; sie sind projekt-seitig via
   CSS uebersteuerbar.
   ========================================================================== */

/* --- Variablen (scoped auf Container) ----------------------------------- */
.itx-logolink-list {
	/* Farben */
	--itx-logolink-border-color: var(--e-global-color-primary);
	--itx-logolink-name-color:   var(--e-global-color-secondary);
	--itx-logolink-text-color:   var(--e-global-color-secondary);
	--itx-logolink-link-color:   var(--e-global-color-secondary);

	/* Rahmen, Radius, Innenabstand */
	--itx-logolink-border:       5px solid var(--itx-logolink-border-color);
	--itx-logolink-radius:       12px;
	--itx-logolink-box-padding:  1.5rem;

	/* Grid-Layout */
	--itx-logolink-grid-gap:     2rem;
	--itx-logolink-columns:      3; /* Desktop-Default; wird per Inline-CSS aus dem Setting gesetzt */

	/* Logo + Textbereich */
	--itx-logolink-logo-max-height: 110px;
	--itx-logolink-logo-gap:        30px;    /* Abstand Logo -> Textbereich */
	--itx-logolink-text-gap:        0.4rem;  /* Abstand rund um den Text-Block */

	display: grid;
	grid-template-columns: repeat(var(--itx-logolink-columns), 1fr);
	gap: var(--itx-logolink-grid-gap);
	margin: 0;
	padding: 0;
}

/* --- Box (ganze Box ist der Link) --------------------------------------- */
.itx-logolink-item {
	display: flex;
	flex-direction: column;
	text-align: center;
	border: var(--itx-logolink-border);
	border-radius: var(--itx-logolink-radius);
	padding: var(--itx-logolink-box-padding);
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hover nur, wenn die Box ein Link ist */
a.itx-logolink-item:hover,
a.itx-logolink-item:focus-visible {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* --- Logo: Block, fuellt den oberen Raum, Logo vertikal zentriert ------- */
.itx-logolink-logo {
	flex: 1 1 auto;          /* nimmt den restlichen Raum ein */
	align-self: stretch;     /* volle Breite */
	display: flex;
	align-items: center;     /* vertikal zentriert */
	justify-content: center; /* horizontal zentriert */
	padding: 10px 0 12px 0;
	margin-bottom: var(--itx-logolink-logo-gap);
}

.itx-logolink-logo-img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--itx-logolink-logo-max-height);
	object-fit: contain;
}

/* SVG-Fallback: WordPress kann SVG-Attachments in aller Regel nicht parsen
   und rendert das <img> ohne width/height-Attribute. Ohne intrinsische
   Dimensionen fallen width:auto und height:auto auf 0 zurueck -- das SVG
   bleibt unsichtbar. Der Selektor greift nur, wenn beide Attribute fehlen;
   normale Bilder (PNG/JPEG mit Dimensionen aus der Metadata) bleiben davon
   unberuehrt. width:100% zwingt das SVG auf die verfuegbare Container-
   Breite, max-height cappt die Hoehe, object-fit erhaelt die Aspect-Ratio. */
.itx-logolink-logo-img:not([width]):not([height]) {
	width: 100%;
	height: auto;
	max-height: var(--itx-logolink-logo-max-height);
}

/* --- Textbereich (Titel / Text / URL) auf der Baseline ------------------ */
/* Wichtig: margin:0, weil der Name je nach Setting als <h2>..<h6> rendert
   und Browser-Default-Margins die Abstands-Logik brechen wuerden. */
.itx-logolink-name {
	margin: 0;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--itx-logolink-name-color);
}

/* Block; traegt als einziges Element den Abstand.
   Fehlt das Feld, ruecken Titel und URL ohne Luecke zusammen. */
.itx-logolink-text {
	display: block;
	margin: var(--itx-logolink-text-gap) 0;
	font-size: 0.9em;
	line-height: 1.3em;
	color: var(--itx-logolink-text-color);
}

.itx-logolink-text p {
	margin: 0 0 0.5rem;
}

.itx-logolink-text p:last-child {
	margin-bottom: 0;
}

/* --- URL (als Text dargestellt) ----------------------------------------- */
.itx-logolink-link {
	font-size: 0.9em;
	line-height: 1.3em;
	word-break: break-word;
	color: var(--itx-logolink-link-color);
}

/* --- Responsive: nicht-settings-gesteuerte Werte ------------------------ */
/* Die Spalten-Media-Queries kommen aus dem Inline-CSS mit den konfigurierten
   Breakpoints. Hier nur Werte, die nicht ueber Einstellungen laufen. */
@media (max-width: 1024px) {
	.itx-logolink-list {
		--itx-logolink-grid-gap: 1.5rem;
	}
}

@media (max-width: 767px) {
	.itx-logolink-list {
		--itx-logolink-box-padding: 1.25rem;
	}
}