/*
Theme Name: Galindo
Theme URI: https://oleosgalindoperu.com
Description: Tema del portfolio de Alejandro Galindo Yauris. Hijo de Twenty Twenty-Five: el padre lo mantiene WordPress y se actualiza solo; aquí solo está lo propio de una web de pintura. Sin constructor de páginas ni dependencias de terceros, a propósito.
Author: Samuel Ureta
Template: twentytwentyfive
Version: 1.7
Requires at least: 6.7
Tested up to: 7.0
License: GNU General Public License v2 or later
Text Domain: galindo
*/

/* ---------------------------------------------------------------------------
   Lo que decide este diseño: EL COLOR LO PONE LA OBRA, no la web.
   De ahí el fondo hueso, la ausencia de bordes de color y que no haya ni una
   sombra llamativa. Una web de pintura que llama la atención sobre sí misma
   compite con los cuadros y gana ella, que es perder.
   --------------------------------------------------------------------------- */

/* La cuadrícula de obra va por columnas y no por celdas de igual altura, y es
   la decisión visual importante: un `grid` con filas fijas obliga a recortar,
   y recortar un cuadro lo mutila —un apaisado convertido en cuadrado deja de
   ser la obra—. Con `columns` cada imagen conserva su proporción real. */
.obras-cuadricula {
	columns: 3 280px;
	column-gap: var(--wp--preset--spacing--40, 1.5rem);
}

@media (max-width: 600px) {
	.obras-cuadricula { columns: 1; }
}

.obras-cuadricula > * {
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	display: block;
}

.obras-cuadricula img {
	width: 100%;
	height: auto;
	display: block;
	/* Sombra mínima: separa el cuadro del fondo sin parecer un marco. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	transition: box-shadow 160ms ease;
}

.obras-cuadricula a:hover img,
.obras-cuadricula a:focus-visible img {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* El pie de cada obra en la cuadrícula: título y año, y nada más. La ficha
   técnica completa vive en la página de la obra. */
.obra-pie {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin-top: 0.5rem;
}

.obra-pie .obra-titulo { display: block; font-style: italic; }
.obra-pie .obra-anno   { display: block; opacity: 0.7; }

/* Ficha técnica de una obra: año, técnica, dimensiones. Se lee de un vistazo
   y en el orden en que lo diría el pintor. */
.obra-ficha {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
	border-top: 1px solid currentColor;
	padding-top: 1rem;
	margin-top: 1.5rem;
	opacity: 0.85;
}

.obra-ficha dt {
	display: inline-block;
	min-width: 8rem;
	opacity: 0.6;
}

.obra-ficha dd { display: inline; margin: 0; }
.obra-ficha dd::after { content: ""; display: block; }

/* La imagen de una obra, a lo ancho de la lectura y sin recortes. */
.obra-imagen img {
	width: 100%;
	height: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Enlaces sin subrayado en las obras: el subrayado sobre una imagen es ruido. */
.obras-cuadricula a { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------------------
   EL HÉROE DE PORTADA: la obra, el nombre encima y el botón.

   Techo de ancho, que fue lo primero que se pidió: sin él, en un monitor de
   3440 px la imagen se escala un 43 % por encima de sus 2400 px reales —se ve
   blanda— y se convierte en una franja que tapa la pantalla. El valor se cambia
   aquí y en ningún otro sitio; 2400 px es el límite duro, porque es lo que mide
   la imagen: pasar de ahí no es agrandar, es inventar píxeles.
   --------------------------------------------------------------------------- */
.wp-block-cover.heroe-portada {
	--heroe-ancho-max: 1600px;
	max-width: var(--heroe-ancho-max);
	margin-inline: auto !important;

	/* LA CLAVE PARA NO RECORTAR EL CUADRO, y es lo que distingue esto de un
	   "cover" normal: el contenedor lleva EXACTAMENTE la proporción de la
	   imagen (2400 × 1184), así que al `object-fit: cover` de dentro no le queda
	   nada que cortar —un cover de fábrica impone una altura en píxeles y
	   recorta lo que sobra, y recortar un cuadro lo mutila—. Si se cambia la
	   imagen de portada por otra de proporción distinta, HAY QUE CAMBIAR ESTE
	   NÚMERO o volverá a recortar.

	   El `!important` no es pereza: WordPress escribe `style="aspect-ratio:unset"`
	   EN LÍNEA en el div, y un estilo en línea gana a la hoja. Sin él, el cover
	   se queda con la altura de su contenido y la obra no tiene dónde pintarse. */
	aspect-ratio: 2400 / 1184 !important;
	min-height: 0 !important;
}

/* El texto y el botón, centrados sobre la obra. */
.wp-block-cover.heroe-portada .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 3vw, 2rem);
	width: 100%;
}

/* ---------------------------------------------------------------------------
   El nombre, con las dos líneas rojas.

   Van como pseudo-elementos y no como bloques separadores para que el cliente
   no pueda separarlas del texto sin querer: son parte del título, no tres
   cosas sueltas que hay que mantener alineadas a mano.
   --------------------------------------------------------------------------- */
.heroe-titulo {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--blanco);
	text-align: center;
	/* Escala con la ventana: en un móvil la franja mide poco más de 150 px de
	   alto y un tamaño fijo se saldría por los lados. */
	font-size: clamp(1.25rem, 6vw, 4.5rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	margin: 0;
	/* Sombra en vez de oscurecer más la obra: el cuadro tiene nubes claras
	   donde el blanco se perdería, y bajar la imagen entera para arreglar un
	   trozo sería pagarlo con toda la pintura. */
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.4rem, 1.6vw, 1.1rem);
	width: min(100%, 1100px);
}

