/* ============================================================
   HERO DE UNA PAGINA DE LUGAR
   ============================================================

   La portada grande con el nombre del sitio encima. La pinta
   templates/partials/hero-de-lugar.php.

   POR QUE UNA HOJA PROPIA Y CLASES PROPIAS. El hero de la colonia se apoyaba
   en .grid, .background, .container y .titleGrid, que son clases globales que
   usan otras vistas para otras cosas. De ahi salian sus dos defectos de
   maquetado: el titulo sin la tipografia del sitio -porque la regla que se la
   da cuelga de #banner, que esta pagina no tiene- y el centrado a medias
   -porque .oh-center centra la CAJA, y un nombre que salta a dos lineas
   necesita ademas text-align, ancho maximo y margen automatico-.

   Todo lo de aqui cuelga de .location-hero. No hay un solo selector suelto que
   pueda alcanzar a otro banner del sitio.

   La tipografia NO se declara aqui: MullerNextExpandedTrial ya viene de
   css/fonts.css, que se carga en todas las paginas. Declarar otro @font-face
   por vista es como se llego a tener cuatro apuntando a rutas distintas.
   ============================================================ */

.location-hero {
	position: relative;
	/* El alto no lo decide el contenido: una portada mide igual tenga el sitio
	   nombre corto o largo. */
	min-height: clamp(22rem, 42vw, 34rem);
	overflow: hidden;
	background: #111;
}

.location-hero__media,
.location-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.location-hero__media img {
	display: block;
	/* cover y no contain: la foto llena el hero y se recorta por el centro. Sin
	   filter, sin scale y sin nada que pretenda arreglar una foto pequeña: si la
	   portada es mala, se cambia la portada. */
	object-fit: cover;
	object-position: center;
	max-width: none;
}

.location-hero__overlay {
	position: absolute;
	inset: 0;
	/* Lo justo para que el texto blanco se lea sobre cualquier foto. */
	background: rgba(0, 0, 0, 0.32);
}

.location-hero__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-content: center;
	justify-items: center;
	width: 100%;
	padding: 1.5rem;
	text-align: center;
	color: #fff;
}

.location-hero__title,
.location-hero__subtitle {
	margin-inline: auto;
	text-align: center;
	font-family: "MullerNextExpandedTrial", "MullerNextExpanded", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
}

.location-hero__title {
	/* El ancho maximo es lo que mantiene centrado un nombre largo: sin el, la
	   linea llega hasta el borde y el bloque deja de parecer centrado.
	   Comprobado con "Painted Desert At Mission Ridge" y "Neuchatel Cuadrante
	   Polanco". */
	max-width: min(90vw, 22ch);
	margin-bottom: .5rem;
	font-size: clamp(1.75rem, 4vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: 0.08em;
}

.location-hero__subtitle {
	max-width: min(90vw, 30ch);
	font-size: clamp(.875rem, 1.4vw, 1.125rem);
	letter-spacing: 0.14em;
	opacity: .92;
}

/* EL CREDITO DE LA FOTO.
   Discreto pero legible: es una obligacion de la licencia CC BY, no un adorno,
   asi que no puede quedar en un gris que no se lea sobre la foto. Va en la
   esquina, fuera del bloque centrado, para no competir con el nombre. */
.location-hero__credito {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: .45rem .9rem;
	font-size: .6875rem;
	line-height: 1.4;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .82);
	background: rgba(0, 0, 0, .35);
	border-top-left-radius: 8px;
}

.location-hero__credito a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.location-hero__credito a:hover {
	color: #fff;
}

/* Sin foto, el hero es mas bajo: no hay nada que enseñar y una franja negra de
   34rem solo estorba. Sigue siendo un alto fijo, no uno que dependa del texto. */
.location-hero--sin-foto {
	min-height: clamp(14rem, 22vw, 20rem);
}

@media (max-width: 47.99rem) {
	.location-hero {
		min-height: 16rem;
	}

	.location-hero--sin-foto {
		min-height: 11rem;
	}

	.location-hero__content {
		padding: 1rem;
	}

	.location-hero__title {
		letter-spacing: 0.06em;
	}
}