/*
 * Video Grid - Modern Grid Engine
 * Dependency-free CSS Grid layout replacing the jQuery videoPlacements() math.
 * Even, centered, responsive columns with no JS. Scoped to .rvg-modern-grid.
 *
 * Column width and tile height come from inline custom properties set by the
 * plugin from the admin settings: --rvg-min-col and --rvg-min-h.
 *
 * Markup: .rvg-modern-grid > .box_grid > .boxInner_grid > a >
 *         (img.thumb_img__, span.playbtnCss, div.titleBox)
 */

.rvg-modern-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--rvg-min-col, 260px), 1fr));
	gap: var(--rvg-gap, 14px);
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto 18px;
	padding: 0;
	overflow: visible !important;
}

/* Each cell: drop the legacy float/percent-width/padding-bottom hacks; height
 * is driven by the admin setting (min thumbnail height). */
.rvg-modern-grid .box_grid {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	padding-bottom: 0 !important;
	position: relative !important;
	height: var(--rvg-min-h, 160px) !important;
	list-style: none !important;
}

/* Inner wrapper fills the cell (legacy CSS insets it 10px, which shrinks the thumb). */
.rvg-modern-grid .boxInner_grid {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	overflow: hidden;
	border-radius: 6px;
}

.rvg-modern-grid .boxInner_grid > a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.rvg-modern-grid .boxInner_grid img.thumb_img__ {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.rvg-modern-grid .boxInner_grid img.fit_img {
	object-fit: contain;
	background: #000;
}

.rvg-modern-grid .boxInner_grid .playbtnCss {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.rvg-modern-grid .boxInner_grid .titleBox {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}