@import url("../design-system/tokens.css");

/* Arte horizontal de fundo no desktop/tablet; vertical só até 600px.
   A troca de arte vem de cover_mobile. Texto e ações permanecem na interface. */
.series-cover {
  display: block;
  width: 100%;
  height: 100%;
}
.series-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.has-responsive-cover .watch-hero-art {
  inset: 0;
}
.has-responsive-cover .watch-hero-shade {
  background:
    linear-gradient(
      90deg,
      #090b0fe8 0%,
      #090b0fb3 28%,
      #090b0f52 56%,
      transparent 80%
    ),
    linear-gradient(0deg, #090b0fd9 0%, #090b0f33 45%, transparent 70%);
}
.has-responsive-cover .watch-hero-copy {
  max-width: 650px;
}
.has-responsive-cover .tp-hero .series-cover {
  position: absolute;
  inset: 0;
}
.has-responsive-cover .tp-hero::before {
  display: none;
}
.has-responsive-cover .tp-hero {
  aspect-ratio: 16 / 9;
}
.has-responsive-cover .tp-hero-text {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 26px;
  margin: 0;
  padding: 0;
}
@media (min-width: 601px) and (max-width: 860px) {
  .has-responsive-cover .watch-hero-copy {
    max-width: 560px;
  }
  .has-responsive-cover .tp-hero-text {
    left: 24px;
    right: 24px;
  }
}
@media (max-width: 600px) {
  .has-responsive-cover .watch-art {
    aspect-ratio: 2 / 3;
  }
  .watch-hero.has-responsive-cover {
    height: auto;
    min-height: 0;
  }
  .has-responsive-cover .watch-hero-art,
  .has-responsive-cover .tp-hero .series-cover {
    inset: 0 0 auto;
    height: auto;
    aspect-ratio: 2 / 3;
  }
  .has-responsive-cover .watch-hero-art img {
    object-position: center;
  }
  .has-responsive-cover .watch-hero-shade {
    background: linear-gradient(
      0deg,
      #111 0%,
      #111 18%,
      #111111e8 38%,
      #11111133 58%,
      transparent 76%
    );
  }
  .has-responsive-cover .watch-hero-copy {
    height: auto;
    min-height: 0;
    max-width: none;
    padding: calc((100vw - 2 * var(--watch-gutter)) * 1.07) 22px 28px;
  }
  .has-responsive-cover .tp-hero {
    aspect-ratio: auto;
  }
  .has-responsive-cover .tp-shade {
    background: linear-gradient(
      0deg,
      var(--panel) 0%,
      #181818f2 25%,
      #18181833 55%,
      transparent 75%
    );
  }
  .has-responsive-cover .tp-hero-text {
    position: relative;
    inset: auto;
    padding: 112% 18px 20px;
  }
}

/* Artes fornecidas com título conservam o topo no enquadramento. */
.series-cover.art-with-title img { object-position: center top; }
.tp-hero:has(.art-with-title) { overflow: hidden; }

/* Capa editorial aprovada: cena inteira em qualquer viewport, sem retrato
   alternativo ou texto da interface sobre a composição. */
.has-editorial-cover .series-cover {
  height: auto;
  aspect-ratio: 1672 / 941;
}
.has-editorial-cover .series-cover img {
  height: auto;
  object-fit: contain;
}
.has-editorial-cover .watch-art { aspect-ratio: 1672 / 941; }
.watch-hero.has-editorial-cover {
  height: auto;
  min-height: 0;
  background: var(--af-panel);
}
.has-editorial-cover .watch-hero-art {
  position: relative;
  inset: auto;
  z-index: auto;
}
.has-editorial-cover .watch-hero-shade,
.has-editorial-cover .tp-shade,
.has-editorial-cover .tp-hero::before { display: none; }
.has-editorial-cover .watch-hero-copy {
  height: auto;
  min-height: 0;
  max-width: none;
  padding: var(--af-space-6);
}
.has-editorial-cover .watch-hero-note {
  position: static;
  margin: 0 var(--af-space-6) var(--af-space-6);
}
.has-editorial-cover .tp-hero {
  aspect-ratio: auto;
  background-color: var(--af-panel);
}
.has-editorial-cover .title-back {
  position: relative;
  inset: auto;
  margin: var(--af-space-4);
  width: fit-content;
}
.has-editorial-cover .tp-hero-text {
  position: relative;
  inset: auto;
  margin: 0;
  padding: var(--af-space-6);
}
@media (min-width: 1000px) {
  .watch-hero.has-editorial-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
  }
  .has-editorial-cover .watch-hero-art { grid-column: 2; grid-row: 1 / span 2; }
  .has-editorial-cover .watch-hero-copy { grid-column: 1; grid-row: 1; }
  .has-editorial-cover .watch-hero-note { grid-column: 1; grid-row: 2; }
}