/*
  Ensany v2 — /videos (Featured Videos) page. YouTube-watch-page style:
  a player area (hidden until a video is clicked) + a grid of tiles below
  it that doubles as the browse list before playing and the "Up next"
  queue during playback. Everything here is scoped under #v2Videos so it
  never leaks into or depends on any other v2 page's CSS.

  There is no server-rendered list anymore — every tile is built by
  videos.blade.php's own script from /videos/random JSON batches, so all
  the classes below (.v2v-card, .v2v-thumb-skel, .is-loaded, .is-active,
  etc.) are applied/toggled from JS rather than Blade.
*/

#v2Videos { background: #F7F4EC; font-family: 'Inter', sans-serif; }

#v2Videos .v2v-head {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 16px 16px;
}
#v2Videos .v2v-title {
  font-size: 22px; font-weight: 800; color: #12332A; margin: 0;
}
#v2Videos .v2v-title span {
  display: block; font-size: 12px; font-weight: 700; color: #D4A94B;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}

/* Player — hidden (.d-none, toggled from JS) until the donor clicks a
   tile for the first time. */
#v2Videos .v2v-player-wrap {
  max-width: 1280px; margin: 0 auto; padding: 0 16px 24px;
}
/* Plain flex row: on this site direction is applied via inherited CSS
   `direction` (never a [dir] attribute), which flips a flex row's visual
   child order for free — player-col first / sidebar second in the DOM
   means the sidebar lands on the visual left of the player in Arabic and
   the right in English, matching YouTube's own layout in each language,
   with no RTL-specific rule needed here at all. */
#v2Videos .v2v-player-row {
  display: flex; gap: 20px; align-items: flex-start;
}
#v2Videos .v2v-player-col { flex: 1 1 0; min-width: 0; }
#v2Videos .v2v-player-box {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #0e2820; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(18,51,42,.5);
}
#v2Videos .v2v-player-box #v2vPlayer,
#v2Videos .v2v-player-box iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
#v2Videos .v2v-playing-title {
  margin: 14px 2px 0; font-size: 17px; font-weight: 800; color: #12332A;
}

/* Side "Up next" panel — fixed width next to the player on wide screens,
   stacks full-width below it once things get too narrow for a sensible
   sidebar (matches the grid's own tablet/mobile breakpoints below). */
#v2Videos .v2v-sidebar {
  flex: 0 0 340px; width: 340px; max-height: 640px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #7FB239 #F1ECDF;
}
#v2Videos .v2v-sidebar::-webkit-scrollbar { width: 6px; }
#v2Videos .v2v-sidebar::-webkit-scrollbar-thumb { background: #7FB239; border-radius: 9999px; }
#v2Videos .v2v-sidebar-heading {
  font-size: 13px; font-weight: 800; color: #12332A; margin: 0 0 10px;
}
#v2Videos .v2v-sidebar-list { display: flex; flex-direction: column; gap: 8px; }

#v2Videos .v2v-side-card {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 4px; border-radius: 10px; transition: background .15s ease;
  outline: none;
}
#v2Videos .v2v-side-card:hover,
#v2Videos .v2v-side-card:focus-visible { background: #EFE9D8; }
#v2Videos .v2v-side-thumb {
  position: relative; flex: 0 0 128px; width: 128px; aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden; background: #F1ECDF;
}
#v2Videos .v2v-side-thumb .v2v-thumb-img { width: 100%; height: 100%; object-fit: cover; }
#v2Videos .v2v-side-title {
  margin: 0; font-size: 12.5px; font-weight: 700; color: #12332A; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  #v2Videos .v2v-player-row { flex-direction: column; }
  #v2Videos .v2v-sidebar { width: 100%; flex-basis: auto; max-height: none; }
  #v2Videos .v2v-sidebar-list {
    flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 4px;
  }
  #v2Videos .v2v-side-card { flex: 0 0 200px; flex-direction: column; }
  #v2Videos .v2v-side-thumb { width: 100%; flex-basis: auto; }
}

#v2Videos .v2v-list-head {
  max-width: 1280px; margin: 0 auto; padding: 8px 16px 12px;
}
#v2Videos .v2v-list-head h3 {
  font-size: 15px; font-weight: 800; color: #12332A; margin: 0;
}

