/* =============================================================================
   CRISTIAN DI STEFANO STUDIO — main.css v3.1
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #0a0a0a;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, figcaption { margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }

/* ---------- Customizer defaults (overridden by inline CSS from PHP) ---------- */
:root {
	--cds-title-font: "Inter", system-ui, -apple-system, sans-serif;
	--cds-title-size: 11px;
	--cds-title-spacing: 0.14em;
	--cds-title-weight: 400;
	--cds-title-transform: uppercase;
	--cds-title-color: #0a0a0a;
	--cds-header-h: 40px;
}

/* ---------- Fixed header (title LEFT, CONTACT on the right) ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--cds-header-h);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
	z-index: 200;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.site-header__left  { justify-self: start; }
.site-header__right { justify-self: end; }

.site-name,
.site-contact {
	font-family: var(--cds-title-font);
	font-size: var(--cds-title-size);
	font-weight: var(--cds-title-weight);
	letter-spacing: var(--cds-title-spacing);
	text-transform: var(--cds-title-transform);
	color: var(--cds-title-color);
	line-height: 1;
	white-space: nowrap;
	padding: 4px 6px;
	transition: opacity 160ms ease;
}

.site-name { text-align: left; } /* CAMBIO: Alineado a la izquierda */
.site-contact { /* right */ }

.site-name:hover,
.site-contact:hover { opacity: 0.55; }

/* Main content starts below the fixed header */
.site-main {
	padding-top: var(--cds-header-h);
	min-height: 100vh;
}

/* ---------- Grid: proportional thumbnails, 150px tall, NO cropping ---------- */
.grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px; /* CAMBIO 4: Antes 2px, ahora 4px (DOBLE) */
	margin: 0;
	padding: 0;
	line-height: 0;
	/* Small top padding so the first row doesn't kiss the header bottom */
	padding-top: 4px; /* CAMBIO 4: Antes 2px, ahora 4px */
}

.grid__item {
	/* Width is its natural width (150px * aspect ratio). Do not stretch. */
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	position: relative;
}

.grid__link {
	display: block;
	height: 150px;
	width: auto;
	position: relative;
	background: #f4f4f4;
	cursor: default; /* no magnifier — cursor stays normal */
	overflow: hidden;
}

.grid__img {
	display: block;
	height: 150px;
	width: auto;
	max-width: none;
	object-fit: contain; /* show full image, no cropping */
	transition: opacity 180ms ease;
}

/* Plus marker that appears on hover over the thumbnail */
.grid__plus {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 14px;
	height: 14px;
	display: block;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 160ms ease, transform 160ms ease;
	pointer-events: none;
}
.grid__plus::before,
.grid__plus::after {
	content: '';
	position: absolute;
	background: #0a0a0a;
}
.grid__plus::before { /* horizontal line */
	left: 0; right: 0;
	top: 50%;
	height: 1px;
	transform: translateY(-50%);
}
.grid__plus::after { /* vertical line */
	top: 0; bottom: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
}
/* White halo to make it visible on dark photos */
.grid__plus {
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}

.grid__item:hover .grid__plus {
	opacity: 1;
	transform: scale(1);
}
.grid__item:hover .grid__img { opacity: 0.92; }

/* NUEVO: Play button para videos Vimeo */
.grid__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 160ms ease, background 160ms ease;
	pointer-events: none;
	font-size: 24px;
	color: #ffffff;
	font-weight: bold;
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}

.grid__item:hover .grid__play {
	opacity: 1;
	background: rgba(0, 0, 0, 0.8);
}
.grid__item:hover .grid__img { opacity: 0.92; }