.heroe-titulo::before,
.heroe-titulo::after {
	content: "";
	display: block;
	width: 100%;
	height: clamp(2px, 0.35vw, 5px);
	background: var(--wp--preset--color--rojo);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------------
   El botón. Hoy no lleva a ningún sitio a propósito —dice que la web está en
   construcción—, así que se marca como no interactivo: sin `cursor: pointer`
   que prometa un clic que no pasa nada, y sin foco de teclado que lleve a un
   enlace vacío.
   --------------------------------------------------------------------------- */
.heroe-portada .wp-block-button__link {
	background-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
	border-radius: 3px;
	padding: 0.7em 1.6em;
	font-size: clamp(0.8rem, 1.6vw, 1.05rem);
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.heroe-portada .wp-block-button__link:not([href]) {
	cursor: default;
}

/* ---------------------------------------------------------------------------
   PRÓXIMA EXPOSICIÓN
   Debajo del héroe y separado de él: es información con fecha, no parte de la
   portada. El día que la exposición pase, esto se quita o se sustituye y la
   portada sigue en pie sin tocar nada más.
   --------------------------------------------------------------------------- */
.proxima-exposicion {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	margin-top: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* El cartel lleva texto pequeño —fechas, dirección— así que no se estira más
   allá de sus 1009 px reales: agrandarlo emborrona justo lo que hay que leer. */
.wp-block-image.cartel-exposicion {
	max-width: min(100%, 1009px);
	margin-inline: auto;
}

.wp-block-image.cartel-exposicion img {
	width: 100%;
	height: auto;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* Los datos de la exposición en texto, debajo del cartel. Existen aparte de la
   imagen a propósito: lo que está pintado dentro de un cartel no lo lee ni un
   buscador ni un lector de pantalla. */
.datos-exposicion {
	margin-top: clamp(1rem, 2.5vw, 1.5rem);
	text-align: center;
}

.datos-exposicion h3 {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	margin-bottom: 0.6rem;
}

.datos-exposicion p {
	line-height: 1.7;
	margin: 0 0 0.4rem;
}

.datos-exposicion .organizan {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--suave);
}