/**
 * Video Carusell — franchising-success-stories section from franchising.html.
 * Scoped under .video-carusell-block so it does not leak to other templates.
 */

.video-carusell-block.franchising-success-stories {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 56px;
	padding: 100px 80px 80px;
	background: rgba(233, 247, 248, 0.7);
	width: 100%;
	box-sizing: border-box;
}

.video-carusell-block .franchising-success-header {
	text-align: center;
	width: 100%;
	max-width: 1280px;
	align-self: center;
}

.video-carusell-block .franchising-success-header .home-section-label {
	justify-content: center;
}

.video-carusell-block .franchising-success-header .home-section-label span {
	color: #0097a7;
	font-weight: 700;
}

/* Title/subtitle: shared .es-* rules in theme; extra vertical rhythm vs default margin:0 */
.video-carusell-block .franchising-success-header .es-section-title {
	margin: 16px 0;
}

.video-carusell-block .franchising-success-header .es-section-subtitle {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.video-carusell-block .franchising-video-carousel {
	width: 100%;
	max-width: 1144px;
	overflow: hidden;
	align-self: center;
}

.video-carusell-block .franchising-video-carousel-track {
	display: flex;
	gap: 99px;
	transition: transform 0.45s ease;
	transform: translateX(0);
}

.video-carusell-block .franchising-video-slide {
	flex: 0 0 313px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.video-carusell-block .franchising-video-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 313 / 186;
	overflow: hidden;
}

/* Fill the thumb area; iframe replaces content on play (matches hero-franchising embed). */
.video-carusell-block .franchising-video-thumb-wrap .video-embed-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
}

.video-carusell-block .video-embed-wrapper .franchising-video-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	display: block;
}

.video-carusell-block .franchising-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
	z-index: 2;
}

.video-carusell-block .franchising-video-play:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.video-carusell-block .franchising-video-play img {
	width: 48px;
	height: 34px;
	display: block;
}

.video-carusell-block .franchising-video-caption {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	font-style: italic;
	color: var(--smith-grey, #404a50);
	margin: 0;
}

.video-carusell-block .franchising-video-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1144px;
	align-self: center;
}

.video-carusell-block .franchising-video-dots {
	display: flex;
	gap: 8px;
}

.video-carusell-block .franchising-video-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: #d8d8d8;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s;
}

.video-carusell-block .franchising-video-dot.active {
	background: var(--orange, #e57440);
}

.video-carusell-block .franchising-video-arrows {
	display: flex;
	gap: 12px;
}

.video-carusell-block .franchising-video-arrow {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.video-carusell-block .franchising-video-arrow img {
	width: 15px;
	height: 11px;
	display: block;
}

@media (max-width: 1200px) {
	.video-carusell-block.franchising-success-stories {
		padding: 80px 48px 64px;
	}

	.video-carusell-block .franchising-video-slide {
		flex: 0 0 280px;
	}

	.video-carusell-block .franchising-video-carousel-track {
		gap: 60px;
	}
}

@media (max-width: 1024px) {
	.video-carusell-block.franchising-success-stories {
		padding: 64px 32px 56px;
		gap: 40px;
	}

	.video-carusell-block .franchising-video-slide {
		flex: 0 0 240px;
	}

	.video-carusell-block .franchising-video-carousel-track {
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.video-carusell-block.franchising-success-stories {
		padding: 48px 20px 40px;
	}

	.video-carusell-block .franchising-video-slide {
		flex: 0 0 100%;
	}

	.video-carusell-block .franchising-video-thumb-wrap {
		aspect-ratio: 16 / 9;
	}
}