/* ================================
   Novaltec Gallery — estilos frontend
   Personaliza el hueco entre fotos aquí:
   ================================ */
.ntg-gallery { --ntg-gap: 40px; }        /* hueco en escritorio */
.ntg-mobile  { --ntg-gap: 12px; }        /* hueco en móvil */

.ntg-item {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	background: #eef0f3;
}
.ntg-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.ntg-item:hover img { transform: scale(1.04); }

/* --------- Fallback sin JS: cuadrícula simple responsive --------- */
.ntg-gallery:not(.ntg-grid):not(.ntg-mobile) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-auto-rows: 180px;
	gap: 12px;
}

/* --------- ESCRITORIO: mosaico por patrón (se repite cada 6) --------- */
.ntg-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 400px;      /* fila base = fotos pequeñas (400px). Las grandes ocupan 2 filas ≈ 800px */
	grid-auto-flow: dense;      /* rellena huecos: clave para nº variable */
	gap: var(--ntg-gap);
}
.ntg-grid .ntg-item:nth-child(6n+1) { grid-column: span 4; grid-row: span 2; }
.ntg-grid .ntg-item:nth-child(6n+2) { grid-column: span 2; }
.ntg-grid .ntg-item:nth-child(6n+3) { grid-column: span 2; }
.ntg-grid .ntg-item:nth-child(6n+4) { grid-column: span 2; grid-row: span 2; }
.ntg-grid .ntg-item:nth-child(6n+5) { grid-column: span 4; }
.ntg-grid .ntg-item:nth-child(6n+6) { grid-column: span 2; }

/* --------- MÓVIL: bloque destacado + slider --------- */
.ntg-mobile .ntg-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ntg-gap);
}
.ntg-mobile .ntg-block .big   { grid-column: 1 / -1; height: 300px; }
.ntg-mobile .ntg-block .small { height: 200px; }

.ntg-mobile .ntg-slider {
	display: flex;
	gap: var(--ntg-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	margin-top: var(--ntg-gap);
}
.ntg-mobile .ntg-slider .ntg-item {
	flex: 0 0 78%;
	height: 280px;
	scroll-snap-align: center;
}
.ntg-mobile .ntg-slider::-webkit-scrollbar { height: 6px; }
.ntg-mobile .ntg-slider::-webkit-scrollbar-thumb { background: #ccd0d6; border-radius: 6px; }

/* --------- LIGHTBOX --------- */
.ntg-lb {
	position: fixed;
	inset: 0;
	background: rgba(6, 8, 12, .92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
}
.ntg-lb.open { display: flex; }
.ntg-lb-img {
	max-width: 92vw;
	max-height: 82vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.ntg-lb-close, .ntg-lb-nav {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	border: none;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
}
.ntg-lb-close { top: 18px; right: 22px; width: 42px; height: 42px; font-size: 20px; }
.ntg-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 24px; }
.ntg-lb-prev { left: 18px; }
.ntg-lb-next { right: 18px; }
.ntg-lb-close:hover, .ntg-lb-nav:hover { background: rgba(255, 255, 255, .24); }
.ntg-lb-count {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: #cbd5e1;
	font-size: 13px;
}

@media (max-width: 480px) {
	.ntg-lb-nav { width: 40px; height: 40px; font-size: 20px; }
}