/* ══════════════════════════════════════════════════════════════════
   Vanetics podcast — /vanetics-podcast (hub), /vanetics-legacy (audio),
   /vanetics-teachings (video). Reconstruction of the old gccalliance.org
   podcast section, restyled onto the refresh.css design tokens
   (--cl coral, --g sage, --cr cream, --md brown, --dp slate, --br, --sf).
   ══════════════════════════════════════════════════════════════════ */

/* ── hero (hub: photo band; list/detail: slate band) ── */
.vn-hero {
	height:520px;
	width:100%;
	position:relative;
	display:flex;
	align-items:flex-end;
}
.vn-hero-inner {
	position:relative;
	z-index:2;
	width:100%;
	padding:3.5rem 4rem;
	color:var(--cr);
}
.vn-hero-title { color:var(--cr); max-width:20ch; }
.vn-hero-sub {
	font-family:'Cormorant Garamond', serif;
	font-style:italic;
	font-size:var(--fs-h3);
	color:var(--cr);
	opacity:0.9;
	margin-top:0.75rem;
	max-width:46ch;
}

.vn-list-hero, .vn-detail-hero { padding-top:3.5rem; padding-bottom:3.5rem; }
.vn-list-hero .vn-hero-sub, .vn-detail-hero .vn-detail-date { color:var(--cr); }
.vn-list-hero .vn-hero-sub { opacity:0.82; max-width:60ch; }
.vn-detail-title { max-width:24ch; }
.vn-detail-date {
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:var(--cr);
	opacity:0.8;
	margin-top:1rem;
}

/* ── intro prose (shared) ── */
.vn-prose { max-width:760px; margin-inline:auto; }
.vn-prose p { margin-bottom:1.2rem; }
.vn-prose p:last-child { margin-bottom:0; }
.vn-prose a { color:var(--cl); }
.vn-intro .vn-prose { font-size:var(--fs-p); }

/* ── hub: the two archive cards ── */
.vn-archives { padding-top:4rem; padding-bottom:4rem; }
.vn-archive-grid {
	max-width:1000px;
	margin-inline:auto;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2rem;
}
.vn-archive-card {
	display:flex;
	flex-direction:column;
	background:var(--cr);
	border:0.5px solid var(--br);
	border-top:3px solid var(--cl);
	padding:2.5rem 2.5rem 2.25rem;
	text-decoration:none;
	color:inherit;
	transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.vn-archive-card:hover {
	transform:translateY(-4px);
	box-shadow:0 22px 46px -26px rgba(87,102,97,0.6);
}
.vn-archive-title {
	font-family:'Cormorant Garamond', serif;
	font-size:clamp(1.9rem, 2.4vw, 2.5rem);
	line-height:1.12;
	color:var(--dp);
	margin-bottom:0.9rem;
}
.vn-archive-body { color:var(--md); flex-grow:1; margin-bottom:1.75rem; }
.vn-archive-more, .vn-ep-more {
	display:inline-flex;
	align-items:center;
	gap:0.55rem;
	font-family:'Jost', sans-serif;
	font-size:13px;
	font-weight:600;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--cl);
}
.vn-arrow { transition:transform 0.25s ease; }
.vn-archive-card:hover .vn-arrow,
.vn-ep-link:hover .vn-arrow,
.vn-card:hover .vn-arrow { transform:translateX(5px); }

/* ── legacy: episode list ── */
.vn-ep-list {
	list-style:none;
	max-width:820px;
	margin-inline:auto;
	counter-reset:none;
}
.vn-ep-row { border-top:1px solid var(--br); }
.vn-ep-row:last-child { border-bottom:1px solid var(--br); }
.vn-ep-link {
	display:block;
	padding:2rem 0;
	text-decoration:none;
	color:inherit;
	transition:padding-left 0.25s ease;
}
.vn-ep-link:hover { padding-left:0.75rem; }
.vn-ep-date {
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:var(--g);
	font-weight:600;
	margin-bottom:0.6rem;
}
.vn-ep-title {
	font-family:'Cormorant Garamond', serif;
	font-size:clamp(1.6rem, 2vw, 2.1rem);
	line-height:1.15;
	color:var(--dp);
	margin-bottom:0.55rem;
}
.vn-ep-blurb { color:var(--md); max-width:66ch; margin-bottom:0.9rem; }

