/* ============================================================
   Vidnexa P1 — layout/system layer (2026-10-24)
   - Shared design tokens: reuses vidnexa-theme.css variables,
     never forks a second theme. Studio uses the same tokens.
   - Homepage responsive grid, aspect-safe thumbnails, placeholder
     fallback styling, header bell, subscriptions grid, mobile
     bottom nav / drawer / safe-area, watch touch targets.
   - Layout/presentation only. No monetization, membership,
     payout, live or catalog-model changes live in this file.
   ============================================================ */

/* ---------- Shared tokens (aliases onto the theme) ---------- */
:root {
  --vx-radius: var(--card-radius, 14px);
  --vx-gap: var(--card-gap, 20px);
  --vx-surface: var(--glass-bg, #ffffff);
  --vx-surface-strong: var(--glass-bg-strong, #ffffff);
  --vx-ink: var(--text-primary, #0f172a);
  --vx-ink-2: var(--text-secondary, #475569);
  --vx-ink-3: var(--text-muted, #64748b);
  --vx-line: var(--glass-border-soft, rgba(148, 163, 184, 0.4));
  --vx-accent: var(--accent, #2563eb);
  --vx-touch: 44px;
}

/* ---------- Homepage grid: 4 desktop / 2 tablet / 1 mobile ----------
   Home's #video-container rules live inline in home.php (they load
   after this file); this class covers subscriptions/library grids
   and any future grid that opts in. */
.vx-p1-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199px) {
  .vx-p1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .vx-p1-grid { grid-template-columns: 1fr; gap: 12px; }
}
.vx-p1-grid .video-card,
.vx-p1-grid .video-card-box { width: 100%; max-width: none; }

/* ---------- Aspect-safe thumbnails ----------
   Landscape slots stay 16:9; a thumb whose natural size is
   portrait gets .vx-portrait (set by vidnexa-p1.js) and its
   container switches to a 9:16 portrait slot instead of being
   stretched or hard-cropped into a landscape box. Images never
   stretch: object-fit:cover inside a fixed-ratio box. */
.video-card .thumb-container,
.video-card-box .video-thumb-wrapper .thumb-container {
  background: #111;
  overflow: hidden;
}
.video-card .thumb-container img,
.video-card-box .video-thumb-wrapper img.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}
.thumb-container.vx-portrait { aspect-ratio: 9 / 16 !important; }
.thumb-container.vx-portrait img { object-fit: cover; }
/* Broken/blank thumbs fall back in JS to the site placeholder; the
   dark box behind them means a missing image never shows white. */
img.vx-thumb-broken { object-fit: cover; }

/* ---------- Featured / hero row (homepage) ---------- */
.vx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  margin: 8px 12px 20px;
  padding: 16px;
  border-radius: 16px;
  background: var(--vx-surface);
  border: 1px solid var(--vx-line);
}
.vx-hero-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}
.vx-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-hero-body { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.vx-hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-accent); }
.vx-hero-title { font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--vx-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vx-hero-title a { color: inherit; text-decoration: none; }
.vx-hero-meta { font-size: 14px; color: var(--vx-ink-2); }
.vx-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--vx-touch); padding: 0 20px; border-radius: 999px;
  background: var(--vx-accent); color: #fff; font-weight: 700; text-decoration: none;
  align-self: flex-start;
}
@media (max-width: 768px) {
  .vx-hero { grid-template-columns: 1fr; margin: 8px 0 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .vx-hero-title { font-size: 18px; }
}

/* ---------- Header notifications bell ---------- */
.vx-bell-wrap { position: relative; display: inline-flex; align-items: center; }
.vx-bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--vx-touch); height: var(--vx-touch); border-radius: 50%;
  border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.vx-bell-btn:hover { background: rgba(128, 128, 128, 0.15); }
.vx-bell-btn .bi, .vx-bell-btn .fas, .vx-bell-btn .fa-bell { font-size: 20px; }
.vx-bell-badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.vx-bell-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
  width: min(360px, calc(100vw - 24px)); max-height: 420px; overflow-y: auto;
  background: var(--vx-surface-strong); border: 1px solid var(--vx-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); padding: 8px;
}
.vx-bell-wrap.open .vx-bell-dropdown { display: block; }
.vx-bell-item { display: block; padding: 10px 12px; border-radius: 8px; color: var(--vx-ink); text-decoration: none; }
.vx-bell-item:hover { background: rgba(128, 128, 128, 0.12); }
.vx-bell-item .vx-bell-text { display: block; font-size: 14px; line-height: 1.4; }
.vx-bell-item .vx-bell-time { display: block; font-size: 12px; color: var(--vx-ink-3); margin-top: 2px; }
.vx-bell-item.is-unread { font-weight: 600; }
.vx-bell-empty { padding: 16px 12px; font-size: 14px; color: var(--vx-ink-2); text-align: center; }
.vx-bell-all { display: block; text-align: center; padding: 10px; font-weight: 700; color: var(--vx-accent); text-decoration: none; }

