/* ==========================================================================
   Video & Reel discovery grids  (/video-lists and /reels-list)
   .vgrid = YouTube-style 16:9 cards   |   .rgrid = Instagram-style 9:16 cards
   ========================================================================== */

/* ---------- shared ---------- */
.vgrid,
.rgrid {
  display: grid;
  gap: 22px 16px;
}

.vcard,
.rcard {
  min-width: 0;
}

.vcard-play,
.rcard-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  padding-left: 3px; /* optically centre the triangle */
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.vcard-thumb:hover .vcard-play,
.vcard-thumb:focus-visible .vcard-play,
.rcard-thumb:hover .rcard-play,
.rcard-thumb:focus-visible .rcard-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Touch devices have no hover — keep the play affordance visible. */
@media (hover: none) {
  .vcard-play,
  .rcard-play { opacity: 1; }
}

/* ---------- YouTube-style video grid ---------- */
.vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }
@media (max-width: 419px)  { .vgrid { grid-template-columns: 1fr; } }

.vcard-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.vcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.vcard-thumb:hover img { transform: scale(1.03); }

.vcard-body {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.vcard-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.vcard-meta { min-width: 0; }

.vcard-title {
  font-size: 14.5px;
  line-height: 1.35;
  margin: 0 0 3px;
  font-weight: 600;
}

.vcard-title a {
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcard-author,
.vcard-sub {
  display: block;
  font-size: 12.5px;
  opacity: 0.7;
  line-height: 1.5;
}

.vcard-author { color: inherit; }
.vcard-author:hover { opacity: 1; }
.vcard-sub span + time::before { content: " • "; }

/* ---------- Instagram-style reels grid ---------- */
.rgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1199px) { .rgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }

.rcard-thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;      /* preserve true vertical reel shape */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.rcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.rcard-thumb:hover img { transform: scale(1.04); }

.rcard-views {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.rcard-views i { font-size: 10px; margin-right: 3px; }

.rcard-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: #fff;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.rcard-thumb:hover .rcard-overlay,
.rcard-thumb:focus-visible .rcard-overlay { opacity: 1; }

.rcard-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
}

.rcard-author {
  display: block;
  font-size: 11.5px;
  opacity: 0.85;
  margin-top: 2px;
}

.rcard-date {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  opacity: 0.6;
}

/* The bottom overlay already carries the caption on hover; on touch screens
   show it permanently so the text is never unreachable. */
@media (hover: none) {
  .rcard-overlay { opacity: 1; }
}

/* ---------- pagination ---------- */
.vpager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.vpager-info { font-size: 13px; opacity: 0.7; }