/*
 * Estilos del front-end del plugin "Macarena — Actualidad".
 *
 * Estructura de clases:
 *   .ma-home                 wrapper del shortcode [macarena_noticias_home]
 *     .ma-home__header         numeral + título (izquierda) y "ver todas" (derecha)
 *     .ma-home__carrusel       carrusel de "Destacadas" (bucle infinito, ver carrusel-home.js)
 *     .ma-home__recientes      diez noticias recientes, dos filas de cinco
 *   .ma-grid-wrap             wrapper del shortcode [macarena_noticias_archivo]
 */

.ma-home {
	padding: clamp(48px, 6vw, 96px) 0;
}

.ma-home,
.ma-grid-wrap {
	box-sizing: border-box;
}

.ma-home *,
.ma-grid-wrap * {
	box-sizing: border-box;
}

.ma-empty {
	opacity: .7;
	font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */

.ma-home__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 28px;
}

.ma-home__header-titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
}

.ma-home__header-titulo h2 {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 52px); /* el h2 "de serie" del tema se queda en ~26px: aquí se iguala al mismo tratamiento que usan otros títulos de sección de la portada (p.ej. "02 · Hoy en la Macarena", en 52px) */
	line-height: 1;
}

.ma-home__numeral {
	font-family: 'Cormorant Garamond', serif;
	font-size: 15px; /* mismo tamaño que usa el propio tema en sus numerales de sección ("02" de "Hoy en la Macarena") */
	font-weight: 400;
	color: #b68235;
}

.ma-home__ver-todas {
	flex: none;
	white-space: nowrap;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7d5411;
	text-decoration: none;
	border-bottom: 1px solid rgba(125, 84, 17, .35);
	padding-bottom: 3px;
}

.ma-home__ver-todas:hover {
	color: #b68235;
	border-color: #b68235;
}

/* ------------------------------------------------------------------ */
/* Carrusel de destacadas                                              */
/* ------------------------------------------------------------------ */

.ma-home__carrusel {
	position: relative;
	margin-bottom: 40px;
}

.ma-home__carrusel-viewport {
	overflow: hidden;
	padding: 0; /* carrusel-home.js la ajusta a 46px 0 58px cuando hay 3 visibles: es el hueco que necesita la tarjeta central al escalar por encima de su celda */
}

.ma-home__carrusel-track {
	display: flex;
	gap: 24px; /* sin JS: aproximación razonable: 0/24/32px según carrusel-home.js */
	will-change: transform;
	transition: transform .75s cubic-bezier(.22, .61, .36, 1);
}

.ma-home__carrusel-item {
	position: relative;
	flex: 0 0 var(--ma-item-w, 33.333%);
	min-width: 0;
	opacity: 0;
	transform: scale(1);
	transform-origin: center bottom;
	transition: transform .75s cubic-bezier(.22, .61, .36, 1), opacity .6s ease;
}

.ma-home__carrusel-item.is-visible {
	opacity: 1;
}

.ma-home__destacada {
	display: grid;
	gap: 12px;
	color: #1b1a17;
	text-decoration: none;
}

.ma-home__destacada:hover {
	color: #7d5411;
}

.ma-home__img-envoltorio {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3; /* también en el envoltorio: si la entrada no tiene imagen, esto es lo que reserva el hueco en vez de dejarlo colapsar a 0 */
	background: #e8e2d4; /* marcador de color mientras carga, o si la entrada no tiene imagen — nunca un hueco vacío */
	overflow: hidden;
}

.ma-home__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 639px) {
	.ma-home__img-envoltorio,
	.ma-home__img {
		aspect-ratio: 16 / 9;
	}
}

.ma-home__velo {
	position: absolute;
	inset: 0;
	background: #2a2724;
	mix-blend-mode: multiply;
	opacity: 0; /* central: 0 — la lateral la sube a .72 solo en escritorio, ver abajo */
	transition: opacity .7s ease;
	pointer-events: none;
}

.ma-home__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 9px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

@media (max-width: 639px) {
	.ma-home__meta {
		font-size: 9.5px;
		min-height: 44px; /* para que las flechas superpuestas, a esta misma altura, no las tapen */
		align-items: center;
	}
}

.ma-home__categoria {
	color: #7d5411;
}

.ma-home__fecha {
	color: rgba(27, 26, 23, .42);
	font-variant-numeric: tabular-nums;
}

