/* =========================================================
   UniSST V245 — PADRÃO GERAL DE ARTE / CARDS INSPIRADO NAS
   ESPECIFICAÇÕES OFICIAIS DO PRIME VIDEO (Video Central/Amazon Ads)

   IMPORTANTE:
   - As resoluções oficiais são de ARQUIVO/FONTE, não um tamanho CSS
     fixo de card na tela. O Prime Video renderiza tiles responsivos.
   - A V245 mantém a responsividade UniSST e padroniza as proporções.
   - Antes e depois do login usam a mesma geometria por viewport.
   ========================================================= */

:root{
  --v245-cover-ratio:16 / 9;
  --v245-poster-ratio:2 / 3;
  --v245-box-movie-ratio:3 / 4;
  --v245-box-season-ratio:4 / 3;
  --v245-episodic-ratio:16 / 9;
  --v245-carousel-hero-ratio:8 / 3;
  --v245-mobile-hero-ratio:16 / 9;
  --v245-hover-scale:1.025;
}

/* -----------------------------------------------------------------
   1) COVER ART / CARD HORIZONTAL — 16:9
   Aumenta discretamente o horizontal em relação à V243, mantendo a
   proporção oficial e o mesmo tamanho em público/autenticado.
   ----------------------------------------------------------------- */
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
  --v245-card-w:288px;
  --v245-card-h:162px;
  --pv-card-w:var(--v245-card-w)!important;
  --pv-card-h:var(--v245-card-h)!important;
  --u112-card-w:var(--v245-card-w)!important;
  --u112-card-h:var(--v245-card-h)!important;
  --uv237-card-w:var(--v245-card-w)!important;
  --uv237-card-h:var(--v245-card-h)!important;
  --uv238-card-w:var(--v245-card-w)!important;
  --uv238-card-h:var(--v245-card-h)!important;
  --v239-card-w:var(--v245-card-w)!important;
  --v239-card-h:var(--v245-card-h)!important;
  --v241-card-w:var(--v245-card-w)!important;
  --v241-card-h:var(--v245-card-h)!important;
  --v242-card-w:var(--v245-card-w)!important;
  --v242-card-h:var(--v245-card-h)!important;
}

@media (min-width:1400px) and (max-width:1759px){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
    --v245-card-w:clamp(270px,18vw,288px);
    --v245-card-h:calc(var(--v245-card-w) * .5625);
  }
}
@media (min-width:1100px) and (max-width:1399px){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
    --v245-card-w:clamp(258px,22vw,276px);
    --v245-card-h:calc(var(--v245-card-w) * .5625);
  }
}
@media (min-width:681px) and (max-width:1099px){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
    --v245-card-w:clamp(226px,29vw,258px);
    --v245-card-h:calc(var(--v245-card-w) * .5625);
  }
}
@media (max-width:680px){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
    --v245-card-w:76vw;
    --v245-card-h:42.75vw;
  }
}

/* Containers legados não podem reintroduzir medidas diferentes. */
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
  .v078-reference-home,.pv-public-showcase,[data-v239-home-card-contract],
  .v217-streaming-rails,.prime-experience-v205
){
  --pv-card-w:var(--v245-card-w)!important;
  --pv-card-h:var(--v245-card-h)!important;
  --u112-card-w:var(--v245-card-w)!important;
  --u112-card-h:var(--v245-card-h)!important;
  --v241-card-w:var(--v245-card-w)!important;
  --v241-card-h:var(--v245-card-h)!important;
  --v242-card-w:var(--v245-card-w)!important;
  --v242-card-h:var(--v245-card-h)!important;
}

/* Reforço final de 16:9 para todo card horizontal acadêmico. */
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
  a[data-course-preview="1"].v220-reference-card.v220-landscape-card,
  .v078-reference-home a.reference-landscape-card,
  .v078-reference-home .reference-standard-rail a.course-card,
  .pv-public-landscape-rail .pv-public-course-card,
  .pv205-card-rail>a[data-course-preview="1"],
  .pv203-card-rail>a[data-course-preview="1"],
  .pv205-card-rail>a.pv205-title-card,
  .pv203-card-rail>a.pv203-title-card
){
  --v243-card-w:var(--v245-card-w)!important;
  --v243-card-h:var(--v245-card-h)!important;
  --v242-card-w:var(--v245-card-w)!important;
  --v242-card-h:var(--v245-card-h)!important;
  --v241-card-w:var(--v245-card-w)!important;
  --v241-card-h:var(--v245-card-h)!important;
  flex:0 0 var(--v245-card-w)!important;
  flex-basis:var(--v245-card-w)!important;
  width:var(--v245-card-w)!important;
  min-width:var(--v245-card-w)!important;
  max-width:var(--v245-card-w)!important;
  height:var(--v245-card-h)!important;
  min-height:var(--v245-card-h)!important;
  max-height:var(--v245-card-h)!important;
  aspect-ratio:var(--v245-cover-ratio)!important;
}

