/* =========================================================================
   FURRER ITX – Mitarbeiter-Grid

   Alle Default-Stile dieses Stylesheets liegen in der Cascade Layer
   "itx-mitarbeiter". Eigene CSS-Regeln (Theme, Customizer, Code-Snippet-
   Plugin) ausserhalb dieser Layer ueberschreiben die Defaults automatisch –
   unabhaengig von Spezifitaet und Quellreihenfolge, ohne !important.

   Konfiguration ueber CSS-Variablen, die auf .ma-grid und .ma-kategorien
   definiert sind und an alle Kind-Elemente vererbt werden.

   Beispiel-Override (Theme oder Code-Snippet-Plugin, unlayered):

       .ma-grid, .ma-kategorien {
           --ma-columns: 4;
           --ma-gap: 20px;
       }
       @media (max-width: 1024px) {
           .ma-grid, .ma-kategorien { --ma-columns: 3; }
       }
       @media (max-width: 767px) {
           .ma-grid, .ma-kategorien { --ma-columns: 1; }
       }

   Hinweis zu --ma-image-ratio:
   Seit Plugin v1.5 wird die Bild-Proportion vom Plugin inline am
   .ma-grid-Wrapper gesetzt (aus den Einstellungen). Der Wert hier ist nur
   Fallback und kommt nur dann zum Tragen, wenn das Plugin keine Inline-
   Variable schreibt (z. B. im Elementor Loop Grid).
   ========================================================================= */

@layer itx-mitarbeiter {

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

	/* Spalten per Breakpoint: einzige Variable neu zuweisen */
	@media (max-width: 1024px) {
		.ma-grid,
		.ma-kategorien {
			--ma-columns: 2;
		}
	}
	@media (max-width: 767px) {
		.ma-grid,
		.ma-kategorien {
			--ma-columns: 1;
		}
	}

	/* ---- Kategorie-Sektionen (Modus "getrennt") ---- */
	.ma-kategorie {
		margin-bottom: var(--ma-category-gap);
	}

	.ma-kategorie:last-child {
		margin-bottom: 0;
	}

	.ma-kategorie-titel {
		margin: 0 0 8px;
	}

	.ma-kategorie-meta {
		margin-bottom: var(--ma-meta-gap);
		line-height: 1.5;
	}

	.ma-kategorie-beschreibung {
		line-height: 1.5;
	}

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

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

	/* ---- Bild ---- */
	.ma-bildlink {
		display: block;
		width: 100%;
		cursor: pointer;
		line-height: 0;
	}

	.ma-bild {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: var(--ma-image-ratio);
		object-fit: cover;
		border-radius: var(--ma-image-radius);
		transition: opacity 0.2s ease;
	}

	.ma-bildlink:hover .ma-bild {
		opacity: 0.9;
	}

	/* ---- Textbereich ---- */
	.ma-info {
		margin-top: var(--ma-info-gap);
	}

	.ma-name {
		margin: 0 0 4px;
		font-size: var(--ma-name-size);
		line-height: 1.3;
	}

	.ma-funktion {
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.ma-telefon,
	.ma-email {
		line-height: 1.5;
		word-break: break-word;
	}

	/* Icon + Text in einer Zeile ausrichten */
	.ma-telefon a,
	.ma-email a {
		display: inline-flex;
		align-items: center;
		gap: var(--ma-icon-gap);
		text-decoration: none;
	}

	.ma-icon {
		flex: 0 0 auto;
		width: var(--ma-icon-size);
		height: var(--ma-icon-size);
		display: block;
	}

	.ma-telefon a:hover,
	.ma-email a:hover {
		text-decoration: underline;
	}
}