.ma-home__titulo {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: clamp(17px, 1.8vw, 24px);
	line-height: 1.1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ma-home__titulo-sm {
	margin: 6px 0 0;
	font-size: .92em;
	line-height: 1.3;
}

.ma-home__titulo-sm a {
	color: inherit;
	text-decoration: none;
}

.ma-home__titulo-sm a:hover {
	text-decoration: underline;
}

.ma-home__boton-ver-mas {
	justify-self: start;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7d5411;
	border: 1px solid rgba(125, 84, 17, .4);
	padding: 9px 15px;
}

.ma-home__destacada:hover .ma-home__boton-ver-mas {
	border-color: #b68235;
	color: #b68235;
}

/* Las flechas: un único par de botones superpuestos dentro del carrusel
 * (posición absoluta), nunca dos botones sueltos a los lados — es lo que
 * evita que el bloque se vea más ancho o más estrecho que la rejilla de
 * recientes de abajo. */
.ma-home__carrusel-flechas {
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	display: flex;
	gap: 0;
	justify-content: space-between;
	pointer-events: none;
}

.ma-home__carrusel.is-estatico .ma-home__carrusel-flechas {
	display: none;
}

@media (max-width: 639px) {
	.ma-home__carrusel-flechas {
		top: calc(56.25% + 10px);
		left: auto;
		right: 0;
		justify-content: flex-end;
	}
}

.ma-home__flecha {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(244, 240, 231, .92);
	border: 1px solid rgba(27, 26, 23, .2);
	color: #1b1a17;
	cursor: pointer;
}

.ma-home__flecha--prev {
	border-right: 0;
}

.ma-home__flecha:hover {
	background: #f4f0e7;
	border-color: #b68235;
	color: #7d5411;
}

.ma-home__flecha:focus-visible {
	outline: 2px solid #b68235;
	outline-offset: 2px;
}

/* El destacado central (solo escritorio, ≥1000px, que es donde hay 3
 * visibles): se escala por encima de las laterales, que además llevan un
 * velo de gris oscuro en modo multiplicar sobre la fotografía — nunca un
 * simple desaturado, la foto tiene que seguir intuyéndose. */
@media (min-width: 1000px) {
	.ma-home__carrusel-item {
		z-index: 1;
		transform: scale(.84);
	}

	.ma-home__carrusel-item.is-centro {
		z-index: 2;
		transform: scale(1.16);
	}

	.ma-home__carrusel-item.is-centro .ma-home__img-envoltorio {
		box-shadow: 0 22px 54px rgba(8, 25, 19, .28);
	}

	.ma-home__carrusel-item:not(.is-centro) .ma-home__velo {
		opacity: .72;
	}

	.is-centro .ma-home__destacada {
		gap: 15px;
	}

	.is-centro .ma-home__titulo {
		font-size: clamp(21px, 2.2vw, 31px);
	}
}

/* ------------------------------------------------------------------ */
/* Recientes (diez entradas, dos filas de cinco)                       */
/* ------------------------------------------------------------------ */

.ma-home__recientes {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0 clamp(20px, 2.6vw, 40px);
}

.ma-home__reciente {
	min-width: 0;
	display: grid;
	grid-template-rows: auto auto auto;
	align-content: start;
	gap: 12px;
	padding: clamp(18px, 2.2vw, 28px) 0 clamp(20px, 2.4vw, 30px);
	border-bottom: 1px solid rgba(27, 26, 23, .14);
}

.ma-home__reciente .ma-home__img-envoltorio,
.ma-home__reciente .ma-home__img {
	aspect-ratio: 16 / 9;
}

.ma-home__reciente .ma-home__meta {
	margin: 0;
	letter-spacing: .18em;
	min-height: 0;
}

.ma-home__reciente .ma-home__titulo-sm {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(17px, 1.75vw, 23px);
	line-height: 1.16;
	margin: 0;
}

.ma-home__reciente .ma-home__titulo-sm a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1000px) {
	.ma-home__recientes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ma-home__recientes {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Rejilla / Archivo                                                   */
/* ------------------------------------------------------------------ */

.ma-grid__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.ma-grid__filtro {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 20px;
	color: inherit;
	text-decoration: none;
	font-size: .9em;
}

.ma-grid__filtro.is-activo,
.ma-grid__filtro:hover {
	border-color: #b08d2b;
	background: #b08d2b;
	color: #fff;
}

.ma-grid {
	display: grid;
	grid-template-columns: repeat(var(--ma-grid-columnas-pc, 4), 1fr);
	gap: 28px;
}

.ma-grid__card {
	display: flex;
	flex-direction: column;
}

.ma-grid__card .ma-home__img-envoltorio,
.ma-grid__card .ma-home__img {
	aspect-ratio: 4 / 3;
}

.ma-grid__titulo {
	margin: 8px 0 6px;
	font-size: 1em;
	line-height: 1.35;
}

.ma-grid__titulo a {
	color: inherit;
	text-decoration: none;
}

.ma-grid__titulo a:hover {
	text-decoration: underline;
}

.ma-grid__extracto {
	margin: 0 0 10px;
	font-size: .9em;
	opacity: .8;
}

.ma-grid__seguir {
	display: inline-block;
	margin-top: auto;
	align-self: flex-start;
	font-weight: 600;
	font-size: .85em;
	color: #b08d2b;
	text-decoration: none;
}

.ma-grid__seguir:hover {
	text-decoration: underline;
}

.ma-grid__paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.ma-grid__pagina {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	font-size: .9em;
}

.ma-grid__pagina.is-activa,
.ma-grid__pagina:hover {
	border-color: #b08d2b;
	background: #b08d2b;
	color: #fff;
}

@media (max-width: 999px) {
	.ma-grid {
		grid-template-columns: repeat(var(--ma-grid-columnas-tablet, 2), 1fr);
	}
}

@media (max-width: 559px) {
	.ma-grid {
		grid-template-columns: repeat(var(--ma-grid-columnas-movil, 1), 1fr);
	}
}