/* =========================================================
   UniSST V220 — CARD DE CURSOS AUTENTICADO COMO REFERÊNCIA GLOBAL
   Autorização explícita em 07/09/2026.
   Regra: todo card acadêmico usa a mesma geometria/efeito do card da
   página Cursos após login. Home pública/logada, Cursos, Playlist,
   Assinaturas, Catálogo, Meus Cursos, Aprendizado e Relacionados.
   ========================================================= */
:root{
  --v220-radius:12px;
  --v220-gap:var(--v215-card-gap,clamp(14px,1.25vw,20px));
  --v220-bg:#050505;
}

/* Base única: o card é somente artwork. Metadados ficam no hover/preview,
   como na referência de Cursos. */
html body.streaming-system-v220 a[data-course-preview="1"].v220-reference-card{
  position:relative!important;
  display:block!important;
  align-self:flex-start!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:var(--v220-radius)!important;
  background:#111!important;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
  isolation:isolate!important;
  transform:translate3d(0,0,0) scale(1)!important;
  transform-origin:center center!important;
  transition:transform .18s cubic-bezier(.2,.72,.2,1),box-shadow .18s ease,filter .18s ease!important;
}

/* Elimina as diferenças históricas de cards com texto/faixa abaixo da imagem. */
html body.streaming-system-v220 .v220-reference-card :is(.card-info,.prime-card-info,.course-playlist-copy,.pv203-title-card-copy){
  display:none!important;
}
html body.streaming-system-v220 .v220-reference-card .v220-reference-art{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  overflow:hidden!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  box-shadow:none!important;
  aspect-ratio:auto!important;
}
html body.streaming-system-v220 .v220-reference-card .v220-reference-art>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
}

/* Geometria EXATA da referência global: as variáveis são as mesmas usadas
   em Cursos autenticado (V215/V217). */
@media (min-width:900px){
  html body.streaming-system-v220 :is(.course-rail,.pv205-card-rail,.pv203-card-rail,.learning-course-rail){
    gap:var(--v220-gap)!important;
    align-items:flex-start!important;
  }
  html body.streaming-system-v220 a.v220-reference-card.v220-landscape-card:not(.v220-grid-card){
    flex:0 0 var(--pv-card-w)!important;
    width:var(--pv-card-w)!important;
    min-width:var(--pv-card-w)!important;
    max-width:var(--pv-card-w)!important;
    height:var(--pv-card-h)!important;
    min-height:var(--pv-card-h)!important;
    max-height:var(--pv-card-h)!important;
    aspect-ratio:16/9!important;
  }
  html body.streaming-system-v220 a.v220-reference-card.v220-poster-card:not(.v220-grid-card){
    flex:0 0 var(--pv-poster-w)!important;
    width:var(--pv-poster-w)!important;
    min-width:var(--pv-poster-w)!important;
    max-width:var(--pv-poster-w)!important;
    height:var(--pv-poster-h)!important;
    min-height:var(--pv-poster-h)!important;
    max-height:var(--pv-poster-h)!important;
    aspect-ratio:2/3!important;
  }

  /* Grids usam as mesmas quatro colunas da referência e o mesmo artwork. */
  html body.streaming-system-v220 :is(.catalog-grid,.prime-catalog-grid,.catalog-20-grid,.catalog-24-grid,.library-page .catalog-grid){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:var(--v220-gap)!important;
    align-items:start!important;
  }
  html body.streaming-system-v220 :is(.catalog-grid,.prime-catalog-grid,.library-page .catalog-grid)>.v220-reference-card{
    width:100%!important;min-width:0!important;max-width:none!important;
    height:auto!important;min-height:0!important;max-height:none!important;
  }
  html body.streaming-system-v220 :is(.catalog-grid,.prime-catalog-grid,.library-page .catalog-grid)>.v220-landscape-card{aspect-ratio:16/9!important}
  html body.streaming-system-v220 :is(.catalog-grid,.prime-catalog-grid,.library-page .catalog-grid)>.v220-poster-card{aspect-ratio:2/3!important}
}

