/* Nous Galería Filtrable — frontend */

.ngal {
	--ngal-cols: 4;
	--ngal-gap: 14px;
	--ngal-accent: #d7a84c;
	--ngal-idle: #888;
	--ngal-radius: 0px;
	--ngal-ratio: 0.91;
	position: relative;
}


/* ======================================================
   CABECERA
   ====================================================== */
.ngal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 12px;
}

.ngal__intro {
	margin: 0;
	flex: 1 1 220px;
}


/* ======================================================
   FILTROS
   ====================================================== */

html body section.ngal .ngal__filters {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 22px !important;
}


/* NO SELECCIONADOS: SOLO TEXTO */

html body section.ngal .ngal__filters button.ngal__filter {
	-webkit-appearance: none !important;
	appearance: none !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: none !important;
	border-width: 0 !important;

	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;

	box-shadow: none !important;

	padding: 8px 0 !important;
	margin: 0 !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;

	height: auto !important;
	min-height: 0 !important;

	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	line-height: 1 !important;

	text-transform: uppercase !important;

	color: var(--ngal-idle) !important;

	cursor: pointer !important;

	transition: color .2s ease, background-color .2s ease !important;
}


/* Evitamos estilos de Themify mediante pseudoelementos */

html body section.ngal .ngal__filters button.ngal__filter::before,
html body section.ngal .ngal__filters button.ngal__filter::after {
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	box-shadow: none !important;
}


/* HOVER DE NO SELECCIONADOS */

html body section.ngal .ngal__filters button.ngal__filter:hover,
html body section.ngal .ngal__filters button.ngal__filter:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--ngal-accent) !important;
}


/* ======================================================
   SOLO EL SELECCIONADO TIENE RECTÁNGULO DORADO
   ====================================================== */

html body section.ngal .ngal__filters button.ngal__filter.is-active,
html body section.ngal .ngal__filters button.ngal__filter.is-active:hover,
html body section.ngal .ngal__filters button.ngal__filter.is-active:focus {
	background: var(--ngal-accent) !important;
	background-color: var(--ngal-accent) !important;
	background-image: none !important;

	color: #111 !important;

	border: none !important;

	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;

	box-shadow: none !important;

	padding: 9px 16px !important;
}


/* Por si Themify crea el fondo con before/after */

html body section.ngal .ngal__filters button.ngal__filter.is-active::before,
html body section.ngal .ngal__filters button.ngal__filter.is-active::after {
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
}


/* ======================================================
   GALERÍA
   ====================================================== */

.ngal__grid {
	display: grid;
	grid-template-columns: repeat(var(--ngal-cols), minmax(0, 1fr));
	gap: var(--ngal-gap);
}


.ngal__item {
	margin: 0;
	overflow: hidden;

	border-radius: var(--ngal-radius);

	aspect-ratio: var(--ngal-ratio) / 1;

	opacity: 1;
	transform: none;

	transition: opacity .28s ease, transform .28s ease;
}


.ngal__item img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform .5s ease;
}


.ngal--lightbox .ngal__item {
	cursor: zoom-in;
}


.ngal__item:hover img,
.ngal__item:focus-visible img {
	transform: scale(1.05);
}


.ngal__item.is-leaving {
	opacity: 0;
	transform: scale(.96);
}


/* Las fotos ocultadas por los filtros */

.ngal__item.is-hidden {
	display: none !important;
}


/* Fotos ocultadas por nuestro límite de dos filas */

.ngal__item.ngal-limit-hidden {
	display: none !important;
}


.ngal__empty {
	margin: 24px 0 0;
	opacity: .7;
}


/* ======================================================
   MOSAICO
   ====================================================== */

.ngal--masonry .ngal__grid {
	display: block;
	column-count: var(--ngal-cols);
	column-gap: var(--ngal-gap);
}


.ngal--masonry .ngal__item {
	aspect-ratio: auto;
	break-inside: avoid;
	margin-bottom: var(--ngal-gap);
}


.ngal--masonry .ngal__item img {
	height: auto;
}


/* ======================================================
   LIGHTBOX
   ====================================================== */

.ngal-lb {
	position: fixed;
	inset: 0;

	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 4vmin;

	background: rgba(0, 0, 0, .92);

	opacity: 0;

	transition: opacity .2s ease;
}


.ngal-lb.is-open {
	opacity: 1;
}


.ngal-lb img {
	max-width: 100%;
	max-height: 92vh;

	width: auto;
	height: auto;

	border-radius: 4px;
}


.ngal-lb__close,
.ngal-lb__nav {
	position: absolute;

	background: transparent;
	border: 0;

	color: #fff;

	font-size: 34px;
	line-height: 1;

	padding: 10px 16px;

	cursor: pointer;

	opacity: .8;

	transition: opacity .2s ease;
}


.ngal-lb__close:hover,
.ngal-lb__nav:hover {
	opacity: 1;
}


.ngal-lb__close {
	top: 10px;
	right: 14px;
	font-size: 30px;
}


.ngal-lb__prev {
	left: 6px;
}


.ngal-lb__next {
	right: 6px;
}


/* ======================================================
   TABLET
   ====================================================== */

@media (max-width: 1024px) {

	.ngal__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ngal--masonry .ngal__grid {
		column-count: 3;
	}

}


/* ======================================================
   MÓVIL
   ====================================================== */

