/* =============================================================================
   Video Showcase Widget — Styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------------- */

.vsw-widget {
	width: 100%;
}

/* Default aspect ratio (16/9). Overridden by Elementor selector. */
.vsw-video-wrapper,
.vsw-thumb-img-wrap {
	aspect-ratio: 16/9;
}

/* Generic video wrapper */
.vsw-video-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #000;
}

/* Iframe inside any video wrapper */
.vsw-video-wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* -----------------------------------------------------------------------------
   Desktop layout  (2-column grid)
   ----------------------------------------------------------------------------- */

.vsw-desktop {
	display: grid;
	grid-template-columns: 70% 1fr;
	gap: 16px;
	align-items: start;
}

.vsw-mobile {
	display: none;
}

/* Main column */
.vsw-main {
	display: flex;
	flex-direction: column;
}

.vsw-main-title {
	margin: 12px 0 0;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.4;
}

/* ----- Main player: click-to-play ----- */

.vsw-main-player {
	cursor: pointer;
}

/* Cover image */
.vsw-main-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}

/* Play button overlay */
.vsw-main-play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	width: 100%;
	height: 100%;
	padding: 0;
	z-index: 2;
	transition: transform 0.2s ease;
}

/* Hover na głównym playerze tylko gdy jest własna okładka */
.vsw-main-play-btn:hover {
	transform: none;
}

.vsw-main-player.vsw-has-custom-thumb .vsw-main-play-btn:hover {
	transform: scale( 1.04 );
}

.vsw-main-play-btn svg {
	width: 80px;
	height: 56px;
	filter: drop-shadow( 0 2px 8px rgba( 0, 0, 0, 0.4 ) );
}

/* Playing state — hide cover/button, show iframe */
.vsw-main-player.vsw-playing .vsw-main-cover,
.vsw-main-player.vsw-playing .vsw-main-play-btn {
	display: none;
}

.vsw-main-player.vsw-playing iframe {
	display: block;
}

/* Iframe hidden by default in main player (injected by JS) */
.vsw-main-player iframe {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sidebar column */
.vsw-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Active sidebar item hidden (it's the current main video) */
.vsw-thumb--active {
	display: none;
}

/* Thumbnail button */
.vsw-thumb {
	display: flex;
	flex-direction: column;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: opacity 0.2s ease;
}

.vsw-thumb:hover {
	opacity: 0.8;
}

/* Thumbnail image wrapper */
.vsw-thumb-img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.vsw-thumb-img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Play icon */
.vsw-play-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	pointer-events: none;
	transition: transform 0.2s ease;
}

.vsw-play-icon svg {
	width: 32px;
	height: 32px;
	filter: drop-shadow( 0 1px 4px rgba( 0, 0, 0, 0.6 ) );
}

.vsw-thumb:hover .vsw-play-icon {
	transform: scale( 1.1 );
}

/* Thumbnail title */
.vsw-thumb-title {
	margin: 8px 0 0;
	font-size: 0.875em;
	line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   Mobile layout — horizontal carousel
   ----------------------------------------------------------------------------- */

@media ( max-width: 767px ) {

	.vsw-desktop {
		display: none;
	}

	.vsw-mobile {
		display: block;
	}

	/* Carousel track */
	.vsw-carousel {
		display: flex;
		flex-direction: row;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding-bottom: 6px;
		scrollbar-width: none; /* Firefox */
	}

	.vsw-carousel::-webkit-scrollbar {
		display: none; /* Chrome / Safari */
	}

	/* Single carousel item */
	.vsw-carousel-item {
		flex: 0 0 85%;
		scroll-snap-align: start;
		display: flex;
		flex-direction: column;
	}

	/* Click-to-play wrapper */
	.vsw-click-to-play {
		cursor: pointer;
	}

	/* Thumbnail image in carousel */
	.vsw-carousel-thumb {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* YouTube-style play button */
	.vsw-carousel-play-btn {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		cursor: pointer;
		width: 100%;
		height: 100%;
		padding: 0;
		transition: transform 0.2s ease;
	}

	.vsw-carousel-play-btn:hover {
		transform: scale( 1.04 );
	}

	.vsw-carousel-play-btn svg {
		width: 56px;
		height: 40px;
		filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, 0.4 ) );
	}

	/* Carousel title */
	.vsw-carousel-title {
		margin: 8px 0 0;
		font-size: 0.9em;
		line-height: 1.4;
	}

	/* Playing state — hide thumbnail/button, show iframe */
	.vsw-click-to-play.vsw-playing .vsw-carousel-thumb,
	.vsw-click-to-play.vsw-playing .vsw-carousel-play-btn {
		display: none;
	}

	.vsw-click-to-play.vsw-playing iframe {
		display: block;
	}

	/* Iframe hidden by default in mobile (injected by JS) */
	.vsw-click-to-play iframe {
		display: none;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

}