/* ===== Portada: foto horizontal a pantalla completa antes del grid ===== */
.giki-portada {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--40, 2rem);
	height: 85vh;
	overflow: hidden;
	cursor: pointer;
}

.giki-portada__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	filter: brightness(1);
	transition: transform 0.6s ease, filter 0.45s ease;
}

.giki-portada:hover .giki-portada__img {
	transform: scale(1.03);
	filter: brightness(0.85);
}

@media (max-width: 640px) {
	/* Una foto 2:1 recortada a 85vh en vertical mostraria solo una franja
	   central, asi que en mobile la portada es mas baja. */
	.giki-portada {
		height: 60vh;
		height: 60svh;
	}
}

/* ===== Grid masonry: CSS Grid con grid-row-end calculado en JS por imagen
   (ver galeria-iki-soto.js) para que cada foto respete su alto real sin
   recorte. Los items marcados .giki-item--wide ocupan 2 columnas. ===== */
/* El wrapper (alignfull) rompe el ancho de lectura heredado de la pagina;
   el grid se centra dentro con un tope de 1600px. */
.giki-grid-wrap {
	box-sizing: border-box;
	padding-inline: 24px;
}

.giki-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1px;
	gap: 1rem;
	width: 100%;
	max-width: 1600px;
	margin-inline: auto;
}

@media (min-width: 1800px) {
	.giki-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 640px) {
	.giki-grid-wrap {
		padding-inline: 12px;
	}
}

@media (max-width: 1024px) {
	.giki-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.giki-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

.giki-item {
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	border-radius: 6px;
}

/* Solo hay "2 columnas que ocupar" desde tablet; en mobile (1 columna) un
   span 2 crearia una columna implicita y descuadraria el grid. */
@media (min-width: 641px) {
	.giki-item--wide {
		grid-column: span 2;
	}
}

.giki-item img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1);
	filter: brightness(1);
	transition: transform 0.45s ease, filter 0.45s ease;
}

.giki-item:hover img,
.giki-item:focus-visible img {
	transform: scale(1.04);
	filter: brightness(0.82);
}

/* ===== Reveal al scroll: solo se activa si el JS agrega .giki-reveal
   (sin JS o con prefers-reduced-motion las fotos se ven de una). Solo
   opacity/transform: no afecta el layout ni el calculo de alturas. ===== */
.giki-grid.giki-reveal .giki-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.giki-grid.giki-reveal .giki-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.giki-grid.giki-reveal .giki-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== Cursor custom "Ver": solo con puntero fino (mouse/trackpad);
   en touch el JS ni lo crea. ===== */
.giki-cursor {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.giki-trigger {
		cursor: none;
	}

	.giki-cursor {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		pointer-events: none;
		will-change: transform;
	}

	.giki-cursor__circle {
		width: 72px;
		height: 72px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--wp--preset--color--foreground, #f4ede4);
		border-radius: 50%;
		background: rgba(23, 20, 18, 0.6);
		color: var(--wp--preset--color--foreground, #f4ede4);
		font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		opacity: 0;
		transform: scale(0.5);
		transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.giki-cursor.is-active .giki-cursor__circle {
		opacity: 1;
		transform: scale(1);
	}
}

/* ===== CTA flotante ===== */
.giki-cta {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.3rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #c1652f);
	color: var(--wp--preset--color--background, #171412);
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s, filter 0.2s ease;
}

.giki-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s, filter 0.2s ease;
}

.giki-cta:hover,
.giki-cta:focus-visible {
	filter: brightness(1.1);
}

.giki-cta__short {
	display: none;
}

/* Con el lightbox abierto, ni CTA ni cursor. */
body.giki-lightbox-open .giki-cta {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 640px) {
	.giki-cta {
		right: 0.75rem;
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		padding: 0.5rem 0.9rem;
		font-size: 0.8rem;
	}

	.giki-cta__full {
		display: none;
	}

	.giki-cta__short {
		display: inline;
	}
}

/* ===== Lightbox ===== */

.giki-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(23, 20, 18, 0.94); /* carbón semitransparente */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

.giki-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.giki-lightbox__img {
	max-width: 88vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.giki-lightbox__img.is-visible {
	opacity: 1;
}

.giki-lightbox__close,
.giki-lightbox__prev,
.giki-lightbox__next {
	position: absolute;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--foreground, #f4ede4);
	cursor: pointer;
	line-height: 1;
	padding: 0.5rem;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.giki-lightbox__close:hover,
.giki-lightbox__prev:hover,
.giki-lightbox__next:hover {
	color: var(--wp--preset--color--secondary, #e3a857);
}

.giki-lightbox__close {
	top: 1.25rem;
	right: 1.5rem;
	font-size: 2.5rem;
}

.giki-lightbox__prev,
.giki-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	font-size: 3.5rem;
}

.giki-lightbox__prev {
	left: 1rem;
}

.giki-lightbox__next {
	right: 1rem;
}

@media (max-width: 640px) {
	.giki-lightbox__prev,
	.giki-lightbox__next {
		font-size: 2.25rem;
	}

	.giki-lightbox__close {
		font-size: 2rem;
		top: 0.75rem;
		right: 1rem;
	}
}