/* Video Testimonial Carousel styles */

.vtc-wrap {
	width: 100%;
	box-sizing: border-box;
}

.vtc-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	padding: 4px 2px 12px;
	list-style: none;
	margin: 0;
}
.vtc-track::-webkit-scrollbar { display: none; }
.vtc-track.vtc-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* Portrait video cards. 2 per row on mobile, more as viewport grows. */
.vtc-item {
	position: relative;
	flex: 0 0 auto;
	width: calc((100% - 16px) / 2);
	aspect-ratio: 9 / 16;
	border-radius: 16px;
	overflow: hidden;
	background: #dcdcdc;
	scroll-snap-align: start;
	cursor: pointer;
}

@media (min-width: 640px) {
	.vtc-item { width: calc((100% - 2 * 16px) / 3); }
}
@media (min-width: 900px) {
	.vtc-item { width: calc((100% - 3 * 16px) / 4); }
}
@media (min-width: 1200px) {
	.vtc-item { width: calc((100% - 4 * 16px) / 5); }
}

.vtc-frame-holder {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #d9d9d9;
}

.vtc-preview-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none; /* clicks pass through to the card */
	z-index: 1;
}

/* Plain thumbnail shown on top of the iframe until playback actually starts —
   masks YouTube's own thumbnail/play-button/title flash during load. */
.vtc-poster {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-size: cover;
	background-position: center;
	background-color: #d9d9d9;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.vtc-poster-hide {
	opacity: 0;
}

/* Invisible click target only — the video is already auto-playing, so no play icon is shown. */
.vtc-play-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 5;
}

/* Fullscreen click-to-play modal */
.vtc-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 999999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.vtc-modal.vtc-modal-open { display: flex; }

.vtc-modal-inner {
	position: relative;
	width: min(92vw, 480px);
	aspect-ratio: 9 / 16;
	max-height: 92vh;
}

.vtc-modal-video,
.vtc-modal-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
}

.vtc-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	z-index: 10;
	transition: background 0.15s ease;
}
.vtc-modal-close:hover,
.vtc-modal-close:focus {
	background: rgba(0, 0, 0, 0.8);
	outline: none;
}