/* ---------- Caption below each thumbnail (CAMBIO 1: OCULTO) ---------- */
.grid__caption {
	display: none !important; /* CAMBIO 1: No mostrar captions debajo */
	align-items: center;
	gap: 6px;
	padding: 6px 4px 12px;
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.grid__caption--empty { visibility: hidden; }

.grid__marker {
	display: inline-block;
	width: 6px;
	height: 6px;
	border: 1px solid #666;
	background: transparent;
	flex-shrink: 0;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
}
.grid__item:hover .grid__marker {
	opacity: 1;
	transform: scale(1);
	background: #0a0a0a;
	border-color: #0a0a0a;
}

.grid__desc {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Empty / admin hint ---------- */
.empty {
	padding: 80px 20px;
	text-align: center;
	color: #666;
}
.empty a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---------- Optional static pages (Contact, etc.) ---------- */
.page-content {
	max-width: 640px;
	margin: 0 auto;
	padding: 60px 20px;
	font-size: 13px;
	line-height: 1.7;
}
.page-content__title {
	font-family: var(--cds-title-font);
	font-size: var(--cds-title-size);
	font-weight: var(--cds-title-weight);
	letter-spacing: var(--cds-title-spacing);
	text-transform: var(--cds-title-transform);
	color: var(--cds-title-color);
	margin-bottom: 32px;
	text-align: center;
}

/* =============================================================================
   LIGHTBOX — white background, STARTS BELOW the header (which stays visible)
   ========================================================================== */

.cds-lightbox {
	position: fixed;
	top: var(--cds-header-h); /* header stays visible on top */
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	z-index: 150;
	cursor: default;
	opacity: 0;
	transition: opacity 240ms ease;
	padding-top: 30px;
	overflow: auto;
}

.cds-lightbox.is-open {
	display: flex;
	opacity: 1;
}

.cds-lightbox__img {
	max-width: 92vw;
	/* account for header (top) + caption (~60px) + safe padding */
	max-height: calc(100vh - var(--cds-header-h) - 140px);
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	margin-top: 20px;
	flex-shrink: 0;
}

/* NUEVO: Video wrapper para Vimeo */
.cds-lightbox__video-wrapper {
	max-width: 92vw;
	max-height: calc(100vh - var(--cds-header-h) - 140px);
	width: 90vw;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-top: 20px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #f0f0f0;
}

.cds-lightbox__video {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

/* Caption placed at the TOP, just under the header, in the title typography */
/* CAMBIO 3: Más margen/aire desde la imagen */
.cds-lightbox__caption {
	position: relative;
	order: -1;
	text-align: center;
	font-family: var(--cds-title-font);
	font-size: var(--cds-title-size);
	font-weight: var(--cds-title-weight);
	letter-spacing: var(--cds-title-spacing);
	text-transform: uppercase; /* always uppercase, per user's request */
	color: var(--cds-title-color);
	pointer-events: none;
	margin: 0;
	padding: 0 60px 40px 60px;
	line-height: 1.3;
	margin-top: -20px;
}

/* Close button (X) — minimal, top-right INSIDE the lightbox */
/* CAMBIO 2: 3x MÁS GRANDE (54px) */
.cds-lightbox__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 54px; /* CAMBIO 2: Antes 22px, ahora 54px (3x más grande) */
	height: 54px; /* CAMBIO 2: Antes 22px, ahora 54px (3x más grande) */
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 160ms ease;
	background: transparent;
	display: block;
}
.cds-lightbox__close::before,
.cds-lightbox__close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px; /* CAMBIO 2: Antes 18px, ahora 54px (3x más grande) */
	height: 2px; /* CAMBIO 2: Antes 1px, ahora 2px (para mantener proporción visual) */
	background: #0a0a0a;
}
.cds-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.cds-lightbox__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.cds-lightbox__close:hover { opacity: 1; }

/* Prev / Next — thin minimal chevrons on the sides */
/* CAMBIO 2: 3x MÁS GRANDES (36px) */
.cds-lightbox__prev,
.cds-lightbox__next {
	position: absolute;
	top: 50%;
	width: 60px; /* CAMBIO 2: Antes 40px, ahora 60px (3x más grande) */
	height: 60px; /* CAMBIO 2: Antes 40px, ahora 60px (3x más grande) */
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 160ms ease;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cds-lightbox__prev { left: 16px; }
.cds-lightbox__next { right: 16px; }
.cds-lightbox__prev:hover,
.cds-lightbox__next:hover { opacity: 1; }

.cds-lightbox__prev::before,
.cds-lightbox__next::before {
	content: '';
	display: block;
	width: 36px; /* CAMBIO 2: Antes 12px, ahora 36px (3x más grande) */
	height: 36px; /* CAMBIO 2: Antes 12px, ahora 36px (3x más grande) */
	border-left: 1px solid #0a0a0a;
	border-bottom: 1px solid #0a0a0a;
}
.cds-lightbox__prev::before  { transform: rotate(45deg); margin-right: -4px; }
.cds-lightbox__next::before  { transform: rotate(-135deg); margin-left: -4px; }

body.cds-lightbox-open { overflow: hidden; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
	:root { --cds-header-h: 36px; }
	.site-header { padding: 0 12px; }
	.grid { gap: 4px; padding-top: 4px; } /* CAMBIO 4: Antes 2px, ahora 4px */
	.grid__link,
	.grid__img { height: 130px; }
}

/* Mobile */
@media (max-width: 600px) {
	:root { --cds-header-h: 34px; }
	.site-header { padding: 0 10px; }
	.grid { gap: 4px; padding-top: 4px; } /* CAMBIO 4: Antes 2px, ahora 4px */
	.grid__link,
	.grid__img { height: 110px; }
	.grid__caption { font-size: 9px; padding: 4px 2px 10px; }

	.cds-lightbox__prev,
	.cds-lightbox__next {
		width: 50px; height: 50px; opacity: 0.7; /* CAMBIO 2: Mantener 3x grande en mobile */
	}
	.cds-lightbox__prev::before,
	.cds-lightbox__next::before {
		width: 30px; height: 30px; /* CAMBIO 2: Mantener proporción */
	}
	.cds-lightbox__close { width: 50px; height: 50px; top: 10px; right: 12px; } /* CAMBIO 2: 3x grande */
	.cds-lightbox__close::before,
	.cds-lightbox__close::after { width: 50px; height: 2px; } /* CAMBIO 2: Mantener proporción */
	.cds-lightbox__caption { padding: 0 40px 30px 40px; } /* CAMBIO 3: Más aire */
	.cds-lightbox__img { max-height: calc(100vh - var(--cds-header-h) - 120px); margin-top: 10px; }
}

/* Small mobile */
@media (max-width: 420px) {
	.grid__link,
	.grid__img { height: 90px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}