/* ==========================================================================
   Video Hover Gallery — estilos
   ========================================================================== */

.vhg-gallery {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	column-gap: var(--vhg-gutter-h, 15px);
	row-gap: var(--vhg-gutter-v, 15px);
}

.vhg-gallery * {
	box-sizing: border-box;
}

.vhg-item {
	position: relative;
	overflow: hidden;
	background: #111;
	border-radius: 4px;
}

.vhg-item-large {
	flex: 1 1 100%;
	width: 100%;
}

/* Con un solo gap horizontal entre los dos tiles de la fila, cada uno mide
   (100% - gutter) / 2, que es lo mismo que 50% - gutter/2. */
.vhg-item-normal {
	flex: 1 1 calc(50% - (var(--vhg-gutter-h, 15px) / 2));
	width: calc(50% - (var(--vhg-gutter-h, 15px) / 2));
}

/* Vertical: ancho configurable desde Ajustes (25% por defecto = 4 por fila).
   --vhg-vertical-basis ya viene calculado desde PHP restando el gutter proporcional. */
.vhg-item-vertical {
	flex: 1 1 var(--vhg-vertical-basis, 25%);
	width: var(--vhg-vertical-basis, 25%);
}

/* Mobile: todo a una columna, cada tile respeta el alto natural de su imagen (masonry real).
   El row-gap del contenedor ya se encarga del espaciado vertical entre tiles. */
@media (max-width: 767px) {
	.vhg-item-normal,
	.vhg-item-large,
	.vhg-item-vertical {
		flex: 1 1 100%;
		width: 100%;
	}
}

.vhg-item-link {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* El contenedor NO tiene aspect-ratio fijo: su altura la define la imagen (in-flow),
   así cada tile puede tener un alto distinto — igual que el masonry del sitio original. */
.vhg-media {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
	line-height: 0;
}

.vhg-thumb {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.35s ease, transform 0.6s ease;
	position: relative;
	z-index: 1;
}

.vhg-media iframe,
.vhg-media video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 2;
	pointer-events: none;
	border: 0;
}

.vhg-media.is-playing .vhg-thumb {
	opacity: 0;
}

.vhg-media.is-playing iframe,
.vhg-media.is-playing video {
	opacity: 1;
}

.vhg-info {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 16px 18px;
	z-index: 3;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.vhg-item:hover .vhg-info,
.vhg-item.vhg-in-view .vhg-info {
	opacity: 1;
	transform: translateY(0);
}

.vhg-title {
	line-height: 1.3;
	font-weight: 600;
}

.vhg-desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	margin-top: 2px;
}

.vhg-skin-light .vhg-desc {
	color: rgba(0, 0, 0, 0.6);
}

.vhg-skin-light .vhg-info {
	background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.vhg-item:hover .vhg-thumb {
	transform: scale(1.02);
}