.vx-notice {
	padding: 10px 14px;
	background: #fff3cd;
	border: 1px dashed #d4a72c;
	color: #6b5900;
	font-size: 13px;
}

/* Fallback archive template wrapper (Videonovinky/Videogaléria) - the grid
   itself is identical to the widgets', styled further down. */
.vx-archive-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/*
 * grid-template-columns itself is set per-instance, responsively, via the
 * inline <style> block render_responsive_grid_css() outputs (scoped to
 * this element's own id) - see class-widget-videos.php for why (a
 * Bootstrap col-* class approach, matching every other lte-ext-style
 * widget on this site, turned out to silently not apply inside this
 * particular homepage section's Elementor container).
 */
.vx-videos {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 20px;
}

.vx-video-item {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border-radius: 4px;
}

/* Darkens the bottom of the thumbnail so the title stays readable. */
.vx-video-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 45%);
	z-index: 1;
}

/*
 * Same red-circle play-button motif as the theme's own
 * ".lte-video-popup.lte-style-solid" (style.css) - a white ring at 10%
 * opacity that grows to fully opaque on hover, behind a solid main-color
 * circle - just scoped to our own markup instead of relying on that
 * widget's "lte-style-*" modifier classes, since this is a full thumbnail
 * card rather than an icon-with-text link.
 *
 * The triangle itself is a plain CSS shape (border trick) on the nested
 * inner <span>, not the theme's "lte-font" play-triangle glyph: that
 * glyph's own internal whitespace is asymmetric within its character box,
 * which is what made it render visibly off-center here. A geometric
 * triangle's optical centering offset is well-defined instead (a
 * right-pointing triangle's visual weight sits at 1/3 of its width from
 * the flat edge, not at the midpoint) - accounted for below with a small,
 * fixed margin-left, rather than a padding value guessed against a
 * font's own metrics.
 */
.vx-video-item > span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.vx-video-item > span::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-color: var(--white, #fff);
	opacity: 0.1;
	transition: 0.4s all ease;
	z-index: -1;
}

.vx-video-item > span::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--main, #c42221);
	transition: 0.4s all ease;
	z-index: -1;
}

.vx-video-item > span > span {
	width: 0;
	height: 0;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid var(--white, #fff);
	margin-left: 4px;
	transition: 0.4s all ease;
}

.vx-video-item:hover > span::before {
	width: 84px;
	height: 84px;
	opacity: 1;
}

.vx-video-item:hover > span > span {
	border-top-width: 8px;
	border-bottom-width: 8px;
	border-left-width: 13px;
	margin-left: 3px;
}

.vx-video-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 16px;
	color: var(--white, #fff);
	font-family: var(--font-main, 'Open Sans'), sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
}

/*
 * Small source badge in the corner - plain text, no third-party logos.
 * Styled to match the "Novinky" category badge elsewhere on the homepage
 * (".lte-cats a", see blog-related-posts' own ".brp-related-posts__category",
 * reverse-engineered from that same reference): flush to the corner (no
 * margin), square corners, larger/heavy uppercase headers-font text.
 */
.vx-video-item[data-source-label]::after {
	content: attr(data-source-label);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: var(--main, #c42221);
	color: var(--white, #fff);
	font-family: var(--font-headers, 'Sofia Sans Extra Condensed'), sans-serif;
	letter-spacing: var(--font-headers-letterspacing, 0);
	font-weight: 800;
	font-size: 16px;
	line-height: 1em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 8px 24px;
}

.elementor-editor-active .vx-video-item {
	pointer-events: none;
}