/*
 * Livesuomi – elokuvat
 *
 * Perii TV-oppaan muuttujat (.ls-tv), joten paletti on sama eikä sitä
 * määritellä toiseen kertaan. Rakenne on kuitenkin toinen: TV-opas on
 * lista, tämä on kortisto — kortin kokoinen yksikkö on elokuva eikä
 * lähetys, ja saman elokuvan esitysajat ovat kortin sisällä.
 */

/*
 * Elokuvat allekkain, ei ruudukkona.
 *
 * Ruudukko pakotti kortit samankorkuisiksi ja siten kuvaukset
 * rajattaviksi. Allekkain jokainen elokuva saa tarvitsemansa tilan ja
 * koko esittelyteksti mahtuu näkyviin — mikä on koko sivun tarkoitus.
 * Leveys rajataan lukukelpoiseksi: täysleveä leipäteksti ei ole luettavaa.
 */
.ls-films__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
}

.ls-films__days {
  margin-bottom: 20px;
}

.ls-film {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  background: var(--ls-bg);
  min-width: 0;
}

/*
 * Kuva on pystysuuntainen kuten juliste, mutta syötteen ohjelmakuva on
 * usein vaakakuva. object-fit: cover rajaa kummankin samaan muotoon,
 * jolloin kortit ovat samankokoisia riippumatta siitä mistä kuva tuli.
 */
.ls-film__art {
  flex: 0 0 110px;
  width: 110px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ls-card);
}

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

.ls-film__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ls-film__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  line-height: 1.25;
}

.ls-film__year {
  margin-left: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ls-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- esitysajat */

.ls-film__showings {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ls-film__showing {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  min-width: 0;
}

.ls-film__logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  flex: 0 0 auto;
}

.ls-film__channel {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-film__when {
  color: var(--ls-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ls-film__paid {
  padding: 0 6px;
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--ls-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------- kuvaus */

/*
 * Kuvaus näkyy KOKONAAN. Ei rajausta, ei avausnappia.
 *
 * Tämä on sivun koko idea: TV-oppaassa rivi on tiivis ja kuvaus avataan
 * erikseen, koska siellä on 2 600 riviä rinnakkaisissa sarakkeissa.
 * Täällä elokuvia on kymmeniä allekkain, joten tila riittää ja
 * katkaisulle ei ole syytä.
 */
.ls-film__desc {
  margin: 0 0 12px;
  color: var(--ls-text);
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 70ch;
}

/* ------------------------------------------------------------- linkit */

.ls-film__links {
  margin: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ls-film__imdb,
.ls-film__trailer {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ls-text);
  background: var(--ls-card);
}

.ls-film__imdb:hover,
.ls-film__trailer:hover {
  background: var(--ls-card-hover);
}

.ls-film__trailer {
  border-color: var(--ls-accent-text);
  color: var(--ls-accent-text);
}

/* ------------------------------------------------------------ mobiili */

@media (max-width: 640px) {
  .ls-film {
    padding: 12px;
    gap: 12px;
  }

  .ls-film__art {
    flex-basis: 72px;
    width: 72px;
  }

  .ls-film__desc {
    font-size: 0.8125rem;
  }
}

/* ------------------------------------------------------- käynnissä nyt */

/*
 * Menossa oleva elokuva erottuu punaisella. Sama väri kuin TV-oppaan
 * "Nyt"-merkinnässä (--ls-live), koska kyse on samasta asiasta: tämä on
 * käynnissä juuri nyt eikä myöhemmin.
 */
.ls-film.is-now {
  border-color: var(--ls-live);
  box-shadow: inset 3px 0 0 var(--ls-live);
}

.ls-film__now {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--ls-live);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.ls-film__when.is-now {
  color: var(--ls-live);
  font-weight: 600;
}

.ls-film__left {
  color: var(--ls-live);
  font-weight: 500;
}