/* ---------- Subscriptions management grid ---------- */
.vx-sub-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 24px; }
@media (max-width: 1199px) { .vx-sub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .vx-sub-grid { grid-template-columns: 1fr; } }
.vx-sub-card {
  border: 1px solid var(--vx-line); border-radius: 14px; padding: 16px;
  background: var(--vx-surface); display: flex; flex-direction: column; gap: 10px;
}
.vx-sub-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vx-sub-card-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vx-sub-card-name { font-weight: 700; color: var(--vx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-sub-card-name a { color: inherit; text-decoration: none; }
.vx-sub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vx-sub-row label { font-size: 13px; color: var(--vx-ink-2); }
.vx-sub-row select, .vx-sub-row button {
  min-height: var(--vx-touch); border-radius: 8px; border: 1px solid var(--vx-line);
  background: #fff; color: var(--vx-ink); padding: 0 12px; font-size: 14px; cursor: pointer;
}
.vx-sub-row button.vx-unsub { background: transparent; }
.vx-sub-manage-title { font-size: 20px; font-weight: 800; color: var(--vx-ink); margin: 8px 0 4px; }
.vx-sub-manage-sub { font-size: 14px; color: var(--vx-ink-2); margin: 0 0 4px; }

/* ---------- Watch: visible Save / Watch Later, touch targets ---------- */
.action-btn.save-btn { min-height: var(--vx-touch); }
.action-btn { min-height: var(--vx-touch); }
.recs-section-label.vx-from-channel,
.recs-section-label.vx-related-label { margin-top: 16px; }
/* Dark-theme description card: explicit dark values (theme tokens
   resolve to light values, which previously kept this card light
   on the dark theme — see watch.php dark block, also fixed there). */
body.dark-mode .yt-desc-card, body.grey-mode .yt-desc-card, [data-theme="dark"] .yt-desc-card {
  background: #1e293b !important; border-color: rgba(148, 163, 184, 0.25) !important; color: #f8fafc !important;
}
body.dark-mode .yt-desc-card:hover, body.grey-mode .yt-desc-card:hover, [data-theme="dark"] .yt-desc-card:hover {
  background: #334155 !important;
}

/* ---------- Mobile: bottom nav, drawer, safe-area, touch ---------- */
@media (max-width: 768px) {
  /* Bottom nav: fixed, 6 equal tabs (Home/Vidlets/Create/Subs/Library/You), safe-area aware. */
  .vid-mobile-bar {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 1100;
    display: flex !important; justify-content: space-around; align-items: stretch;
    background: var(--vx-surface-strong); border-top: 1px solid var(--vx-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    backdrop-filter: none; /* solid surface: no glass blur */
  }
  .vid-mobile-bar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 56px; padding: 6px 2px; font-size: 11px; text-align: center;
  }
  .vid-mobile-bar a i { font-size: 22px; }
  /* Keep page content above the fixed bar. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
  /* Drawer sidebar: off-canvas until .show (existing toggleSidebar). */
  .vid-sidebar-expanded {
    position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 1150;
    width: min(280px, 84vw); max-width: 84vw;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateX(-105%); transition: transform 0.22s ease;
  }
  .vid-sidebar-expanded.show { transform: translateX(0); }
  .vid-sidebar-mini { display: none !important; }
  /* Player safe-area: controls clear the home indicator. */
  .player-wrap { padding-bottom: env(safe-area-inset-bottom, 0); }
  /* Touch targets across cards/menus. */
  .video-menu-btn, .rec-menu-btn, .ytc-sort, .chip, .vid-category-chip { min-height: var(--vx-touch); min-width: var(--vx-touch); }
  .vid-category-chip { display: inline-flex; align-items: center; }
}

/* ---------- Studio: same tokens as main site ---------- */
.studio-panel, .yt-main, .yt-card {
  background: var(--vx-surface);
  color: var(--vx-ink);
}

@media (max-width: 768px) { #you-menu { z-index: 1200 !important; } }