/*
 * Podcastsivu.
 *
 * Kaksi asiaa ohjaa asettelua. Ohjelma on ryhmä eikä kortti, koska
 * podcastia kuunnellaan ohjelmana — ja soitin on sivun alalaidassa
 * kiinni, koska se on ainoa elementti joka on olemassa koko sen ajan
 * kun jaksoa selataan.
 */

.ls-pod {
  --ls-pod-bg: #101214;
  --ls-pod-fg: #e9edf1;
  --ls-pod-dim: #9aa4ae;
  --ls-pod-line: #2a3037;
  --ls-pod-accent: #0f4c5c;

  /*
   * Paneelin iho. Mekanismi (ruudukko, päälle avautuva paneeli, kolmio)
   * tulee paneeli.css:stä ja värit täältä — sivu ei toista mekanismia
   * eikä mekanismi tiedä sivun paletista.
   */
  --ls-panel-card: #14181c;
  --ls-panel-open: #171c21;
  --ls-panel-hover: #181d22;
  --ls-panel-line: var(--ls-pod-line);
  --ls-panel-accent: var(--ls-pod-accent);
  --ls-panel-dim: var(--ls-pod-dim);

  color: var(--ls-pod-fg);

  /*
   * Alatila soittimelle. Soitin on position:sticky sivun alalaidassa,
   * ja ilman tätä se peittäisi viimeisen jakson.
   */
  padding-bottom: 96px;
}

.ls-pod__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ls-pod__title {
  margin: 0;
  font-size: 1.5rem;
}

.ls-pod__meta,
.ls-pod__empty {
  margin: 0;
  color: var(--ls-pod-dim);
  font-size: 0.9rem;
}

/* ------------------------------------------------------------- ohjelmat */

/*
 * Ruudukko, kortti, otsikko ja päälle avautuva paneeli tulevat
 * paneeli.css:stä (.ls-panels, .ls-panel, .ls-panel__head,
 * .ls-panel__body). Ne olivat ennen tässä, ja kun suosikkisivu tarvitsi
 * saman mekanismin, vaihtoehtoina oli kopioida tai nostaa yhteiseksi.
 * Täällä on enää se mikä on podcastsivun omaa.
 */

.ls-pod__cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: #1a1f24;
  flex: 0 0 auto;
}

/*
 * Teksti kasvaa, jolloin sydän ja kolmio jäävät oikeaan reunaan.
 *
 * Ennen sydäntä kolmio työntyi oikealle omalla margin-left: autolla.
 * Kaksi auto-marginaalia samalla rivillä jakaisi vapaan tilan
 * keskenään, eli sydän leijuisi tekstin ja kolmion puolivälissä. Kun
 * teksti vie tilan, autoja ei tarvita.
 */
