/* feat-videos.css — isolated stylesheet for the "videos" redesign feature (loads after forum.css
   so same-specificity rules here override it). Owned by one subagent. */

/* ── Community Videos page (index.php?t=videos) ─────────────────────────────
   cv-* classes are page-scoped; the thumbnail reuses the shared .vfacade / .vplay /
   .vposter component from forum.css (click-to-play is handled globally by swh.js). */
.cv-section { padding-bottom: 10px; }
.cv-section .page-head { margin: 0 0 4px; }
.cv-section .page-head h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 0.9rem + 2.4vw, 2.4rem);
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; margin: 0;
}
.cv-section .page-head-desc {
  color: var(--muted); margin: 10px 0 0; max-width: 64ch; font-size: 1rem; line-height: 1.55;
}

.cv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; }
.cv-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cv-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--sh-2); }

/* The thumbnail is the shared .vfacade. Square off its corners inside the card and give it a
   branded gradient fallback for when a poster is absent or blocked (the VM has no outbound
   internet, so real YouTube posters won't load in QA — the gradient keeps cards on-brand). */
.cv-card .vfacade {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: linear-gradient(150deg,
    var(--surface-2) 0%,
    var(--brand-tint-2) 52%,
    color-mix(in srgb, var(--accent, var(--brand)) 42%, var(--surface-2)) 100%);
}
.cv-badge {
  position: absolute; z-index: 2; bottom: 8px; right: 8px;
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 6px; background: oklch(18% 0.04 262 / 0.82); color: #fff;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: .02em;
}

.cv-meta { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 9px; }
.cv-title {
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.32;
  color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-title:hover { color: var(--brand); }
.cv-byline { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.cv-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800;
  font-size: 0.72rem; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
}
.cv-avatar-img { background: none; }
.cv-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cv-by { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-views { color: var(--faint); white-space: nowrap; flex: 0 0 auto; }

.cv-empty {
  margin: 30px 0 0; padding: 44px 24px; text-align: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.cv-empty p { margin: 0; color: var(--ink); font-weight: 700; }
.cv-empty .cv-empty-sub { margin-top: 8px; color: var(--muted); font-weight: 400; }

@media (max-width: 1040px) { .cv-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .cv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cv-grid { grid-template-columns: 1fr; } }