/* ═══════════════════════════════════════════════════════════════════
   Tamil News Portal — Video Gallery Section
   File: css/tnp-video-gallery.css
   Enqueue in functions.php:
     wp_enqueue_style( 'tnp-video-gallery', get_template_directory_uri() . '/css/tnp-video-gallery.css', [], '1.0.0' );
   ═══════════════════════════════════════════════════════════════════ */

/* ── Custom properties ─────────────────────────────────────────────── */
.tnp-vg {
  --vg-bg:          #0d0d14;
  --vg-surface:     #161620;
  --vg-surface2:    #1e1e2e;
  --vg-border:      rgba(255,255,255,.07);
  --vg-text:        #e8e8f0;
  --vg-muted:       rgba(255,255,255,.4);
  --vg-accent:      var(--ch-accent, #e91e8c);
  --vg-live:        #f44336;
  --vg-radius:      10px;
  --vg-radius-sm:   6px;
  --vg-ease:        cubic-bezier(.4,0,.2,1);
  --vg-card-w:      400px;   /* card min width; grid handles the rest */

  position:   relative;
  background: var(--vg-bg);
  padding:    48px 0 56px;
  overflow:   hidden;
}

/* ── Atmospheric background ─────────────────────────────────────────── */
.tnp-vg__bg-layer {
  position: absolute;
  inset:    0;
  pointer-events: none;
  z-index:  0;
}
.tnp-vg__bg-glow {
  position:      absolute;
  width:         500px;
  height:        500px;
  border-radius: 50%;
  filter:        blur(130px);
  opacity:       .08;
}
.tnp-vg__bg-glow--left {
  top:        -120px;
  left:       -100px;
  background: #e91e8c;
}
.tnp-vg__bg-glow--right {
  bottom:     -140px;
  right:      -80px;
  background: #1565c0;
}
.tnp-vg__bg-grid {
  position:         absolute;
  inset:            0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:  48px 48px;
  mask-image:       radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 100%);
}