/* ── teachings: video card grid ── */
.vn-grid {
	max-width:1160px;
	margin-inline:auto;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:2rem 1.75rem;
}
.vn-card {
	display:flex;
	flex-direction:column;
	text-decoration:none;
	color:inherit;
	background:var(--cr);
	border:0.5px solid var(--br);
	overflow:hidden;
	transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.vn-card:hover {
	transform:translateY(-4px);
	box-shadow:0 22px 46px -26px rgba(87,102,97,0.6);
}
.vn-card-media {
	position:relative;
	aspect-ratio:16 / 9;
	background:var(--sf);
	overflow:hidden;
}
.vn-card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; }
.vn-card:hover .vn-card-img { transform:scale(1.05); }
.vn-card-img--placeholder {
	width:100%; height:100%;
	background:linear-gradient(135deg, var(--sf), rgba(108,158,136,0.18));
}
.vn-play {
	position:absolute;
	inset:0;
	margin:auto;
	width:56px; height:56px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(87,102,97,0.78);
	color:var(--cr);
	border-radius:50%;
	font-size:18px;
	padding-left:4px;
	transition:background 0.25s ease, transform 0.25s ease;
}
.vn-card:hover .vn-play { background:var(--cl); transform:scale(1.08); }
.vn-card-body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:0.5rem; }
.vn-card-meta {
	font-family:'Jost', sans-serif;
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--g);
	font-weight:600;
}
.vn-card-title {
	font-family:'Cormorant Garamond', serif;
	font-size:1.5rem;
	line-height:1.18;
	color:var(--dp);
}

/* ── detail body ── */
.vn-detail-body .vn-prose { font-size:var(--fs-p); }
.vn-video {
	max-width:900px;
	margin:0 auto 2.5rem;
	aspect-ratio:16 / 9;
	background:var(--dp);
}
.vn-video iframe { width:100%; height:100%; border:0; display:block; }

/* ── legacy audio players (native <audio>) ── */
.vn-players {
	max-width:760px;
	margin:0 auto 2.5rem;
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}
.vn-player {
	background:var(--sf);
	border:0.5px solid var(--br);
	border-left:3px solid var(--g);
	padding:1.25rem 1.5rem;
}
.vn-player-label {
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:var(--g);
	font-weight:600;
	margin-bottom:0.75rem;
}
.vn-audio { width:100%; display:block; }
.vn-backlink {
	max-width:760px;
	margin:2.5rem auto 0;
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.1em;
	text-transform:uppercase;
}
.vn-backlink a { color:var(--g); text-decoration:none; }
.vn-backlink a:hover { color:var(--cl); }

/* ── where to listen ── */
.vn-listen { background:var(--dp); }
.vn-listen-inner { max-width:900px; margin-inline:auto; text-align:center; }
.vn-listen .sec-label { color:var(--g); }
.vn-listen-title {
	font-family:'Cormorant Garamond', serif;
	font-size:var(--fs-h1);
	color:var(--cr);
	line-height:1.15;
	margin-bottom:2rem;
}
.vn-listen-follow { margin-top:2.5rem; color:var(--gl); opacity:0.7; }
.vn-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; }
.vn-chip {
	font-family:'Jost', sans-serif;
	font-size:13px;
	letter-spacing:0.08em;
	color:var(--cr);
	text-decoration:none;
	padding:0.6rem 1.25rem;
	border:1px solid rgba(255,248,230,0.28);
	transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vn-chip:hover { background:var(--cr); color:var(--dp); border-color:var(--cr); }
.vn-chip--featured { border-color:var(--cl); }
.vn-chip--featured:hover { background:var(--cl); border-color:var(--cl); color:var(--cr); }
.vn-chip--social { border-color:rgba(108,158,136,0.5); }

/* ── empty state ── */
.vn-empty { max-width:640px; margin-inline:auto; text-align:center; }
.vn-empty-title {
	font-family:'Cormorant Garamond', serif;
	font-size:var(--fs-h2);
	color:var(--dp);
	margin:0.75rem 0 1rem;
}

/* ── responsive ── */
@media (max-width:900px) {
	.vn-hero { height:380px; }
	.vn-hero-inner { padding:2.5rem 2rem; }
	.vn-archive-grid { grid-template-columns:1fr; gap:1.5rem; }
	.vn-grid { grid-template-columns:repeat(2, 1fr); gap:1.5rem 1.25rem; }
}
@media (max-width:600px) {
	.vn-grid { grid-template-columns:1fr; }
}