/**
 * Depeur Gallery — Layout & Styling
 *
 * Das Grid-Layout (rows/columns) wird von Swiper selbst gemanaged.
 * Hier nur die visuellen Aspekte + Responsive Höhen.
 *
 * Farbgebung: Nutzt Kadence Global Palette 2 (--global-palette2) für
 * Titel, Pfeile und Focus-Outline. Fallback auf currentColor, falls
 * das Theme die Variable nicht bereitstellt.
 */

/* ─────────────────────────────────────────
   Section-Wrapper für [depeur_gallery_sliders]
   ───────────────────────────────────────── */

.depeur-gallery-section {
	margin: 0 0 3rem 0;
}

.depeur-gallery-section:last-child {
	margin-bottom: 0;
}

.depeur-gallery-section__title {
	text-align: center;
	margin: 0 0 1.5rem 0;
	color: var(--global-palette2, currentColor);
	/* Font-Size/Weight erben vom Theme-h2 */
}

/* ─────────────────────────────────────────
   Gallery-Container — Flex-Layout:
   [← Pfeil] [Swiper-Grid] [→ Pfeil]
   ───────────────────────────────────────── */

.depeur-gallery {
	--depeur-arrow-space: 50px;
	position: relative;
	margin: 1rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.depeur-gallery .swiper {
	flex: 1 1 auto;
	min-width: 0; /* wichtig, damit flex-child nicht vom Content überbreit wird */
}

@media (max-width: 640px) {
	.depeur-gallery {
		--depeur-arrow-space: 30px;
		gap: 0.25rem;
	}
}

/* ─────────────────────────────────────────
   Grid-Kacheln
   ───────────────────────────────────────── */

.depeur-gallery__slide {
	height: calc((100% - var(--depeur-gap, 10px)) / var(--depeur-rows, 2));
	display: flex;
}

.depeur-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	line-height: 0; /* verhindert Baseline-Gap unter dem img */
	/* Keine Abrundungen */
}

.depeur-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.depeur-gallery__link:hover .depeur-gallery__img,
.depeur-gallery__link:focus-visible .depeur-gallery__img {
	transform: scale(1.06);
}

.depeur-gallery__link:focus-visible {
	outline: 2px solid var(--global-palette2, currentColor);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────
   Höhen des Sliders — per CSS-Vars überschreibbar
   ───────────────────────────────────────── */

.depeur-gallery .swiper {
	height: var(--depeur-gallery-height, 520px);
}

@media (max-width: 1024px) {
	.depeur-gallery .swiper {
		height: var(--depeur-gallery-height-md, 440px);
	}
}

@media (max-width: 640px) {
	.depeur-gallery .swiper {
		height: var(--depeur-gallery-height-sm, 360px);
	}
}

/* ─────────────────────────────────────────
   Navigation-Pfeile: außerhalb des Grids,
   nur Chevron ohne Kasten/Hintergrund

   Safari-Kompatibilität:
   - `appearance: none` + `-webkit-appearance: none` setzt den
     Button-User-Agent-Style zurück (Safari fügt sonst Padding/Border hinzu).
   - `display: flex` (explizit) + Zentrierung stellt sicher, dass das
     ::after-Pseudo-Element mit der Swiper-Icon-Font im Sichtbereich des
     Buttons gerendert wird. Ohne das lag es in Safari außerhalb.
   - `line-height: 1` verhindert, dass Safari's Default-Line-Height die
     Icon-Glyphe unter die Button-Unterkante drückt.
   - `flex-shrink: 0` ist für WebKit's Flex-Interpretation zuverlässiger
     als `flex: 0 0 auto` allein.
   ───────────────────────────────────────── */

.depeur-gallery .swiper-button-prev,
.depeur-gallery .swiper-button-next {
	/* Positionierung aufheben — wir nutzen Flex-Layout */
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;

	/* Flex-Verhalten (beide Syntaxen, WebKit zuverlässiger mit explizit) */
	flex: 0 0 auto;
	flex-shrink: 0;

	/* Feste Größen */
	width: var(--depeur-arrow-space);
	min-width: var(--depeur-arrow-space);
	height: 60px;

	/* Button-UA-Reset — Safari sonst mit internem Padding */
	-webkit-appearance: none;
	appearance: none;
	padding: 0;

	/* Eigenes Flex-Center für das ::after-Pseudo-Element (Safari-kritisch) */
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;

	color: var(--global-palette2, currentColor);
	background: transparent;
	box-shadow: none;
	border: none;

	transition: opacity 0.2s ease;
	cursor: pointer;
}

.depeur-gallery .swiper-button-prev:hover,
.depeur-gallery .swiper-button-next:hover {
	background: transparent;
	opacity: 0.65;
}

.depeur-gallery .swiper-button-prev::after,
.depeur-gallery .swiper-button-next::after {
	/* Swiper-Icon-Font explizit erzwingen — Safari erbt sonst gelegentlich
	   die Font-Family vom Button und rendert ein leeres/falsches Glyph,
	   weil "prev"/"next" in Standard-Fonts nicht existieren. */
	font-family: 'swiper-icons';
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	font-variant: initial;
	/* Sichtbarkeit erzwingen für den Fall, dass die Swiper-CSS-Kaskade
	   sie per visibility:hidden unterdrückt (kommt bei WebKit + Flex vor). */
	display: block;
}

.depeur-gallery .swiper-button-disabled {
	opacity: 0.2;
	cursor: not-allowed;
}

/* Wenn nur eine Seite existiert, setzt Swiper .swiper-button-lock und macht
   den Button normalerweise display:none — das würde das Grid breiter ziehen
   (Layout-Shift gegenüber Galerien mit mehreren Seiten). Wir halten den
   Platz reserviert und verstecken den Button nur visuell. */
.depeur-gallery .swiper-button-lock {
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
}

/* ─────────────────────────────────────────
   Pagination komplett ausblenden (keine Dots)
   ───────────────────────────────────────── */

.depeur-gallery .swiper-pagination {
	display: none;
}

/* ─────────────────────────────────────────
   PhotoSwipe-Caption
   ───────────────────────────────────────── */

.pswp__caption {
	padding: 0.5rem 1rem;
	color: #fff;
}