/* UP4D – YouTube Latest Videos v1.3.1 */

.uyt-wrap {
	--uyt-accent: #26A6A6;
	--uyt-ratio: 16/9;
	--uyt-gap: 16px;
	--uyt-cols: 2;
	--uyt-radius: 4px;
	display: grid;
	gap: var(--uyt-gap);
	width: 100%;
}

/* 1 big left + stacked right — matches the design */
.uyt-wrap.uyt-layout-featured {
	grid-template-columns: 1.62fr 1fr;
	align-items: start;
}

.uyt-side {
	display: grid;
	gap: var(--uyt-gap);
	/* keep the right column the same height as the main card */
	grid-auto-rows: 1fr;
	height: 100%;
}

/* even grid — default is 2 columns, so 4 videos land as 2 up / 2 down */
.uyt-wrap.uyt-layout-grid {
	/* minmax(0,1fr) — without the 0 floor, long titles push columns out of sync */
	grid-template-columns: repeat(var(--uyt-cols), minmax(0, 1fr));
}

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

.uyt-card {
	display: block;
	position: relative;
	text-decoration: none !important;
	border: 0;
	box-shadow: none;
	line-height: 0;
	outline-offset: 3px;
}

.uyt-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--uyt-radius);
	aspect-ratio: var(--uyt-ratio);
	background: #0f1c2e;
}

.uyt-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.uyt-card:hover .uyt-thumb img,
.uyt-card:focus-visible .uyt-thumb img {
	transform: scale(1.04);
}

/* gradient so the title stays readable */
.uyt-thumb::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	opacity: .95;
	pointer-events: none;
}

/* ---------- play button ---------- */

.uyt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	z-index: 2;
	pointer-events: none;
	transition: transform .25s ease;
}

.uyt-card--main .uyt-play {
	width: 74px;
	height: 74px;
}

/* only the featured layout has genuinely small cards next to a big one */
.uyt-layout-featured .uyt-card:not(.uyt-card--main) .uyt-play {
	width: 46px;
	height: 46px;
}

.uyt-play svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}

.uyt-play svg circle {
	fill: var(--uyt-accent);
}

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

/* ---------- badges ---------- */

.uyt-duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.uyt-title {
	position: absolute;
	left: 16px;
	right: 76px;
	bottom: 13px;
	z-index: 3;
	color: #fff;
	font-size: clamp(15px, 1.15vw, 19px);
	font-weight: 700;
	line-height: 1.25;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.uyt-card--main .uyt-title {
	left: 20px;
	right: 90px;
	bottom: 16px;
	font-size: clamp(16px, 1.55vw, 24px);
}

.uyt-layout-featured .uyt-card:not(.uyt-card--main) .uyt-title {
	left: 12px;
	right: 62px;
	bottom: 10px;
	font-size: 15px;
}

/* ---------- responsive ---------- */

@media (max-width: 880px) {
	.uyt-wrap.uyt-layout-featured {
		grid-template-columns: 1fr;
	}

	.uyt-side {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;
	}

	/* 3+ columns get too narrow to read — cap at 2 on tablets */
	.uyt-wrap.uyt-layout-grid {
		grid-template-columns: repeat(min(var(--uyt-cols), 2), minmax(0, 1fr));
	}
}

@media (max-width: 540px) {
	.uyt-side,
	.uyt-wrap.uyt-layout-grid {
		grid-template-columns: 1fr;
	}

	.uyt-play,
	.uyt-card--main .uyt-play {
		width: 56px;
		height: 56px;
	}

	.uyt-layout-featured .uyt-card:not(.uyt-card--main) .uyt-play {
		width: 48px;
		height: 48px;
	}
}

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

/*
 * !important throughout: this markup is appended to <body>, outside the theme's
 * container, and Elementor / Hello Elementor style bare `button` and `.uyt-*`
 * ancestors aggressively enough to win on specificity otherwise.
 */
.uyt-lightbox {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box;
	margin: 0 !important;
	/* 28px, not 20 — the close button overhangs the player corner by 20px plus a
	   3px ring, and would otherwise be clipped at the viewport edge on mobile */
	padding: 28px !important;
	background: rgba(0, 0, 0, .9) !important;

	/*
	 * visibility + pointer-events, not opacity alone. A closed overlay left at
	 * opacity:0 still covers the viewport and swallows every click on the page.
	 * The delayed visibility transition lets the fade-out finish first.
	 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

.uyt-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .2s ease, visibility 0s linear 0s;
}

.uyt-lightbox__inner {
	position: relative;
	/* the vh term keeps the player — and the corner button — inside short viewports */
	width: min(1100px, 100%, calc((100vh - 76px) * 16 / 9));
	max-width: 100%;
}

.uyt-lightbox__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
}

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

/*
 * Sits ON the player's top-right corner, half overlapping. Fully inside would
 * land on YouTube's own volume / CC / settings row; fully outside floats away
 * from the video. It is a child of __inner, not __frame, because the frame
 * clips overflow for its rounded corners.
 */
.uyt-lightbox__close {
	all: unset; /* wipe the theme's button styling before rebuilding it */
	position: absolute !important;
	/* half the 40px button, so its centre lands exactly on the corner */
	top: -20px !important;
	right: -20px !important;
	z-index: 3 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--uyt-close, var(--uyt-accent, #26A6A6)) !important;
	color: #fff !important;
	cursor: pointer !important;
	/* dark ring separates the button from a bright thumbnail behind the corner */
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .55) !important;
	transition: transform .15s ease, filter .15s ease;
}

