/**
 * JS Video Cards.
 *
 * The stack of talk thumbnails beside "Featured On The Motley Fool, Binance and
 * Swyftx" (Figma 22413:17537): wide stills with a play badge over each,
 * linking out to the recording.
 *
 * The badge is drawn rather than imaged — a circle and a triangle path — so it
 * takes its size and colours from controls and stays crisp at any scale. The
 * scrim under it is what keeps it readable over a busy still.
 *
 * Parallax: the design clips the column to a 512px window holding a 1241px
 * track, with 55px fades top and bottom. Here the window is a fixed height with
 * overflow hidden, the track translates under it from JS, and the fades are a
 * mask rather than gradient overlays so they work over any section background
 * instead of only over white. Below the tablet breakpoint, and for reduced
 * motion, the window releases its height and the cards return to a plain stack
 * — which is also what renders with no JavaScript.
 *
 * No outer padding is baked in — the Elementor container owns the gutters.
 */

.elementor-widget-js_video_cards {
	width: 100%;
}

.js-video-cards {
	--js-video-gap: 40px;
	--js-video-radius: 24px;
	--js-video-play-size: 50px;
	--js-video-play-bg: var(--js-color-white, #ffffff);
	--js-video-play-colour: var(--js-color-highlight, #b28b2c);
	--js-video-scrim: rgba(17, 24, 39, 0.15);
	--js-video-window: 512px;
	--js-video-fade: 55px;

	width: 100%;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-video-cards__window {
	position: relative;
	width: 100%;
}

/* The design's breathing room belongs to the track, not the wrapper: 96px above
   the first card and below the last, travelling with them inside the clipped
   window. On the wrapper it would sit outside the window and just push the
   whole strip down the page, which is not the same thing at all — the space
   would never scroll past.

   Desktop only, and in CSS rather than only on the widget's Padding control,
   because Elementor writes selector CSS from the values stored on a widget at
   save time: a default added after a page was built never reaches it. The
   control still overrides this. */
@media (min-width: 1025px) {
	.js-video-cards--parallax .js-video-cards__track {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

.js-video-cards__track {
	display: flex;
	flex-direction: column;
	gap: var(--js-video-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.js-video-cards *,
.js-video-cards *::before,
.js-video-cards *::after {
	box-sizing: border-box;
}



/* -------- Parallax drift -------- */

/* The window clips; the track inside it is translated by the script. The mask
   fades both edges — a mask rather than a gradient overlay, so the fade works
   over whatever the section's background happens to be. */
/* The two fades are separate, and the script sizes them from how far the track
   has actually travelled: none at the top until something is above the window,
   none at the bottom once the last card has arrived. A fade over an edge with
   nothing beyond it just dims the card that is sitting there — which is what
   the first card's top edge looked like at rest. */
.js-video-cards--parallax .js-video-cards__window {
	--js-video-fade-top: 0px;
	--js-video-fade-bottom: var(--js-video-fade);

	height: var(--js-video-window);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--js-video-fade-top),
		#000 calc(100% - var(--js-video-fade-bottom)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--js-video-fade-top),
		#000 calc(100% - var(--js-video-fade-bottom)),
		transparent 100%
	);
}

.js-video-cards--parallax .js-video-cards__track {
	will-change: transform;
}

/* Until the script has measured and positioned the track, the window shows the
   top of the stack — never a blank strip. */
.js-video-cards--parallax .js-video-cards__track:not([style]) {
	transform: none;
}

/* Below desktop the strip turns on its side. The desktop frame (22418:31172)
   scrolls the cards vertically down a 574px column; tablet (22418:31152) and
   mobile (22418:31119) lay them in a horizontal row instead — 342 wide on
   tablet, 320 on mobile, both on a 20px gap, both scrolled sideways with the
   next card cut off at the right.
   The parallax and its clipping window belong to the vertical strip, so both
   come off here. */
@media (max-width: 1024px) {
	/* Gap comes from the control's tablet default, not from here: Elementor
	   emits control values at a higher specificity than this stylesheet, so a
	   value set here would be overridden and look broken. */
	.js-video-cards {
		--js-video-card-width: 342px;

		/* Full bleed, like the carousel: a row the reader drags is not a block
		   of content, so the container's gutters do not apply and the cards run
		   to the screen edges where the mask below fades them. 50% is half the
		   padded container and 50vw half the screen, so the difference is one
		   gutter each side whatever that padding is. The theme clips the
		   document's horizontal overflow, so this adds no scrollbar. */
		width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	.js-video-cards--parallax .js-video-cards__window {
		height: auto;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.js-video-cards--parallax .js-video-cards__track {
		transform: none !important;
	}

	.js-video-cards__track {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		/* A fade over the card running off each edge — the row loops, so there
		   is one at both ends. The design draws it at 39 (tablet 22899:5361,
		   mobile 22899:5359), which over a card only partly out of view reads
		   as the artwork being dimmed rather than as an edge; 16 softens the
		   cut without touching the picture. */
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--js-video-fade-x, 16px),
			#000 calc(100% - var(--js-video-fade-x, 16px)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--js-video-fade-x, 16px),
			#000 calc(100% - var(--js-video-fade-x, 16px)),
			transparent 100%
		);
	}

	/* While the loop is being re-seated the snap points must not pull the
	   scroller back to where it was. */
	.js-video-cards__track.is-jumping {
		scroll-snap-type: none;
	}

	.js-video-cards__track::-webkit-scrollbar {
		display: none;
	}

	.js-video-cards__item {
		flex: 0 0 var(--js-video-card-width);
		/* Centre, not start: the row runs to both screen edges now, so a card
		   snapped flush left leaves a whole card cut on the right and nothing
		   on the left. Centred, the same amount of the neighbours shows each
		   side and the fades have equal work to do. */
		scroll-snap-align: center;
	}
}

@media (max-width: 767px) {
	.js-video-cards {
		--js-video-card-width: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-video-cards--parallax .js-video-cards__window {
		height: auto;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.js-video-cards--parallax .js-video-cards__track {
		transform: none !important;
	}
}

.js-video-cards__item {
	display: block;
}

.js-video-cards__card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--js-video-radius);
	text-decoration: none;
	line-height: 0;
}

.js-video-cards__thumb {
	display: block;
	width: 100%;
	height: auto;
}

/* The scrim sits between the still and the badge. */
.js-video-cards__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--js-video-scrim);
	transition: background-color 0.2s ease;
}

.js-video-cards__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--js-video-play-size);
	height: var(--js-video-play-size);
	border-radius: 50%;
	background-color: var(--js-video-play-bg);
	color: var(--js-video-play-colour);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

/* The player that replaces the thumbnail on a click. The card already clips to
   its radius, so the frame just fills it; the thumbnail stays underneath doing
   nothing but holding the box at the height it had. */
.js-video-cards__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.js-video-cards__card.is-playing .js-video-cards__thumb {
	visibility: hidden;
}

.js-video-cards__card.is-playing::after {
	display: none;
}

.js-video-cards__play svg {
	display: block;
	width: 55%;
	height: 55%;
	fill: currentColor;
}

@media (hover: hover) {
	a.js-video-cards__card:hover::after {
		background-color: transparent;
	}

	a.js-video-cards__card:hover .js-video-cards__play {
		transform: translate(-50%, -50%) scale(1.06);
	}
}

a.js-video-cards__card:focus-visible {
	outline: 2px solid var(--js-color-highlight, #b28b2c);
	outline-offset: 3px;
}

.js-video-cards__title {
	margin: 12px 0 0;
	color: var(--js-color-primary, #111827);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

@media (prefers-reduced-motion: reduce) {
	.js-video-cards__card::after,
	.js-video-cards__play {
		transition: none;
	}
}