/* ════════════════════════════════════════════════════
   podcast.css — Podcast section
   Edit this file to change: featured card layout,
   episode card grid, platform button styles
════════════════════════════════════════════════════ */

/* ── Featured episode ────────────────────────────── */
.podcast-hero {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       52px;
  margin-top:    56px;
  display:       flex;
  gap:           52px;
  align-items:   center;
  box-shadow:    var(--shadow-md);
  position:      relative;
  overflow:      hidden;
}

/* Subtle ambient glow */
.podcast-hero::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: radial-gradient(ellipse 70% 90% at 0% 50%, rgba(90,148,112,0.05), transparent);
  pointer-events: none;
}

/* Artwork / icon */
.podcast-art {
  width:         100px;
  height:        100px;
  border-radius: 20px;
  background:    linear-gradient(135deg, var(--sage-2), var(--clay-2));
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     40px;
  flex-shrink:   0;
  border:        1px solid var(--border-sage);
}

.podcast-info {
  position: relative;
  z-index:  1;
  flex:     1;
}

.podcast-title {
  font-family:    'Fraunces', serif;
  font-size:      26px;
  font-weight:    400;
  color:          var(--text);
  margin-bottom:  12px;
  letter-spacing: -0.02em;
}

.podcast-desc {
  font-size:     15px;
  color:         var(--text-muted);
  line-height:   1.75;
  margin-bottom: 24px;
}

.podcast-tags { display: flex; gap: 9px; flex-wrap: wrap; }

.ptag {
  background:    var(--sage-3);
  border:        1px solid var(--border-sage);
  border-radius: 100px;
  padding:       6px 14px;
  font-size:     11px;
  color:         var(--sage);
  font-family:   'Geist', sans-serif;
  letter-spacing: 0.06em;
}

/* ── Episode cards ───────────────────────────────── */
.ep-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        18px;
  margin-top: 32px;
}

.ep-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  padding:       24px;
  cursor:        pointer;
  transition:
    transform    0.38s var(--spring),
    box-shadow   0.38s,
    border-color 0.22s;
}
.ep-card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--shadow-md);
  border-color: var(--border-sage);
}

.ep-n {
  font-size:      10px;
  color:          var(--text-light);
  font-family:    'Geist', sans-serif;
  letter-spacing: 0.1em;
  margin-bottom:  10px;
}

.ep-title {
  font-family: 'Fraunces', serif;
  font-size:   17px;
  font-weight: 400;
  color:       var(--text);
  line-height: 1.35;
  margin-bottom: 10px;
}

.ep-desc {
  font-size:     13px;
  color:         var(--text-muted);
  line-height:   1.6;
  margin-bottom: 16px;
}

.ep-meta {
  font-size:      10px;
  color:          var(--text-light);
  font-family:    'Geist', sans-serif;
  letter-spacing: 0.06em;
}

/* ── Platform buttons ────────────────────────────── */
.platforms {
  display:     flex;
  gap:         12px;
  flex-wrap:   wrap;
  margin-top:  48px;
  align-items: center;
}

.platform-lbl {
  font-size:      10px;
  color:          var(--text-light);
  font-family:    'Geist', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.platform-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   100px;
  padding:         11px 20px;
  font-size:       12px;
  color:           var(--text-muted);
  text-decoration: none;
  font-family:     'Geist', sans-serif;
  letter-spacing:  0.05em;
  transition:
    border-color 0.2s,
    color        0.2s,
    transform    0.28s var(--spring);
}
.platform-btn:hover {
  border-color: var(--sage);
  color:        var(--sage);
  transform:    translateY(-2px);
}


/* ════════════════════════════════════════════════════
   Latest episode (API-powered) — styles
════════════════════════════════════════════════════ */

#latest-ep-container { margin-top: 52px; }

/* ── Card layout ─────────────────────────────────── */
.lep-card {
  display:       flex;
  gap:           40px;
  align-items:   center;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  padding:       40px;
  box-shadow:    var(--shadow-md);
  position:      relative;
  overflow:      hidden;
}

/* Ambient glow behind the image */
.lep-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(90,148,112,0.05), transparent);
  pointer-events: none;
}

/* ── Episode artwork ─────────────────────────────── */
.lep-img-wrap {
  flex-shrink:   0;
  width:         160px;
  height:        160px;
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  position:      relative;
  z-index:       1;
}
.lep-img {
  width:   100%;
  height:  100%;
  object-fit: cover;
  display: block;
}

/* ── Text content ────────────────────────────────── */
.lep-body {
  flex:      1;
  position:  relative;
  z-index:   1;
}

.lep-badge {
  display:        inline-block;
  font-size:      10px;
  color:          var(--sage);
  font-family:    'Geist', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom:  12px;
  background:     var(--sage-3);
  border:         1px solid var(--border-sage);
  border-radius:  100px;
  padding:        4px 12px;
}

.lep-title {
  font-family:    'Fraunces', serif;
  font-size:      clamp(18px, 2.5vw, 26px);
  font-weight:    400;
  color:          var(--text);
  letter-spacing: -0.02em;
  line-height:    1.3;
  margin-bottom:  8px;
}

.lep-meta {
  font-size:      11px;
  color:          var(--text-light);
  font-family:    'Geist', sans-serif;
  letter-spacing: 0.08em;
  margin-bottom:  14px;
}

.lep-desc {
  font-size:     14px;
  color:         var(--text-muted);
  line-height:   1.8;
  margin-bottom: 24px;
  font-weight:   300;
}

.lep-listen { align-self: flex-start; }

/* ── Setup / error notes ─────────────────────────── */
.lep-setup-note,
.lep-error {
  font-size:     14px;
  color:         var(--text-light);
  font-family:   'Geist', sans-serif;
  letter-spacing: 0.04em;
  padding:       28px 32px;
  background:    var(--surface);
  border:        1px dashed var(--border);
  border-radius: var(--r);
  text-align:    center;
}
.lep-setup-note code {
  background:    var(--bg-warm);
  border-radius: 4px;
  padding:       2px 6px;
  font-size:     12px;
}

/* ── Skeleton shimmer ────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skel {
  background: linear-gradient(
    90deg,
    var(--bg-warm) 25%,
    rgba(255,255,255,0.6) 50%,
    var(--bg-warm) 75%
  );
  background-size: 600px 100%;
  animation:       shimmer 1.4s ease-in-out infinite;
  border-radius:   6px;
  margin-bottom:   12px;
}
.skel-img   { width:160px; height:160px; border-radius:12px; margin-bottom:0; }
.skel-badge { width:120px; height:22px; }
.skel-title { width:100%;  height:28px; }
.skel-meta  { width:160px; height:16px; }
.skel-desc  { width:100%;  height:14px; }
.skel-btn   { width:180px; height:44px; border-radius:100px; margin-top:8px; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 960px) {
  .lep-card {
    flex-direction: column;
    gap:     24px;
    padding: 28px 24px;
  }
  .lep-img-wrap { width:100%; height:200px; }
  .skel-img     { width:100%; height:200px; }
}