/* Hover horizontal = mesmo comportamento audiovisual do Cursos autenticado.
   O preview detalhado continua no glance global, sem empurrar a fileira. */
@media (hover:hover) and (pointer:fine){
  html body.streaming-system-v220 a.v220-reference-card.v220-landscape-card:is(:hover,:focus-visible,.preview-pending,.preview-active){
    z-index:70!important;
    transform:translate3d(0,-3px,0) scale(1.045)!important;
    box-shadow:0 22px 54px rgba(0,0,0,.48)!important;
    filter:brightness(1.035)!important;
  }
  html body.streaming-system-v220 a.v220-reference-card.v220-landscape-card:is(:hover,:focus-visible,.preview-pending,.preview-active) .v220-reference-art{
    filter:brightness(.94) saturate(1.05) contrast(1.02)!important;
  }

  /* Vertical = efeito exato da referência enviada: o pôster 2:3 vira um
     destaque 16:9 mantendo a MESMA altura da fileira. */
  html body.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{
    --v220-super-focus-w:calc(var(--pv-poster-h) * 1.7777778);
    flex-basis:var(--v220-super-focus-w)!important;
    width:var(--v220-super-focus-w)!important;
    min-width:var(--v220-super-focus-w)!important;
    max-width:var(--v220-super-focus-w)!important;
    height:var(--pv-poster-h)!important;
    min-height:var(--pv-poster-h)!important;
    max-height:var(--pv-poster-h)!important;
    aspect-ratio:16/9!important;
    z-index:75!important;
    transform:none!important;
    border-radius:var(--v220-radius)!important;
    box-shadow:0 22px 58px rgba(0,0,0,.55)!important;
  }
  html body.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>.v220-reference-art{opacity:0!important}
  html body.streaming-system-v220 a.v220-reference-card.v220-poster-card .pv-super-focus-pane{border-radius:inherit!important}
}


/* Playlist pessoal também usa a mesma vitrine de quatro cards, sem a antiga
   caixa horizontal com descrição. Os controles de ordenar/remover permanecem
   como overlays funcionais do item. */
@media (min-width:900px){
  html body.streaming-system-v220 .course-playlist-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:var(--v220-gap)!important;
    align-items:start!important;
  }
  html body.streaming-system-v220 .course-playlist-card{
    min-width:0!important;background:transparent!important;border:0!important;border-radius:var(--v220-radius)!important;overflow:visible!important;box-shadow:none!important;transform:none!important;
  }
  html body.streaming-system-v220 .course-playlist-card>.v220-reference-card{
    width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;
  }
}

/* Overlays aprovados ficam nos mesmos cantos em qualquer tela. */
html body.streaming-system-v220 .v220-reference-card .pv211-course-badge{top:8px!important;right:8px!important;left:auto!important}
html body.streaming-system-v220 .v220-reference-card .pv211-lock-mark{left:10px!important;bottom:10px!important}
html body.streaming-system-v220 .v220-reference-card .pv211-logo-mark{right:10px!important;bottom:9px!important}
html body.streaming-system-v220 .v220-reference-card .pv211-hover-title{z-index:22!important;padding:34px 12px 34px!important}

/* Trilhos: mesma posição, mesmo recorte e setas. Nenhuma seta pode descer
   quando o card abre. */
html body.streaming-system-v220 :is(.rail-section,.pv205-rail,.pv205-path-detail,.learning-section-block){
  position:relative!important;
  clear:both!important;
  overflow:visible!important;
}
html body.streaming-system-v220 :is(.rail-shell,.pv205-rail-shell,.learning-rail-shell){
  position:relative!important;
  overflow:visible!important;
}
html body.streaming-system-v220 :is(.course-rail,.pv205-card-rail,.pv203-card-rail,.learning-course-rail){
  position:relative!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  scroll-snap-type:x proximity!important;
  overscroll-behavior-inline:contain!important;
  padding-top:5px!important;
  padding-bottom:20px!important;
}
html body.streaming-system-v220 :is(.course-rail,.pv205-card-rail,.pv203-card-rail,.learning-course-rail)::-webkit-scrollbar{display:none!important}

