/**
 * GOS Hero Slider – Styles
 *
 * Layout:
 *   - Volle Viewport-Höhe (100vh), volle Breite
 *   - Slides übereinander gestapelt, Crossfade über opacity
 *   - Ken-Burns per @keyframes (kein JS nötig)
 *   - Nav: ein Container mit Zeilen (Dot + Label pro Slide).
 *     Dot und Label sind Flex-Geschwister in derselben Zeile,
 *     dadurch sind die Dots IMMER vertikal mittig zum Label –
 *     unabhängig von Label-Höhe oder Zeilenumbrüchen.
 *
 * Breakpoints orientieren sich an Divi-Standard:
 *   - Mobile:  bis 767px
 *   - Tablet:  768–980px
 *   - Desktop: ab 981px
 */

.gos-slider {
	position: relative;
	/*
	 * Full-Bleed: bricht aus allen Divi-Containern (Section, Row) aus und
	 * füllt die komplette Viewport-Breite. Der Trick mit calc(50% - 50vw)
	 * verschiebt den Slider exakt bis zum linken Viewport-Rand, egal wie
	 * breit oder verschachtelt der Eltern-Container ist.
	 *
	 * Minus-scrollbar-width verhindert Horizontal-Scrollbars wenn der
	 * Browser die Scrollbar in die Viewport-Breite einrechnet.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/*
	 * Negative Vertikal-Margins kompensieren Divi-Section-Padding, damit
	 * der Slider keinen Rahmen durch den Section-Hintergrund bekommt.
	 * Werte sind bewusst großzügig — Section-Paddings von bis zu ~100px
	 * werden aufgefangen. Der overflow-hidden schneidet die Überlappung.
	 */
	margin-top: 0;
	margin-bottom: 0;
	height: 100vh;
	min-height: 480px;
	overflow: hidden;
	background: #000;
}

/*
 * Der Divi-Section und -Row, in dem das Code-Modul mit [gos_slider] steckt,
 * sollen keine Innenabstände erzeugen. Wir neutralisieren sie per Container-
 * Query: jeder Divi-Container, der direkt einen Slider enthält, verliert sein
 * Padding und bekommt volle Breite.
 *
 * Das greift nur auf der Kette Section → Row → Column, die unseren Slider
 * enthält, nicht global.
 */
.et_pb_section:has(.gos-slider),
.et_pb_row:has(.gos-slider),
.et_pb_column:has(.gos-slider),
.et_pb_module:has(.gos-slider) {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* ---------- Slides / Track ---------- */

.gos-slider__track {
	position: absolute;
	inset: 0;
}

.gos-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--gos-transition-duration, 800ms) ease-in-out,
		visibility 0s linear var(--gos-transition-duration, 800ms);
	/*
	 * Kein "will-change: opacity" hier: bei drei vollflächigen Slides sprengt
	 * das den Browser-Budget-Grenzwert (Dokumentfläche × 3) und wird sowieso
	 * ignoriert. Opacity-Transitions werden vom Compositor ohnehin optimiert.
	 */
}

.gos-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--gos-transition-duration, 800ms) ease-in-out,
		visibility 0s linear 0s;
	z-index: 1;
}

/* Ausgehender Slide bleibt oben und eingefroren während er ausblendet */
.gos-slide.is-leaving {
	z-index: 2;
	visibility: visible;
}

.gos-slide__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform-origin: center center;
}

/* ---------- Ken Burns ---------- */

/*
 * Nur der aktive Slide animiert. Das spart CPU und verhindert, dass
 * die Animation im Hintergrund "wegläuft" während andere Slides laufen.
 */
