/* =========================================================
   PRO-ACTIVE TV (isolated styles)
   Safe to include after main style.css
   ========================================================= */

/* ====== Optional: TV grid layout ====== */
.pag-tv-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 48px 0;
}

@media (max-width: 1024px){
  .pag-tv-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ====== TV player card ====== */
.pag-tv-player{
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.pag-tv-frame{
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;

  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 25px 70px rgba(0,0,0,0.6);
}

/* Screen base layer */
.pag-tv-screen{
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;
}

/* YouTube iframe fills TV */
.pag-tv-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  background: #000;
}

/* Glass overlay */
.pag-tv-glass{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,0.06), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}

/* Play overlay button */
.pag-tv-play{
  position: absolute;
  inset: 0;
  z-index: 3;

  border: 0;
  background: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.pag-tv-play-icon{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  position: relative;
}

.pag-tv-play-icon::before{
  content: "";
  position: absolute;
  left: 30px;
  top: 24px;
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.pag-tv-player:hover .pag-tv-play-icon{
  transform: scale(1.05);
  transition: transform 160ms ease;
}

/* When playing, hide overlays */
.pag-tv-frame.is-playing .pag-tv-play,
.pag-tv-frame.is-playing .pag-tv-glass{
  display: none !important;
}

/* ====== Modal ====== */
.pag-tv-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.pag-tv-modal.active{
  display: block;
}

.pag-tv-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.pag-tv-modal__content{
  position: relative;
  max-width: 960px;
  margin: 5vh auto;
  padding: 0 16px;
}

.pag-tv-modal__video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.8);
}

.pag-tv-modal__video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.pag-tv-modal__close{
  position: absolute;
  top: -42px;
  right: 12px;
  font-size: 34px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
}

.pag-tv-modal__close:hover{
  opacity: 1;
}