/**
 * Blaze YouTube Carousel — front-end styles.
 *
 * Every colour and size is a custom property, so a theme can override any of
 * them with `.bzyc { --bzyc-accent: #ff0; }` without touching this file.
 */

.bzyc {
	--bzyc-gap: 34px;
	--bzyc-per-view: 3;

	--bzyc-card-bg: #1f1f1f;
	--bzyc-card-border: #2c2c2c;
	--bzyc-card-radius: 0px;
	--bzyc-card-padding: 22px 24px 26px;

	/* Base font stack. Every text element below inherits from this unless you
	   override the more specific variable. */
	--bzyc-font: neue-haas-unica, Arial, sans-serif;

	--bzyc-title-color: #ffffff;
	--bzyc-title-hover: var(--bzyc-accent);
	--bzyc-title-size: 19px;
	--bzyc-title-weight: 500;
	--bzyc-title-line: 1.3;
	--bzyc-title-spacing: 0;
	--bzyc-title-transform: none;
	--bzyc-title-font: var(--bzyc-font);

	--bzyc-text-color: #b0b0b0;
	--bzyc-text-size: 15px;
	--bzyc-text-line: 1.6;
	--bzyc-text-weight: 400;
	--bzyc-text-font: var(--bzyc-font);

	--bzyc-accent: #f5a623;
	--bzyc-accent-hover: #ffb845;
	--bzyc-accent-text: #101010;
	--bzyc-btn-font: neue-haas-unica, Arial, sans-serif;
	--bzyc-btn-size: 15px;
	--bzyc-btn-weight: 500;
	--bzyc-btn-padding: 15px 32px;
	--bzyc-btn-radius: 0px;
	--bzyc-btn-spacing: 0.12em;
	--bzyc-btn-transform: uppercase;

	--bzyc-actions-gap: 48px;
	--bzyc-mobile-slide: 88%;

	--bzyc-dot-size: 8px;
	--bzyc-dot-active-width: 26px;
	--bzyc-dot-gap: 8px;
	--bzyc-dot-color: rgba(255, 255, 255, 0.28);
	--bzyc-dot-hover: rgba(255, 255, 255, 0.5);
	--bzyc-dots-gap: 22px;

	--bzyc-duration: 550ms;
	--bzyc-ease: cubic-bezier(0.4, 0, 0.2, 1);

	position: relative;
	width: 100%;
}

.bzyc *,
.bzyc *::before,
.bzyc *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- stage */

.bzyc-stage {
	position: relative;
}

.bzyc-viewport {
	overflow: hidden;
}

/* Forced: the shortcode usually lands inside .entry-content, where theme rules
   for ul / li (bullets, left padding, margins) would otherwise break the row. */
.bzyc .bzyc-track {
	display: flex !important;
	align-items: stretch !important;
	gap: var(--bzyc-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	transition: transform var(--bzyc-duration) var(--bzyc-ease);
	will-change: transform;
}

.bzyc-track.bzyc-no-anim {
	transition: none;
}

.bzyc .bzyc-slide {
	display: flex !important;
	/* Left un-forced so the mobile scroll mode can widen these. */
	flex: 0 0 calc((100% - (var(--bzyc-per-view) - 1) * var(--bzyc-gap)) / var(--bzyc-per-view));
	width: calc((100% - (var(--bzyc-per-view) - 1) * var(--bzyc-gap)) / var(--bzyc-per-view));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-indent: 0 !important;
	background: none !important;
}

.bzyc .bzyc-slide::before,
.bzyc .bzyc-slide::after {
	content: none !important;
	display: none !important;
}

.bzyc .bzyc-slide::marker {
	content: "";
}

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

.bzyc .bzyc-card {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--bzyc-card-bg) !important;
	border: 1px solid var(--bzyc-card-border) !important;
	border-radius: var(--bzyc-card-radius) !important;
	box-shadow: none !important;
	overflow: hidden;
}

/* Thumbnail — a blurred, dimmed "cover" backdrop with the real thumbnail
   contained on top, so portrait posters and 16:9 frames both sit nicely. */
.bzyc .bzyc-thumb {
	position: relative;
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 16 / 9;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #000 !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

@supports not (aspect-ratio: 16 / 9) {
	.bzyc-thumb {
		height: 0;
		padding-top: 56.25%;
	}
}

.bzyc-thumb-bg {
	position: absolute;
	top: -8%;
	right: -8%;
	bottom: -8%;
	left: -8%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(14px) grayscale(1) brightness(0.5);
	transform: scale(1.12);
}

/* Forced height: many themes ship `img { height: auto !important }`, which
   would collapse this absolutely-positioned thumbnail. */
.bzyc .bzyc-thumb-img {
	position: absolute;
	top: 0;
	left: 0;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
	object-position: center center;
	transition: transform var(--bzyc-duration) var(--bzyc-ease);
}

.bzyc-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 68px;
	height: 48px;
	pointer-events: none;
	transition: transform 200ms var(--bzyc-ease);
}