.ls-pod__showtext {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Ohjelmalaatikon sydän: otsikkorivin oikeassa reunassa, kolmion vieressä. */
.ls-fav--show {
  flex: 0 0 auto;
  margin-right: 2px;
}

.ls-pod__showname {
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Jaksomäärä ja tuoreus yhdelle riville.
 *
 * "5 jaksoa" jakautui kapeassa kortissa kahdelle riville ja koko otsikko
 * näytti rikkinäiseltä. Määrä ei kutistu eikä katkea; tuoreus saa
 * katketa, koska se on niistä kahdesta se joustavampi.
 */
.ls-pod__showmeta {
  display: flex;
  gap: 8px;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--ls-pod-dim);
}

.ls-pod__showcount {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ls-pod__showsince {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Ohjelman sivu on kortin sisällä eikä otsikossa.
 *
 * Otsikko on <summary>, ja linkki summaryn sisällä on ansa: klikkaus
 * osuu joko linkkiin tai avaukseen sen mukaan minne osoitin sattuu, ja
 * näppäimistöllä ne menevät päällekkäin. Avatun kortin sisällä linkki on
 * yksiselitteinen.
 */
.ls-pod__showlink {
  margin: 0;
  padding: 8px 12px 12px;
  font-size: 0.78rem;
}

.ls-pod__showlink a {
  color: var(--ls-pod-dim);
  text-decoration: none;
}

.ls-pod__showlink a:hover,
.ls-pod__showlink a:focus-visible {
  color: var(--ls-pod-fg);
  text-decoration: underline;
}

/* --------------------------------------------------------------- jaksot */

.ls-pod__episodes {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * Paneelissa jakson nimi ja metatiedot ovat samalla rivillä: tilaa on.
 * Kapealla näytöllä paneeli on kortin levyinen, ja silloin ne palaavat
 * allekkain (ks. kapean näytön säännöt).
 */
.ls-pod__show[open] .ls-pod__eptext {
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
}

.ls-pod__show[open] .ls-pod__eptitle {
  flex: 1 1 auto;
}

.ls-pod__show[open] .ls-pod__epmeta {
  flex: 0 0 auto;
}

.ls-pod__episode {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--ls-pod-line);
  padding: 2px 0;
}

.ls-pod__episode:last-child {
  border-bottom: 0;
}

.ls-pod__play {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ls-pod__play:hover,
.ls-pod__play:focus-visible {
  background: #181d22;
}

/*
 * Kolmio ja kaksi palkkia puhtaana CSS:nä.
 *
 * Ikoni kertoo mitä painike TEKEE: pysäytetyssä tilassa kolmio
 * ("soita"), soivassa tauko ("pysäytä"). Toisin päin se valehtelisi.
 */
.ls-pod__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ls-pod-line);
  position: relative;
  background: #16191d;
}

.ls-pod__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent currentColor;
}

.ls-pod__play.is-playing .ls-pod__icon {
  border-color: var(--ls-pod-accent);
  background: var(--ls-pod-accent);
}

.ls-pod__play.is-playing .ls-pod__icon::before {
  transform: translate(-50%, -50%);
  border: 0;
  width: 3px;
  height: 11px;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor;
  margin-left: -2px;
}

.ls-pod__play.is-current .ls-pod__eptitle {
  color: #fff;
  font-weight: 600;
}

.ls-pod__eptext {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * Jakson nimi kokonaan, katkaisematta.
 *
 * Kolmen pisteen katkaisu oli tässä ennen koko rivin levyistä avausta.
 * Nyt tilaa on, ja jos jokin nimi on silti pidempi kuin rivi, se rivittyy
 * — mieluummin kahdelle riville kuin puolikkaana.
 */
.ls-pod__eptitle {
  overflow-wrap: anywhere;
}

/*
 * Kesto ja ikä yhdelle riville. Kapeassa kortissa ne kietoutuivat
 * kahdelle riville ja tekivät jokaisesta jaksosta kaksi kertaa
 * korkeamman kuin se tarvitsee olla.
 */
.ls-pod__epmeta {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--ls-pod-dim);
}

/* --------------------------------------------------------------- soitin */

.ls-pod__player {
  position: sticky;
  bottom: 0;
  /*
   * Kerrosluku tulee paneeli.css:n asteikosta, ei tästä.
   *
   * Tässä luki 20 ja paneelissa 5, eli avattu jaksolista jäi soittimen
   * alle. Kahta lukua eri tiedostoissa ei voi pitää oikeassa
   * järjestyksessä muistamalla — nyt ne ovat vierekkäin yhdessä
   * paikassa ja perusteltuina.
   */
  z-index: var(--ls-z-player, 20);

  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 24px;
  padding: 10px 12px;
  background: #16191d;
  border: 1px solid var(--ls-pod-line);
  border-radius: 12px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}

.ls-pod__player[hidden] { display: none; }

.ls-pod__now {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 260px;
}

.ls-pod__nowcover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}

.ls-pod__nowcover[hidden] { display: none; }

.ls-pod__nowtext {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ls-pod__nowshow {
  font-size: 0.75rem;
  color: var(--ls-pod-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-pod__nowtitle {
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-pod__audio {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
}

.ls-pod__close {
  appearance: none;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--ls-pod-line);
  border-radius: 8px;
  color: var(--ls-pod-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.ls-pod__close:hover,
.ls-pod__close:focus-visible {
  color: var(--ls-pod-fg);
  border-color: var(--ls-pod-accent);
}

/*
 * Virheilmoitus soittimessa.
 *
 * Vaikeneva soitin on pahin lopputulos: käyttäjä ei tiedä onko vika
 * hänessä, meissä vai jakelijassa. Teksti tulee CSS:stä, koska se on
 * tila eikä sisältöä — JS asettaa vain lipun.
 */
.ls-pod__player[data-ls-virhe="1"] .ls-pod__nowshow::after {
  content: " · toistaminen ei onnistunut";
  color: #e0245e;
}

/* --------------------------------------------------------------- kapea */

@media (max-width: 720px) {
  .ls-pod { padding-bottom: 150px; }

  .ls-pod__show[open] .ls-pod__eptext {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .ls-pod__player {
    flex-wrap: wrap;
  }

  .ls-pod__now {
    flex: 1 1 100%;
  }

  .ls-pod__audio {
    flex: 1 1 100%;
    order: 3;
  }

  .ls-pod__cover {
    width: 48px;
    height: 48px;
  }

  /* Jakson sivu vie kapealla liikaa tilaa otsikolta. */
  .ls-pod__link { display: none; }
}