/* ==========================================================================
   RW episode player.
   Our own markup and controls around one native <audio>. No plugin DOM and no
   third-party JS: WP Rocket delays plugin scripts until first interaction, and
   the plugin's container/margins could not be made to sit inside a card.

   Layout: artwork flush to the left edge, full card height, zero padding
   around it — the previous version floated a 132px square inside 28px of
   padding and stacked three separate rows beneath it, which is where the dead
   vertical space came from.
   ========================================================================== */
.rw-ep {
  --ep-gold:  #ffaa00;
  --ep-text:  #eef3f7;
  --ep-muted: #93a4b5;
  --ep-line:  rgba(255,255,255,.10);
  --ep-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 840px;
  margin: 0 auto 44px;
  background: linear-gradient(115deg, #17242f 0%, #0e1822 55%, #0b131b 100%);
  border: 1px solid var(--ep-line);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(5,9,14,.32);
  color: var(--ep-text);
  overflow: hidden;
}
.rw-ep::before {                      /* the brand rule, as on every section */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--ep-gold), #ff7a00 48%, rgba(255,122,0,0));
}

/* ---- artwork: flush, full-bleed down the left --------------------------- */
.rw-ep__artwrap { flex: none; width: 168px; position: relative; overflow: hidden; }
.rw-ep__art { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fade the art into the panel so it reads as one object, not a pasted square */
.rw-ep__artwrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,24,34,0) 55%, rgba(14,24,34,.92) 100%);
}

/* ---- body --------------------------------------------------------------- */
.rw-ep__body { flex: 1; min-width: 0; padding: 22px 26px 20px; }

.rw-ep__kicker {
  margin: 0 0 8px !important; padding: 0 !important;
  font: 800 .66rem/1 var(--ep-sans) !important;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ep-gold) !important;
  display: flex; align-items: center; gap: 10px;
}
.rw-ep__kicker i { width: 3px; height: 3px; border-radius: 50%; background: var(--ep-muted); }

.rw-ep__title {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  font: 700 clamp(1.1rem, 2vw, 1.38rem)/1.26 var(--ep-sans) !important;
  letter-spacing: -.016em; color: #fff !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rw-ep__title::before, .rw-ep__title::after { content: none !important; }

/* ---- transport: one row, no divider ------------------------------------- */
.rw-ep__deck { display: flex; align-items: center; gap: 13px; margin-top: 18px; }

.rw-ep__play {
  flex: none; width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer;
  border-radius: 50%; background: var(--ep-gold); color: #14100a;
  display: grid; place-items: center;
  box-shadow: 0 5px 16px rgba(255,170,0,.28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rw-ep__play:hover { transform: scale(1.06); box-shadow: 0 7px 22px rgba(255,170,0,.42); }
.rw-ep__play svg { width: 22px; height: 22px; fill: currentColor; grid-area: 1/1; }
.rw-ep__i-pause { display: none; }
.rw-ep.is-playing .rw-ep__i-play { display: none; }
.rw-ep.is-playing .rw-ep__i-pause { display: block; }

.rw-ep__skip {
  flex: none; width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--ep-line); border-radius: 50%;
  color: var(--ep-muted); font: 700 .58rem/1 var(--ep-sans);
  transition: color .15s ease, border-color .15s ease;
}
.rw-ep__skip:hover { color: var(--ep-text); border-color: rgba(255,255,255,.3); }

.rw-ep__bar {
  position: relative; flex: 1; min-width: 60px; height: 5px; cursor: pointer;
  background: rgba(255,255,255,.11); border-radius: 3px;
}
.rw-ep__bar:focus-visible { outline: 2px solid var(--ep-gold); outline-offset: 4px; }
.rw-ep__buf { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.15); border-radius: 3px; }
.rw-ep__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #ff7a00, var(--ep-gold));
}
.rw-ep__fill i {
  position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(255,170,0,.38); opacity: 0; transition: opacity .15s ease;
}
.rw-ep__bar:hover .rw-ep__fill i, .rw-ep.is-playing .rw-ep__fill i { opacity: 1; }

.rw-ep__times {
  flex: none; display: flex; gap: 4px;
  font: 600 .74rem/1 var(--ep-sans); color: var(--ep-muted);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.rw-ep__sep { opacity: .45; }

.rw-ep__rate {
  flex: none; padding: 6px 9px; cursor: pointer;
  background: none; border: 1px solid var(--ep-line); border-radius: 5px;
  color: var(--ep-muted); font: 700 .7rem/1 var(--ep-sans);
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, border-color .15s ease;
}
.rw-ep__rate:hover { color: var(--ep-gold); border-color: rgba(255,170,0,.45); }

/* ---- platforms ---------------------------------------------------------- */
.rw-ep__links {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 13px;
}
.rw-ep__links span {
  font: 700 .58rem/1 var(--ep-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ep-muted);
}
/* the site colours links from an ID-level rule; an ID outranks any number of
   classes, so !important on a class selector loses. Match at ID level. */
#tve_editor .rw-ep__links a, #content .rw-ep__links a, #wrapper .rw-ep__links a,
.rw-ep .rw-ep__links a {
  font: 600 .78rem/1 var(--ep-sans); color: var(--ep-muted) !important;
  text-decoration: none !important; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
#tve_editor .rw-ep__links a:hover, #content .rw-ep__links a:hover,
#wrapper .rw-ep__links a:hover, .rw-ep .rw-ep__links a:hover {
  color: var(--ep-gold) !important; border-bottom-color: rgba(255,170,0,.5);
}

.rw-ep__audio { display: none; }
.rw-ep__dl { color: var(--ep-gold) !important; }

/* ---- narrow ------------------------------------------------------------- */
@media (max-width: 700px) {
  .rw-ep { flex-direction: column; border-radius: 10px; margin-bottom: 32px; }
  .rw-ep__artwrap { width: 100%; height: 132px; }
  .rw-ep__artwrap::after { background: linear-gradient(180deg, rgba(14,24,34,0) 40%, rgba(14,24,34,.95) 100%); }
  .rw-ep__body { padding: 16px 18px 18px; }
  .rw-ep__deck { flex-wrap: wrap; gap: 10px; }
  .rw-ep__bar { order: 5; flex-basis: 100%; min-width: 100%; }
  .rw-ep__rate { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .rw-ep__play, .rw-ep__fill i { transition: none; } }
@media print { .rw-ep__deck { display: none; } }