/* ── Section heading ────────────────────────────────────────────────── */
.tnp-vg__heading {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  color:       #fff !important;
}
.tnp-vg__live-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         3px 10px;
  border-radius:   var(--vg-radius-sm);
  background:      var(--vg-live);
  color:           #fff;
  font-size:       .7rem;
  font-weight:     800;
  letter-spacing:  1.5px;
  text-transform:  uppercase;
  vertical-align:  middle;
}
.tnp-vg__live-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #fff;
  animation:     vg-pulse 1.4s ease-in-out infinite;
}
.tnp-vg__view-all {
  color: rgba(255,255,255,.5) !important;
  transition: color .2s;
}
.tnp-vg__view-all:hover { color: #fff !important; }

/* ── Channel tab nav ────────────────────────────────────────────────── */
.tnp-vg__channel-nav {
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
  margin:     0 0 24px;
  padding:    4px 0;
}
.tnp-vg__channel-tab {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       9px 18px;
  border-radius: 30px;
  border:        1px solid var(--vg-border);
  background:    var(--vg-surface);
  color:         var(--vg-muted);
  font-size:     .82rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .2s var(--vg-ease),
                 color      .2s var(--vg-ease),
                 border-color .2s var(--vg-ease),
                 box-shadow .2s var(--vg-ease);
  white-space:   nowrap;
}
.tnp-vg__channel-tab:hover {
  color:        var(--vg-text);
  border-color: rgba(255,255,255,.15);
}
.tnp-vg__channel-tab--active {
  background:   var(--ch-accent, #e91e8c);
  border-color: transparent;
  color:        #fff;
  box-shadow:   0 4px 20px color-mix(in srgb, var(--ch-accent, #e91e8c) 35%, transparent);
}
.tnp-vg__tab-icon  { font-size: 1rem; }
.tnp-vg__tab-label { flex: 1; }
.tnp-vg__tab-count {
  background:    rgba(255,255,255,.15);
  padding:       1px 7px;
  border-radius: 20px;
  font-size:     .72rem;
  font-weight:   700;
}
.tnp-vg__channel-tab--active .tnp-vg__tab-count { background: rgba(255,255,255,.25); }

/* ── Panel ──────────────────────────────────────────────────────────── */
.tnp-vg__panel {
  display: none;
}
.tnp-vg__panel--active {
  display: block;
  animation: vg-fadeup .3s var(--vg-ease);
}

/* ── Slider wrap ────────────────────────────────────────────────────── */
.tnp-vg__slider-wrap {
  position: relative;
  display:  flex;
  align-items: center;
  gap:      0;
}
.tnp-vg__track-outer {
  flex:     1;
  overflow: hidden;
  min-width: 0;
}
.tnp-vg__track {
  display:    flex;
  gap:        14px;
  transition: transform .45s var(--vg-ease);
  will-change: transform;
}

/* ── Nav buttons ────────────────────────────────────────────────────── */
.tnp-vg__nav-btn {
  flex-shrink:     0;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  border:          1px solid var(--vg-border);
  background:      rgba(22,22,32,.9);
  color:           var(--vg-text);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         5;
  transition:      background .2s, border-color .2s, transform .15s;
  backdrop-filter: blur(8px);
}
.tnp-vg__nav-btn:hover {
  background:   var(--ch-accent, #e91e8c);
  border-color: transparent;
  transform:    scale(1.08);
}
.tnp-vg__nav-btn--prev { margin-right: 8px; }
.tnp-vg__nav-btn--next { margin-left:  8px; }
.tnp-vg__nav-btn:disabled { opacity: .3; pointer-events: none; }

/* ── Card ───────────────────────────────────────────────────────────── */
.tnp-vg__card {
  flex:          0 0 var(--vg-card-w);
  width:         var(--vg-card-w);
  background:    var(--vg-surface);
  border:        1px solid var(--vg-border);
  border-radius: var(--vg-radius);
  overflow:      hidden;
  cursor:        pointer;
  transition:    transform    .25s var(--vg-ease),
                 box-shadow   .25s var(--vg-ease),
                 border-color .25s var(--vg-ease);
  outline:       none;
  position:      relative;
  display:       flex;
  flex-direction: column;
  
}
.tnp-vg__card:hover,
.tnp-vg__card:focus-visible {
  transform:    translateY(-5px) scale(1.02);
  box-shadow:   0 20px 50px rgba(0,0,0,.65),
                0 0 0 1px var(--ch-accent, #e91e8c);
  border-color: var(--ch-accent, #e91e8c);
}
.tnp-vg__card--locked { opacity: .7; }

/* Thumb */
.tnp-vg__card-thumb {
  position:       relative;
  padding-bottom: 56.25%;
  background:     linear-gradient(135deg,
                    color-mix(in srgb, var(--ch-accent, #333) 30%, #111) 0%,
                    #111 100%);
  overflow:       hidden;
  width:          100%;
}
.tnp-vg__card-thumb img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .35s var(--vg-ease);
}
.tnp-vg__card:hover .tnp-vg__card-thumb img { transform: scale(1.08); }
.tnp-vg__card-placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      linear-gradient(135deg,
                     color-mix(in srgb, var(--ch-accent, #333) 20%, #111) 0%,
                     #0d0d14 100%);
}

/* Badge */
.tnp-vg__badge {
  position:      absolute;
  top:           10px;
  right:         10px;
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  border-radius: var(--vg-radius-sm);
  font-size:     .68rem;
  font-weight:   900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(6px);
  z-index:       4;
}
.tnp-vg__badge--live    { background: rgba(244,67,54,.95); color: #fff; }
.tnp-vg__badge--new     { background: rgba(233,30,140,.95); color: #fff; }
.tnp-vg__badge--hd      { background: rgba(34,34,34,.9); color: #ccc; border: 1px solid rgba(68,68,68,.8); }
.tnp-vg__badge--premium { background: rgba(245,166,35,.95); color: #000; }

.tnp-vg__badge-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #fff;
  animation:     vg-pulse 1.4s ease-in-out infinite;
}

/* Lock */
.tnp-vg__lock {
  position:         absolute;
  top:              10px;
  left:             10px;
  width:            32px;
  height:           32px;
  border-radius:    50%;
  background:       rgba(0,0,0,.6);
  backdrop-filter:  blur(8px);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            #fff;
  font-size:        1.1rem;
  z-index:          4;
  border:           1px solid rgba(255,255,255,.15);
}

/* Play overlay */
.tnp-vg__play-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,.25);
  opacity:         0;
  transition:      opacity .2s;
  z-index:         3;
}
.tnp-vg__card:hover .tnp-vg__play-overlay,
.tnp-vg__card:focus-visible .tnp-vg__play-overlay { opacity: 1; }
.tnp-vg__play-circle {
  width:            56px;
  height:           56px;
  border-radius:    50%;
  background:       var(--ch-accent, #e91e8c);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       0 0 0 10px rgba(233,30,140,.15);
  transform:        scale(.8);
  transition:       transform .25s var(--vg-ease), background .2s;
}
.tnp-vg__card:hover .tnp-vg__play-circle { transform: scale(1); }

/* Card body */
.tnp-vg__card-body {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  padding:     16px 12px 12px;
  background:  linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.7), transparent);
  backdrop-filter: blur(2px);
}
.tnp-vg__card-genre {
  display:       inline-block;
  font-size:     .65rem;
  font-weight:   800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color:         var(--ch-accent, #e91e8c);
  margin-bottom: 3px;
}
.tnp-vg__card-title {
  font-size:       .9rem;
  font-weight:     700;
  color:           #fff;
  line-height:     1.3;
  margin:          0 0 4px;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
  text-shadow:     0 2px 8px rgba(0,0,0,.4);
}
.tnp-vg__card-time {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   .75rem;
  color:       rgba(255,255,255,.75);
  margin:      0;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Progress dots ──────────────────────────────────────────────────── */
.tnp-vg__dots {
  display:         flex;
  justify-content: center;
  gap:             6px;
  margin-top:      18px;
}
.tnp-vg__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--vg-border);
  border:        1px solid rgba(255,255,255,.12);
  cursor:        pointer;
  transition:    background .2s, width .25s var(--vg-ease), border-radius .25s;
  display:       inline-block;
}
.tnp-vg__dot--active {
  background:    var(--ch-accent, #e91e8c);
  border-color:  transparent;
  width:         22px;
  border-radius: 4px;
}

/* ── Modal ──────────────────────────────────────────────────────────── */
.tnp-vg__modal {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.tnp-vg__modal[hidden] { display: none; }

.tnp-vg__modal-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
}
.tnp-vg__modal-box {
  position:      relative;
  width:         min(92vw, 880px);
  background:    #161620;
  border-radius: 14px;
  border:        1px solid rgba(255,255,255,.1);
  overflow:      hidden;
  animation:     vg-modalin .28s var(--vg-ease);
  z-index:       1;
}
.tnp-vg__modal-close {
  position:      absolute;
  top:           12px;
  right:         12px;
  z-index:       10;
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    rgba(0,0,0,.6);
  border:        1px solid rgba(255,255,255,.15);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  transition:    background .2s;
}
.tnp-vg__modal-close:hover { background: var(--vg-live); }

.tnp-vg__modal-player {
  width:           100%;
  padding-bottom:  56.25%;
  position:        relative;
  background:      #000;
}
.tnp-vg__modal-player iframe,
.tnp-vg__modal-player video {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  border:   0;
}
.tnp-vg__no-video {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  color:           rgba(255,255,255,.35);
  gap:             12px;
  font-size:       .9rem;
}
.tnp-vg__no-video-icon { font-size: 3.5rem; line-height: 1; }

.tnp-vg__modal-info {
  padding: 16px 20px 20px;
}
.tnp-vg__modal-title {
  font-size:    1rem;
  font-weight:  700;
  color:        #fff;
  margin:       0 0 4px;
}
.tnp-vg__modal-time {
  font-size: .78rem;
  color:     rgba(255,255,255,.4);
}

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes vg-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(244,67,54,.3); }
  50%       { opacity: .7; box-shadow: 0 0 0 7px rgba(244,67,54,.0); }
}
@keyframes vg-fadeup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vg-modalin {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .tnp-vg { --vg-card-w: 200px; }
}
@media (max-width: 900px) {
  .tnp-vg { --vg-card-w: 180px; }
  .tnp-vg__channel-tab { padding: 7px 12px; font-size: .78rem; }
}
@media (max-width: 640px) {
  .tnp-vg {
    --vg-card-w: 160px;
    padding:    32px 0 40px;
  }
  .tnp-vg__nav-btn { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .tnp-vg { --vg-card-w: 140px; }
  .tnp-vg__tab-count { display: none; }
}