/* eclexys.com — stile dello slider della homepage.
 *
 * Le tre regole `.tp-caption.*` in fondo NON sono una reinterpretazione: sono la
 * trascrizione delle didascalie che stavano nella tabella `wp_revslider_css` di
 * Slider Revolution, che esce in Fase 5. Il tema non carica un proprio
 * `settings.css`, quindi senza queste righe i titoli perderebbero corpo,
 * colore e interlinea.
 *
 * Il nome di classe `tp-caption` è mantenuto perché è quello che il markup
 * usava e che eventuali regole del tema si aspettano.
 */

.eclexys-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Sostituita da JS con l'altezza scalata. Il valore qui è quello a piena
	   tela: senza, la pagina salterebbe fra il primo rendering e il primo
	   fotogramma di JS. */
	height: 600px;
}

.eclexys-slider__viewport {
	position: absolute;
	inset: 0;
}

.eclexys-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 300ms ease-in-out;
	pointer-events: none;
}

.eclexys-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* `cover` + `center top`: sono `bg_fit` e `bg_position` dello slider 3. */
.eclexys-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* La tela di progetto: 960 x 600, centrata, scalata da JS quando la finestra è
   più stretta. È il comportamento della modalità `fullwidth` dell'originale:
   le didascalie rimpiccioliscono insieme allo slider invece di traboccare. */
.eclexys-slider__grid {
	position: absolute;
	top: 0;
	left: 50%;
	width: 960px;
	height: 600px;
	transform: translateX(-50%) scale(var(--eclexys-slider-scale, 1));
	transform-origin: top center;
	pointer-events: none;
}

.eclexys-slider__grid .tp-caption {
	position: absolute;
	white-space: nowrap;
	pointer-events: auto;
}

/* Navigazione: `navigaion_align_vert = bottom`, `navigaion_offset_vert = 20`,
   `navigation_style = round`. */
.eclexys-slider__bullets {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.eclexys-slider__bullet {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 200ms ease-in-out;
}

.eclexys-slider__bullet:hover,
.eclexys-slider__bullet.is-active {
	background: #fff;
}

.eclexys-slider__bullet:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Chi ha chiesto meno animazioni non le riceve: le slide si sostituiscono
   senza dissolvenza. Lo scorrimento automatico lo ferma il JS. */
@media (prefers-reduced-motion: reduce) {
	.eclexys-slider__slide {
		transition: none;
	}
}

/* ── Le didascalie, da `wp_revslider_css` ─────────────────────────────────── */

.eclexys-slider__grid .tp-caption.mediumlightwhite4 {
	background-color: transparent;
	border: 0 none rgb(255, 214, 88);
	color: rgb(255, 255, 255);
	font-family: "Open Sans";
	font-size: 34px;
	font-weight: 300;
	line-height: 36px;
	padding: 0;
	text-decoration: none;
}

.eclexys-slider__grid .tp-caption.mediumlightwhite3 {
	background-color: transparent;
	border: 0 none rgb(255, 214, 88);
	color: rgb(255, 255, 255);
	font-family: "Open Sans";
	font-size: 28px;
	font-weight: 300;
	line-height: 36px;
	padding: 0;
	text-decoration: none;
}

.eclexys-slider__grid .tp-caption.mediumlightblack2 {
	background-color: transparent;
	border: 0 none rgb(255, 214, 88);
	color: rgb(0, 0, 0);
	font-family: "Open Sans";
	font-size: 28px;
	font-weight: 300;
	line-height: 36px;
	padding: 0;
	text-decoration: none;
}