/**
 * Contenitore /podcast/ — lista i podcast del collettivo (archive-podcast.php).
 *
 * Autocontenuto e namespaced .lf-podcast/.lfp-* (non dipende da spherika.css).
 * Token theme-aware del design system (--lf-*): hero e card seguono dark/light da
 * soli. Superfici scure-accento (cover placeholder, hero fotografico) usano
 * --lf-on-accent per il testo (mai --lf-avorio, che in light diventa scuro) →
 * contrasto AA in entrambi i temi. Niente @import, niente Google/JetBrains.
 */

.lf-podcast {
	--lfp-gap: clamp(1.1rem, 2.4vw, 1.75rem);
	color: var(--lf-avorio);
}

/* ============================ HERO ============================ */
.lfp-hero {
	position: relative;
	padding: clamp(3.25rem, 7vw, 6rem) var(--sec-pad-x, clamp(1.25rem, 5vw, 4rem)) clamp(2.25rem, 4.5vw, 3.5rem);
	background:
		radial-gradient(120% 90% at 22% 8%, rgba(var(--lf-borgogna-rgb), .16), transparent 60%),
		radial-gradient(90% 80% at 92% 0%, rgba(var(--lf-rame-rgb), .10), transparent 58%),
		var(--lf-notte);
	overflow: hidden;
}

.lfp-hero-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.lfp-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 10, 18, .55), rgba(15, 10, 18, .82));
	z-index: 1;
}

.lfp-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 46rem;
}

.lfp-eyebrow {
	color: var(--lf-rame);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .8rem;
	font-weight: 600;
	margin-bottom: .65rem;
}

.lfp-title {
	font-family: var(--font-display, "Cormorant", Georgia, serif);
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1.04;
	font-weight: 600;
	color: var(--lf-avorio);
	margin: 0 0 .85rem;
}

.lfp-title em {
	font-style: italic;
	color: var(--lf-rame);
}

.lfp-dek {
	color: var(--lf-muted);
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	line-height: 1.6;
	max-width: 40rem;
	margin: 0 0 1rem;
}

.lfp-count {
	color: var(--lf-muted);
	font-size: .95rem;
	letter-spacing: .02em;
	margin: 0;
}

.lfp-count strong {
	color: var(--lf-rame);
	font-weight: 700;
}

/* Hero con foto: testo chiaro a prescindere dal tema (superficie scura). */
.lfp-hero--photo .lfp-title,
.lfp-hero--photo .lfp-eyebrow,
.lfp-hero--photo .lfp-dek,
.lfp-hero--photo .lfp-count {
	color: var(--lf-on-accent);
}

.lfp-hero--photo .lfp-title em,
.lfp-hero--photo .lfp-eyebrow,
.lfp-hero--photo .lfp-count strong {
	color: var(--lf-rame-light);
}

/* ============================ GRIGLIA ============================ */
.lfp-section {
	padding: clamp(2rem, 4.5vw, 3.75rem) var(--sec-pad-x, clamp(1.25rem, 5vw, 4rem)) clamp(3rem, 6vw, 5rem);
	background: var(--lf-notte);
}

.lfp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--lfp-gap);
	max-width: 72rem;
	margin: 0 auto;
}

/* ============================ CARD ============================ */
.lfp-card {
	display: flex;
	flex-direction: column;
	background: var(--lf-card);
	border: 1px solid var(--lf-card-border);
	border-radius: var(--r-2xl, 20px);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		transform .22s var(--ease, ease),
		border-color .22s var(--ease, ease),
		box-shadow .22s var(--ease, ease);
}

.lfp-card:hover,
.lfp-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--lf-card-border-strong);
	box-shadow: 0 18px 40px -22px rgba(var(--lf-borgogna-rgb), .55);
}

.lfp-card:focus-visible {
	outline: 2px solid var(--lf-rame);
	outline-offset: 3px;
}

.lfp-card__cover {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--lf-card);
	overflow: hidden;
}

.lfp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cover mancante: trattamento tipografico sovrano (superficie scura-accento). */
.lfp-card__cover--ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	background:
		radial-gradient(80% 120% at 50% 0%, rgba(var(--lf-rame-rgb), .18), transparent 60%),
		linear-gradient(160deg, var(--lf-borgogna-deep), var(--lf-notte));
}

.lfp-card__ph-ico {
	display: inline-flex;
	color: var(--lf-rame-light);
}

.lfp-card__ph-ico svg {
	width: 40px;
	height: 40px;
}

.lfp-card__ph-name {
	font-family: var(--font-accent, "Syne", "Outfit", sans-serif);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: 1.05rem;
	color: var(--lf-on-accent);
}

.lfp-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: clamp(1.1rem, 2vw, 1.5rem);
}

.lfp-card__eyebrow {
	color: var(--lf-muted);
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lfp-card__eyebrow strong {
	color: var(--lf-rame);
	font-weight: 700;
}

.lfp-card__title {
	font-family: var(--font-display, "Cormorant", Georgia, serif);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.1;
	font-weight: 600;
	color: var(--lf-avorio);
	margin: 0;
}

.lfp-card__dek {
	color: var(--lf-muted);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lfp-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .35rem;
	color: var(--lf-rame);
	font-weight: 600;
	font-size: .92rem;
}

.lfp-card__cta svg {
	transition: transform .22s var(--ease, ease);
}

.lfp-card:hover .lfp-card__cta {
	color: var(--lf-borgogna-light);
}

.lfp-card:hover .lfp-card__cta svg {
	transform: translateX(3px);
}

/* ============================ VUOTO ============================ */
.lfp-empty {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
	color: var(--lf-muted);
}

@media (prefers-reduced-motion: reduce) {
	.lfp-card,
	.lfp-card__cta svg {
		transition: none;
	}
	.lfp-card:hover,
	.lfp-card:focus-visible {
		transform: none;
	}
}

/* [DS-muted 16/07] eyebrow AA in LIGHT: il rame (--lf-rame #8f6240 in light)
   sul crema scende sotto AA (~4.35:1, pink Permette Signorina 2.13) su testo
   minuscolo maiuscolo. Convenzione del tema (già su HoF card/modal, chi-siamo,
   taccuino feature): in LIGHT l'occhiello passa a --lf-borgogna-soft (#6e1c41 =
   7.3–10:1 sui fondi chiari). Dark invariato (rame ~7.3:1). Hero FOTO (fondo
   scuro) esclusi via :not(). */
[data-theme="light"] .lfp-hero:not(.lfp-hero--photo) .lfp-eyebrow,
[data-theme="light"] .lfp-card__eyebrow strong { color: var(--lf-borgogna-soft); }