/* Tiny local styles just for the paywall panel */
.paywall {
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 18px;
  margin: 16px 0;
}
.paywall h3 { margin: 0 0 8px; }
.paywall .btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.paywall .btn {
  display:inline-block; padding:8px 12px; border-radius:8px;
  background: var(--jd-cream, #eee); color: var(--jd-nearly-blk, #111);
  text-decoration:none; line-height:1;
}

/* Center page content */
.episode-content{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 20px 40px;
}

/* Responsive 16:9 video wrapper */
.video-embed{
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 24px;
}
.video-embed::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}
.video-embed > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* If you EVER render an iframe directly inside .episode-video (no wrapper),
   this fallback gives it height. It won’t affect the wrapped iframe above. */
.episode-video > iframe{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
}

/* Poster/paywall state */
.episode-video .poster {
  position: relative; overflow: hidden; border-radius: 6px;
  background: #000;
}
.episode-video .poster img {
  display:block; width:100%; height:auto;
  aspect-ratio: 16 / 9; object-fit: cover; opacity:.85;
}
.episode-video .poster .overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.6));
  color:#fff; text-align:center; padding:20px;
}

/* Two-column layout for the details block */
.episode-details{
  display: flex;
  align-items: flex-start;
  gap: 10px;                 /* spacing between the two columns */
  margin-top: 20px;
}

/* Left column (title/date/sponsor) */
.episode-details .episode-info{
  flex: 0 0 20%;             /* fixed 20% */
  max-width: 20%;
}

/* Right column (bio body) */
.episode-details .episode-bio{
  flex: 0 0 70%;             /* fixed 70% */
  max-width: 70%;
  /* long links won’t break layout */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile/tablet: stack vertically */
@media (max-width: 900px){
  .episode-details{
    display: block;
  }
  .episode-details .episode-info,
  .episode-details .episode-bio{
    max-width: none;
  }
  .episode-details .episode-bio{
    margin-top: 20px;
  }
}

/* ---------- More Episodes grid (scoped) ---------- */
.next-episodes{
  max-width: 940px;     /* pick a width that matches your page */
  margin: 0 auto;        /* now this will centre the block */
  padding: 0 20px;       /* optional gutter */
}

/* Only the “More Episodes” grid */
.next-episodes .grid{
  justify-content: center;
}


.next-episodes .ne-heading { text-align:center; margin-bottom: 16px; }

.next-episodes .grid.grid-4{
  --card-min: 210px;
  --card-max: 300px;
  --cine-zoom-duration: 9s;
  --cine-zoom-scale: 1.05;

  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), var(--card-max)));
  justify-content: start;
}

.next-episodes .card { 
  position: relative; 
  overflow: hidden; 
  background: transparent;
}

/* Image/thumb + cinematic zoom like index */
.next-episodes .card .thumb{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  opacity:.5;
  transform: scale(1) translateZ(0);
  transform-origin: center center;
  transition: transform var(--cine-zoom-duration) linear, opacity 1s linear;
  will-change: transform;
  backface-visibility: hidden;
}
.next-episodes .card:hover .thumb,
.next-episodes .card:focus-within .thumb{
  opacity:1;
  transform: scale(var(--cine-zoom-scale));
}

/* Keep link blocky + no underline */
.next-episodes .card > a,
.next-episodes .card > .card-inner{
  display:block; text-decoration:none; color:inherit;
  position: relative; z-index: 0;
}

/* Meta overlay bottom-left */
.next-episodes .card .meta.overlay-bl{
  position:absolute; left:0; bottom:0;
  padding:10px;
  z-index: 5; display: none;
}
.next-episodes .card .title{ margin:5px 0 0; }
.next-episodes .card .date{ opacity:.85; margin:2px 0 0; }

/* Hover echo for title/date */
.next-episodes .card:hover .overlay-bl .title,
.next-episodes .card:hover .overlay-bl .date {
  color: var(--jd-mustard);
}

/* Badge top-right */
.next-episodes .card .badges.overlay-tr{
  position:absolute; top:12px; right:12px; z-index:6; pointer-events:none;
}

/* Locked cards: disable zoom/fades and dim via overlay */
.next-episodes .card.is-locked .thumb{
  opacity:1 !important; transform:none !important; transition:none !important;
}
.next-episodes .card.is-locked > .card-inner::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: rgba(0,0,0,.55); z-index:4; pointer-events:none;
}

/* Mobile tweak */
@media (max-width: 640px){
  .next-episodes .grid.grid-4{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .next-episodes .card .thumb{ opacity:.8; }
}