html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 a.v220-reference-card.v220-grid-card.v220-landscape-card{
  --v243-card-w:var(--v245-card-w)!important;--v243-card-h:var(--v245-card-h)!important;
  width:var(--v245-card-w)!important;
  min-width:var(--v245-card-w)!important;
  max-width:var(--v245-card-w)!important;
  height:var(--v245-card-h)!important;
  min-height:var(--v245-card-h)!important;
  max-height:var(--v245-card-h)!important;
  aspect-ratio:var(--v245-cover-ratio)!important;
}

html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
  .catalog-grid,.prime-catalog-grid,.catalog-20-grid,.catalog-24-grid,
  .library-page .catalog-grid,.course-playlist-grid
){
  grid-template-columns:repeat(auto-fill,var(--v245-card-w))!important;
}

/* Mídia sempre cobre o frame, sem deformação. */
html body.prime-artwork-v245 :is(
  .v220-landscape-card,.reference-landscape-card,.pv-public-course-card,
  .pv205-title-card,.pv203-title-card
) :is(img,video,.card-img,.featured-preview-art,.pv205-card-media,.pv203-title-card-media){
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Hover mantém o comportamento aprovado: +2,5%. */
@media (min-width:681px) and (hover:hover) and (pointer:fine){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
    a[data-course-preview="1"].v220-reference-card.v220-landscape-card,
    .v078-reference-home a.reference-landscape-card,
    .pv-public-landscape-rail .pv-public-course-card
  ):is(:hover,:focus-visible,.preview-pending,.preview-active){
    transform:scale(var(--v245-hover-scale))!important;
  }
}

/* Setas/fileira acompanham a nova altura horizontal. */
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 .v217-landscape-section{
  min-height:calc(var(--v245-card-h) + 62px)!important;
}
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 .rail-shell>.rail-arrow{
  height:var(--v245-card-h)!important;
  min-height:var(--v245-card-h)!important;
  max-height:var(--v245-card-h)!important;
}
/* As setas de trilho vertical continuam seguindo o pôster, não o horizontal. */
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
  .v217-poster-section .rail-shell>.rail-arrow,
  .rail-shell:has([data-v220-rail-orientation="poster"])>.rail-arrow,
  .rail-shell:has(.reference-poster-rail)>.rail-arrow
){
  height:var(--v245-poster-h)!important;
  min-height:var(--v245-poster-h)!important;
  max-height:var(--v245-poster-h)!important;
}

/* -----------------------------------------------------------------
   2) POSTER ART — 2:3 / 2000x3000 recomendado
   O pôster usa a MESMA largura-base responsiva do tile horizontal em
   cada viewport. Isso elimina qualquer diferença público/autenticado.
   O super-preview continua abrindo somente na largura e preserva a
   altura resultante do pôster.
   ----------------------------------------------------------------- */
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
  --v245-poster-w:var(--v245-card-w);
  --v245-poster-h:calc(var(--v245-poster-w) * 1.5);
  --pv-poster-w:var(--v245-poster-w)!important;
  --pv-poster-h:var(--v245-poster-h)!important;
  --v241-poster-w:var(--v245-poster-w)!important;
  --v241-poster-h:var(--v245-poster-h)!important;
  --v242-poster-w:var(--v245-poster-w)!important;
  --v242-poster-h:var(--v245-poster-h)!important;
}
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
  .v078-reference-home,.pv-public-showcase,[data-v239-home-card-contract],
  .v217-streaming-rails,.prime-experience-v205
){
  --pv-poster-w:var(--v245-poster-w)!important;
  --pv-poster-h:var(--v245-poster-h)!important;
  --v241-poster-w:var(--v245-poster-w)!important;
  --v241-poster-h:var(--v245-poster-h)!important;
  --v242-poster-w:var(--v245-poster-w)!important;
  --v242-poster-h:var(--v245-poster-h)!important;
}
html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 :is(
  a[data-course-preview="1"].v220-reference-card.v220-poster-card,
  .v078-reference-home .reference-poster-rail>a,
  .v078-reference-home a.prime-poster-card,
  .v078-reference-home a.featured-preview-card,
  .pv-public-poster-rail .pv-public-course-card,
  a.v220-reference-card.v220-grid-card.v220-poster-card
){
  --v243-poster-w:var(--v245-poster-w)!important;
  --v243-poster-h:var(--v245-poster-h)!important;
  --v242-poster-w:var(--v245-poster-w)!important;
  --v242-poster-h:var(--v245-poster-h)!important;
  --v241-poster-w:var(--v245-poster-w)!important;
  --v241-poster-h:var(--v245-poster-h)!important;
  flex:0 0 var(--v245-poster-w)!important;
  flex-basis:var(--v245-poster-w)!important;
  width:var(--v245-poster-w)!important;
  min-width:var(--v245-poster-w)!important;
  max-width:var(--v245-poster-w)!important;
  height:var(--v245-poster-h)!important;
  min-height:var(--v245-poster-h)!important;
  max-height:var(--v245-poster-h)!important;
  aspect-ratio:var(--v245-poster-ratio)!important;
}

