/* YouTube Channel Carousel
   Layout is driven by three custom properties set inline per instance:
   --ytcc-pv-d (desktop), --ytcc-pv-t (tablet), --ytcc-pv-m (mobile). */

.ytcc {
	--ytcc-pv: var(--ytcc-pv-d, 4);
	--ytcc-gap: 18px;
	--ytcc-radius: 14px;
	--ytcc-card: #ffffff;
	--ytcc-text: #14141b;
	--ytcc-muted: #6b6b7b;
	--ytcc-line: rgba(18, 18, 30, .08);
	--ytcc-shadow: 0 1px 2px rgba(18, 18, 30, .06), 0 8px 24px rgba(18, 18, 30, .08);
	--ytcc-shadow-hi: 0 2px 6px rgba(18, 18, 30, .08), 0 18px 40px rgba(18, 18, 30, .16);
	--ytcc-accent: #ff0033;
	--ytcc-btn: #ffffff;
	--ytcc-btn-text: #14141b;

	position: relative;
	margin: 28px 0;
	color: var(--ytcc-text);
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

.ytcc--theme-dark {
	--ytcc-card: #17171d;
	--ytcc-text: #f2f2f5;
	--ytcc-muted: #a2a2b0;
	--ytcc-line: rgba(255, 255, 255, .10);
	--ytcc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
	--ytcc-shadow-hi: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .6);
	--ytcc-btn: #24242c;
	--ytcc-btn-text: #f2f2f5;
}

/* In auto mode the wrapper must not force a text colour: the device
   preference says nothing about the colour of the page behind it, and anything
   sitting outside a card (heading, dots) has to stay readable on that page.
   Card interiors set their own colours against their own background. */
.ytcc--theme-auto {
	color: inherit;
}

@media (prefers-color-scheme: dark) {
	.ytcc--theme-auto {
		--ytcc-card: #17171d;
		--ytcc-text: #f2f2f5;
		--ytcc-muted: #a2a2b0;
		--ytcc-line: rgba(255, 255, 255, .10);
		--ytcc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
		--ytcc-shadow-hi: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .6);
		--ytcc-btn: #24242c;
		--ytcc-btn-text: #f2f2f5;
	}
}

/* ---------- heading ---------- */

.ytcc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
}

/* Scoped and pinned for the same reason as the navigation: themes style their
   headings, and this one has to stay the carousel's heading. */
.ytcc .ytcc__heading {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: inherit !important;
	font-size: clamp(18px, 2.2vw, 24px) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	letter-spacing: -.01em !important;
	line-height: 1.25 !important;
	text-align: left !important;
	text-transform: none !important;
	text-decoration: none !important;
	background: none !important;
	color: var(--ytcc-text) !important;
}

/* The heading sits directly on the page background. In auto mode the device
   preference says nothing about what colour that background actually is, so
   the heading follows the surrounding text instead of guessing. */
.ytcc--theme-auto .ytcc__heading {
	color: inherit !important;
}

.ytcc .ytcc__heading::before {
	content: none !important;
}

.ytcc .ytcc__heading::after {
	content: "" !important;
	display: block !important;
	width: 42px !important;
	height: 3px !important;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: var(--ytcc-accent) !important;
}

/* ---------- rail ---------- */

.ytcc__stage {
	position: relative;
}

.ytcc__viewport {
	overflow: hidden;
	border-radius: var(--ytcc-radius);
}

.ytcc__track {
	display: flex;
	gap: var(--ytcc-gap);
	margin: 0 !important;
	padding: 4px 2px 12px !important;
	list-style: none !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.ytcc__track::-webkit-scrollbar {
	display: none;
}

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

.ytcc.is-dragging .ytcc__track {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.ytcc.is-dragging .ytcc-card {
	transform: none !important;
}

.ytcc__slide {
	flex: 0 0 calc((100% - (var(--ytcc-pv) - 1) * var(--ytcc-gap)) / var(--ytcc-pv));
	max-width: calc((100% - (var(--ytcc-pv) - 1) * var(--ytcc-gap)) / var(--ytcc-pv));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	scroll-snap-align: start;
}

/* ---------- card ---------- */

.ytcc-card {
	height: 100%;
	background: var(--ytcc-card);
	border: 1px solid var(--ytcc-line);
	border-radius: var(--ytcc-radius);
	box-shadow: var(--ytcc-shadow);
	overflow: hidden;
	transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
	will-change: transform;
}

.ytcc-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.ytcc-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #0c0c11;
}

.ytcc--video .ytcc-card__media {
	aspect-ratio: 16 / 9;
}

.ytcc--shorts .ytcc-card__media {
	aspect-ratio: 9 / 16;
}

/* Fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 1) {
	.ytcc--video .ytcc-card__media {
		padding-top: 56.25%;
	}
	.ytcc--shorts .ytcc-card__media {
		padding-top: 177.78%;
	}
}

.ytcc-card__img,
.ytcc-card__blur {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	display: block;
}

/* Blurred copy behind the poster, so a letterboxed frame still fills the card. */
.ytcc-card__blur {
	object-fit: cover;
	transform: scale(1.25);
	filter: blur(22px) saturate(1.5);
	opacity: .6;
}

.ytcc--video .ytcc-card__blur {
	display: none;
}

.ytcc-card__img {
	object-fit: cover;
	object-position: center;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.ytcc--shorts .ytcc-card__img {
	object-fit: contain;
}

.ytcc-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 6, 12, .55) 0%, rgba(6, 6, 12, 0) 45%);
	opacity: 0;
	transition: opacity .3s ease;
}