#v2Videos .v2v-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 16px 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 991px) {
  #v2Videos .v2v-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #v2Videos .v2v-grid { grid-template-columns: 1fr; gap: 16px; }
}

#v2Videos .v2v-card {
  display: block; cursor: pointer;
  background: #fff; border: 1px solid #E7E1D2; border-radius: 16px;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  outline: none;
}
#v2Videos .v2v-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -20px rgba(18,51,42,.35);
}
#v2Videos .v2v-card:focus-visible {
  border-color: #7FB239; box-shadow: 0 0 0 3px rgba(127,178,57,.25);
}
/* Currently-playing tile in the "Up next" queue. */
#v2Videos .v2v-card.is-active {
  border-color: #578021; box-shadow: 0 0 0 2px rgba(87,128,33,.35);
}
#v2Videos .v2v-card.is-active .v2v-thumb-wrap::after {
  content: '';
  position: absolute; inset: 0; background: rgba(18,51,42,.35);
}

#v2Videos .v2v-thumb-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden; background: #F1ECDF;
}

/* Thumbnail skeleton — shimmer sits on top of the real <img> until it
   actually finishes loading, same onload/onerror technique as the
   campaign card (resources/views/components/campaign-card.blade.php +
   v2-campaigns.css), duplicated here rather than shared since this is a
   separate page-specific stylesheet like every other v2 page's CSS. */
#v2Videos .v2v-thumb-skel {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, #F1ECDF 28%, #FBF8F1 48%, #F1ECDF 68%);
  background-size: 250% 100%;
  animation: v2vShimmer 1.4s ease-in-out infinite;
  transition: opacity .35s ease;
}
#v2Videos .v2v-thumb-skel.is-hidden { opacity: 0; pointer-events: none; }
@keyframes v2vShimmer {
  0% { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}
#v2Videos .v2v-thumb-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .4s ease, transform .35s ease;
}
#v2Videos .v2v-thumb-img.is-loaded { opacity: 1; }
#v2Videos .v2v-card:hover .v2v-thumb-img.is-loaded { transform: scale(1.06); }

#v2Videos .v2v-play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(0deg, rgba(18,51,42,.55), rgba(18,51,42,0) 55%);
}
#v2Videos .v2v-play-btn {
  width: 54px; height: 54px; border-radius: 9999px;
  background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -8px rgba(18,51,42,.55);
  transition: transform .2s ease, background .2s ease;
}
#v2Videos .v2v-card:hover .v2v-play-btn {
  transform: scale(1.08); background: #fff;
}
#v2Videos .v2v-play-btn svg { margin-inline-start: 3px; }

#v2Videos .v2v-title-text {
  padding: 12px 14px 14px;
  font-size: 13.5px; font-weight: 700; color: #12332A; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

#v2Videos .v2v-empty {
  max-width: 1280px; margin: 0 auto; padding: 60px 16px; text-align: center;
  color: #5B6660; font-size: 15px; font-weight: 600;
}

/* "View more" — same social-media reveal pattern as the campaign
   detail page's donor-list modal (.v2c-viewmore in v2-campaign.css),
   own copy here since this is a separate page-specific stylesheet.
   Hidden (.d-none, from JS) the moment the donor starts playing a
   video — from then on more batches load silently in the background. */
#v2Videos .v2v-viewmore-wrap {
  max-width: 1280px; margin: 0 auto; padding: 4px 16px 60px; text-align: center;
}
#v2Videos .v2v-viewmore-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #E7E1D2; border-radius: 9999px;
  padding: 11px 22px; font-size: 13.5px; font-weight: 700; color: #578021;
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
#v2Videos .v2v-viewmore-btn:hover { background: #F1ECDF; }
#v2Videos .v2v-viewmore-btn:disabled { opacity: .6; cursor: default; transform: none; }
#v2Videos .v2v-viewmore-spinner {
  width: 13px; height: 13px; border-radius: 9999px;
  border: 2px solid #E7E1D2; border-top-color: #578021;
  display: none; animation: v2vSpin .7s linear infinite;
}
#v2Videos .v2v-viewmore-spinner.is-active { display: inline-block; }
@keyframes v2vSpin { to { transform: rotate(360deg); } }