.gos-slide.is-active .gos-slide__image,
.gos-slide.is-leaving .gos-slide__image {
	animation-duration: var(--gos-kenburns-duration, 12000ms);
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.gos-slide--kenburns-zoomout.is-active .gos-slide__image,
.gos-slide--kenburns-zoomout.is-leaving .gos-slide__image {
	animation-name: gos-kenburns-zoomout;
}

.gos-slide--kenburns-zoomin.is-active .gos-slide__image,
.gos-slide--kenburns-zoomin.is-leaving .gos-slide__image {
	animation-name: gos-kenburns-zoomin;
	transform-origin: 80% 25%;
}

/* Ken Burns beim Ausblenden einfrieren */
.gos-slide.is-leaving .gos-slide__image {
	animation-play-state: paused;
}

@keyframes gos-kenburns-zoomout {
	from { transform: scale(1.12); }
	to   { transform: scale(1.0); }
}

@keyframes gos-kenburns-zoomin {
	from { transform: scale(1);    }
	to   { transform: scale(1.15); }
}

/* ---------- Navigation (Container + Zeilen) ---------- */

.gos-slider__nav {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(calc(-50% - 50px));
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 10;
}

.gos-slider__item {
	display: flex;
	align-items: center; /* Dot exakt mittig zum Label */
	gap: 16px;
}

/* ---------- Labels ---------- */

.gos-slider__label {
	/*
	 * flex: 1 sorgt dafür, dass alle Labels gleich breit werden –
	 * der Nav-Container schrumpft auf die Breite des längsten Labels,
	 * und flex: 1 streckt alle anderen Labels auf dieselbe Breite.
	 */
	flex: 1;
	/*
	 * Asymmetrisches Padding (top > bottom) gleicht die Poppins-Metriken aus:
	 * der Font setzt UPPERCASE-Glyphen visuell zu hoch im Line-Box. Ohne den
	 * Offset wirkt der Text nach oben verschoben. Werte sind kalibriert, damit
	 * die Glyphen-Mitte optisch in der Box-Mitte sitzt.
	 */
	padding: 18px 22px 12px;
	background: var(--gos-color, #93b278);
	color: #ffffff;
	/*
	 * 'GOS Poppins' ist ein eigener Alias für die Poppins-500-Variante,
	 * die das Plugin per @font-face aus /uploads/et-fonts/ lädt.
	 * So sind wir garantiert auf echtem Medium-Weight, ohne auf Divis
	 * Font-Loading angewiesen zu sein.
	 */
	font-family: 'GOS Poppins', 'Poppins', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	/*
	 * nowrap verhindert Umbrüche – ohne Umbruch sind alle Labels gleich hoch,
	 * und die Dots lassen sich sauber zentrieren.
	 */
	white-space: nowrap;
	border-bottom: 4px solid transparent;
	transition: border-color 300ms ease, transform 300ms ease;
}

.gos-slider__label.is-active {
	border-bottom-color: #ffffff;
}

.gos-slider__label:hover,
.gos-slider__label:focus-visible {
	outline: none;
	transform: translateX(4px);
}

/* ---------- Dots ---------- */

.gos-slider__dot {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 250ms ease, transform 250ms ease;
}

.gos-slider__dot:hover,
.gos-slider__dot:focus-visible {
	outline: none;
	background: var(--gos-color, #ffffff) !important;
	transform: scale(1.15);
}

.gos-slider__dot.is-active {
	background: var(--gos-color, #ffffff) !important;
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
	.gos-slider__label {
		font-size: 20px;
		padding: 15px 18px 9px;
	}
	.gos-slider__item {
		gap: 14px;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.gos-slider {
		/*
		 * 100vh kann auf iOS buggy sein (Adressleiste). svh wenn verfügbar.
		 */
		height: 100svh;
	}
	.gos-slider__nav {
		left: 16px;
		gap: 8px;
	}
	.gos-slider__item {
		gap: 12px;
	}
	.gos-slider__label {
		font-size: 14px;
		padding: 11px 12px 7px;
		letter-spacing: 0.5px;
		border-bottom-width: 3px;
	}
	.gos-slider__dot {
		width: 32px;
		height: 32px;
	}
}

/* ---------- Sehr schmale Phones (iPhone SE etc.) ---------- */

@media (max-width: 380px) {
	.gos-slider__label {
		font-size: 12px;
		padding: 10px 10px 6px;
		letter-spacing: 0.3px;
	}
	.gos-slider__item {
		gap: 10px;
	}
	.gos-slider__nav {
		left: 12px;
		gap: 6px;
	}
}

/* ---------- Querformat auf Mobile (Landscape) ---------- */

@media (max-height: 500px) and (orientation: landscape) {
	.gos-slider__label {
		font-size: 13px;
		padding: 9px 10px 5px;
	}
	.gos-slider__nav {
		gap: 6px;
	}
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.gos-slide,
	.gos-slide.is-active,
	.gos-slide.is-leaving {
		transition: none;
	}
	.gos-slide.is-active .gos-slide__image,
	.gos-slide.is-leaving .gos-slide__image {
		animation: none;
	}
}