.ytcc-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 58px;
	transform: translate(-50%, -50%) scale(.86);
	opacity: 0;
	transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
}

.ytcc-card__play svg {
	display: block;
	width: 100%;
	height: auto;
}

.ytcc-card__play .ytcc-play-bg {
	fill: var(--ytcc-accent);
}

.ytcc-card__tag {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 6px;
	border-radius: 5px;
	background: rgba(8, 8, 14, .82);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .01em;
}

.ytcc-card__tag--short {
	left: 8px;
	right: auto;
	top: 8px;
	bottom: auto;
	background: var(--ytcc-accent);
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .06em;
}

.ytcc-card__body {
	display: block;
	padding: 12px 13px 14px;
}

.ytcc-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.005em;
	color: var(--ytcc-text);
}

.ytcc-card__meta {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--ytcc-muted);
}

@media (hover: hover) {
	.ytcc-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--ytcc-shadow-hi);
	}
	.ytcc-card:hover .ytcc-card__img {
		transform: scale(1.05);
	}
	.ytcc-card:hover .ytcc-card__play {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	.ytcc-card:hover .ytcc-card__shade {
		opacity: 1;
	}
}

.ytcc-card__link:focus-visible {
	outline: 3px solid var(--ytcc-accent);
	outline-offset: 3px;
	border-radius: var(--ytcc-radius);
}

/* ---------- navigation ----------

   The arrows and the dots are <button> elements, and themes style buttons
   hard: their own colours, fonts, padding, uppercase text, borders, even
   !important. Everything here is therefore scoped under .ytcc, which outranks
   the usual theme selectors, and the properties a theme is likely to claim are
   pinned so the controls keep the carousel's look on any site. Nothing outside
   the carousel is touched. */

.ytcc .ytcc__arrow,
.ytcc .ytcc__dot {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	font: inherit !important;
	font-size: 0 !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	float: none !important;
	cursor: pointer !important;
}

.ytcc .ytcc__arrow {
	position: absolute !important;
	top: 50%;
	z-index: 3;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	transform: translateY(-50%) !important;
	border: 1px solid var(--ytcc-line) !important;
	border-radius: 50% !important;
	background: var(--ytcc-btn) !important;
	color: var(--ytcc-btn-text) !important;
	box-shadow: var(--ytcc-shadow-hi) !important;
	opacity: 1;
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
}

.ytcc .ytcc__arrow svg {
	display: block;
	width: 20px !important;
	height: 20px !important;
	fill: none;
	stroke: currentColor;
}

.ytcc .ytcc__arrow--prev {
	left: -14px;
	right: auto;
}

.ytcc .ytcc__arrow--next {
	right: -14px;
	left: auto;
}

.ytcc .ytcc__arrow:hover,
.ytcc .ytcc__arrow:focus,
.ytcc .ytcc__arrow:active {
	border-color: var(--ytcc-line) !important;
	background: var(--ytcc-btn) !important;
	color: var(--ytcc-btn-text) !important;
	box-shadow: var(--ytcc-shadow-hi) !important;
}

.ytcc .ytcc__arrow:hover {
	transform: translateY(-50%) scale(1.07) !important;
}

.ytcc .ytcc__arrow:focus:not(:focus-visible) {
	outline: none !important;
}

.ytcc .ytcc__arrow:focus-visible {
	outline: 3px solid var(--ytcc-accent) !important;
	outline-offset: 2px !important;
}

