/*
 * Avautuva paneeli ruudukon päälle.
 *
 * MEKANISMI ON YHDESSÄ PAIKASSA. Tämä tehtiin ensin podcastsivulle, ja
 * kun suosikkisivu tarvitsi saman, vaihtoehtoina oli kopioida se tai
 * nostaa se omaksi tiedostokseen. Kopio olisi ollut neljäs kerta tässä
 * projektissa kun sama asia on olemassa kahdesti — kortin linkki,
 * kanavan nimi, lohkolista ja jaksomäärä maksoivat jokainen oman
 * vikansa, ja kaikki neljä näyttivät korjaushetkellä pieniltä.
 *
 * Värit tulevat muuttujista, joten kumpikin sivu antaa oman ihonsa
 * ilman että mekanismi tietää niistä mitään.
 *
 * Perustelu itse paneelille: kortti on noin 300 pikseliä leveä, eikä
 * siihen mahdu jakson nimeä — "UC HÄTÄLIVE: Jori Le…" ei kerro kumpi
 * jakso on kyseessä, ja juuri nimi on se mistä jaksot erottuvat.
 * Kokeiltiin ensin niin että avattu kortti venyi koko rivin levyiseksi:
 * se antoi tilan mutta siirsi kaikkia muita kortteja, eli avaaminen
 * hyppäytti listaa ja sulkeminen hyppäytti takaisin. Päälle avautuva
 * paneeli antaa saman leveyden eikä liikuta ruudukosta mitään.
 */

/*
 * KERROSJÄRJESTYS YHTENÄ ASTEIKKONA.
 *
 * Nämä kaksi lukua ovat toistensa vastinpari, ja niitä on luettava
 * yhdessä — erillisinä ne ajautuvat väistämättä väärään järjestykseen.
 * Juuri niin kävi: soitin oli 20 ja paneeli 5, joten avattu jaksolista
 * jäi soittimen alle eikä jaksojen nimiä voinut lukea.
 *
 * Soitin on kiinni sivun alareunassa ja pysyy siellä. Avattu paneeli on
 * hetkellinen ja saa mennä sen päälle: sillä hetkellä kun käyttäjä
 * selaa jaksoja, jaksojen lukeminen on tärkeämpää kuin soittimen
 * näkeminen. Soitin palaa näkyviin heti kun paneeli suljetaan, ja
 * sulkeminen on yksi klikkaus tai Escape.
 */
:where(.ls-pod, .ls-favs, .ls-panels) {
  --ls-z-player: 20;
  --ls-z-panel: 30;
}

/*
 * Ruudukko, ei monipalstainen teksti.
 *
 * CSS:n column-count tasaisi palstat itse, mutta silloin kortit
 * siirtyisivät palstasta toiseen aina kun jokin avataan — juuri se jonka
 * käyttäjä klikkasi voisi hypätä muualle. Ruudukossa jokainen kortti
 * pysyy paikallaan.
 *
 * Palstamäärä tulee tilasta: 280 pikselin vähimmäisleveys antaa viisi
 * palstaa noin 1500 pikselin sivulla ja yhden puhelimessa, ilman
 * yhtäkään media queryä. Sama kaava kuin livenäkymän .ls-cards-listalla,
 * jotta sivuston listat ovat saman levyisiä.
 *
 * position: relative on pakollinen: paneelin paikka lasketaan
 * offsetTopista, joka on suhteessa lähimpään sijoitettuun esivanhempaan.
 */
.ls-panels {
  position: relative;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  /*
   * SAMAN RIVIN KORTIT OVAT SAMAN KORKUISIA (align-items: stretch, eli
   * ruudukon oletus — tässä oli ennen align-items: start).
   *
   * Syy ei ole ulkonäkö vaan paneelin paikka. Paneelin yläreuna
   * lasketaan sen kortin alareunasta jota klikattiin, ja jos saman rivin
   * kortit ovat eri korkuisia, matalan kortin alareuna on rivin
   * puolivälissä — paneeli avautui naapurikortin läpi ja leikkasi sen
   * tekstin poikki. Podcastsivulla sitä ei nähnyt, koska siellä kortit
   * ovat samansisältöisiä; suosikkisivulla livekortti on kaksi riviä
   * korkeampi kuin hiljainen.
   *
   * Venytetyn kortin alareuna ON rivin alareuna, joten laskenta pitää
   * paikkansa ilman että JS:n tarvitsee etsiä rivin korkeinta korttia.
   */
}

.ls-panel {
  background: var(--ls-panel-card, #14181c);
  border: 1px solid var(--ls-panel-line, #2a3037);
  border-radius: 10px;
  overflow: hidden;
}

.ls-panel[open] {
  border-color: var(--ls-panel-accent, #0f4c5c);
}

/*
 * Sijainti tulee JS:stä (ks. asemoi() paneeli.js:ssä), koska paneelin
 * yläreuna on sen kortin alareuna jota klikattiin, eikä CSS tiedä mikä
 * kortti se on.
 */
.ls-panel[open] > .ls-panel__body {
  position: absolute;
  left: 0;
  right: 0;
  /* Soittimen yläpuolelle, ks. kerrosjärjestys tiedoston alussa. */
  z-index: var(--ls-z-panel, 30);

  background: var(--ls-panel-open, #171c21);
  border: 1px solid var(--ls-panel-accent, #0f4c5c);
  border-radius: 10px;

  /*
   * Vahva varjo, koska paneeli leikkaa alleen jäävät kortit keskeltä.
   * Ilman selvää syvyyttä leikkaus näyttää rikkinäiseltä asettelulta
   * eikä päällä olevalta paneelilta.
   */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.5);

  /*
   * Pitkä lista ei saa valua sivun alareunan ohi. Kanavalla voi olla
   * 30 jaksoa, ja ilman rajaa paneelin loppu jää sinne minne kukaan ei
   * rullaa — se on absoluuttisesti sijoitettu, joten sivu ei kasva sen
   * mukana.
   */
  max-height: min(70vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * KÄÄRE ILMAN DISPLAY-ARVOA.
 *
 * Suljetun <details>-elementin sisältö piilotetaan selaimen omalla
 * säännöllä, joka antaa lapsille display:none. Jos tässä olisi oma
 * display, sääntö kumoutuisi ja sisältö näkyisi vaikka kortti on kiinni
 * — juuri niin kävi ennen tätä käärettä. Ruudukot ja flexit ovat vasta
 * sen sisällä.
 */
.ls-panel__body {
  border-top: 1px solid var(--ls-panel-line, #2a3037);
  padding-top: 4px;
}

.ls-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Selaimen oma kolmio pois; oma tulee tilalle ::after-elementtinä. */
.ls-panel__head::-webkit-details-marker { display: none; }

.ls-panel__head:hover,
.ls-panel__head:focus-visible {
  background: var(--ls-panel-hover, #181d22);
}

.ls-panel__head::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ls-panel-dim, #9aa4ae);
  border-bottom: 2px solid var(--ls-panel-dim, #9aa4ae);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.12s;
}

.ls-panel[open] > .ls-panel__head::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

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

@media (max-width: 720px) {
  /*
   * Yhdellä palstalla paneelille ei ole mitään mitä se voisi leventää,
   * joten se palaa kortin sisään. Päälle avautuva paneeli peittäisi
   * pelkästään alempia kortteja ilman että lukija hyötyy siitä mitään.
   */
  .ls-panel[open] > .ls-panel__body {
    position: static;
    border: 0;
    border-top: 1px solid var(--ls-panel-line, #2a3037);
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow-y: visible;
  }
}