@media (min-width:900px){
  html body.streaming-system-v220 .rail-shell>.rail-arrow{
    top:calc(5px + var(--pv-card-h)/2)!important;
    bottom:auto!important;
    height:var(--pv-card-h)!important;
    transform:translateY(-50%)!important;
  }
  html body.streaming-system-v220 .rail-shell:has([data-v220-rail-orientation="poster"])>.rail-arrow{
    top:calc(5px + var(--pv-poster-h)/2)!important;
    height:var(--pv-poster-h)!important;
  }
  html body.streaming-system-v220 .rail-shell>.rail-arrow.left{left:0!important}
  html body.streaming-system-v220 .rail-shell>.rail-arrow.right{right:0!important}
}

/* HOME pública e autenticada: fluxo absoluto. Hero termina antes das fileiras;
   nenhuma versão antiga pode puxar cards para cima. */
html body.streaming-system-v220.public-home-v198 :is(.uv198-home,.v214-courses-home){
  display:block!important;position:relative!important;overflow:visible!important;
}
html body.streaming-system-v220.public-home-v198 .uv198-hero,
html body.streaming-system-v220 .clean-home-hero{
  position:relative!important;float:none!important;transform:none!important;margin-bottom:0!important;
}
html body.streaming-system-v220.public-home-v198 :is(.uv198-public-rails,.pv-public-rails),
html body.streaming-system-v220.authenticated-home-page .home-prime-content{
  position:relative!important;float:none!important;clear:both!important;transform:none!important;
  margin-top:0!important;padding-top:32px!important;z-index:10!important;background:var(--v220-bg)!important;
}
html body.streaming-system-v220 :is(.uv198-public-rails,.pv-public-rails,.home-prime-content,.v217-streaming-rails)>.rail-section{
  margin-top:0!important;margin-bottom:clamp(26px,3vw,44px)!important;
}

/* Mantém cada fileira com espaço real da sua orientação para impedir que a
   próxima fileira suba por baixo do card vertical. */
@media (min-width:900px){
  html body.streaming-system-v220 .v217-poster-section{min-height:calc(var(--pv-poster-h) + 62px)!important}
  html body.streaming-system-v220 .v217-landscape-section{min-height:calc(var(--pv-card-h) + 62px)!important}
}

