/* ============================================================
   Early Days Podcast — additions on top of the shared styles.css
   Uses the same design tokens (--paper, --ink, --accent, fonts).
   ============================================================ */

/* ---------- episode hero ---------- */
.ep-hero { padding: 72px 0 16px; }

.ep-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
}

.ep-hero .display { font-size: clamp(2.6rem, 6vw, 5rem); margin: 18px 0 18px; }

.ep-hero-photo {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}

.ep-hero-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 900px) {
  .ep-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .ep-hero-photo { max-width: 340px; }
}

/* ---------- episode body ---------- */
.ep-body { max-width: 820px; }

.ep-players { display: flex; flex-direction: column; gap: 18px; margin: 8px 0 40px; }

.spotify-embed {
  width: 100%;
  height: 232px;
  border: 0;
  border-radius: 14px;
}

.yt-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 14px;
}

.ep-noplayer {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 36px;
  background: var(--white);
}
.ep-noplayer p { margin: 0; color: var(--ink-soft); }
.ep-noplayer a { color: var(--accent); }

/* ---------- guest links ---------- */
.ep-links { margin: 40px 0 8px; }
.ep-links .label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 14px;
}
.ep-links-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ep-link {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ep-link:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- linkedin embeds ---------- */
.li-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 8px 0 32px;
}
.li-embed {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
@media (max-width: 700px) { .li-grid { grid-template-columns: 1fr; } }

/* ---------- stats grid (home + analytics) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--accent);
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- season list tweaks ---------- */
.season-list .v-row { grid-template-columns: 60px 1.1fr 2fr auto; }
@media (max-width: 900px) {
  .season-list .v-row { grid-template-columns: 40px 1fr; }
  .season-list .v-desc, .season-list .v-role { grid-column: 2 / -1; }
}

/* ---------- analytics region cards ---------- */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.region-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  padding: 26px 26px 22px;
}
.region-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.bar-row {
  display: grid;
  grid-template-columns: 1fr 90px 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.86rem;
}
.bar-label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-pct {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-mute);
  text-align: right;
}
@media (max-width: 900px) { .region-grid { grid-template-columns: 1fr; } }

/* dark-mode: keep ink callout readable */
html[data-theme="dark"] .book-callout[style*="var(--ink)"] { background: #1c2530 !important; }