.ytcc .ytcc__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.ytcc .ytcc__arrow[hidden] {
	display: none !important;
}

/* Shorts rails are tall - keep the arrow beside the poster, not the whole card. */
.ytcc--shorts .ytcc__arrow {
	top: 42%;
}

/* ---------- dots ---------- */

.ytcc .ytcc__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 12px;
	color: var(--ytcc-muted);
}

/* Same reasoning as the heading - these sit on the page, not on a card. */
.ytcc--theme-auto .ytcc__dots {
	color: inherit !important;
	opacity: .7;
}

.ytcc .ytcc__dots:empty {
	display: none;
}

.ytcc .ytcc__dot {
	width: 8px !important;
	height: 8px !important;
	border-radius: 999px !important;
	/* A button does not inherit colour on its own - the UA stylesheet gives it
	   one, and that flips to white in dark mode. Inherit explicitly so
	   currentColor is the colour set on .ytcc__dots. */
	color: inherit !important;
	background: currentColor !important;
	opacity: .35;
	transition: width .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, background .3s ease;
}

.ytcc .ytcc__dot:hover,
.ytcc .ytcc__dot:focus,
.ytcc .ytcc__dot:active {
	background: currentColor !important;
}

.ytcc .ytcc__dot.is-active,
.ytcc .ytcc__dot.is-active:hover,
.ytcc .ytcc__dot.is-active:focus {
	width: 22px !important;
	opacity: 1;
	background: var(--ytcc-accent) !important;
}

.ytcc .ytcc__dot:focus:not(:focus-visible) {
	outline: none !important;
}

.ytcc .ytcc__dot:focus-visible {
	outline: 2px solid var(--ytcc-accent) !important;
	outline-offset: 3px !important;
}

/* ---------- lightbox ---------- */

.ytcc-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(6, 6, 12, .88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .25s ease;
}

/* A class-level display beats the browser's own [hidden] rule, so the closed
   overlay would otherwise stay put as an invisible sheet over the page and
   swallow every click and swipe. These two rules keep it out of the way. */
.ytcc-lb[hidden] {
	display: none !important;
}

.ytcc-lb:not(.is-open) {
	pointer-events: none;
}

.ytcc-lb.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ytcc-lb__frame {
	position: relative;
	z-index: 1;
	width: min(1040px, 100%);
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 48px);
	/* On a short screen the height cap would otherwise stretch the player and
	   push it under the close button; capping the width keeps the ratio. */
	max-width: calc((100vh - 48px) * 16 / 9);
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
	transform: scale(.94);
	opacity: 0;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

.ytcc-lb.is-open .ytcc-lb__frame {
	transform: scale(1);
	opacity: 1;
}

.ytcc-lb--short .ytcc-lb__frame {
	width: min(420px, 100%);
	aspect-ratio: 9 / 16;
	max-width: calc((100vh - 48px) * 9 / 16);
}

.ytcc-lb__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.ytcc-lb__close {
	position: absolute;
	top: 18px;
	right: 18px;
	/* Must stay above the player - it is painted after this button. */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.ytcc-lb__close:hover {
	background: rgba(255, 255, 255, .24);
	transform: scale(1.06);
}

.ytcc-lb__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

html.ytcc-lb-open {
	overflow: hidden;
}

/* ---------- breakpoints ---------- */

@media (max-width: 1024px) {
	.ytcc {
		--ytcc-pv: var(--ytcc-pv-t, 3);
	}
	.ytcc__arrow--prev {
		left: 4px;
	}
	.ytcc__arrow--next {
		right: 4px;
	}
}

@media (max-width: 640px) {
	.ytcc {
		--ytcc-pv: var(--ytcc-pv-m, 1.5);
		--ytcc-gap: 12px;
		margin: 20px 0;
	}
	/* Swipe is the control on touch, so the arrows step aside. */
	.ytcc .ytcc__arrow {
		display: none !important;
	}
	.ytcc__viewport {
		overflow: visible;
	}
	.ytcc-card__title {
		font-size: 13.5px;
	}
	.ytcc-card__meta {
		font-size: 11.5px;
	}
	.ytcc-card__body {
		padding: 10px 10px 12px;
	}
	.ytcc-card__play {
		width: 46px;
	}
	.ytcc-lb {
		padding: 12px;
	}
}

.ytcc-error {
	padding: 10px 14px;
	border-left: 4px solid #ff0033;
	background: #fff4f4;
	color: #7a1020;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.ytcc *,
	.ytcc-lb * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.ytcc__track {
		scroll-behavior: auto;
	}
}