/* ==========================================================================
   Vollbild-Bildslider für die Hero-Sektion einer Projektseite (Subsite und echte
   Hauptseiten-Projektseite, siehe sallier_render_projektseite_hero_slider() in
   includes/general/projektseiten.php) — läuft eigenständig über js/projekt-hero-slider.js,
   bewusst nicht über Divis natives Slider-Modul (siehe PHP-Kommentar dort). Optik an
   schuetzenweg.de angelehnt: randloses, bildschirmfüllendes Bild je Folie, weiße
   Pfeile/Punkte, automatischer Wechsel.
   ========================================================================== */

.projektseite-hero-slider {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Störer (rundes Hinweis-Badge oben rechts, z. B. "Open House" + Termin) — optisch an
   die-muehlenbauerei.de angelehnt, dort allerdings als fertige Bilddatei hinterlegt. Hier bewusst
   reines CSS statt Bild: der Inhalt kommt aus dem Textarea-Feld "projekt_stoerer" (siehe
   sallier_render_projekt_hero_modul()) und soll jederzeit ohne neuen Bild-Export änderbar bleiben.
   "z-index" höher als die Pfeile/Thumbnails, aber weit genug oben rechts platziert, um sie nicht
   zu überlagern. Bewusst VOR der mobilen Media-Query weiter unten definiert, sonst würde diese
   allgemeine Regel (gleiche Selektor-Spezifität, aber später in der Datei) die schmalere
   Mobil-Variante in der Kaskade überschreiben. */
.projektseite-hero-stoerer {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	/* Projekt-eigene Farb-Highlight-Variable statt fester Akzentfarbe — dieselbe Quelle wie
	   Navigation, Button-Hintergrund, Modul-Überschriften und Footer (siehe
	   sallier_render_projektseite_design_css()), damit der Störer sich pro Projekt einfärbt statt
	   projektübergreifend immer gleich auszusehen. Fallback bleibt die bisherige Akzentfarbe, falls
	   für ein Projekt kein Highlight gesetzt ist. */
	background: var(--ps-highlight, var(--color-accent));
	color: var(--color-surface);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: 22px;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	transform: rotate(-8deg);
	box-shadow: var(--shadow-soft);
	/* Durchgängiger Innenring (vorher gepunktet) — per "outline" statt zusätzlichem Element,
	   "outline-offset" negativ zieht ihn nach innen, ohne die Kreisform selbst zu beeinflussen.
	   "padding" bewusst größer als "outline-offset": der Text soll sichtbaren Abstand zum Ring
	   haben, nicht direkt daran anliegen. */
	outline: 1px solid rgba(255, 255, 255, 0.7);
	outline-offset: -10px;
	padding: 22px;
	box-sizing: border-box;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.projektseite-hero-stoerer:hover {
	/* Rotation bleibt erhalten, nur die Größe wächst — sonst "springt" das Badge beim Hover
	   sichtbar in eine gerade Ausrichtung. "--shadow-hover" ist dieselbe verstärkte Schatten-Variable,
	   die auch andere anhebende Hover-Zustände (Karten/Karussells) im Theme nutzen. */
	transform: rotate(-8deg) scale(1.08);
	box-shadow: var(--shadow-hover);
}

.projektseite-hero-slider-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.projektseite-hero-slider-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	cursor: pointer;
	transition: opacity 800ms ease;
	/* Nur die sichtbare Folie soll klickbar sein (öffnet die Lightbox) — inaktive Folien liegen
	   trotz "opacity:0" übereinander gestapelt im selben Bereich und würden Klicks sonst
	   abfangen, je nach Dokument-Reihenfolge nicht zwingend die tatsächlich sichtbare. */
	pointer-events: none;
}

.projektseite-hero-slider-slide.ist-aktiv {
	opacity: 1;
	pointer-events: auto;
}

.projektseite-hero-slider-pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 200ms ease;
	/* Höher als die Thumbnail-Leiste (z-index:2) — auf schmalen Bildschirmen reicht die Leiste
	   inzwischen bis nah an diese Pfeile heran (siehe "max-width" der Leiste weiter unten) und
	   soll sie im Zweifel nicht verdecken/unklickbar machen. */
	z-index: 3;
}

.projektseite-hero-slider-pfeil:hover {
	background: rgba(255, 255, 255, 0.3);
}

.projektseite-hero-slider-pfeil--zurueck {
	left: var(--space-6);
}

.projektseite-hero-slider-pfeil--weiter {
	right: var(--space-6);
}

/* Leiste, die Thumbnail-Reihe UND die beiden kleinen Scroll-Pfeile als eine gemeinsam
   zentrierte Gruppe zusammenhält — die eigentliche absolute Positionierung/Zentrierung sitzt
   hier, nicht mehr auf der Reihe selbst, damit die Pfeile bei jeder Bilderzahl direkt neben ihr
   stehen statt an einer fest berechneten Position. "max-width" hält die ganze Gruppe innerhalb
   der beiden GROSSEN Bild-Wechsel-Pfeile links/rechts vom Hero selbst. */
.projektseite-hero-slider-thumbs-leiste {
	position: absolute;
	left: 50%;
	bottom: var(--space-6);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 160px);
	z-index: 2;
}

