/**
 * Kalunat — plantilla de página "Portada: horizontes"
 * (templates/page-horizons.html).
 *
 * La disposición de una maqueta de portada editorial con la tipografía y
 * los colores del tema:
 * 1. Hero a pantalla completa: la imagen destacada de la página con un
 *    velo a la izquierda y abajo; encima, un rótulo, el título grande,
 *    la entradilla y el enlace al Journal.
 * 2. Destacada en tres columnas: texto, foto y una columna estrecha con
 *    las categorías y la fecha.
 * 3. "Lo último del journal": cabecera con "Ver todo" y cuatro tarjetas.
 * Los rótulos y enlaces, en versalitas pequeñas de la interfaz.
 *
 * La variante con carrusel (.kalunat-hz--carousel, sección 5) cambia el
 * hero por el carrusel de destacados en diseño "hero" (sus estilos son
 * los del bloque) y la destacada por una lista de tres entradas con la
 * foto a la derecha.
 *
 * Solo se carga en esta plantilla (inc/horizons.php).
 */

/* =====================================================================
   0. RÓTULOS Y ENLACES
   ===================================================================== */

.kalunat-hz .kalunat-hz-label,
.kalunat-hz .kalunat-hz-more,
.kalunat-hz .kalunat-hz-feat__terms,
.kalunat-hz .kalunat-hz-feat__date,
.kalunat-hz .kalunat-hz-card__terms,
.kalunat-hz .kalunat-hz-card__date {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	line-height: 1.4;
	text-transform: uppercase;
}

.kalunat-hz .kalunat-hz-label {
	color: var(--wp--preset--color--muted);
}

.kalunat-hz :is(.kalunat-hz-more a, a.kalunat-hz-more) {
	color: inherit;
	text-decoration: none;
}

.kalunat-hz :is(.kalunat-hz-more a, a.kalunat-hz-more)::after {
	content: "→";
	display: inline-block;
	margin-left: 0.6em;
	transition: translate 0.3s var(--wp--custom--motion--ease);
}

.kalunat-hz :is(.kalunat-hz-more a, a.kalunat-hz-more):hover::after {
	translate: 0.3em 0;
}

/* =====================================================================
   1. HERO
   ===================================================================== */

.kalunat-hz .kalunat-hz-hero {
	align-items: flex-end;
	margin-top: 0;
	padding: 0;
	color: var(--wp--preset--color--on-image);
}

.kalunat-hz-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.15) 55%, rgb(0 0 0 / 0) 75%),
		linear-gradient(0deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0) 45%),
		linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 22%);
	pointer-events: none;
}

.kalunat-hz-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
}

.kalunat-hz-hero__content {
	box-sizing: border-box;
	max-width: calc(36rem + var(--wp--style--root--padding-left) * 2);
	padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-left) var(--wp--preset--spacing--70);
}

.kalunat-hz-hero__content > * {
	margin-block: 0;
}

.kalunat-hz .kalunat-hz-hero .kalunat-hz-label {
	color: inherit;
	opacity: 0.85;
}