.uyt-lightbox__close svg {
	width: 18px;
	height: 18px;
	display: block;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	fill: none;
}

.uyt-lightbox__close:hover {
	filter: brightness(1.15);
	transform: scale(1.08);
}

.uyt-lightbox__close:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 3px !important;
}

body.uyt-noscroll {
	overflow: hidden !important;
}

/* ---------- podcast cards ---------- */

.uyt-pod {
	--uyt-pod-cols: 3;
	--uyt-pod-gap: 24px;
	/* square by default — pass radius="10px" on the shortcode to round them */
	--uyt-pod-radius: 0;
	--uyt-pod-icon: 44px;
	--uyt-pod-font: "Montserrat", Sans-serif;

	/*
	 * Colours name the site's own globals first and only fall back to the hex.
	 * If the theme (or Elementor) defines --Rhino / --Text-Color, those win, so
	 * a future palette change flows through without touching this file.
	 */
	--uyt-pod-title-color: var(--Rhino, #2F3D61);
	--uyt-pod-text-color: var(--Text-Color, #4B4B4B);

	display: grid;
	grid-template-columns: repeat(var(--uyt-pod-cols), minmax(0, 1fr));
	gap: var(--uyt-pod-gap);
	width: 100%;
	align-items: stretch;
	font-family: var(--uyt-pod-font);
}

/* everything inside inherits the family — no per-element repetition */
.uyt-pod *,
.uyt-wrap {
	font-family: inherit;
}

.uyt-wrap {
	font-family: var(--uyt-pod-font, "Montserrat", Sans-serif);
}

.uyt-pod__card {
	display: flex;
	flex-direction: column;
	/* equal-height cards regardless of how long each description runs */
	height: 100%;
	padding: 28px 26px 30px;
	border-radius: var(--uyt-pod-radius);
	background: var(--uyt-pod-card, #fff);
	box-sizing: border-box;
}

.uyt-pod--light .uyt-pod__card {
	background: var(--uyt-pod-card, #fff);
	border: 1px solid rgba(16, 34, 66, .08);
}

.uyt-pod--dark .uyt-pod__card {
	background: var(--uyt-pod-card, #2F3D61);
	border: 0;
}

/* top row: platform badge left, duration right */
.uyt-pod__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
}

.uyt-pod__icon {
	display: block;
	width: var(--uyt-pod-icon);
	height: var(--uyt-pod-icon);
	flex: 0 0 auto;
	line-height: 0;
}

/* the supplied artwork already carries its own shape, so no cropping here */
.uyt-pod__icon svg,
.uyt-pod__icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
	max-width: none;
}

/* Body Text/Desktop Body Text */
.uyt-pod__dur {
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.uyt-pod--light .uyt-pod__dur {
	color: var(--uyt-pod-title-color);
}

.uyt-pod--dark .uyt-pod__dur {
	color: #fff;
}

/* H3/Desktop H3 - Subheading: card */
.uyt-pod__title {
	margin: 0 0 16px;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	/* three lines keeps a row of cards visually level without hard-cropping */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.uyt-pod--light .uyt-pod__title {
	color: var(--uyt-pod-title-color);
}

.uyt-pod--dark .uyt-pod__title {
	color: #fff;
}

/* Body Text/Desktop Body Text */
.uyt-pod__text {
	margin: 0 0 26px;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	/* pushes the button to the bottom edge on every card in the row */
	flex: 1 1 auto;
}

.uyt-pod--light .uyt-pod__text {
	color: var(--uyt-pod-text-color);
}

.uyt-pod--dark .uyt-pod__text {
	color: rgba(255, 255, 255, .82);
}

/* button — outlined on light, solid white on dark */
/* Button/Desktop Button Label */
.uyt-pod__btn {
	align-self: center;
	/*
	 * Fixed height + centring, not vertical padding: padding-based height moves
	 * with whatever font actually loads, so it would only be 45px when Montserrat
	 * is ready. border-box keeps the 2px border inside the 45px.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--uyt-pod-btn-h, 45px);
	margin-top: auto;
	padding: 0 34px;
	border-radius: 999px;
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.uyt-pod--light .uyt-pod__btn {
	border: 2px solid var(--uyt-accent, #26A6A6);
	background: transparent;
	color: var(--uyt-accent, #26A6A6);
}

.uyt-pod--light .uyt-pod__btn:hover,
.uyt-pod--light .uyt-pod__btn:focus-visible {
	background: var(--uyt-accent, #26A6A6);
	color: #fff;
}

.uyt-pod--dark .uyt-pod__btn {
	border: 2px solid #fff;
	background: #fff;
	color: #2F3D61;
}

.uyt-pod--dark .uyt-pod__btn:hover,
.uyt-pod--dark .uyt-pod__btn:focus-visible {
	background: transparent;
	color: #fff;
}

.uyt-pod__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 980px) {
	.uyt-pod {
		grid-template-columns: repeat(min(var(--uyt-pod-cols), 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.uyt-pod {
		grid-template-columns: 1fr;
	}

	.uyt-pod__card {
		padding: 24px 22px 26px;
	}

	.uyt-pod__top {
		margin-bottom: 20px;
	}
}