/**
 * Campus - UI Swiper partagée (nav + pagination).
 * Chargé par les modules slider Campus (contenus, galerie, push, …).
 *
 * Boutons : `.campus-swiper-btn` (+ `--prev` / `--next`, + classes Swiper)
 * Overlay latéral : wrapper `.campus-swiper-nav--sides`
 * Barre sous le slider : `.campus-swiper-controls`
 * Bullets : `.campus-swiper-pagination` (masquée par défaut ; `.campus-swiper-pagination--visible` pour afficher)
 */

:root {
	--campus-swiper-btn-size: 48px;
	--campus-swiper-btn-bg: var(--color-cta, var(--wp--preset--color--accent-fluo, #c4f135));
	--campus-swiper-btn-color: var(--color-text, var(--wp--preset--color--neutral-ink, #1f1a14));
	--campus-swiper-bullet-size: 8px;
	--campus-swiper-bullet-gap: 8px;
	--campus-swiper-bullet-color: var(--color-border, var(--wp--preset--color--neutral-ash, #d9d4cc));
	--campus-swiper-bullet-active: var(--campus-swiper-btn-color);
}

@media (min-width: 1024px) {
	:root {
		--campus-swiper-btn-size: 56px;
	}
}

/* ——— Boutons prev / next ——— */
.campus-swiper-btn {
	box-sizing: border-box;
	width: var(--campus-swiper-btn-size);
	height: var(--campus-swiper-btn-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--campus-swiper-btn-bg);
	background-image: none;
	color: var(--campus-swiper-btn-color);
	box-shadow: none;
	cursor: pointer;
	transition: opacity 0.3s ease-in-out;
}

.campus-swiper-btn::after {
	font-size: 16px;
	font-weight: 700;
	color: inherit;
}

.campus-swiper-btn.swiper-button-disabled {
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

/* Nav en bas : flèches désactivées restent visibles (début / fin) */
.campus-swiper-controls .campus-swiper-btn.swiper-button-disabled {
	opacity: 0.5;
}

/* ——— Overlay latéral (ex. slider contenus / galerie) ———
 * Conteneur invisible centré (défaut 1240) : les flèches s’alignent sur ses bords
 * même en rangée BB pleine largeur. */
.campus-swiper-nav--sides {
	--campus-swiper-nav-container: var(--campus-wide-width, 1280px);

	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: var(--campus-swiper-nav-container);
	margin-inline: auto;
	pointer-events: none;
	box-sizing: border-box;
}

.campus-swiper-nav--sides .campus-swiper-btn {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.campus-swiper-nav--sides .campus-swiper-btn--prev,
.campus-swiper-nav--sides .campus-swiper-btn.swiper-button-prev {
	left: -8px;
	right: auto;
}

.campus-swiper-nav--sides .campus-swiper-btn--next,
.campus-swiper-nav--sides .campus-swiper-btn.swiper-button-next {
	right: -8px;
	left: auto;
}

/* ——— Barre sous le slider (ex. galerie) ——— */
.campus-swiper-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
	position: relative;
}

.campus-swiper-controls .campus-swiper-btn {
	position: static;
	transform: none;
	flex: 0 0 auto;
}

/* ——— Pagination bullets ——— */
.campus-swiper-pagination {
	position: static;
	width: auto;
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--campus-swiper-bullet-gap);
}

.campus-swiper-pagination.campus-swiper-pagination--visible {
	display: flex;
}

.campus-swiper-pagination .swiper-pagination-bullet {
	width: var(--campus-swiper-bullet-size);
	height: var(--campus-swiper-bullet-size);
	margin: 0;
	opacity: 1;
	background: var(--campus-swiper-bullet-color);
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.campus-swiper-pagination .swiper-pagination-bullet-active {
	background: var(--campus-swiper-bullet-active);
	transform: scale(1.15);
}