/* ─────────────────────────────────────────────────────────────────────────────
   VISOR DE FOTOS DE LOS PROYECTOS (complete-construction-projects.php)

   Decision del dueño: la ficha sigue mostrando UNA foto, para que la grilla no se
   llene de flechas que en casi todas las tarjetas no harian nada. Los proyectos que
   tienen mas fotos llevan un indicador chico ("+3 photos") encima de la foto, que
   abre este visor con flechas.

   Las fichas las genera System-TGO (projects-in-process.php / projects-list.php).
   Una ficha con varias fotos trae:
     <div class="project-media project-media--galeria" data-gallery='["images/...", ...]'>
       <img ...>
       <button type="button" class="project-gallery-more" hidden>+3 photos</button>
     </div>
   El boton viene oculto y lo muestra js/project-gallery.js. Sin fotos adicionales
   no hay nada de esto en la pagina y este archivo no cambia nada.

   Todo va con prefijos propios (project-gallery-, pg-) para no chocar con base.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* ---------- En la ficha ---------- */

.project-media--galeria {
	position: relative;
	/* Para que el indicador se adapte al ANCHO DE LA FOTO (no de la pantalla): hay
	   fichas angostas (en celular hoy miden ~117 px) donde "+3 photos" no entra. */
	container-type: inline-size;
}

.project-media--galeria > img {
	cursor: zoom-in;
}

.project-gallery-more {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 5px 11px 5px 9px;
	white-space: nowrap;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .2px;
	color: #fff;
	background: rgba(0, 32, 64, .78);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.project-gallery-more:hover {
	background: rgba(0, 51, 102, .94);
}

.project-gallery-more:focus-visible {
	outline: 3px solid #66ccff;
	outline-offset: 2px;
}

/* Mientras el visor no arranca, el indicador no se ve (hidden tiene que ganar). */
.project-gallery-more[hidden] {
	display: none;
}

.project-gallery-more svg {
	width: 15px;
	height: 15px;
	flex: none;
}

/* Foto angosta: queda el icono y "+3" (la palabra se omite, el lector de pantalla
   la sigue leyendo entera por el aria-label). */
@container (max-width: 220px) {
	.project-gallery-more {
		right: 6px;
		bottom: 6px;
		padding: 4px 8px 4px 7px;
		font-size: 12px;
	}

	.project-gallery-more__txt {
		display: none;
	}
}

/* ---------- El visor ---------- */

/* Con el visor abierto la pagina de atras no se desplaza. */
html.pg-abierto,
html.pg-abierto body {
	overflow: hidden;
}

.pg-viewer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 76px 24px;
	box-sizing: border-box;
	background: rgba(8, 16, 26, .93);
	/* El gesto horizontal es para pasar fotos; el zoom con dos dedos sigue andando. */
	touch-action: pan-y pinch-zoom;
	font-family: inherit;
}

.pg-viewer[hidden] {
	display: none;
}

.pg-stage {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}

.pg-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 90px;
}

.pg-img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100vw - 152px);
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	margin: 0;
	border-radius: 4px;
	object-fit: contain;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
	transition: opacity .2s ease;
}

.pg-viewer.is-loading .pg-img {
	opacity: .25;
}

.pg-spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pg-gira .8s linear infinite;
}

.pg-viewer.is-loading .pg-spinner {
	display: block;
}

@keyframes pg-gira {
	to { transform: rotate(360deg); }
}

.pg-error {
	position: absolute;
	margin: 0;
	color: #e8eef3;
	font-size: 15px;
	text-align: center;
}

.pg-error[hidden] {
	display: none;
}

.pg-caption {
	display: flex;
	gap: 14px;
	align-items: baseline;
	justify-content: center;
	max-width: 100%;
	margin: 12px 0 0;
	color: #e8eef3;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}

.pg-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

.pg-count {
	flex: none;
	color: #a9bccb;
	font-variant-numeric: tabular-nums;
}

/* Solo para lectores de pantalla ("Photo 2 of 4"). */
.pg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pg-btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.pg-btn:hover {
	background: rgba(255, 255, 255, .3);
}

.pg-btn:focus-visible {
	outline: 3px solid #66ccff;
	outline-offset: 2px;
}

.pg-btn svg {
	width: 28px;
	height: 28px;
}

.pg-prev,
.pg-next {
	top: 50%;
	transform: translateY(-50%);
}

.pg-prev {
	left: 14px;
}

.pg-next {
	right: 14px;
}

.pg-close {
	top: 10px;
	right: 14px;
}

/* Celular: la foto ocupa todo el ancho; las flechas quedan encima, mas chicas y
   mas oscuras para que se vean sobre la foto. Lo normal ahi es deslizar. */
@media (max-width: 768px) {
	.pg-viewer {
		padding: 60px 0 16px;
	}

	.pg-img {
		max-width: 100vw;
		max-height: calc(100vh - 130px);
		max-height: calc(100dvh - 130px);
		border-radius: 0;
	}

	.pg-btn {
		width: 42px;
		height: 42px;
		background: rgba(0, 0, 0, .45);
	}

	.pg-btn svg {
		width: 24px;
		height: 24px;
	}

	.pg-prev {
		left: 8px;
	}

	.pg-next {
		right: 8px;
	}

	.pg-close {
		top: 9px;
		right: 8px;
	}

	.pg-caption {
		padding: 0 14px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-img {
		transition: none;
	}

	.pg-spinner {
		animation-duration: 2.4s;
	}
}