/**
 * Video carousel. See template-parts/video-carousel.php. Styled to
 * match Drone Cinematography's "Watch It Fly" video row
 * (page-drone.css's .cwf-media-grid rules) per the client's explicit
 * request -- same dimensions/colors/typography, just with carousel
 * chrome (arrows, sliding track) added on top since this page has 12
 * videos to Drone's 3. Own component, not a tweak to gallery-
 * carousel.css/video-grid.css/page-drone.css directly -- kept
 * self-contained so none of those already-live files risk a
 * regression. Bare-element rules scoped, same reason as everywhere
 * else in this theme (see footer.css).
 */

.cwf-video-carousel {
	padding: 60px 56px 64px; /* top was 24px -- matches .cwf-gallery's own 60px bottom padding (the 3 gallery-carousel sections above this one on the Gallery page, this component's only user) so the new section-divider between them sits symmetrically, per the client's request. See MIGRATION.md. */
	background: var(--color-black);
	text-align: center;
}

.cwf-video-carousel .cwf-video-carousel__heading {
	max-width: 800px;
	margin: 0 auto 32px;
	font-family: var(--font-heading); /* Oswald, matches media-grid.php's heading */
	font-size: 32px;
	font-weight: 600;
	color: var(--color-white);
	text-align: center;
	overflow-wrap: break-word;
}

.cwf-video-carousel__carousel {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1328px;
	margin: 0 auto;
}

/* !important on background/color/border/outline below is justified,
   not decorative: the parent Hello Elementor theme's reset.css ships a
   sitewide `button{background-color:transparent;border:1px solid
   #c36;color:#c36}` / `button:focus,button:hover{background-color:
   #c36;color:#fff}` default (a dusty pink) -- confirmed a real,
   winning collision here (client screenshot: a solid pink square with
   a white focus-ring outline and white icon) despite this rule's
   higher class-specificity, same as the FAQ accordion's question
   buttons before that got the same treatment. See MIGRATION.md. */
.cwf-video-carousel .cwf-video-carousel__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	color: var(--color-white) !important; /* was always yellow (an earlier explicit client request) -- superseded by the client's later, sitewide request that every carousel's arrows use the same white/yellow-on-hover treatment, no exceptions. See MIGRATION.md. */
	cursor: pointer;
}
.cwf-video-carousel .cwf-video-carousel__arrow svg {
	width: 28px;
	height: 28px;
}
.cwf-video-carousel .cwf-video-carousel__arrow:hover,
.cwf-video-carousel .cwf-video-carousel__arrow:focus {
	background: transparent !important;
	color: var(--color-primary) !important;
	outline: none;
}
.cwf-video-carousel .cwf-video-carousel__arrow:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.cwf-video-carousel__viewport {
	flex: 1 1 auto;
	overflow: hidden;
}

.cwf-video-carousel__track {
	display: flex;
	gap: 16px; /* matches media-grid.php's row gap, not gallery-carousel's 20px */
	transition: transform 0.4s ease;
}

.cwf-video-carousel .cwf-video-carousel__slide {
	flex: 0 0 calc((100% - (var(--cwf-slides-per-view) - 1) * 16px) / var(--cwf-slides-per-view));
	min-width: 0;
}

.cwf-video-carousel__card {
	position: relative;
	background: var(--color-bg-dark-2); /* matches media-grid.php's tile fill, not video-showcase's dark-1 */
	border-radius: 8px; /* matches media-grid.php, not gallery-carousel's 10px */
	overflow: hidden;
}

.cwf-video-carousel .cwf-video-carousel__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--color-bg-dark-1);
}

@media (max-width: 900px) {
	.cwf-video-carousel {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-video-carousel .cwf-video-carousel__heading {
		font-size: clamp(22px, 6vw, 32px);
	}
	.cwf-video-carousel .cwf-video-carousel__slide {
		flex: 0 0 100%; /* 1 per view on mobile */
	}
}