/* Faixa full-bleed */
.tv-sindsep-section { background: #0f0f0f; }

/* Tipografia branca */
.tv-sindsep-section h2,
.tv-sindsep-section h3,
.tv-sindsep-section h4,
.tv-sindsep-section .text-white { color: #fff; }

/* Player principal */
.tv-sindsep-section .tv-player iframe { width: 100%; height: 100%; border: 0; }

/* Ícone play central (fallback do player) */
.tv-sindsep-section .tv-play-icon-centered {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.5);
}
.tv-sindsep-section .tv-play-icon-centered::before {
  content: '';
  position: absolute; left: 50%; top: 50%; transform: translate(-38%,-50%); /* centraliza o triângulo */
  width: 0; height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Thumbs laterais com overlay de play  */
.tv-sindsep-section .tv-thumb { 
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 13 / 9;   /* define a altura pelo ratio */
  border-radius: .5rem;
  overflow: hidden;
 }

 /* Fallback para navegadores sem aspect-ratio */
@supports not (aspect-ratio: 1) {
  .tv-sindsep-section .tv-thumb {
    height: 0;
    padding-bottom: 69.23%;    /* ~ 90/130 */
  }
}

.tv-sindsep-section .tv-thumb-bg {
  position: absolute; 
  inset: 0;
  background: #333 center/cover no-repeat;
  z-index: 1;
}
.tv-sindsep-section .ms-play.material-symbols-outlined {
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%,-50%);
  z-index: 2; 
  color: #fff;
  width: 42px; 
  height: 42px; 
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 28px;
  pointer-events: none;
}

/* Grid lateral (desktop usa col-lg-5/7; mobile já empilha imagem acima) */
@media (max-width: 991.98px) {
  .tv-sindsep-section .tv-item .badge { display: inline-block; }
}