/* Same section rhythm as the hero above and below */
.episode-reel {
  padding: var(--space-section) 0;
  overflow: hidden;
}
.reel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
/* Arrows sit on the stage, vertically centred on the active card's 16:9 video, just inside its edges */
.reel-body { position: relative; --reel-w: min(1100px, 92vw); }
.reel-controls { position: absolute; left: 0; right: 0; top: calc(24px + var(--reel-w) * 0.28125); z-index: 5; pointer-events: none; }
.reel-btn {
  position: absolute; top: 0; transform: translateY(-50%); pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%; border: 2px solid var(--surface);
  background: rgba(26, 58, 66, 0.72); color: var(--on-dark); cursor: pointer;
}
.reel-btn[data-reel-prev] { left: calc(50% - var(--reel-w) / 2 + 14px); }
.reel-btn[data-reel-next] { right: calc(50% - var(--reel-w) / 2 + 14px); }
.reel-btn:hover { background: var(--ink); }
.reel-btn:focus-visible { outline: 3px solid var(--on-dark); outline-offset: 2px; }

.reel-stage {
  position: relative;
  /* Stage must have a height because cards are absolute: 16:9 video plus ~210px caption */
  height: calc(var(--reel-w) * 0.5625 + 180px);
  perspective: 2200px;
  touch-action: pan-y;
  cursor: grab;
}
.reel-stage.is-dragging { cursor: grabbing; }

.reel-card {
  position: absolute; left: 50%; top: 24px;
  width: var(--reel-w);
  background: var(--surface);
  border: 1px solid var(--tint);
  border-radius: var(--radius);
  padding: 0 32px 28px;
  box-shadow: 0 18px 40px rgba(21, 30, 63, 0.16);
  transition: transform 0.45s ease, opacity 0.45s ease;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) scale(0.6);
}
.reel-card.is-visible { opacity: 1; pointer-events: auto; }
.reel-card.is-active { box-shadow: 0 24px 56px rgba(21, 30, 63, 0.28); }

.reel-art {
  margin: 0 -32px 18px;
  aspect-ratio: 16 / 9; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, var(--ink) 0%, var(--teal-strong) 60%, var(--teal) 100%);
  display: flex; align-items: center; justify-content: center;
}
.reel-art span {
  color: var(--on-dark); font-weight: 700; font-size: 2.6rem; letter-spacing: 0.08em;
}
/* In-card video: thumbnail first, swaps to a playable embed (fullscreen enabled) */
.reel-video {
  margin: 0 -32px 18px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; background: var(--ink);
}
.reel-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.reel-play {
  position: relative; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.reel-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(21, 30, 63, 0.82); color: var(--on-dark);
}
.reel-play:hover .reel-play-badge { background: var(--teal-strong); }

.reel-card h3 { margin-bottom: 4px; font-size: 1.5rem; }
.reel-card h3 a { color: var(--ink); text-decoration: none; }
.reel-card h3 a:hover { text-decoration: underline; }
.reel-guest { font-weight: 500; }
.reel-date { color: var(--teal-strong); font-size: var(--size-small); }
.reel-links { display: flex; gap: 18px; margin-top: 14px; }
.reel-links a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }

@media (max-width: 600px) {
  .reel-body { --reel-w: 92vw; }
  .reel-stage { height: calc(var(--reel-w) * 0.5625 + 200px); }
}