/* Tablet/mobile: sem expansão por hover; toque e scroll permanecem estáveis. */
@media (max-width:899px){
  html body.streaming-system-v220 a.v220-reference-card{transform:none!important;box-shadow:none!important}
  html body.streaming-system-v220 a.v220-landscape-card:not(.v220-grid-card){
    flex:0 0 min(70vw,420px)!important;width:min(70vw,420px)!important;min-width:min(70vw,420px)!important;max-width:min(70vw,420px)!important;
    aspect-ratio:16/9!important;height:auto!important;min-height:0!important;max-height:none!important;
  }
  html body.streaming-system-v220 a.v220-poster-card:not(.v220-grid-card){
    flex:0 0 min(42vw,270px)!important;width:min(42vw,270px)!important;min-width:min(42vw,270px)!important;max-width:min(42vw,270px)!important;
    aspect-ratio:2/3!important;height:auto!important;min-height:0!important;max-height:none!important;
  }
  html body.streaming-system-v220 :is(.catalog-grid,.prime-catalog-grid,.library-page .catalog-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.streaming-system-v220 .rail-shell>.rail-arrow{display:none!important}
  html body.streaming-system-v220.public-home-v198 :is(.uv198-public-rails,.pv-public-rails),
  html body.streaming-system-v220.authenticated-home-page .home-prime-content{padding-top:24px!important}
}
@media (max-width:520px){
  html body.streaming-system-v220 :is(.catalog-grid,.prime-catalog-grid,.library-page .catalog-grid){grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){
  html body.streaming-system-v220 .v220-reference-card,
  html body.streaming-system-v220 .v220-reference-card *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}


/* =========================================================
   V221 — AJUSTE FINO DOS CARDS VERTICAIS (HOME + ASSINATURAS)
   Base real = Cursos autenticado. Ajuste: levemente menor, hover mais suave,
   expansão menos agressiva e melhor compatibilidade entre vizinhos.
   ========================================================= */
@media (min-width:900px){
  html body.streaming-system-v220 :is(.public-home-v198,.authenticated-home-page,.subscription-page,.subscription-offer-page,.subscription-member-page){
    --v221-poster-w:calc(var(--pv-poster-w) * .94);
    --v221-poster-h:calc(var(--v221-poster-w) * 1.5);
    --v221-card-gap:clamp(15px,1.35vw,22px);
  }
  html body.streaming-system-v220 :is(.public-home-v198,.authenticated-home-page,.subscription-page,.subscription-offer-page,.subscription-member-page)
  :is(.course-rail,.pv205-card-rail,.pv203-card-rail,.learning-course-rail){
    gap:var(--v221-card-gap)!important;
  }
  html body.streaming-system-v220 :is(.public-home-v198,.authenticated-home-page,.subscription-page,.subscription-offer-page,.subscription-member-page)
  a.v220-reference-card.v220-poster-card:not(.v220-grid-card){
    flex:0 0 var(--v221-poster-w)!important;
    width:var(--v221-poster-w)!important;
    min-width:var(--v221-poster-w)!important;
    max-width:var(--v221-poster-w)!important;
    height:var(--v221-poster-h)!important;
    min-height:var(--v221-poster-h)!important;
    max-height:var(--v221-poster-h)!important;
  }
  html body.streaming-system-v220 :is(.public-home-v198,.authenticated-home-page,.subscription-page,.subscription-offer-page,.subscription-member-page)
  .rail-shell:has([data-v220-rail-orientation="poster"])>.rail-arrow{
    top:calc(5px + var(--v221-poster-h)/2)!important;
    height:var(--v221-poster-h)!important;
  }
}
@media (hover:hover) and (pointer:fine){
  html body.streaming-system-v220 a.v220-reference-card.v220-poster-card{
    transition:transform .26s cubic-bezier(.22,.78,.2,1), box-shadow .26s ease, filter .26s ease, border-radius .26s ease!important;
    will-change:transform,box-shadow,filter!important;
  }
  html body.streaming-system-v220 a.v220-reference-card.v220-poster-card:is(:hover,:focus-visible,.preview-pending){
    transform:translate3d(0,-2px,0) scale(1.018)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.42)!important;
    filter:brightness(1.02)!important;
    z-index:70!important;
  }
  html body.streaming-system-v220 a.v220-reference-card.v220-poster-card:is(:hover,:focus-visible,.preview-pending) .v220-reference-art{
    filter:brightness(.965) saturate(1.03) contrast(1.01)!important;
  }
  html body.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{
    --v221-super-focus-w:clamp(300px,calc(var(--v221-poster-h, var(--pv-poster-h)) * 1.60),390px);
    flex-basis:var(--v221-super-focus-w)!important;
    width:var(--v221-super-focus-w)!important;
    min-width:var(--v221-super-focus-w)!important;
    max-width:var(--v221-super-focus-w)!important;
    height:var(--v221-poster-h,var(--pv-poster-h))!important;
    min-height:var(--v221-poster-h,var(--pv-poster-h))!important;
    max-height:var(--v221-poster-h,var(--pv-poster-h))!important;
    box-shadow:0 24px 58px rgba(0,0,0,.50)!important;
    border-radius:14px!important;
  }
  html body.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 .pv-super-focus-pane{
    animation:v221FocusFade .24s ease both;
    border-radius:inherit!important;
  }
  @keyframes v221FocusFade{from{opacity:.84;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
}