@media (max-width: 767px) {

	.ngal__header {
		gap: 16px;
	}


	html body section.ngal .ngal__filters {
		width: 100% !important;
		gap: 14px !important;
	}


	html body section.ngal .ngal__filters button.ngal__filter {
		font-size: 9px !important;
		letter-spacing: 1.2px !important;
		padding: 6px 0 !important;
	}


	html body section.ngal .ngal__filters button.ngal__filter.is-active {
		padding: 8px 12px !important;
	}


	.ngal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	.ngal--masonry .ngal__grid {
		column-count: 2;
	}

}


/* ======================================================
   MÓVIL PEQUEÑO
   ====================================================== */

@media (max-width: 420px) {

	html body section.ngal .ngal__filters {
		gap: 10px !important;
	}


	html body section.ngal .ngal__filters button.ngal__filter {
		font-size: 8px !important;
		letter-spacing: 1px !important;
	}


	html body section.ngal .ngal__filters button.ngal__filter.is-active {
		padding: 7px 10px !important;
	}

}


/* ======================================================
   REDUCIR ANIMACIONES
   ====================================================== */

@media (prefers-reduced-motion: reduce) {

	.ngal__item,
	.ngal__item img,
	.ngal-lb {
		transition: none;
	}

}
/* ======================================================
   FILTROS — SOLO FONDO EN EL SELECCIONADO
   ====================================================== */

/* TODOS LOS BOTONES */
html body section.ngal .ngal__filters button.ngal__filter {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;

	outline: 0 !important;
	box-shadow: none !important;

	border-radius: 0 !important;
}


/* ELIMINAR COMPLETAMENTE BEFORE / AFTER DE THEMIFY */
html body section.ngal .ngal__filters button.ngal__filter::before,
html body section.ngal .ngal__filters button.ngal__filter::after {
	content: none !important;
	display: none !important;

	background: none !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}


/* BOTONES NO SELECCIONADOS */
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active) {
	background: transparent !important;
	background-color: transparent !important;

	border: none !important;
	outline: none !important;
	box-shadow: none !important;

	padding: 8px 0 !important;

	color: var(--ngal-idle) !important;
}


/* HOVER DE LOS NO SELECCIONADOS */
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active):hover,
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active):focus,
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active):focus-visible {
	background: transparent !important;
	background-color: transparent !important;

	border: none !important;
	outline: none !important;
	box-shadow: none !important;

	color: var(--ngal-accent) !important;
}


/* ÚNICAMENTE EL FILTRO ACTIVO */
html body section.ngal .ngal__filters button.ngal__filter.is-active,
html body section.ngal .ngal__filters button.ngal__filter.is-active:hover,
html body section.ngal .ngal__filters button.ngal__filter.is-active:focus,
html body section.ngal .ngal__filters button.ngal__filter.is-active:focus-visible {
	background: var(--ngal-accent) !important;
	background-color: var(--ngal-accent) !important;
	background-image: none !important;

	border: none !important;
	outline: none !important;
	box-shadow: none !important;

	color: #111 !important;

	padding: 9px 16px !important;
}
/* ======================================================
   DIVIDER DORADO
   ====================================================== */

html body section.ngal > .ngal__divider {
	display: block !important;

	width: 48px !important;
	height: 1px !important;
	min-height: 1px !important;

	background: #d7a84c !important;
	background-color: #d7a84c !important;

	margin: 0 0 18px 0 !important;
	padding: 0 !important;

	border: 0 !important;
}
/* =========================================================
   GALERÍA FILTRABLE
   Solo el filtro seleccionado tiene fondo amarillo
   ========================================================= */


/* FILTROS NO SELECCIONADOS */

html body section.ngal .ngal__filters button.ngal__filter,
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active) {

    -webkit-appearance: none !important;
    appearance: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 0 !important;

    padding: 8px 0 !important;
    margin: 0 !important;

    width: auto !important;
    min-width: 0 !important;

    color: #d7a84c !important;

    cursor: pointer !important;
}


/* ELIMINAR BORDES / FONDOS CREADOS POR PSEUDOELEMENTOS */

html body section.ngal .ngal__filters button.ngal__filter::before,
html body section.ngal .ngal__filters button.ngal__filter::after {

    content: none !important;
    display: none !important;

    background: transparent !important;

    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* HOVER DE LOS NO SELECCIONADOS */

html body section.ngal .ngal__filters button.ngal__filter:not(.is-active):hover,
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active):focus,
html body section.ngal .ngal__filters button.ngal__filter:not(.is-active):focus-visible {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-color: transparent !important;

    outline: 0 !important;
    box-shadow: none !important;

    color: #d7a84c !important;
}


/* =========================================================
   ÚNICAMENTE EL FILTRO SELECCIONADO
   ========================================================= */

html body section.ngal .ngal__filters button.ngal__filter.is-active,
html body section.ngal .ngal__filters button.ngal__filter.is-active:hover,
html body section.ngal .ngal__filters button.ngal__filter.is-active:focus,
html body section.ngal .ngal__filters button.ngal__filter.is-active:focus-visible {

    background: #d7a84c !important;
    background-color: #d7a84c !important;
    background-image: none !important;

    color: #111111 !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 0 !important;

    padding: 9px 16px !important;
}
/* ======================================================
   MÓVIL — GALERÍA A 1 COLUMNA
   ====================================================== */

@media (max-width: 767px) {

    .ngal__grid {
        grid-template-columns: 1fr !important;
    }

    .ngal--masonry .ngal__grid {
        column-count: 1 !important;
    }

}