.bzyc-play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bzyc-play-bg {
	fill: #ff0000;
	fill-opacity: 0.93;
	transition: fill-opacity 200ms linear;
}

.bzyc-play-icon {
	fill: #ffffff;
}

.bzyc-thumb:hover .bzyc-play,
.bzyc-thumb:focus-visible .bzyc-play {
	transform: translate(-50%, -50%) scale(1.08);
}

.bzyc-thumb:hover .bzyc-play-bg,
.bzyc-thumb:focus-visible .bzyc-play-bg {
	fill-opacity: 1;
}

.bzyc-thumb:hover .bzyc-thumb-img {
	transform: scale(1.03);
}

.bzyc-thumb:focus-visible,
.bzyc-title-btn:focus-visible,
.bzyc-arrow:focus-visible,
.bzyc-btn:focus-visible {
	outline: 2px solid var(--bzyc-accent);
	outline-offset: 2px;
}

/* The viewport clips overflow, so draw the thumbnail's ring inside it. */
.bzyc-thumb:focus-visible {
	outline-offset: -3px;
}

/* Card text */
.bzyc .bzyc-body {
	padding: var(--bzyc-card-padding) !important;
	margin: 0 !important;
	background: none !important;
}

/* Themes routinely style h3 / p / button / a with high specificity or their own
   !important rules, which silently rewrote the card typography. Every visual
   property below is therefore forced. The custom properties still work as the
   override mechanism: change the variable, not the declaration. */
.bzyc .bzyc-card-title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	color: var(--bzyc-title-color) !important;
	font-family: var(--bzyc-title-font) !important;
	font-size: var(--bzyc-title-size) !important;
	font-weight: var(--bzyc-title-weight) !important;
	font-style: normal !important;
	line-height: var(--bzyc-title-line) !important;
	letter-spacing: var(--bzyc-title-spacing) !important;
	text-transform: var(--bzyc-title-transform) !important;
	text-align: left !important;
}

.bzyc .bzyc-title-btn {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-align: left !important;
	text-transform: inherit !important;
	text-decoration: none !important;
	text-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bzyc .bzyc-title-btn:hover,
.bzyc .bzyc-title-btn:focus {
	color: var(--bzyc-title-hover) !important;
	background: none !important;
	text-decoration: none !important;
}

.bzyc .bzyc-card-text {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--bzyc-text-color) !important;
	font-family: var(--bzyc-text-font) !important;
	font-size: var(--bzyc-text-size) !important;
	font-weight: var(--bzyc-text-weight) !important;
	font-style: normal !important;
	line-height: var(--bzyc-text-line) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: left !important;
}

/* --------------------------------------------------------------- arrows */

.bzyc .bzyc-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	min-width: 0 !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.6) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms linear, background 200ms linear;
	-webkit-appearance: none;
	appearance: none;
}

.bzyc .bzyc-arrow[hidden] {
	display: none !important;
}

.bzyc-arrow svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.bzyc-arrow--prev {
	left: 10px;
}

.bzyc-arrow--next {
	right: 10px;
}

.bzyc .bzyc-arrow:hover {
	background: var(--bzyc-accent) !important;
	border-color: var(--bzyc-accent) !important;
	color: var(--bzyc-accent-text) !important;
}

.bzyc:hover .bzyc-arrow,
.bzyc:focus-within .bzyc-arrow {
	opacity: 1;
}

/* Touch devices never hover, so keep the arrows visible there. */
@media (hover: none) {
	.bzyc-arrow {
		opacity: 1;
	}
}

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

/* Mobile-only pill navigation. Hidden (and therefore unfocusable) elsewhere. */
.bzyc .bzyc-dots {
	display: none !important;
}

.bzyc .bzyc-dot {
	position: relative;
	display: block !important;
	flex: 0 0 auto;
	width: var(--bzyc-dot-size) !important;
	min-width: 0 !important;
	height: var(--bzyc-dot-size) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--bzyc-dot-color) !important;
	background-image: none !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width 300ms var(--bzyc-ease), background 300ms linear;
}

/* Invisible 44px hit area over an 8px dot. */
.bzyc .bzyc-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.bzyc .bzyc-dot.is-active {
	width: var(--bzyc-dot-active-width) !important;
	background: var(--bzyc-accent) !important;
}

.bzyc .bzyc-dot:not(.is-active):hover {
	background: var(--bzyc-dot-hover) !important;
}

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

