/* Custom-built podcast player + "On this episode" credits list (see
   inc/podcast-import.php, template-parts/podcast/*.php, and
   js/interactions.js's initAudioPlayer()). Two sizes share this file:
   .audio-block (compact, always-expanded — inline in an episode post)
   and .audio-block--big (a single compact row with a click-to-expand
   More info/Share panel, embedded in a show's own hero). Both are a
   white card, same light surface colors either way. */

.audio-block {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.audio-block__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.audio-block__art {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.audio-block__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.audio-block__heading {
  flex: 1;
  min-width: 0;
}

.audio-block__show-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.audio-block__show {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.audio-block__new {
  flex: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-retro-1) !important;
  border: 1px solid var(--color-retro-1);
  border-radius: 999px;
  padding: 2px 7px;
}

.audio-block__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text) !important;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Controls row: skip back / play / skip forward / scrub+time ---- */
.audio-block__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.audio-block__play {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), transform 100ms ease;
}

.audio-block__play:hover {
  background: var(--color-accent-dark);
}

.audio-block__play:active {
  transform: scale(0.9);
}

.audio-block__play svg {
  width: 16px;
  height: 16px;
  fill: var(--color-white);
}

/* Belt-and-suspenders: the legacy main.css bundle resets some element
   defaults broadly enough that [hidden]'s default display:none isn't
   always guaranteed to win — pin it explicitly so the play/pause icons
   actually swap instead of both showing (or neither). */
.audio-block__icon-play[hidden],
.audio-block__icon-pause[hidden] {
  display: none !important;
}

.audio-block__icon-play {
  margin-left: 2px;
}

/* Skip 15/30 — no button chrome (no circle border/fill), just the
   arrow glyph with its number sitting inside the loop, matching
   Buzzsprout's own player instead of a bordered icon button. */
.audio-block__skip {
  flex: none;
  width: 46px;
  height: 46px;
  border: none;
  background: none;
  color: var(--color-text-muted) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast), transform 100ms ease;
}

.audio-block__skip:hover {
  color: var(--color-accent) !important;
}

.audio-block__skip:active {
  transform: scale(0.88);
}

.audio-block__skip svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-block__skip span {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 700;
}

.audio-block__scrub-wrap {
  flex: 1;
  min-width: 0;
}

.audio-block__scrub {
  height: 28px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.audio-block__waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  height: 100%;
}

.audio-block__waveform span {
  flex: 1;
  min-width: 1.5px;
  max-width: 2.5px;
  height: 55%;
  background: var(--color-border-light);
  border-radius: 2px;
}

.audio-block__scrub-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  pointer-events: none;
}

.audio-block__scrub-fill .audio-block__waveform span {
  background: var(--color-accent);
}

.audio-block__time {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--color-text-faint) !important;
  font-variant-numeric: tabular-nums;
}

/* ---- Meta row: speed / more info / share / source ---- */
.audio-block__meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.audio-block__speed {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text) !important;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast);
}

.audio-block__speed:hover {
  border-color: var(--color-accent);
}

.audio-block__link-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted) !important;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.audio-block__link-btn:hover {
  color: var(--color-accent) !important;
}

.audio-block__link-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.audio-block__source {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-faint) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.audio-block__more-info {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted) !important;
  max-height: 260px;
  overflow-y: auto;
}

/* This panel is the episode's raw imported description (Buzzsprout
   RSS content, unedited) — it can carry its own inline color/style
   from however the host originally pasted it in, which reads as
   near-invisible light gray text against this panel's own background.
   Forcing color on every descendant (not just the panel itself)
   overrides that regardless of what the imported markup brings. */
.audio-block__more-info,
.audio-block__more-info * {
  color: var(--color-text-muted) !important;
  background: none !important;
}

