/* Widget "Slider Lab591" (inc/widgets/class-slider-widget.php). */

.lab-slider {
	--lab-slider-accent: #5ac134;
	--lab-cursor-color: var(--lab-slider-accent);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 56px;
	min-height: 72vh;
}

/* Tutte le slide nella stessa cella: l'altezza è quella della slide più alta, niente salti.
   pan-y: lo scorrimento verticale resta alla pagina, quello orizzontale è lo swipe (slider.js). */
.lab-slider__track {
	display: grid;
	touch-action: pan-y;
	user-select: none;
}

.lab-slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
}

.lab-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.lab-slide__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex: 0 0 56%;
	max-width: 56%;
}

.lab-slide__eyebrow,
.lab-slide__title,
.lab-slide__intro {
	margin: 0;
}

.lab-slide__intro {
	max-width: 560px;
}

.lab-slider a.lab-slide__link {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	color: var(--lab-slider-accent);
	text-decoration: none;
}

.lab-slide__link svg {
	transition: transform .25s ease;
}

.lab-slide__link:hover svg {
	transform: translateX(4px);
}

.lab-slide__media {
	flex: 0 0 38%;
	max-width: 38%;
	aspect-ratio: 480 / 280;
}

/* Indicatore: una linea sottile per slide, con l'etichetta; la linea attiva si riempie. */
.lab-slider__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lab-nav-gap, 16px 32px);
}

/* Selettori rafforzati: lo stile dei bottoni del kit (verde pieno) non deve prevalere. */
.lab-slider button.lab-slider__dot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #9c9697;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	transition: color .25s ease;
}

.lab-slider button.lab-slider__dot:hover,
.lab-slider button.lab-slider__dot:focus-visible,
.lab-slider button.lab-slider__dot.is-active {
	color: #ffffff;
	background: none;
}

.lab-slider__label {
	display: var(--lab-nav-label, block);
}

/* Linea (con etichetta) o rettangolo (solo paginazione): controllo "Indicatore" del widget. */
.lab-slider__bar {
	position: relative;
	display: block;
	width: var(--lab-nav-bar-w, 72px);
	height: var(--lab-nav-bar-h, 2px);
	background: #403a3b;
	overflow: hidden;
}

.lab-slider__fill {
	position: absolute;
	inset: 0;
	width: 0;
	background: var(--lab-slider-accent);
}

.lab-slider__dot.is-active .lab-slider__fill {
	width: 100%;
}

.lab-slider__dot.is-running .lab-slider__fill {
	transition-property: width;
	transition-timing-function: linear;
}

/* Scrittura del titolo (classe lab-js messa dal tema nel <head>). */
.lab-js .lab-slider:not(.lab-slider--editor) .lab-slide__text {
	visibility: hidden;
}

.lab-slide__text .lab-ch.is-on,
.lab-slide.is-typed .lab-slide__text {
	visibility: visible;
}

.lab-js .lab-slider:not(.lab-slider--editor) .lab-slide__intro,
.lab-js .lab-slider:not(.lab-slider--editor) .lab-slide__link,
.lab-js .lab-slider:not(.lab-slider--editor) .lab-slide__media {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .7s ease, transform .7s ease;
}

.lab-js .lab-slider .lab-slide.is-typed .lab-slide__intro,
.lab-js .lab-slider .lab-slide.is-typed .lab-slide__link {
	opacity: 1;
	transform: none;
}

.lab-js .lab-slider .lab-slide.is-active .lab-slide__media {
	opacity: 1;
	transform: none;
}

.lab-slide__title .lab-heading__cursor {
	position: relative;
	display: inline-block;
	width: 0;
	height: 1em;
	visibility: visible;
	transition: opacity .4s ease;
}

.lab-slide__title .lab-heading__cursor::after {
	content: "";
	position: absolute;
	left: .04em;
	bottom: -.1em;
	width: .08em;
	height: 1em;
	background: var(--lab-cursor-color);
	animation: lab-blink 1s steps(1) infinite;
}

.lab-slide.is-typing .lab-heading__cursor::after {
	animation: none;
}

.lab-slide.is-typed .lab-heading__cursor {
	opacity: 0;
}

@keyframes lab-blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

/* Paracadute: senza JS entro 4 secondi si vede comunque la prima slide completa. */
.lab-js .lab-slider:not(.is-ready) .lab-slide.is-active .lab-slide__text {
	animation: lab-slider-show 0s 4s forwards;
}

.lab-js .lab-slider:not(.is-ready) .lab-slide.is-active .lab-slide__intro,
.lab-js .lab-slider:not(.is-ready) .lab-slide.is-active .lab-slide__link {
	animation: lab-slider-fade 0s 4s forwards;
}

@keyframes lab-slider-show {
	to { visibility: visible; }
}

@keyframes lab-slider-fade {
	to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.lab-slider {
		gap: 40px;
	}

	.lab-slide {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.lab-slide__content,
	.lab-slide__media {
		flex-basis: auto;
		max-width: 100%;
	}

	.lab-slide__media {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lab-slide,
	.lab-slide__intro,
	.lab-slide__link,
	.lab-slide__media {
		transition: none;
	}

	.lab-slide__title .lab-heading__cursor::after {
		animation: none;
	}
}

/* Nell'editor si vede solo la prima slide, ferma. */
.lab-slider--editor .lab-slide:not(:first-child) {
	display: none;
}