/* =========================================================================
   FURRER ITX – ITX-Mitarbeiter (3.0.0)

   Alle Default-Stile liegen in der Cascade Layer "itx-mitarbeiter". Eigene
   CSS-Regeln ausserhalb dieser Layer überschreiben die Defaults automatisch –
   unabhängig von Spezifität und Quellreihenfolge, ohne !important.

   Spalten & Breakpoints:
   Der Shortcode setzt pro Instanz einen kleinen Inline-<style>-Block mit den
   effektiven --itx-mitarbeiter-columns-Werten und den Media-Queries. Der Wert
   hier wirkt nur als Fallback in Kontexten ohne Shortcode-Wrapper
   (z. B. Elementor Loop Grid).

   --itx-mitarbeiter-image-ratio wird inline am Grid-Wrapper gesetzt; der Wert
   hier ist ebenfalls nur Fallback.
   ========================================================================= */

@layer itx-mitarbeiter {

	.itx-mitarbeiter-grid,
	.itx-mitarbeiter-kategorien {
		--itx-mitarbeiter-columns:       4;
		--itx-mitarbeiter-gap:           30px;
		--itx-mitarbeiter-info-gap:      12px;
		--itx-mitarbeiter-icon-gap:      8px;
		--itx-mitarbeiter-category-gap:  50px;
		--itx-mitarbeiter-meta-gap:      24px;
		--itx-mitarbeiter-image-ratio:   3 / 4;
		--itx-mitarbeiter-image-radius:  4px;
		--itx-mitarbeiter-icon-size:     18px;
		--itx-mitarbeiter-name-size:     1.1rem;
	}

	/* ---- Kategorie-Sektionen (Modus "getrennt") ---- */
	.itx-mitarbeiter-kategorie {
		margin-bottom: var(--itx-mitarbeiter-category-gap);
	}
	.itx-mitarbeiter-kategorie:last-child {
		margin-bottom: 0;
	}
	.itx-mitarbeiter-kategorie-titel {
		margin: 0 0 8px;
	}
	.itx-mitarbeiter-kategorie-meta {
		margin-bottom: var(--itx-mitarbeiter-meta-gap);
		line-height: 1.5;
	}

	/* ---- Grid ---- */
	.itx-mitarbeiter-grid {
		display: grid;
		grid-template-columns: repeat(var(--itx-mitarbeiter-columns), 1fr);
		gap: var(--itx-mitarbeiter-gap);
		margin: 0;
		padding: 0;
	}

	/* ---- Einzelne Kachel ---- */
	.itx-mitarbeiter-item {
		display: flex;
		flex-direction: column;
	}

	/* ---- Listen-Ansicht: Bild links, Text rechts, 50/50 ----
	   Aktiv bei ansicht="liste". Das äussere Grid ist dann 1-spaltig; die
	   50/50-Aufteilung passiert innerhalb des Items. Unter dem Mobile-
	   Breakpoint stapelt das Item vertikal (Regel kommt inline aus PHP,
	   da der Breakpoint konfigurierbar ist). */
	.itx-mitarbeiter-grid--liste .itx-mitarbeiter-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--itx-mitarbeiter-gap);
		align-items: start;
	}
	.itx-mitarbeiter-grid--liste .itx-mitarbeiter-info {
		margin-top: 0;
	}

	/* ---- Bild ---- */
	.itx-mitarbeiter-bildlink {
		display: block;
		width: 100%;
		cursor: pointer;
		line-height: 0;
	}
	.itx-mitarbeiter-bild {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--itx-mitarbeiter-image-ratio);
		object-fit: cover;
		border-radius: var(--itx-mitarbeiter-image-radius);
		transition: opacity 0.2s ease;
	}
	.itx-mitarbeiter-bildlink:hover .itx-mitarbeiter-bild {
		opacity: 0.9;
	}

	/* ---- Textbereich ---- */
	.itx-mitarbeiter-info {
		margin-top: var(--itx-mitarbeiter-info-gap);
	}
	.itx-mitarbeiter-name {
		margin: 0 0 4px;
		font-size: var(--itx-mitarbeiter-name-size);
		line-height: 1.3;
	}
	.itx-mitarbeiter-funktion {
		margin-bottom: 8px;
		line-height: 1.4;
	}

	/* ---- Kontakt ---- */
	.itx-mitarbeiter-telefon,
	.itx-mitarbeiter-email {
		line-height: 1.5;
		word-break: break-word;
	}
	.itx-mitarbeiter-telefon a,
	.itx-mitarbeiter-email a {
		display: inline-flex;
		align-items: center;
		gap: var(--itx-mitarbeiter-icon-gap);
		text-decoration: none;
	}
	.itx-mitarbeiter-telefon a:hover,
	.itx-mitarbeiter-email a:hover {
		text-decoration: underline;
	}
	.itx-mitarbeiter-icon {
		flex: 0 0 auto;
		width: var(--itx-mitarbeiter-icon-size);
		height: var(--itx-mitarbeiter-icon-size);
		display: block;
	}

	/* ---- Leer-Text ---- */
	.itx-mitarbeiter-leer {
		margin: 0;
	}
}