/* Podcast episode pages.
   ---------------------------------------------------------------------------
   The index already has its card styles inside theme.css; this file is only
   the two things that did not exist before — the links out of a card, and the
   episode page itself. */

/* ---- index cards ---- */
.pf-ep__title a,
.pf-ep__link { color: inherit; text-decoration: none; }
.pf-ep__title a:hover,
.pf-ep__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.pf-ep__more {
  display: inline-block;
  margin-top: 10px;
  color: var(--pf2-yellow-txt);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.pf-ep__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cards hold their shape: the blurb is one claim, and if an editor writes a
   longer one the grid clamps it rather than letting one card double the row. */
.pf-ep__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ---- episode page ----
   The construction is the course pages': fixed navy nav flowing into a navy
   hero band, content on paper below, and the video card overlapping the seam.
   Colors on navy come only from the onnavy/yellow tokens — ink and muted are
   invisible there (learned the hard way on the calendar band). */
.pe { --pe-pull: clamp(56px, 7vw, 88px); }

.pe-hero {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255, 197, 61, .13), transparent 55%),
    var(--pf2-navy);
}
.pe-hero__in {
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 42px) clamp(18px, 4vw, 32px) calc(var(--pe-pull) + 30px);
}

/* `.pe` prefix on the anchors is load-bearing: theme.css sets `.th a
   { color: inherit }` at higher specificity, which painted this ink-on-navy. */
.pe .pe-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(245, 248, 255, .66);
  text-decoration: none;
}
.pe .pe-back:hover { color: var(--pf2-onnavy); }

.pe-eyebrow {
  margin: 22px 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--pf2-yellow);
}

.pe-h1 {
  margin: 0;
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: var(--pf2-onnavy);
  text-wrap: balance;
}

/* The standfirst is the answer, so it reads brighter and larger than the
   metadata around it — it is the sentence a search result quotes. */
.pe-lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(245, 248, 255, .86);
  text-wrap: pretty;
}

/* Byline, not a box: monogram, name, role, company — three weights, one row.
   Date and length ride along as quiet chips. */
.pe-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pf2-onnavy-line);
}
.pe-ava {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 197, 61, .14);
  border: 1px solid rgba(255, 197, 61, .38);
  color: var(--pf2-yellow);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
}
.pe-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--pf2-onnavy); }
.pe-role { font-size: 13px; line-height: 1.4; color: var(--pf2-onnavy-muted); }
.pe-role b { font-weight: 600; color: var(--pf2-onnavy); }
.pe-when { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pe-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--pf2-onnavy-line);
  color: var(--pf2-onnavy-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .pe-when { margin-left: 58px; }  /* under the text, aligned past the monogram */
}

/* Content column, pulled up over the band edge. The video carries the site's
   deep shadow, so floating it across the seam reads as intentional. */
.pe-body {
  position: relative;
  max-width: 840px;
  margin: calc(var(--pe-pull) * -1) auto 0;
  padding: 0 clamp(18px, 4vw, 32px) 8px;
}

.pe-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1430;
  box-shadow: var(--pf2-sh2);
}
.pe-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pe-video--empty { display: grid; place-items: center; color: rgba(245, 248, 255, .6); font-weight: 600; }

.pe .pe-watch {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf2-yellow-txt);
  text-decoration: none;
}
.pe .pe-watch:hover { text-decoration: underline; text-underline-offset: 3px; }

.pe-sec { margin-top: clamp(32px, 4.5vw, 48px); }
.pe-sec h2 {
  margin: 0 0 14px;
  font-size: clamp(19px, 2.3vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--pf2-ink);
}

/* Takeaways: the claims, in a card, each behind a yellow check chip. This is
   the block the speakable markup points at, so it stays a clean list. */
.pe-learn {
  background: var(--pf2-card);
  border-radius: 18px;
  box-shadow: var(--pf2-sh1);
  padding: clamp(20px, 3vw, 28px);
}
.pe-learn ul { margin: 0; padding: 0; list-style: none; }
.pe-learn li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pf2-ink);
}
.pe-learn li:last-child { margin-bottom: 0; }
.pe-learn li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 197, 61, .2);
  color: var(--pf2-yellow-txt);
  font-size: 11px;
  font-weight: 800;
}

.pe-prose p { margin: 0 0 14px; max-width: 68ch; font-size: 15.5px; line-height: 1.7; color: var(--pf2-muted); }
.pe-prose p:last-child { margin-bottom: 0; }
.pe-prose strong { color: var(--pf2-ink); font-weight: 600; }

.pe-qa { padding: 16px 0; border-top: 1px solid var(--pf2-line); }
.pe-qa:last-of-type { border-bottom: 1px solid var(--pf2-line); }
.pe-qa h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--pf2-ink); }
.pe-qa p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.68; color: var(--pf2-muted); }

/* Cross-links: compact rows, title carries the weight, meta trails. The `.pe`
   prefix out-ranks theme.css's `.th a { color: inherit }`. */
.pe .pe-more__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 13px 0;
  border-top: 1px solid var(--pf2-line);
  text-decoration: none;
}
.pe .pe-more__row:last-child { border-bottom: 1px solid var(--pf2-line); }
.pe-more__title { flex: 1 1 320px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--pf2-ink); }
.pe .pe-more__row:hover .pe-more__title { color: var(--pf2-yellow-txt); }
.pe-more__meta { font-size: 12.5px; color: var(--pf2-muted); white-space: nowrap; }

.pe-cta {
  margin-top: clamp(36px, 5vw, 54px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: 18px;
  background: var(--pf2-card);
  box-shadow: var(--pf2-sh1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.pe-cta p { margin: 0; flex: 1 1 320px; font-size: 15.5px; line-height: 1.6; color: var(--pf2-ink); }
.pe-cta .th-btn { flex-shrink: 0; }

.pe-foot { display: flex; justify-content: center; padding: clamp(36px, 6vw, 60px) 0 clamp(20px, 4vw, 40px); }
.pe .pe-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--pf2-card);
  box-shadow: var(--pf2-sh1);
  font-size: 14px;
  font-weight: 600;
  color: var(--pf2-ink);
  text-decoration: none;
}
.pe .pe-foot a:hover { box-shadow: var(--pf2-sh2); }