/*
 * Amanecer: carrusel de series de prédicas de la portada y del archivo de prédicas (solo se carga en esas dos páginas).
 * Todas las series en una fila con scroll-snap: 4 tarjetas visibles desde 1000 px, 2 en tableta y ~1,2 en
 * móvil (asoma la siguiente). assets/js/series-carrusel.js añade los controles y el avance automático; sin
 * JavaScript queda la fila desplazable. Debajo, los chips «Explorar las prédicas» y «Ver las N series».
 * Las tarjetas son enlaces: el título se subraya al pasar o enfocar, y el foco lo dibuja base.css (la pista
 * tiene 6 px de relleno para que el contorno del foco no se recorte).
 */

.carrusel {
	position: relative;
	display: flex;
	flex-direction: column;
}

.series {
	--columnas: 4;
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--columnas) - 1) * 18px) / var(--columnas));
	gap: 18px;
	margin: -6px;
	padding: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 6px;
	scrollbar-width: thin;
	list-style: none;
}

/* Con JavaScript hay botones: la barra de desplazamiento sobra. */
.carrusel--activo .series {
	scrollbar-width: none;
}

/* Desfile continuo (series-carrusel.js): sin scroll-snap, que tiraría de cada tarjeta mientras la fila se mueve. */
.carrusel--continuo .series {
	scroll-snap-type: none;
}

.carrusel--activo .series::-webkit-scrollbar {
	display: none;
}

/* Encabezado del carrusel: título centrado y, a su derecha, los controles (anterior, pausa/reanudar y siguiente,
   de 44 px) en la misma fila. Los dos extremos reparten el espacio por igual (el relleno ::before y los
   controles), así el título queda centrado aunque los controles estén ocultos. */
.carrusel__cabeza {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.carrusel__cabeza::before {
	content: "";
}

.carrusel__cabeza::before,
.carrusel__controles {
	flex: 1 1 0;
}

.carrusel__cabeza .cabeza {
	flex: 0 1 auto;
	margin-bottom: 0;
}

.carrusel__controles {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* Oculto (sin JavaScript o sin nada que desplazar): sigue ocupando su lado para no descentrar el título. */
.carrusel__controles[hidden] {
	display: flex;
	visibility: hidden;
}

.carrusel__boton[hidden] {
	display: none;
}

/* Enlace «Saltar el carrusel»: invisible hasta que recibe el foco; entonces se superpone a la pista. */
.carrusel__pista {
	position: relative;
}

.carrusel__saltar {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 2;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--noche);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
}

.carrusel__saltar:not(:focus) {
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.carrusel__saltar:focus-visible {
	outline-color: var(--wp--preset--color--sol);
}

/* Destino del enlace anterior: no se ve ni ocupa sitio. */
.carrusel__fin {
	height: 0;
	outline: none;
}

.carrusel__boton {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--linea);
	border-radius: 50%;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--noche);
	cursor: pointer;
	transition: background-color 0.15s;
}

.carrusel__boton:hover {
	border-color: var(--wp--preset--color--noche);
	background: var(--wp--preset--color--niebla);
}

.carrusel__boton svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.carrusel__icono-play {
	fill: currentColor;
}

.carrusel__icono-play,
.carrusel--pausado .carrusel__icono-pausa {
	display: none;
}

.carrusel--pausado .carrusel__icono-play {
	display: block;
}

.series__item {
	position: relative;
	margin: 0;
	scroll-snap-align: start;
}

.series__item a {
	display: block;
	height: 100%;
	border-radius: 12px;
	text-decoration: none;
}

.series__arte {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--niebla);
}

.series__arte img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.series__item a:hover img {
	transform: scale(1.04);
}

.series__reciente {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 1;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--sol);
	color: var(--wp--preset--color--noche);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
}

.series__item h3 {
	margin: 10px 0 0;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.2;
}

.series__item a:hover h3,
.series__item a:focus-visible h3 {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.series__item p {
	margin: 2px 0 0;
	color: var(--suave);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* La sección va sobre una franja azul claro de lado a lado, que la separa de la anterior y de la siguiente. Los chips,
   que son del mismo azul, pasan a blanco para destacar sobre ella. */
/* Franja compacta (pedido del usuario): poco relleno, para que la portada no se alargue ni las secciones se vean
   apartadas. */
:is(.portada, .interior) .seccion.seccion--series {
	margin-top: 32px;
	padding-top: 28px;
	padding-bottom: 26px;
	background: var(--wp--preset--color--niebla);
}

:is(.portada, .interior) .seccion--series .carrusel__cabeza {
	margin-bottom: 18px;
}

:is(.portada, .interior) .seccion--series .series__pie {
	margin-top: 14px;
}

.portada .seccion--series .chips a {
	background: var(--wp--preset--color--blanco);
}

.portada .seccion--series .chips a:hover {
	background: var(--wp--preset--color--alba);
}

/* Chips de exploración (solo en la portada) y enlace a todas las series. */
.series__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin-top: 18px;
}

/* Sin chips (archivo de prédicas), el enlace queda igualmente a la derecha. */
.series__pie > .enlace {
	margin-left: auto;
}

/* .chips: componentes.css. */

/* Alternativa si Subsplash no responde: su reproductor incrustado. */
.series__incrustado {
	display: block;
	width: 100%;
	min-height: 600px;
	border: 0;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.series__arte img,
	.carrusel__boton {
		transition: none;
	}

	.series__item a:hover img {
		transform: none;
	}
}

@media (max-width: 1000px) {
	.series {
		--columnas: 2;
	}
}

/* En móvil el título ocupa su fila y los controles pasan a la siguiente, a la derecha. */
@media (max-width: 800px) {
	.carrusel__cabeza {
		flex-wrap: wrap;
		gap: 12px;
	}

	.carrusel__cabeza::before {
		display: none;
	}

	.carrusel__cabeza .cabeza {
		flex-basis: 100%;
	}

	.carrusel__controles {
		flex-basis: 100%;
	}

	.carrusel__controles[hidden] {
		display: none;
	}
}

@media (max-width: 560px) {
	/* La pista sangra hasta el borde de la pantalla (los 24 px del contenedor se compensan) y asoma la siguiente. */
	.seccion--series .series {
		grid-auto-columns: 82%;
		gap: 16px;
		margin-inline: -24px;
		padding-inline: 24px;
		scroll-padding-inline: 24px;
	}

	/* En las páginas interiores el contenedor tiene 16 px laterales en móvil. */
	.interior .seccion--series .series {
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}
}