/* ==========================================================================
   Componente — Tratamiento de imagen (duotono "Bocana").

   Dirección elegida el 2026-08-24: la foto del puerto no entra a color. Se
   convierte a gris con mucho contraste y se comprime entre los dos colores de
   marca — `mix-blend-mode: lighten` deja el navy como suelo y `darken` el oro
   como techo. El resultado es material gráfico de marca en vez de una postal,
   y admite texto encima sin pelear con Newsreader.

   Se usa como `<div class="duo"><img …></div>`. El contenedor necesita altura
   propia (grid, aspect-ratio o inset:0), el `img` la rellena.
   ========================================================================== */

.duo {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* Encierra los blend modes: no se comen lo que hay debajo. */
	background: var(--color-navy-deep);
}

.duo > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--duo-filter);
}

.duo::before,
.duo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.duo::before {
	background: var(--duo-floor);
	mix-blend-mode: lighten;
}

.duo::after {
	background: var(--duo-ceiling);
	mix-blend-mode: darken;
}

/* --- Variante rebajada: el cierre de página --- */
/* Misma foto que el hero, apagada al máximo para que sea fondo y no asunto. */

.duo--muted > img {
	filter: var(--duo-filter-muted);
}

.duo--muted::before {
	background: var(--duo-floor-muted);
}

.duo--muted::after {
	background: var(--duo-ceiling-muted);
}

/* --- Sin foto todavía --- */
/* Degradado de reserva en la familia del navy, no el sepia cálido anterior. */

.duo--empty {
	background: var(--photo-placeholder);
}

.duo--empty::before,
.duo--empty::after {
	display: none;
}

/* --- Velo direccional --- */
/* Asienta el pie de foto y cose la imagen con el panel navy contiguo. */

.media-veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(200deg, rgba(11, 37, 69, 0) 42%, rgba(6, 23, 41, 0.72) 100%);
}

/* --- Scrim lateral --- */
/* Para foto a sangre con el texto encima: opaco donde arranca la columna de
   texto y transparente al otro extremo. */

.media-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(6, 23, 41, 0.94) 38%, rgba(6, 23, 41, 0.62) 100%);
}

@media (prefers-reduced-motion: no-preference) {
	.duo > img {
		transition: filter var(--transition-slow);
	}
}