/**
 * Dumar Sport — páginas de galería (listado /galerias/ y cada galería).
 *
 * Se carga solo en esas páginas, después de main.css y de los estilos del
 * visor del plugin. Fondo grafito, como el bloque de galerías de la
 * portada: acento lima, Barlow Condensed en titulares y rótulos, Barlow en
 * el texto. Sin degradados ni efectos 3D.
 *
 * Índice
 *  1. Página
 *  2. Cabecera de la galería
 *  3. Foto de portada
 *  4. Cuadrícula por filas
 *  5. Galerías relacionadas
 *  6. Listado de galerías
 */

/* 1. Página
   ========================================================================== */

/* Contexto oscuro: el acento es lima, con letra grafito encima */
.gallery-page {
	--accent: var(--ds-acento-oscuro);
	--on-accent: var(--ds-sobre-acento-oscuro);

	padding-bottom: 48px;
	background: var(--ds-grafito);
	color: var(--ds-blanco);
}

/* El pie (también grafito) sigue sin franja clara intermedia; lo separa su filete lima */
.gallery-page ~ .site-footer {
	margin-top: 0;
}

.gallery-page__empty {
	padding-block: 32px;
	color: var(--ds-gris-claro);
}

/* 2. Cabecera de la galería
   ========================================================================== */

.gallery-head {
	padding-block: 20px 28px;
}

.gallery-head__grid {
	display: grid;
	gap: 24px;
}

.gallery-head__text {
	min-width: 0;
}

.gallery-head__back {
	margin-bottom: 20px;
}

.gallery-head__back .link {
	font-size: 0.875rem;
}

.gallery-head__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 12px;
}

.gallery-head__season,
.gallery-head__count {
	color: var(--ds-gris-claro);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gallery-head__title {
	font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem);
	overflow-wrap: anywhere;
}

/* Datos de la cobertura: rótulo pequeño encima y valor debajo */
.gallery-head__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	margin: 22px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ds-gris-borde);
}

.gallery-head__facts div {
	min-width: 0;
}

.gallery-head__facts dt {
	color: var(--ds-gris-claro);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.gallery-head__facts dd {
	margin: 2px 0 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.gallery-head__facts dd.num {
	font-size: 1.25rem;
	line-height: 1.1;
}

.gallery-head__facts a {
	border-bottom: 2px solid var(--accent);
}

.gallery-head__author {
	color: var(--accent);
}

.gallery-head__description {
	max-width: 62ch;
	margin-top: 18px;
	font-size: 1.0625rem;
}

/* Compartir: se muestra solo si el navegador puede compartir o copiar */
.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 22px;
}

.share[hidden] {
	display: none;
}

.share__button {
	min-height: 44px;
	padding: 10px 18px 9px;
	border: 2px solid var(--accent);
	border-radius: 0;
	background: transparent;
	color: var(--ds-blanco);
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
}

.share__button:hover {
	background: var(--accent);
	color: var(--on-accent);
}

.share__status {
	color: var(--ds-gris-claro);
	font-size: 0.9375rem;
}

/* 3. Foto de portada
   ==========================================================================
   Horizontal: a todo el ancho, encuadrada con su punto de interés.
   Vertical o cuadrada: entera, sin recortar, con la altura limitada a la
   pantalla (--r es su proporción; la fija la plantilla). */

.gallery-head__cover {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--ds-grafito-2);
}

.gallery-head__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
}

.gallery-head--portrait .gallery-head__cover {
	width: min(100%, calc(72vh * var(--r, 0.667)));
	margin-inline: auto;
	aspect-ratio: var(--r, 2 / 3);
}

@media (min-width: 768px) {
	.gallery-head {
		padding-block: 28px 36px;
	}

	.gallery-head__cover {
		aspect-ratio: 16 / 9;
		max-height: 78vh;
	}
}

@media (min-width: 960px) {
	/* Vertical: datos a la izquierda y la foto entera a la derecha */
	.gallery-head--portrait .gallery-head__grid {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 48px;
	}

	.gallery-head--portrait .gallery-head__cover {
		width: min(440px, calc(70vh * var(--r, 0.667)));
		max-height: none;
		margin: 0;
	}
}

/* 4. Cuadrícula por filas
   ==========================================================================
   Marcado del plugin (.ds-galeria, el mismo que abre el visor). Cada foto
   ocupa el ancho que le corresponde por su proporción (--ds-r) a la altura
   de la fila (--fila), y el sobrante se reparte en la misma proporción: todas
   las fotos de una fila miden lo mismo de alto y ninguna se recorta ni se
   deforma. La última fila no se estira. Si cambia --fila, hay que actualizar
   dumarsport_gallery_grid_sizes() en inc/galleries.php. */

.gallery-photos {
	padding-bottom: 40px;
}

.gallery-photos__title {
	margin-bottom: 12px;
	color: var(--ds-gris-claro);
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
}

.gallery-photos .ds-galeria__aviso {
	margin-bottom: 16px;
	color: var(--ds-grafito);
}

/* Secciones de la galería, con el trazo inclinado de los encabezados */
.gallery-photos .ds-galeria__seccion {
	position: relative;
	margin: 28px 0 12px;
	padding-left: 18px;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
}

.gallery-photos .ds-galeria__seccion::before {
	content: "";
	position: absolute;
	top: 0.05em;
	bottom: 0.1em;
	left: 0;
	width: 8px;
	background: var(--accent);
	transform: skewX(var(--skew));
}

.ds-galeria--filas {
	--fila: clamp(96px, 24vw, 280px);
	--hueco: 4px;
}

.ds-galeria--filas .ds-galeria__rejilla {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hueco);
}

/* Ocupa el hueco de la última fila para que sus fotos no se estiren */
.ds-galeria--filas .ds-galeria__rejilla::after {
	content: "";
	flex-grow: 1000000;
}

.ds-galeria--filas .ds-galeria__item {
	flex: var(--ds-r, 1.5) 1 calc(var(--ds-r, 1.5) * var(--fila));
	min-width: 0;
}

.ds-galeria--filas .ds-galeria__enlace {
	position: relative;
	aspect-ratio: var(--ds-r, 1.5);
}

.ds-galeria--filas .ds-galeria__enlace img {
	transition: transform 0.4s ease;
}

.ds-galeria--filas .ds-galeria__enlace:hover img {
	transform: scale(1.03);
}

.ds-galeria--filas .ds-galeria__enlace:focus-visible {
	z-index: 1;
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.ds-galeria--filas {
		--hueco: 6px;
	}

	.gallery-photos .ds-galeria__seccion {
		margin-top: 36px;
		font-size: 1.875rem;
	}
}

/* 5. Galerías relacionadas
   ========================================================================== */

.gallery-related .ticks {
	margin-bottom: 22px;
}

/* 6. Listado de galerías
   ========================================================================== */

.gallery-head--archive {
	padding-bottom: 8px;
}

.gallery-head--archive .gallery-head__count {
	margin-top: 10px;
}

.gallery-archive__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
	padding-top: 16px;
}

.gallery-archive__pages .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 36px;
}

.gallery-archive__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ds-gris-borde);
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gallery-archive__pages .page-numbers.current {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

@media (min-width: 768px) {
	.gallery-archive__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 16px;
	}
}

@media (min-width: 1024px) {
	.gallery-archive__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}