/**
 * Kalunat — plantilla de página "Journal" (templates/page-journal.html).
 *
 * Portada en forma de índice: toda la página en oscuro
 * (body.kalunat-is-dark, ver inc/journal.php y global.css) y una sola
 * lista de entradas en filas finas (la variante compacta, sección 3):
 * título, categoría y fecha. La fila bajo el cursor se enciende con el
 * acento y las demás se apagan; su foto aparece y sigue al ratón
 * (assets/js/journal.js).
 *
 * La lista sin la variante compacta (fecha, título grande y categoría)
 * es la de la portada de últimas entradas y la de Magazine.
 *
 * Solo se carga en esta plantilla (inc/journal.php).
 */

/* =====================================================================
   1. FONDO
   Dos focos de color (degradados radiales difuminados) que cambian de
   forma muy despacio. La página recorta lo que sobresale solo por los
   lados, para no crear scroll horizontal; por abajo el foco puede
   seguir detrás del pie si la lista es corta.
   ===================================================================== */

.kalunat-journal-list-page {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.kalunat-journal-list-page::before,
.kalunat-journal-list-page::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
	filter: blur(60px);
	opacity: 0.22;
	pointer-events: none;
	animation: kalunat-journal-blob 24s ease-in-out infinite alternate;
}

.kalunat-journal-list-page::before {
	top: 30%;
	left: 8%;
	width: min(38rem, 45vw);
	aspect-ratio: 1.3;
	background: radial-gradient(circle at 40% 40%, var(--wp--preset--color--accent), transparent 70%);
}

.kalunat-journal-list-page::after {
	top: 12%;
	right: 12%;
	width: min(18rem, 22vw);
	aspect-ratio: 0.8;
	background: radial-gradient(circle at 50% 50%, #8a5a1c, transparent 70%);
	animation-duration: 31s;
	animation-direction: alternate-reverse;
}

@keyframes kalunat-journal-blob {

	from {
		border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
		transform: translate(0, 0) rotate(0deg);
	}

	to {
		border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%;
		transform: translate(4vw, -3vh) rotate(25deg);
	}
}

/* =====================================================================
   2. LISTA
   ===================================================================== */

.kalunat-journal-list__items.wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kalunat-journal-list__items > li {
	margin: 0;
}

.kalunat-journal-list__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr);
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: 0.3em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.kalunat-journal-list__row > * {
	margin: 0;
}

/* El título, en la letra de los titulares, ligera (300), a
   3rem (en móvil, algo menos): el protagonista de la fila. */
.kalunat-journal-list .kalunat-journal-list__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.24rem;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.kalunat-journal-list .kalunat-journal-list__date,
.kalunat-journal-list .kalunat-journal-list__category {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent);
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	transition: color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.kalunat-journal-list__category {
	text-align: right;
}

.kalunat-journal-list .kalunat-journal-list__category a {
	color: inherit;
	text-decoration: none;
}

/* Toda la fila es el enlace (la categoría queda por debajo). En línea,
   no en bloque en línea: así la fecha y la categoría se alinean con la
   primera línea del título cuando ocupa dos. */
.kalunat-journal-list .kalunat-journal-list__title a {
	display: inline;
	text-decoration: none;
}

.kalunat-journal-list__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kalunat-journal-list__items > li:is(:hover, :focus-within) :is(.kalunat-journal-list__date, .kalunat-journal-list__category) {
	color: var(--wp--preset--color--contrast);
}

/* La foto: fija, siguiendo al cursor, un poco por encima y a la derecha
   del puntero. Aparece descubriéndose de abajo arriba. */
.kalunat-journal-list .kalunat-journal-list__preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	width: min(30rem, 30vw);
	margin: 0;
	opacity: 0;
	pointer-events: none;
	clip-path: inset(100% 0 0 0);
	transform: translate3d(var(--kalunat-x, -100vw), var(--kalunat-y, 0), 0) translate(12%, -40%);
	transition: opacity var(--wp--custom--motion--fast) ease, clip-path var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.kalunat-journal-list__preview img {
	width: 100%;
	height: auto;
	object-fit: cover;
	scale: 1.15;
	transition: scale 0.8s var(--wp--custom--motion--ease);
}