.audio-block__more-info a {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

.audio-block__more-info p {
  margin: 0 0 14px;
}

.audio-block__more-info p:last-child {
  margin-bottom: 0;
}

/* ---- Share: inline icon row, sitting in the meta-row right next to
   the Share label instead of a separate reveal-on-click panel ---- */
.audio-block__share-inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.audio-block__share-icons {
  display: flex;
  gap: 6px;
}

.audio-block__share-icons a,
.audio-block__share-icons button {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.mato-x-logo,
.mato-social-icon-custom {
  width: 1em;
  height: 1em;
  fill: currentColor;
  object-fit: contain;
  vertical-align: middle;
}

.audio-block__share-icons button.is-copied::after {
  content: "Copied";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-off-black);
  color: var(--color-white) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

.audio-block__share-icons a:hover,
.audio-block__share-icons button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

@media (max-width: 560px) {
  .audio-block__art,
  .audio-block__source {
    display: none;
  }
}

/* ==== .audio-block--big: the player embedded in a show's own hero
   (single-show.php). A white card floating on .show-hero's dark
   background (approved over a translucent-dark surface — reads as a
   distinct object instead of blending into the hero), same light-
   surface colors as the default .audio-block. Unlike .audio-block
   (compact), this is a single row — skip/scrub/speed always visible,
   More info + Share tucked behind .audio-block__expand, since this
   sits directly above a show's episode list and the always-expanded
   layout pushed that list too far down the page. ==== */
.audio-block--big {
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}

.audio-block--big .audio-block__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.audio-block--big .audio-block__art {
  width: 44px;
  height: 44px;
}

.audio-block--big .audio-block__play {
  width: 40px;
  height: 40px;
}

.audio-block--big .audio-block__play svg {
  width: 13px;
  height: 13px;
}

/* Skip 15/30: smaller than the compact player's, but the number still
   keeps real clearance from the surrounding arrow stroke since it's
   bolder and nudged down slightly rather than shrunk in step with the
   button. */
.audio-block--big .audio-block__skip {
  width: 34px;
  height: 34px;
}

.audio-block--big .audio-block__skip span {
  top: 58%;
  font-size: 9.5px;
  font-weight: 800;
}

.audio-block--big .audio-block__mid {
  flex: 1;
  min-width: 0;
}

.audio-block--big .audio-block__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}

.audio-block--big .audio-block__title--inline {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A discreet, evenly-spaced strip — closer to Buzzsprout's own player
   than the compact player's busier waveform — since this now has to
   read clearly at a glance inside a single dense row. More, thinner,
   flatter bars (see audio-player.php's $bar_count/$bar_min/$bar_max)
   plus a shorter box here keep it from calling attention to itself. */
.audio-block--big .audio-block__scrub--big {
  height: 18px;
}

.audio-block--big .audio-block__scrub--big .audio-block__waveform span {
  min-width: 1px;
  max-width: 1.5px;
  background: var(--color-border-light);
}

.audio-block--big .audio-block__scrub--big .audio-block__scrub-fill .audio-block__waveform span {
  background: var(--color-accent);
}

.audio-block__time-compact {
  /* Standalone class (not .audio-block__time) — that class carries
     display:flex/justify-content:space-between meant for the compact
     player's two-line time row, which would otherwise turn this
     inline "current / duration" text into a stretched flex row with
     its own margin-top, breaking the "/" between the two numbers. */
  flex: none;
  font-size: 10.5px;
  color: var(--color-text-faint) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.audio-block--big .audio-block__speed {
  flex: none;
}

.audio-block--big .audio-block__expand {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.audio-block--big .audio-block__expand:hover {
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
}

.audio-block--big .audio-block__expand svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--transition-fast);
}

.audio-block--big .audio-block__expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.audio-block--big .audio-block__panel {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.audio-block--big .audio-block__panel-info {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted) !important;
  max-width: 62ch;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--space-3);
}

.audio-block--big .audio-block__panel-info,
.audio-block--big .audio-block__panel-info * {
  color: var(--color-text-muted) !important;
  background: none !important;
}

.audio-block--big .audio-block__panel-info a {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

.audio-block--big .audio-block__share-inline--panel {
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .audio-block--big .audio-block__row {
    flex-wrap: wrap;
  }

  .audio-block--big .audio-block__mid {
    flex: 1 1 100%;
    order: 1;
  }

  .audio-block__time-compact,
  .audio-block--big .audio-block__speed,
  .audio-block--big .audio-block__expand {
    order: 2;
  }
}

/* ==== "On this episode" credits — vertical list ==== */
.episode-credit {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.episode-credit__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint) !important;
  margin: 0 0 var(--space-3);
}

.episode-credit__list {
  display: flex;
  flex-direction: column;
}

.episode-credit__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-top: 1px solid var(--color-border-light);
}

.episode-credit__person:first-child {
  border-top: none;
  padding-top: 0;
}

.episode-credit__person:last-child {
  padding-bottom: 0;
}

.episode-credit__avatar {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--color-border-light);
}

.episode-credit__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.episode-credit__avatar--placeholder {
  background: var(--color-border);
}

.episode-credit__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.episode-credit__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text) !important;
  text-decoration: none;
}

.episode-credit__name:hover {
  color: var(--color-accent) !important;
}

.episode-credit__name--guest {
  font-weight: 600;
  color: var(--color-text-faint) !important;
  cursor: default;
}

.episode-credit__role {
  font-size: 11.5px;
  color: var(--color-text-faint) !important;
}

/* ==== "More about our show" — collapsed boilerplate/extra show
   notes captured from the feed but not otherwise displayed anywhere
   (see mato_extract_show_notes_extra() in inc/podcast-import.php). ==== */
.episode-more-info {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.episode-more-info summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text) !important;
}

.episode-more-info summary::-webkit-details-marker {
  display: none;
}

.episode-more-info summary::after {
  content: "+";
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-faint);
}

.episode-more-info[open] summary::after {
  content: "\2212";
}

.episode-more-info__body {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted) !important;
}

/* Imported feed content, same as .audio-block__more-info — force color
   on every descendant so an inline-styled light-gray span pasted into
   the original show notes can't render illegibly on this card. */
.episode-more-info__body,
.episode-more-info__body * {
  color: var(--color-text-muted) !important;
  background: none !important;
}

.episode-more-info__body a {
  color: var(--color-accent) !important;
  text-decoration: underline;
}

.episode-more-info__body p {
  margin: 0 0 14px;
}

.episode-more-info__body p:last-child {
  margin-bottom: 0;
}