.kalunat-hz .kalunat-hz-hero__title {
	margin-top: 1.4rem;
	color: inherit;
	font-size: clamp(2.97rem, 1.728rem + 3.888vw, 5.67rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.kalunat-hz .kalunat-hz-hero__text {
	max-width: 34rem;
	margin-top: 1.6rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	opacity: 0.9;
}

/* El contenido de la página, todo como texto corrido (sin los
   márgenes ni los tamaños de los encabezados de los artículos). */
.kalunat-hz .kalunat-hz-hero__text.wp-block-post-content > * {
	margin: 0 0 0.6em;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
}

.kalunat-hz .kalunat-hz-hero .kalunat-hz-more {
	margin-top: 2.2rem;
}

/* =====================================================================
   2. DESTACADA
   ===================================================================== */

.kalunat-hz .kalunat-hz-feat {
	margin-top: 0;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.kalunat-hz-feat__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kalunat-hz-feat__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 0.45fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.kalunat-hz-feat__row > * {
	margin: 0;
}

.kalunat-hz-feat__text > * {
	margin-block: 0;
}

.kalunat-hz .kalunat-hz-feat__title {
	margin-top: 1.2rem;
	font-size: clamp(2.16rem, 1.512rem + 1.728vw, 3.24rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.kalunat-hz .kalunat-hz-feat__title a {
	color: inherit;
	text-decoration: none;
}

.kalunat-hz .kalunat-hz-feat__excerpt {
	margin-top: 1.4rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.kalunat-hz .kalunat-hz-feat__excerpt p {
	margin: 0;
}

.kalunat-hz .kalunat-hz-feat__text .kalunat-hz-more {
	display: inline-block;
	margin-top: 2rem;
}

.kalunat-hz .kalunat-hz-feat__image {
	margin: 0;
}

.kalunat-hz-feat__side {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	padding-top: 0.3rem;
}

.kalunat-hz-feat__side > * {
	margin: 0;
}

/* Las categorías, una debajo de otra; debajo, un filete y la fecha. */
.kalunat-hz .kalunat-hz-feat__terms {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 30%, transparent);
}

.kalunat-hz .kalunat-hz-feat__terms .wp-block-post-terms__separator {
	display: none;
}

.kalunat-hz .kalunat-hz-feat__terms a,
.kalunat-hz .kalunat-hz-card__terms a {
	color: inherit;
	text-decoration: none;
}

.kalunat-hz .kalunat-hz-feat__date {
	color: var(--wp--preset--color--muted);
}

/* =====================================================================
   3. LO ÚLTIMO DEL JOURNAL
   ===================================================================== */

.kalunat-hz .kalunat-hz-latest {
	margin-top: 0;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 25%, transparent);
}

.kalunat-hz-latest__head {
	margin-bottom: var(--wp--preset--spacing--40);
}

.kalunat-hz .kalunat-hz-latest__title {
	margin: 0;
	font-size: clamp(1.728rem, 1.296rem + 1.08vw, 2.376rem);
	letter-spacing: -0.01em;
}

.kalunat-hz-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kalunat-hz-cards > li {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 0;
}

.kalunat-hz-cards > li > * {
	margin: 0;
}

.kalunat-hz .kalunat-hz-card__image {
	margin-bottom: 0.6rem;
}

.kalunat-hz .kalunat-hz-card__terms {
	color: var(--wp--preset--color--muted);
}

.kalunat-hz .kalunat-hz-card__title {
	max-width: 18rem;
	font-size: calc(var(--wp--preset--font-size--large) * 1.08);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.kalunat-hz .kalunat-hz-card__title a {
	color: inherit;
	text-decoration: none;
}

.kalunat-hz .kalunat-hz-card__date {
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/* =====================================================================
   5. VARIANTE CON CARRUSEL: LISTA CON FOTO
   Las entradas son filas de una rejilla de dos columnas (cada <li> se
   disuelve con display: contents): a la izquierda, el texto de cada una
   con un filete encima; a la derecha, todas las fotos en la misma celda,
   que abarca todas las filas (la última, flexible, se queda con el alto
   que sobre). Solo se ve la de la entrada activa (assets/js/horizons.js;
   sin script, la primera) y las demás entradas se atenúan.
   ===================================================================== */

.kalunat-hz .kalunat-featured {
	margin-top: 0;
}

.kalunat-hz .kalunat-hz-picks {
	margin-top: 0;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.kalunat-hz-picks > .kalunat-hz-label {
	margin-bottom: var(--wp--preset--spacing--30);
}

.kalunat-hz-picks .wp-block-query {
	margin: 0;
}

.kalunat-hz-picks__items {
	display: grid;
	grid-template-rows: repeat(3, auto) 1fr;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	column-gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kalunat-hz-picks__items > li {
	display: contents;
}

.kalunat-hz .kalunat-hz-picks__text {
	grid-column: 1;
	margin: 0;
	padding-block: 1.6rem 1.8rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 30%, transparent);
	opacity: 0.45;
	transition: opacity 0.4s ease;
}

.kalunat-hz-picks__text > * {
	margin-block: 0;
}

.kalunat-hz-picks__meta {
	gap: 0.4rem 1.2rem;
}

.kalunat-hz .kalunat-hz-picks__title {
	margin-top: 0.9rem;
	font-size: clamp(1.728rem, 1.296rem + 1.296vw, 2.592rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.kalunat-hz .kalunat-hz-picks__title a {
	color: inherit;
	text-decoration: none;
}

.kalunat-hz .kalunat-hz-picks__excerpt {
	max-width: 34rem;
	margin-top: 0.9rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.kalunat-hz .kalunat-hz-picks__excerpt p {
	margin: 0;
}

.kalunat-hz .kalunat-hz-picks__image {
	grid-row: 1 / -1;
	grid-column: 2;
	align-self: start;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease, scale 1.2s var(--wp--custom--motion--ease);
	scale: 1.02;
}

/* La activa: el texto entero y su foto a la vista. Sin script, la
   primera. */
.kalunat-hz-picks__items > li.is-active .kalunat-hz-picks__text,
.kalunat-hz-picks__items:not(.is-ready) > li:first-child .kalunat-hz-picks__text {
	opacity: 1;
}

.kalunat-hz-picks__items > li.is-active .kalunat-hz-picks__image,
.kalunat-hz-picks__items:not(.is-ready) > li:first-child .kalunat-hz-picks__image {
	opacity: 1;
	pointer-events: auto;
	scale: 1;
}

.kalunat-hz .kalunat-hz-picks__image img {
	border-radius: var(--wp--custom--radius--media);
}

/* La newsletter: arriba ya hay el aire de "Lo último del journal";
   abajo, el mismo antes del pie. */
.kalunat-hz .kalunat-mag-letter {
	margin-top: 0 !important;
	margin-bottom: var(--wp--preset--spacing--70);
}

/* =====================================================================
   4. PANTALLAS MÁS ESTRECHAS
   ===================================================================== */

@media (max-width: 1024px) {

	.kalunat-hz-feat__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.kalunat-hz-feat__side {
		flex-direction: row;
		grid-column: 1 / -1;
		align-items: center;
	}

	.kalunat-hz .kalunat-hz-feat__terms {
		flex-direction: row;
		padding: 0;
		border: 0;
	}

	.kalunat-hz-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {

	.kalunat-hz-feat__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	.kalunat-hz-feat__image {
		grid-row: 1;
	}

	.kalunat-hz-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* La lista: la foto de la activa arriba y las entradas debajo. */
	.kalunat-hz-picks__items {
		grid-template-rows: none;
		grid-template-columns: minmax(0, 1fr);
	}

	.kalunat-hz .kalunat-hz-picks__image {
		grid-row: 1;
		grid-column: 1;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	.kalunat-hz .kalunat-hz-picks__text {
		grid-column: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.kalunat-hz .kalunat-hz-picks__image {
		transition: opacity 0.2s linear;
		scale: none;
	}
}