.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}

.hero--full {
	/* "Pantalla completa" descontando la altura del header, que va encima
	   en el flujo normal del documento (no es sticky/fixed), para que el
	   Hero + header quepan enteros en el viewport sin hacer scroll. */
	min-height: calc(100vh - var(--header-height, 88px));
	padding-block: 80px;
}

.hero--compact {
	min-height: 45vh;
	padding-block: 80px;
}

.hero--overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(46, 46, 46, 0.62);
}

.hero__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

/* Selector con dos clases a propósito: necesita más especificidad que
   `.container` (una clase) para ganarle de forma fiable pase lo que pase
   con el orden de carga de las hojas de estilo de los bloques. Más ancho
   que el .container general (1200px): los títulos traducidos al
   catalán/castellano son más largos que el original en inglés y
   necesitan más sitio para caber en una sola línea en escritorio. */
.hero .hero__inner {
	max-width: 1400px;
}

.hero__title {
	/* Fuente/peso heredados del estilo global de h1 en theme.json (Lora,
	   weight 500); el tamaño se sobrescribe aquí, más grande que el "huge"
	   global, y con clamp() para que escale de forma fluida sin necesitar
	   una media query aparte. El máximo se ha ajustado (antes 4.5rem) para
	   que títulos largos en catalán/castellano quepan en una sola línea;
	   si aun así no cupiera, el text-wrap:balance global (ver style.css
	   raíz) reparte el salto de línea de forma equilibrada en vez de
	   dejar una palabra suelta. */
	margin: 0 0 16px;
	font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
	color: var(--wp--preset--color--base);
}

.hero__subtitle {
	margin: 0 0 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--base);
}

.hero__button {
	display: inline-flex;
}

/* ----------------------------------------------------------
   MÓVIL
   ---------------------------------------------------------- */

@media (max-width: 640px) {
	.hero--full,
	.hero--compact {
		padding-block: 56px;
	}

	.hero--compact {
		min-height: 38vh;
	}

	.hero__title {
		margin-bottom: 14px;
	}

	.hero__subtitle {
		margin-bottom: 24px;
	}
}