/* Shorts Carousel for YouTube — front end
   Everything is scoped under .ysc and driven by custom properties that PHP
   writes onto the wrapper, so themes cannot bleed in and each carousel on a
   page can carry its own settings. */

.ysc {
	--ysc-accent: #ff0033;

	position: relative;
	margin: 0 0 1.75em;
	box-sizing: border-box;
}

.ysc *,
.ysc *::before,
.ysc *::after {
	box-sizing: inherit;
}

/* ---------- The scroller ---------- */

.ysc-track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Breathing room so hover lift and focus rings are not clipped. */
	padding: 6px;
	margin: -6px;
}

.ysc-track::-webkit-scrollbar {
	display: none;
}

.ysc-track:focus-visible {
	outline: 3px solid var(--ysc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The real width and gutter arrive from the shortcode's per-instance <style>
   block, or from Elementor's generated CSS. These are only a safety net so a
   card is never zero-sized. */
.ysc-item {
	flex: 0 0 62%;
	min-width: 120px;
	padding-right: 16px;
	scroll-snap-align: start;
}

/* ---------- Card ---------- */

.ysc-card {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #0d0d0d;
	cursor: pointer;
	isolation: isolate;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.ysc--shorts .ysc-card { aspect-ratio: 9 / 16; }
.ysc--wide .ysc-card { aspect-ratio: 16 / 9; }

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 9 / 16) {
	.ysc--shorts .ysc-card { height: 0; padding-bottom: 177.78%; }
	.ysc--wide .ysc-card { height: 0; padding-bottom: 56.25%; }
}

.ysc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.ysc-card:focus-visible {
	outline: 3px solid var(--ysc-accent);
	outline-offset: 3px;
}

.ysc-thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

/* YouTube only serves a 4:3 thumbnail for some Shorts. When that happens JS
   adds this class and we scale up so the pillarboxed centre strip fills the
   card instead of showing black bars. 480 / 202.5 = 2.37 */
.ysc-thumb.is-boxed {
	width: 237%;
	height: 100%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	object-fit: fill;
}

.ysc-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .42));
	transition: background .25s ease;
}

.ysc-card:hover .ysc-play {
	background: rgba(0, 0, 0, .12);
}

.ysc-play svg {
	width: 52px;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}

.ysc-play-bg {
	fill: #f00;
	transition: fill .2s ease;
}

.ysc-card:hover .ysc-play-bg {
	fill: #ff0033;
}

.ysc-card iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- Muted autoplay ---------- */

/* Taps belong to the card, not to YouTube's chrome, so one tap toggles sound
   instead of opening a menu. */
.ysc--autoplay .ysc-card iframe {
	pointer-events: none;
	z-index: 1;
}

.ysc--autoplay .ysc-card.is-playing .ysc-play {
	opacity: 0;
	pointer-events: none;
}

.ysc-sound {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	backdrop-filter: blur(4px);
}

.ysc-card.is-playing .ysc-sound { display: flex; }

.ysc-sound svg { width: 18px; height: 18px; }

.ysc-icon-loud { display: none; }

.ysc-card.is-unmuted .ysc-icon-muted { display: none; }
.ysc-card.is-unmuted .ysc-icon-loud { display: block; }

.ysc-caption {
	margin: .6em 0 0;
	font-size: .875em;
	line-height: 1.35;
	/* Two lines max, so uneven titles never break the row rhythm. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Arrows ---------- */

.ysc-nav {
	position: absolute;
	top: calc(50% - 22px);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	cursor: pointer;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .24);
	transition: opacity .2s ease, transform .2s ease;
}

.ysc-nav svg { width: 22px; height: 22px; }

.ysc-nav:hover { transform: scale(1.07); }

.ysc-nav:focus-visible {
	outline: 3px solid var(--ysc-accent);
	outline-offset: 2px;
}

.ysc-prev { left: -10px; }
.ysc-next { right: -10px; }

.ysc-nav[hidden] { display: none; }

.ysc-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* On touch screens people swipe, and edge arrows sit over the cards. */
@media (max-width: 599px) {
	.ysc-nav { display: none; }
}

/* ---------- Dots ---------- */

.ysc-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.ysc-dots:empty { display: none; }

.ysc-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: .28;
	cursor: pointer;
	transition: opacity .2s ease, width .2s ease, background .2s ease;
}

.ysc-dot:hover { opacity: .55; }

.ysc-dot[aria-selected="true"] {
	width: 22px;
	border-radius: 4px;
	background: var(--ysc-accent);
	opacity: 1;
}

.ysc-dot:focus-visible {
	outline: 2px solid var(--ysc-accent);
	outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.ysc-track { scroll-behavior: auto; }
	.ysc-card,
	.ysc-nav,
	.ysc-dot,
	.ysc-play,
	.ysc-play-bg { transition: none; }
	.ysc-card:hover { transform: none; }
	.ysc-nav:hover { transform: none; }
}