/* Optisch an ".projektseite-galerie-reihe"/"-grid" der normalen Projekt-Galerie angelehnt
   (siehe projektseite.css): halbtransparente weiße Fläche, Bilder laufen bei Bedarf horizontal
   scrollbar über — per Pfeil-Buttons daneben weiterschaltbar (siehe initThumbPfeile() in
   projekt-hero-slider.js). */
.projektseite-hero-slider-thumbs {
	display: flex;
	flex-wrap: nowrap;
	/* "gap" und "padding" bewusst auf denselben Wert gesetzt: der Abstand der Bilder
	   UNTEREINANDER soll genauso breit sein wie der Abstand zwischen Bildrand und der
	   halbtransparenten Fläche rundherum — sonst wirkt der Randabstand schmaler/breiter als
	   die Lücken zwischen den Bildern, obwohl beides eigentlich derselbe "Rhythmus" sein soll.
	   Gilt für Desktop UND die mobile Anpassung weiter unten gleichermaßen. */
	gap: 10px;
	/* Ohne "min-width:0" darf ein Flex-Kind nicht unter seine Inhaltsbreite schrumpfen (Flexbox-
	   Standardverhalten "min-width:auto") — die Reihe würde die Leiste (und damit auch die
	   Pfeile) sonst über "max-width" hinausdrücken, statt selbst scrollbar zu werden. */
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 10px;
	background: rgba(255, 255, 255, 0.55);
	/* Der Innen-Abstand (s.o.) ist nur an den tatsächlichen ENDEN der scrollbaren Reihe sichtbar
	   (ganz links/rechts) — mitten im gescrollten Zustand grenzen Bilder stattdessen direkt an
	   den sichtbaren Rand der Box, ohne erkennbaren Rahmen. Ein echter Rahmen auf der Box SELBST
	   bleibt dagegen unabhängig vom Scroll-Stand immer an allen vier Seiten sichtbar. */
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
}

.projektseite-hero-slider-thumbs::-webkit-scrollbar {
	display: none;
}

/* Kleine Scroll-Pfeile links/rechts der Thumbnail-Reihe — gleiche Optik wie die großen
   Bild-Wechsel-Pfeile (".projektseite-hero-slider-pfeil"), nur kompakter. Per JS ein-/
   ausgeblendet, je nachdem ob in die jeweilige Richtung noch etwas zu scrollen ist (siehe
   initThumbPfeile() in projekt-hero-slider.js) — analog zu ".projektseite-galerie-pfeil".*/
.projektseite-hero-slider-thumbs-pfeil {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #FFFFFF;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: background 200ms ease;
}

.projektseite-hero-slider-thumbs-pfeil:hover {
	background: rgba(255, 255, 255, 0.3);
}

.projektseite-hero-slider-thumb {
	display: block;
	flex: 0 0 auto;
	height: clamp(40px, 6vw, 70px);
	width: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.7;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: opacity 200ms ease, outline-color 200ms ease;
}

.projektseite-hero-slider-thumb:hover,
.projektseite-hero-slider-thumb.ist-aktiv {
	opacity: 1;
	outline-color: #FFFFFF;
}

@media (max-width: 767px) {
	.projektseite-hero-slider-pfeil {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.projektseite-hero-slider-pfeil--zurueck {
		left: var(--space-4);
	}

	.projektseite-hero-slider-pfeil--weiter {
		right: var(--space-4);
	}

	/* 80% der Bildschirmbreite statt der vorherigen, engeren Berechnung — auf schmalen Handys
	   reicht das inzwischen bis nah an die großen Pfeile heran (deshalb deren höherer
	   "z-index" oben, damit sie in jedem Fall klickbar bleiben). Kein eigenes "gap"/"padding"
	   mehr für die Reihe selbst: die Basis-Regel (10px, siehe oben) gilt unverändert auch
	   mobil, damit der Abstand überall gleich breit bleibt. */
	.projektseite-hero-slider-thumbs-leiste {
		max-width: 80vw;
		bottom: var(--space-3);
		gap: 6px;
	}

	/* Größenvorgabe über die BREITE statt wie zuvor über die Höhe: bei "aspect-ratio:16/9"
	   macht eine größere Höhe die Bilder überproportional viel breiter (16:9 ist deutlich
	   breiter als hoch) — dadurch passte zuletzt nur noch etwa ein Bild in die Leiste, statt
	   erkennbar mehrerer nebeneinander wie eine "Reihe". Breite in "vw" skaliert dagegen direkt
	   mit der (ebenfalls in "vw" begrenzten) Leistenbreite mit, wodurch unabhängig von der
	   genauen Bildschirmbreite immer mehrere Bilder gleichzeitig sichtbar bleiben. */
	.projektseite-hero-slider-thumb {
		height: auto;
		width: 22vw;
		max-width: 130px;
	}

	.projektseite-hero-slider-thumbs-pfeil {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}

	.projektseite-hero-stoerer {
		top: var(--space-4);
		right: var(--space-4);
		width: 135px;
		height: 135px;
		font-size: 17px;
	}
}