/* ==========================================================================
   FURRER ITX – Kundenstimmen (Slider + Liste)

   Minimales Layout-CSS (§9). Alle Defaults liegen in der Cascade Layer
   "itx-kundenstimmen"; eigene Regeln ausserhalb jeder Layer überschreiben
   sie automatisch – ohne !important, unabhängig von Spezifität.

   Konfiguration über CSS-Variablen auf .itx-kundenstimmen. Swiper-native
   Variablen (--swiper-*) werden hier gesetzt und intern von Swiper gelesen –
   keine Selektor-Overrides gegen das Bundle nötig.

   Beispiel-Override (Theme, unlayered):
       .itx-kundenstimmen {
           --itx-kundenstimmen-image-radius:      0;     // eckig statt rund
           --itx-kundenstimmen-nav-color:         #c00;
           --itx-kundenstimmen-bullet-color-active:#c00;
           --itx-kundenstimmen-name-size:         1.25rem;
       }
   ========================================================================== */

@layer itx-kundenstimmen {

	.itx-kundenstimmen {
		/* ---- Karte ---- */
		--itx-kundenstimmen-image-ratio:       1 / 1;
		--itx-kundenstimmen-image-width:       80%;
		--itx-kundenstimmen-image-radius:      50%;
		--itx-kundenstimmen-image-gap:         25px;
		--itx-kundenstimmen-name-size:         1.1rem;
		--itx-kundenstimmen-name-weight:       600;
		--itx-kundenstimmen-name-gap:          20px;
		--itx-kundenstimmen-text-size:         1rem;
		--itx-kundenstimmen-text-line-height:  1.5;
		--itx-kundenstimmen-info-gap:          20px;
		--itx-kundenstimmen-readmore-hover:    var(--e-global-color-accent, var(--itx-kundenstimmen-nav-color-hover, #001016));

		/* ---- Liste (Raster) ---- */
		--itx-kundenstimmen-cols-desktop:     3;
		--itx-kundenstimmen-cols-tablet:      2;
		--itx-kundenstimmen-cols-mobile:      1;
		--itx-kundenstimmen-gap:               1.5rem;

		/* ---- Slider: Navigation/Pagination ---- */
		--itx-kundenstimmen-nav-color:          #001016;
		--itx-kundenstimmen-nav-color-hover:    var(--e-global-color-primary, #001016);
		--itx-kundenstimmen-nav-size:           25px;
		--itx-kundenstimmen-nav-offset:         10px;
		--itx-kundenstimmen-bullet-color:       #ededed;
		--itx-kundenstimmen-bullet-color-active: var(--e-global-color-primary, #001016);
		--itx-kundenstimmen-bullet-size:        15px;
		--itx-kundenstimmen-bullet-gap:         10px;
		--itx-kundenstimmen-bullet-bottom:      15px;

		/* ---- Swiper-native Variablen (intern ausgelesen) ---- */
		--swiper-navigation-color:                   var(--itx-kundenstimmen-nav-color);
		--swiper-navigation-size:                    var(--itx-kundenstimmen-nav-size);
		--swiper-navigation-top-offset:              50%;
		--swiper-navigation-sides-offset:            var(--itx-kundenstimmen-nav-offset);
		--swiper-pagination-color:                   var(--itx-kundenstimmen-bullet-color-active);
		--swiper-pagination-bullet-inactive-color:   var(--itx-kundenstimmen-bullet-color);
		--swiper-pagination-bullet-inactive-opacity: 1;
		--swiper-pagination-bullet-size:             var(--itx-kundenstimmen-bullet-size);
		--swiper-pagination-bullet-horizontal-gap:   var(--itx-kundenstimmen-bullet-gap);
		--swiper-pagination-bottom:                  var(--itx-kundenstimmen-bullet-bottom);
	}

	/* ---- Liste: Raster ----
	   Spaltenzahl = --itx-kundenstimmen-cols (wird per Media-Query auf die
	   Tablet-/Mobile-Werte umgeschaltet; die Breakpoints liefert das Plugin als
	   Inline-CSS aus den ITX-Einstellungen). Ohne Umschaltung gilt Desktop. */
	.itx-kundenstimmen-list {
		display: grid;
		grid-template-columns: repeat(var(--itx-kundenstimmen-cols, var(--itx-kundenstimmen-cols-desktop, 3)), 1fr);
		gap: var(--itx-kundenstimmen-gap);
	}

	/* Grid-Zelle (Wrapper um die Karte, u. a. für „Mehr anzeigen“). */
	.itx-kundenstimmen-item {
		display: flex;
	}

	.itx-kundenstimmen-item > .itx-kundenstimmen-card {
		flex: 1;
		width: 100%;
	}

	.itx-kundenstimmen-item.is-hidden {
		display: none;
	}

	.itx-kundenstimmen-mehr-wrap {
		display: flex;
		justify-content: center;
		margin-top: var(--itx-kundenstimmen-gap);
	}

	.itx-kundenstimmen-mehr {
		cursor: pointer;
		font: inherit;
		padding: .6em 1.4em;
		border: 1px solid currentColor;
		border-radius: 999px;
		background: transparent;
		color: inherit;
	}

	.itx-kundenstimmen-mehr:hover,
	.itx-kundenstimmen-mehr:focus {
		color: var(--itx-kundenstimmen-readmore-hover);
	}

	/* ---- Masonry-Variante der Liste ----
	   Spaltenzahl kommt aus derselben Variable wie das Raster, inklusive der
	   responsiven Umschaltung per Breakpoint-Inline-CSS. */
	.itx-kundenstimmen-liste--masonry .itx-kundenstimmen-list {
		display: block;
		column-count: var(--itx-kundenstimmen-cols, var(--itx-kundenstimmen-cols-desktop, 3));
		column-gap: var(--itx-kundenstimmen-gap);
	}

	.itx-kundenstimmen-liste--masonry .itx-kundenstimmen-item {
		display: block;
		width: 100%;
		margin: 0 0 var(--itx-kundenstimmen-gap);
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	.itx-kundenstimmen-liste--masonry .itx-kundenstimmen-item > .itx-kundenstimmen-card {
		height: auto;
	}

	/* ---- Karte (Slider + Liste gemeinsam) ---- */
	.itx-kundenstimmen-card {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		text-align: center;
		height: 100%;
	}

	.itx-kundenstimmen-image {
		display: flex;
		justify-content: center;
	}

	.itx-kundenstimmen-img {
		width: var(--itx-kundenstimmen-image-width);
		aspect-ratio: var(--itx-kundenstimmen-image-ratio);
		border-radius: var(--itx-kundenstimmen-image-radius);
		object-fit: cover;
		object-position: center center;
		margin: 0 auto var(--itx-kundenstimmen-image-gap);
	}

	.itx-kundenstimmen-image--fallback {
		width: var(--itx-kundenstimmen-image-width);
		aspect-ratio: var(--itx-kundenstimmen-image-ratio);
		border-radius: var(--itx-kundenstimmen-image-radius);
		background: #e2e2e2;
		margin: 0 auto var(--itx-kundenstimmen-image-gap);
	}

	.itx-kundenstimmen-content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Reihenfolge der Standard-Karte: Bild, Text, Name, Zusatzinfo.
	   Der Abstand oberhalb des Textes kommt vom margin-bottom des Bildes. */
	.itx-kundenstimmen-text {
		text-align: center;
		font-size: var(--itx-kundenstimmen-text-size);
		line-height: var(--itx-kundenstimmen-text-line-height);
		margin: 0;
	}

	.itx-kundenstimmen-name {
		font-size: var(--itx-kundenstimmen-name-size);
		font-weight: var(--itx-kundenstimmen-name-weight);
		padding-top: var(--itx-kundenstimmen-name-gap);
		margin: 0;
		line-height: 1.3;
	}

	/* Projektspezifisch ergänzte Felder (Firma/Funktion/Ort/…) und Zusatzinfo */
	.itx-kundenstimmen-meta {
		font-weight: 400;
		font-size: 1rem;
		text-align: center;
		padding-top: var(--itx-kundenstimmen-info-gap);
		margin: 0;
		line-height: 1.4;
	}

	/* Anführungszeichen: .itx-kundenstimmen-quote gilt für beide Zeichen,
	   --open / --close jeweils für ein Zeichen. .itx-kundenstimmen-text-body
	   umschliesst den eigentlichen Text (Weiterlesen tauscht nur diesen aus). */
	.itx-kundenstimmen-quote {
		font-style: inherit;
	}

	/* Zeilenumbrüche aus dem Feldinhalt erhalten (mehrzeilige Zitate). */
	.itx-kundenstimmen-text-body {
		white-space: pre-line;
	}

	/* Der ganze gekürzte Textblock ist klickbar (mehr/weniger). */
	.itx-kundenstimmen-text--readmore {
		cursor: pointer;
	}

	.itx-kundenstimmen-readmore {
		margin-left: 5px;
		text-decoration: underline;
		cursor: pointer;
	}

	.itx-kundenstimmen-text--readmore:hover .itx-kundenstimmen-readmore,
	.itx-kundenstimmen-readmore:hover,
	.itx-kundenstimmen-readmore:focus {
		color: var(--itx-kundenstimmen-readmore-hover);
	}

	/* Nav-Buttons Hover (Swiper hat keine Default-Hover-Regel); wirkt auf den
	   Standard-Pfeil (Farbe). Eigene SVG-Pfeile werden ungelayert eingefärbt. */
	.itx-kundenstimmen-slider-wrap .itx-kundenstimmen-nav-prev:hover,
	.itx-kundenstimmen-slider-wrap .itx-kundenstimmen-nav-prev:focus,
	.itx-kundenstimmen-slider-wrap .itx-kundenstimmen-nav-next:hover,
	.itx-kundenstimmen-slider-wrap .itx-kundenstimmen-nav-next:focus {
		color: var(--itx-kundenstimmen-nav-color-hover);
	}

	.itx-kundenstimmen-leer {
		opacity: .8;
	}

	/* Gesamt-Bewertung [itx_kundenstimmen_bewertung] */
	.itx-kundenstimmen-bewertung-link {
		color: inherit;
		text-decoration: none;
	}

	.itx-kundenstimmen-bewertung-link:hover,
	.itx-kundenstimmen-bewertung-link:focus {
		text-decoration: underline;
		color: var(--itx-kundenstimmen-readmore-hover);
	}
}

/* ==========================================================================
   Swiper-Struktur-Overrides – BEWUSST UNGELAYERT.
   Das Swiper-Bundle-CSS ist ungelayert und würde jede @layer-Regel schlagen.
   Diese Overrides müssen daher ausserhalb der Layer stehen.
   ========================================================================== */

/* Pagination-Bullets aus der absoluten Position lösen und unter die Slides in
   den normalen Fluss legen: kein Überlappen des Inhalts, sicher klickbar. */
.itx-kundenstimmen-slider .swiper-pagination {
	position: relative;
	inset: auto;
	width: auto;
	margin-top: var(--itx-kundenstimmen-bullet-top, 20px);
	z-index: 2;
	pointer-events: auto;
}

.itx-kundenstimmen-slider .swiper-pagination .swiper-pagination-bullet {
	pointer-events: auto;
}

/* Navigationspfeile: liegen ausserhalb des .swiper im Wrapper. */
.itx-kundenstimmen-slider-wrap {
	position: relative;
}

.itx-kundenstimmen-slider-wrap .itx-kundenstimmen-nav {
	z-index: 3;
	pointer-events: auto;
}

/* Pfeile im Seitenraum (Standard): Platz schaffen, Pfeile an die Ränder. */
.itx-kundenstimmen-slider-wrap--aussen {
	padding-left: var(--itx-kundenstimmen-nav-gutter, 44px);
	padding-right: var(--itx-kundenstimmen-nav-gutter, 44px);
}

.itx-kundenstimmen-slider-wrap--aussen .itx-kundenstimmen-nav-prev {
	left: 0;
	right: auto;
}

.itx-kundenstimmen-slider-wrap--aussen .itx-kundenstimmen-nav-next {
	right: 0;
	left: auto;
}

/* Pfeile über den Karten (optional). */
.itx-kundenstimmen-slider-wrap--ueber .itx-kundenstimmen-nav-prev {
	left: var(--itx-kundenstimmen-nav-offset, 10px);
	right: auto;
}

.itx-kundenstimmen-slider-wrap--ueber .itx-kundenstimmen-nav-next {
	right: var(--itx-kundenstimmen-nav-offset, 10px);
	left: auto;
}