/* ============================================================
   VIDAPI TV GUIDE — 1 HOUR GRID (LOCKED & FLUID)
   ✅ No horizontal scroll
   ✅ Mobile → TV safe
   ✅ Browser-stable (Safari / Firefox / Chrome)
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box; /* 🔒 CRITICAL */
}

:root {
  --vgd-time-col: clamp(130px, 18vw, 170px);
  --vgd-slots: 9;
  --vgd-row-height: 64px;
}

/* ===============================
   GRID ROOT
=============================== */

.vgd-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #050b10;
  width: 100%;
  overflow: hidden;          /* 🔒 HARD LOCK */
  max-width: 100vw;          /* 🔥 PREVENT BLEED */
}

/* ===============================
   TIME ROW (TOP)
=============================== */

.vgd-time-row {
  display: grid;
  grid-template-columns:
    var(--vgd-time-col)
    repeat(var(--vgd-slots), 1fr);
  background: #081217;
  border-bottom: 1px solid rgba(0,234,255,.25);
  overflow: hidden;
}

/* Time labels */
.vgd-time {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  font-size: 13px;
  color: #00eaff;
  white-space: nowrap;
  min-width: 0;
}

/* ===============================
   SELECTOR (TOP LEFT)
=============================== */

.vgd-time-corner {
  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ ONLY allowed vertical divider */
  border-right: 1px solid rgba(0,234,255,.35);
}

.vgd-window-selector {
  background: #081217;
  color: #00eaff;
  border: 1px solid rgba(0,234,255,.4);
  padding: 6px 8px;
  font-size: 12px;
}

/* ===============================
   CHANNEL ROWS
=============================== */

.ch-row {
  display: grid;
  grid-template-columns:
    var(--vgd-time-col)
    repeat(var(--vgd-slots), 1fr);
  min-height: var(--vgd-row-height);
  border-top: 1px solid rgba(0,234,255,.15);
  overflow: hidden;          /* 🔒 CONTAINS EVENTS */
}

/* Channel label */
.ch-name {
  display: flex;
  align-items: center;
  padding: 10px;
  font-weight: 700;
  color: #00eaff;

  /* ✅ ONLY vertical divider in body */
  border-right: 1px solid rgba(0,234,255,.35);
  white-space: nowrap;
  min-width: 0;
}

/* ===============================
   SLOT CELLS — CLEAN
=============================== */

.ch-track {
  position: relative;        /* 🔥 ANCHOR FOR EVENTS */
  min-width: 0;
  overflow: hidden;
}

/* ===============================
   EVENTS — CENTERED & STABLE
=============================== */

.vgd-event {
  position: absolute;
  inset: 6px;
  background: rgba(0,234,255,.35);
  border-left: 3px solid #00eaff;

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

  padding: 0 8px;
  font-size: 12px;
  color: #e7faff;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ===============================
   MOBILE / TABLET TUNING
=============================== */

@media (max-width: 1024px) {
  .vgd-time   { font-size: 12px; }
  .ch-name   { font-size: 13px; }
  .vgd-event { font-size: 11px; }
}