/* Archivo de Podcast — cabecera editorial (más pequeña que el hero de home),
   navegación de temporadas y ajustes de la tarjeta de episodio. */

.archivo-podcast__cabecera {
	background: var(--indf-negro);
	color: var(--indf-crema);
	padding: 56px 0 44px;
	position: relative;
	overflow: hidden;
}

.archivo-podcast__cabecera::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.archivo-podcast__titulo {
	font-family: var(--fuente-display);
	text-transform: uppercase;
	font-size: clamp(40px, 7vw, 72px);
	line-height: 0.95;
	margin: 0 0 14px;
	transform: rotate(-1deg);
}

.archivo-podcast__entradilla {
	font-size: clamp(15px, 2vw, 18px);
	max-width: 46em;
	margin: 0;
	color: var(--indf-crema-apagada);
}

.temporadas-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 36px;
}

.temporadas-nav__item {
	font-family: var(--fuente-ui);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--indf-negro);
	background: var(--indf-blanco-roto);
	border: 2px solid var(--indf-negro);
	border-radius: var(--radio);
	padding: 8px 18px;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.temporadas-nav__item:hover,
.temporadas-nav__item:focus-visible {
	transform: translate(-2px, -2px);
}

.temporadas-nav__item.is-active {
	background: var(--indf-turquesa);
	color: var(--indf-negro);
	box-shadow: 3px 3px 0 var(--indf-negro);
}

@media (prefers-reduced-motion: reduce) {
	.temporadas-nav__item {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Episodio destacado: el episodio publicado más reciente (respeta el
 * filtro de temporada activo), en grande, antes de la cuadrícula.
 * Mismo lenguaje visual que la sección "Último episodio" de la Home.
 * ------------------------------------------------------------------ */

.episodio-destacado {
	background: var(--indf-blanco-roto);
	padding: 48px 0;
	border-bottom: 3px solid var(--indf-negro);
}

.episodio-destacado__grid {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.episodio-destacado__enlace-imagen {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--indf-negro);
	border: 3px solid var(--indf-negro);
	box-shadow: 8px 8px 0 var(--indf-turquesa);
	overflow: hidden;
}

.episodio-destacado__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.episodio-destacado__etiqueta {
	margin-bottom: 8px;
}

.episodio-destacado__meta {
	margin: 0 0 10px;
}

.episodio-destacado__titulo {
	font-family: var(--fuente-titular);
	text-transform: uppercase;
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1.15;
	margin: 0 0 14px;
}

.episodio-destacado__titulo a {
	text-decoration: none;
}

.episodio-destacado__extracto {
	font-size: 16px;
	line-height: 1.6;
	max-width: 60ch;
	margin: 0 0 22px;
}

@media (max-width: 860px) {
	.episodio-destacado__grid {
		grid-template-columns: 1fr;
	}
}

.tarjetas--episodios {
	margin-bottom: 24px;
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
	.tarjetas--episodios {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.tarjetas--episodios {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1500px) {
	.tarjetas--episodios {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* .tarjeta__titulo ya usa --fuente-titular por defecto (base.css) desde la
 * revisión tipográfica global — se queda solo el comentario como recordatorio
 * de por qué (nombres de episodio largos, con tildes, ilegibles en Anton). */

/* Metadatos de episodio: chips separados por espacio (mismo criterio que
 * seccion-episodio__meta en la Home) en vez de una única línea unida por
 * "·", para que respire y no se lea como un bloque comprimido. */
.tarjeta__meta--episodio {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 12px;
	font-family: var(--fuente-ui);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11.5px;
	letter-spacing: 0.03em;
	line-height: 1.5;
	opacity: 0.7;
}

/* Miniaturas con una irregularidad muy sutil tipo fanzine: un pequeño corte
 * de esquina y una rotación/microdesplazamiento propios de la imagen,
 * independientes del leve giro que ya lleva toda la tarjeta. Son transforms
 * estáticos (no animan nada), así que no necesitan gate de reduced-motion. */
.tarjeta--episodio.tarjeta--variante-0 .tarjeta__enlace-imagen {
	clip-path: polygon(0 8px, 8px 0, 100% 0, 100% 100%, 0 100%);
	transform: rotate(0.6deg) translate(1px, -1px);
}

.tarjeta--episodio.tarjeta--variante-1 .tarjeta__enlace-imagen {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	transform: rotate(-0.8deg) translate(-1px, 1px);
}

.tarjeta--episodio.tarjeta--variante-2 .tarjeta__enlace-imagen {
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
	transform: rotate(0.5deg) translate(1px, 1px);
}

.archivo-podcast__vacio {
	font-size: 16px;
	padding: 48px 0;
	max-width: 40em;
}

@media (max-width: 640px) {
	.archivo-podcast__cabecera {
		padding: 40px 0 32px;
	}

	.archivo-podcast__titulo {
		transform: none;
	}

	.episodio-destacado {
		padding: 36px 0;
	}
}