/* ==========================================================================
UGS Video Carousel — a plain CSS scroll-snap thumbnail strip (no Swiper/
Flickity) that opens a lightbox and plays the YouTube video in place.
Sharing the plugin's standard widget width via --ugs-widget-max-width
(see base.css) keeps this uniform with every other widget on the page.
========================================================================== */
.ugs-vc-carousel {
position: relative;
/* width: 100% (not just max-width) matters here: Elementor's widget
wrapper is very often itself a flex container (column-direction, for
the "flexbox" container layout Elementor now defaults to). A block
child with only max-width set and width left auto is NOT guaranteed
to stretch to fill a flex parent's cross axis once it also has
horizontal auto margins for centering — auto margins on a flex item
take priority over the parent's default align-items:stretch, so the
box was quietly shrinking to fit its own content (hence "100% doesn't
fill the widget, but typing 400 does" — 400 just happened to produce
a big enough shrink-to-fit content size to visually reach the max
width). Declaring width:100% up front removes that ambiguity — the
box always claims full available width, and max-width + the auto
margins below still cap and center it exactly as before. */
width: 100%;
max-width: var(--ugs-widget-max-width, 420px);
margin: 0 auto;
font-family: inherit;
}
.ugs-vc-carousel * {
box-sizing: border-box;
}
/* ---------- Track / slides ---------- */
.ugs-vc-track {
display: flex;
align-items: flex-start; /* not stretch — the slide's own aspect-ratio,
not the tallest sibling, decides its height; stretch is also what
let a theme's global flex/image resets fight the thumbnail's sizing
on some pages */
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px; /* room for the focus ring without clipping it */
margin: -2px;
/* The animation lives here in CSS rather than being passed as
{ behavior: 'smooth' } to element.scrollTo() in JS — see
video-widget.js's scrollToPos() for why: that options-object form is
the piece that was silently ignoring the very first programmatic
call on iOS Safari until the visitor had manually touched the strip
once. A plain .scrollLeft assignment, animated by this property
instead, doesn't have that restriction. */
scroll-behavior: smooth;
}
.ugs-vc-track::-webkit-scrollbar {
display: none;
}
/* Clones appended by video-widget.js for the seamless auto-scroll loop —
identical markup/styling to a real slide, just out of the tab order and
skipped by screen readers and the dot indicators. */
.ugs-vc-slide-clone {
pointer-events: none;
}
.ugs-vc-slide {
--ugs-vc-aspect: 16 / 9;
position: relative;
flex: 0 0 auto;
width: 100%;
aspect-ratio: var(--ugs-vc-aspect);
border-radius: 14px;
overflow: hidden;
scroll-snap-align: start;
background-color: #1a1a1a;
border: none;
padding: 0;
cursor: pointer;
display: block;
}
.ugs-vc-slide:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* A CSS background image, not an tag: themes very commonly ship a
global responsive-image reset (img { height: auto; max-width: 100%; })
for ordinary content images, and that silently defeats an 's own
object-fit: cover sizing — the image settles to its own aspect ratio
instead of filling the frame, which is what was leaving black bars top/
bottom. A background-image is never touched by an "img" selector, so
background-size: cover here is the one styling authority for how the
thumbnail fills its slide, full stop. */
.ugs-vc-thumb {
position: absolute;
inset: 0;
display: block;
background-color: #1a1a1a;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
transition: transform 0.4s ease;
}
.ugs-vc-slide:hover .ugs-vc-thumb {
transform: scale(1.04);
}
/* YouTube's own thumbnail JPEGs (hqdefault/sddefault/etc.) are rendered on
a fixed 4:3 canvas, and for any video that isn't natively 4:3 (i.e.
nearly everything), YouTube itself bakes real black bars into the image
pixels above and below the actual picture — that padding is part of the
photo, not something our CSS adds. background-size: cover already fixed
the Widescreen (16:9) case, because a 16:9 frame is *wider* than that
4:3 canvas, so covering it crops top and bottom far enough to cut the
baked-in bars away entirely. A 4:3 frame is the same aspect ratio as the
source image, so cover has nothing left to crop and the baked-in bars
render as-is; Square (1:1) is narrower than the image, so cover only
crops the sides and leaves the bars untouched too. For both of those,
we deliberately zoom in past "cover" so the crop reaches far enough
vertically to remove YouTube's padding — the user explicitly said
cropping further is an acceptable trade-off for a fully-filled frame. */
.ugs-vc-carousel[data-aspect="4-3"] .ugs-vc-thumb,
.ugs-vc-carousel[data-aspect="1-1"] .ugs-vc-thumb {
background-size: 148% !important;
}
@media (prefers-reduced-motion: reduce) {
.ugs-vc-thumb {
transition: none;
}
.ugs-vc-slide:hover .ugs-vc-thumb {
transform: none;
}
.ugs-vc-track {
scroll-behavior: auto;
}
}
.ugs-vc-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.55);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.ugs-vc-play-icon svg,
.ugs-vc-play-icon img {
width: 55%;
height: 55%;
}
.ugs-vc-play-icon i {
font-size: 55%;
line-height: 1;
}
/* Elementor's icon-library glyphs (both the webfont icons and the
inline