.kalunat-journal-list__items > li:hover .kalunat-journal-list__preview {
	opacity: 1;
	clip-path: inset(0);
}

.kalunat-journal-list__items > li:hover .kalunat-journal-list__preview img {
	scale: 1;
}

.kalunat-journal-list__pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Sin cursor o en pantallas estrechas: sin foto flotante; fecha y
   categoría, pequeñas, encima del título. */
@media (hover: none), (max-width: 781px) {

	.kalunat-journal-list .kalunat-journal-list__preview {
		display: none;
	}
}

@media (max-width: 781px) {

	.kalunat-journal-list__row {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 0.1em;
		padding-block: var(--wp--preset--spacing--20);
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 20%, transparent);
	}

	.kalunat-journal-list .kalunat-journal-list__date,
	.kalunat-journal-list .kalunat-journal-list__category {
		font-size: var(--wp--preset--font-size--x-small);
	}

	.kalunat-journal-list__title {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* En móvil, unos 38px: 3rem partía cada título en tres líneas. */
	.kalunat-journal-list .kalunat-journal-list__title {
		font-size: 2.538rem;
	}
}

/* =====================================================================
   3. VARIANTE COMPACTA (.kalunat-journal-list--compact)
   Como las filas del tema pFolio: un filete encima de cada fila, el
   título en la letra de la interfaz al tamaño del texto y, a la
   derecha, la fecha (y, si la hay, la categoría antes, en una columna
   fija para que queden alineadas). Al pasar el cursor, el título de la
   fila se pone del color de acento y los demás se apagan. La usan la
   plantilla Journal y la portada "presentación".
   ===================================================================== */

.kalunat-journal-list--compact .kalunat-journal-list__row {
	grid-template-columns: minmax(0, 1fr) auto;
	padding-block: 0.7rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 30%, transparent);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

.kalunat-journal-list--compact .kalunat-journal-list__row:has(.kalunat-journal-list__category) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) 6.5rem;
}

.kalunat-journal-list--compact .kalunat-journal-list__items > li:last-child .kalunat-journal-list__row {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 30%, transparent);
}

.kalunat-journal-list.kalunat-journal-list--compact .kalunat-journal-list__title {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: normal;
	transition: color var(--wp--custom--motion--fast) ease;
}

.kalunat-journal-list.kalunat-journal-list--compact :is(.kalunat-journal-list__date, .kalunat-journal-list__category) {
	color: var(--wp--preset--color--muted);
}

.kalunat-journal-list--compact .kalunat-journal-list__category {
	text-align: left;
}

.kalunat-journal-list.kalunat-journal-list--compact .kalunat-journal-list__date {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.kalunat-journal-list--compact .kalunat-journal-list__items:hover .kalunat-journal-list__title {
	color: var(--wp--preset--color--muted);
}

.kalunat-journal-list--compact .kalunat-journal-list__items > li:is(:hover, :focus-within) .kalunat-journal-list__title {
	color: var(--wp--preset--color--accent);
}

/* En móvil, igual: el título y la fecha en la misma fila (la lista
   normal pone la fecha encima); la categoría, pequeña, debajo del
   título. */
@media (max-width: 781px) {

	.kalunat-journal-list--compact .kalunat-journal-list__row,
	.kalunat-journal-list--compact .kalunat-journal-list__row:has(.kalunat-journal-list__category) {
		grid-template-columns: minmax(0, 1fr) auto;
		padding-block: 0.7rem;
		border-bottom: 0;
	}

	.kalunat-journal-list.kalunat-journal-list--compact .kalunat-journal-list__title {
		grid-column: 1;
		grid-row: 1;
		font-size: inherit;
	}

	.kalunat-journal-list.kalunat-journal-list--compact .kalunat-journal-list__date {
		grid-column: 2;
		grid-row: 1;
	}

	.kalunat-journal-list.kalunat-journal-list--compact .kalunat-journal-list__category {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

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

	.kalunat-journal-list-page::before,
	.kalunat-journal-list-page::after {
		animation: none;
	}
}