/* ==========================================================================
   VIDEO BLOCK - FRONTEND
   Supporto iframe (YouTube, Vimeo, etc.) e HTML5 video
   ========================================================================== */

.s4w-video {
	padding: 80px 0;
}

/* Container video con aspect ratio 16:9 */
.s4w-video__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--neutral-900);
	overflow: hidden;
	contain: layout; /* Performance: isola layout reflows */
}

/* Wrapper con copertina */
.s4w-video__wrapper--has-cover {
	cursor: pointer;
}

/* Video nascosto quando c'è la copertina */
.s4w-video__wrapper--has-cover .s4w-video__iframe,
.s4w-video__wrapper--has-cover .s4w-video__player {
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* Video visibile dopo il click (rimozione copertina) */
.s4w-video__wrapper--has-cover.is-playing .s4w-video__iframe,
.s4w-video__wrapper--has-cover.is-playing .s4w-video__player {
	opacity: 1;
}

/* Iframe (YouTube, Vimeo, etc.) */
.s4w-video__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* HTML5 Video */
.s4w-video__player {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Layout fullscreen (edge-to-edge) */
.s4w-video--fullscreen .s4w-video__wrapper {
	aspect-ratio: 16 / 9;
}

/* Focus states per accessibilità (keyboard navigation) */
.s4w-video__iframe:focus-visible,
.s4w-video__player:focus-visible {
	outline: 2px solid var(--color-blu);
	outline-offset: 2px;
	transition: outline-offset 0.2s ease;
}

/* Rimuovi outline su click mouse */
.s4w-video__iframe:focus:not(:focus-visible),
.s4w-video__player:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   COPERTINA VIDEO CON PLAY BUTTON
   ========================================================================== */

/* Copertina overlay */
.s4w-video__cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 1;
	transition: opacity 0.6s ease;
	pointer-events: auto;
}

/* Stato nascosto (dopo click) */
.s4w-video__cover.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* Immagine/GIF copertina */
.s4w-video__cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Play button centrato */
.s4w-video__play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 3;
	transition: transform 0.3s ease;
}

.s4w-video__play-button:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.s4w-video__play-button:active {
	transform: translate(-50%, -50%) scale(0.95);
}

/* Cerchio bianco del play button */
.s4w-video__play-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 102px;
	height: 102px;
	background-color: var(--bg-white-0);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s ease;
}

.s4w-video__play-button:hover .s4w-video__play-circle {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Testo PLAY (usa classe utility capital-large da tokens.css) */
.s4w-video__play-text {
	color: var(--text-main-900);
	user-select: none;
}

/* Focus accessibilità */
.s4w-video__play-button:focus-visible {
	outline: 2px solid var(--color-blu);
	outline-offset: 4px;
}

.s4w-video__play-button:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   RESPONSIVE - TABLET (<=1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.s4w-video {
		padding: 60px 0;
	}
}

/* ==========================================================================
   RESPONSIVE - MOBILE (<=768px)
   ========================================================================== */
@media (max-width: 768px) {
	.s4w-video {
		padding: 48px 0;
	}

	/* Aspect ratio rimane 16:9 anche su mobile */
	.s4w-video__wrapper {
		aspect-ratio: 16 / 9;
	}

	/* Play button leggermente più piccolo su mobile */
	.s4w-video__play-circle {
		width: 80px;
		height: 80px;
	}
}