@media (max-width: 700px) {
	.bzyc .bzyc-dots {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: var(--bzyc-dot-gap);
		margin: var(--bzyc-dots-gap) 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bzyc .bzyc-dot {
		transition: none;
	}
}

/* -------------------------------------------------------------- CTA row */

.bzyc-actions {
	margin-top: var(--bzyc-actions-gap);
	text-align: center;
}

.bzyc .bzyc-btn,
.bzyc a.bzyc-btn {
	display: inline-block !important;
	padding: var(--bzyc-btn-padding) !important;
	border: 0 !important;
	border-radius: var(--bzyc-btn-radius) !important;
	background: var(--bzyc-accent) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--bzyc-accent-text) !important;
	font-family: var(--bzyc-btn-font) !important;
	font-size: var(--bzyc-btn-size) !important;
	font-weight: var(--bzyc-btn-weight) !important;
	font-style: normal !important;
	line-height: 1.1 !important;
	letter-spacing: var(--bzyc-btn-spacing) !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: var(--bzyc-btn-transform) !important;
	text-shadow: none !important;
	transition: background 200ms linear, color 200ms linear;
}

.bzyc .bzyc-btn:hover,
.bzyc .bzyc-btn:focus,
.bzyc a.bzyc-btn:hover,
.bzyc a.bzyc-btn:focus {
	background: var(--bzyc-accent-hover) !important;
	color: var(--bzyc-accent-text) !important;
	text-decoration: none !important;
}

/* ------------------------------------------------------------- notices */

.bzyc-notice {
	padding: 12px 16px;
	border-left: 3px solid #f5a623;
	background: rgba(245, 166, 35, 0.08);
	color: #b0b0b0;
	font-size: 14px;
}

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

/* Tablet — two columns. */
@media (max-width: 1024px) {
	.bzyc {
		--bzyc-per-view: 2;
		--bzyc-gap: 26px;
	}
}

/* Mobile — one column, native horizontal scrolling. */
@media (max-width: 700px) {
	.bzyc {
		--bzyc-per-view: 1;
		--bzyc-gap: 18px;
		--bzyc-actions-gap: 34px;
	}
}

.bzyc.is-scroll .bzyc-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bzyc.is-scroll .bzyc-viewport::-webkit-scrollbar {
	display: none;
}

.bzyc.is-scroll .bzyc-track {
	transform: none !important;
	transition: none;
}

.bzyc.is-scroll .bzyc-slide {
	flex: 0 0 var(--bzyc-mobile-slide);
	width: var(--bzyc-mobile-slide);
	scroll-snap-align: center;
}

.bzyc.is-scroll .bzyc-arrow {
	display: none;
}

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

.bzyc-lb {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.bzyc-lb[hidden] {
	display: none;
}

.bzyc-lb-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.9);
	border: 0;
	padding: 0;
	cursor: pointer;
	animation: bzyc-fade 200ms ease both;
}

.bzyc-lb-inner {
	position: relative;
	width: 100%;
	max-width: 1120px;
	animation: bzyc-pop 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.bzyc-lb-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

@supports not (aspect-ratio: 16 / 9) {
	.bzyc-lb-frame {
		height: 0;
		padding-top: 56.25%;
	}
}

.bzyc-lb-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.bzyc-lb-close {
	position: absolute;
	top: -46px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	/* Forced so a theme's button colour cannot make the X invisible. The
	   :hover rule is more specific, so it still wins. */
	color: #fff !important;
	cursor: pointer;
	transition: color 150ms linear, background 150ms linear;
	-webkit-appearance: none;
	appearance: none;
}

.bzyc-lb-close svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.bzyc-lb-close:hover,
.bzyc-lb-close:focus-visible {
	background: var(--bzyc-accent, #f5a623) !important;
	color: #101010 !important;
	outline: none;
}

/* The lightbox is appended to <body>, outside .bzyc, so it cannot read the
   carousel's custom properties — values are spelled out here. */
.bzyc-lb .bzyc-lb-title {
	margin: 16px 0 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-family: neue-haas-unica, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-transform: none !important;
}

/* Note: background and colour are deliberately left un-forced here so the
   :hover rule above still applies. */
.bzyc-lb .bzyc-lb-close {
	width: 38px !important;
	min-width: 0 !important;
	height: 38px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important;
	line-height: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html.bzyc-lb-open,
body.bzyc-lb-open {
	overflow: hidden;
}

@media (max-width: 700px) {
	.bzyc-lb {
		padding: 16px;
	}

	.bzyc-lb-close {
		top: -42px;
		right: -4px;
	}
}

@keyframes bzyc-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes bzyc-pop {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bzyc-track,
	.bzyc-thumb-img,
	.bzyc-play {
		transition: none;
	}

	.bzyc-lb-backdrop,
	.bzyc-lb-inner {
		animation: none;
	}
}