/* -----------------------------------------------------------------
   3) BOX ART — busca
   Curso/título independente: 3:4. Para coleções/temporadas, a classe
   ou data-art-kind="box-season" ativa 4:3.
   ----------------------------------------------------------------- */
html body.prime-artwork-v245 .v217-global-search-results{
  align-items:start!important;
}
html body.prime-artwork-v245 .v217-search-card,
html body.prime-artwork-v245 [data-art-kind="box-movie"],
html body.prime-artwork-v245 .prime-box-art-movie{
  aspect-ratio:var(--v245-box-movie-ratio)!important;
}
html body.prime-artwork-v245 [data-art-kind="box-season"],
html body.prime-artwork-v245 .prime-box-art-season{
  aspect-ratio:var(--v245-box-season-ratio)!important;
}
html body.prime-artwork-v245 .v217-search-card img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}

/* -----------------------------------------------------------------
   4) EPISODIC ART — miniaturas de aula/episódio 16:9
   ----------------------------------------------------------------- */
html body.prime-artwork-v245 :is(
  .lesson-thumb,.lesson-banner-thumb,.playlist-item .lesson-thumb,
  .course-curriculum-sidebar .lesson-thumb,[data-art-kind="episodic"],
  .prime-episodic-art
){
  aspect-ratio:var(--v245-episodic-ratio)!important;
}
html body.prime-artwork-v245 :is(.lesson-thumb,.lesson-banner-thumb) img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}

/* -----------------------------------------------------------------
   5) HERO / BANNERS
   - Desktop/TV: arte de carrossel 8:3 (3840x1440 fonte recomendada)
   - Mobile/tablet: fonte 16:9 (1936x1089 para Feature Rotator)
   O container continua responsivo; a mídia preenche sem deformar.
   ----------------------------------------------------------------- */
html body.prime-artwork-v245 :is(
  .hero-slide,.sub239-hero-slide,.sub239-hero-image,.sub239-hero-video,
  [data-carousel-cover-media]
){
  object-fit:cover!important;
}

@media (min-width:1100px){
  html body.prime-artwork-v245 .prime-feature-rotator[data-hero-carousel]{
    aspect-ratio:var(--v245-carousel-hero-ratio)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
}
@media (min-width:681px) and (max-width:1099px){
  html body.prime-artwork-v245 .prime-feature-rotator[data-hero-carousel]{
    aspect-ratio:var(--v245-mobile-hero-ratio)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
}
/* Em celular o layout textual existente é preservado; a imagem 16:9 é
   recortada responsivamente em vez de esmagar o hero. */

/* Utilitários explícitos para novos componentes, sem depender de nomes antigos. */
html body.prime-artwork-v245 [data-art-kind="cover"]{aspect-ratio:var(--v245-cover-ratio)!important}
html body.prime-artwork-v245 [data-art-kind="poster"]{aspect-ratio:var(--v245-poster-ratio)!important}
html body.prime-artwork-v245 [data-art-kind="episodic"]{aspect-ratio:var(--v245-episodic-ratio)!important}
html body.prime-artwork-v245 [data-art-kind="carousel-hero"]{aspect-ratio:var(--v245-carousel-hero-ratio)!important}

/* Touch: sem scale de desktop. */
@media (max-width:680px),(hover:none),(pointer:coarse){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220 a[data-course-preview="1"].v220-reference-card{
    transform:none!important;
  }
}

/* -----------------------------------------------------------------
   6) SUPER-PREVIEW DO POSTER — proporcional ao próprio pôster V245.
   Nenhuma camada antiga pode limitar o preview a 736/390px ou usar a
   altura de outra geração de card. Desktop expande para 16:9 mantendo
   exatamente a altura 2:3; touch continua sem expansão.
   ----------------------------------------------------------------- */
@media (min-width:681px) and (hover:hover) and (pointer:fine){
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220{
    --v245-super-w:min(calc(var(--v245-poster-h) * 1.7777778),calc(100vw - 56px));
    --pv-super-focus-w:var(--v245-super-w)!important;
    --v241-super-w:var(--v245-super-w)!important;
    --v242-super-w:var(--v245-super-w)!important;
    --v243-super-w:var(--v245-super-w)!important;
  }
  html body.prime-artwork-v245.course-cards-compact-v243.streaming-system-v220:is(.prime-v086,.prime-public-v086) a[data-course-preview="1"].v220-reference-card.v220-poster-card.prime-poster-card.pv-super-focus-active{
    flex:0 0 var(--v245-super-w)!important;
    flex-basis:var(--v245-super-w)!important;
    width:var(--v245-super-w)!important;
    min-width:var(--v245-super-w)!important;
    max-width:var(--v245-super-w)!important;
    height:var(--v245-poster-h)!important;
    min-height:var(--v245-poster-h)!important;
    max-height:var(--v245-poster-h)!important;
    aspect-ratio:16 / 9!important;
    transform:none!important;
  }
}