/* Nội dung › Podcast (frontend/panel/content/podcasts/). Values from
   output/reference/behaviours/content-reading.md, cited per block. */

/* An episode's square picture: 120 px on big screens, 124 on small (read#42; md:L42647–42672). */
.ct-card-picture.is-square {
  width: 120px;
  height: 120px;
}

@media (max-width: 900px) {
  .ct-card-picture.is-square {
    width: 124px;
    height: 124px;
  }
}

/* The podcast picture when an episode and its list have none: the tab's icon in the tab's colour (read#2, #42). */
.ct-card-fallback.is-podcast {
  background: color-mix(in srgb, var(--wovia-blue) 12%, transparent);
  color: var(--wovia-blue);
}

/* A list without a picture: the reference's empty avatar, a person on grey (read#40; md:L44900–44906). */
.pl-header-avatar.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #bdbdbd;
  color: var(--on-media);
}

/* The episode's column takes the page's width (read#126; md:L2440–2450). */
.pd-column {
  flex: 1 1 auto;
  width: 100%;
}

/* Until the audio is ready: "LOADING AUDIO..." over a running bar in a 200 px box
   (read#125; md:L2529, the loader of cli:L1166–1245: overline 11 px, 3 px apart, a 200 px bar). */
.pd-loading-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 200px;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.pd-loading-bar {
  position: relative;
  width: 200px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.pd-loading-bar::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 4px;
  background: var(--wovia-blue);
  content: "";
  animation: pd-run 1.4s ease-in-out infinite;
}

@keyframes pd-run {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(250%);
  }
}