/* ═══════════════════════════════════════════════════════════════
   restaurant-videos.css — the admin-managed "Videos" section on the
   restaurant-side pages (Home, Menu, Specials, …). Same look as the Video
   Gallery on collection.html, but with its own class names so the
   two never interfere. Load after style.css and
   BEFORE responsive.css / theme.css.
   ═══════════════════════════════════════════════════════════════ */

#restaurant-videos { background: var(--deep); }
#restaurant-videos[hidden] { display: none; }
.rv-intro {
  font-size: .92rem; line-height: 1.75; max-width: 520px; margin-top: .8rem;
  color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k)));
}
.rv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 2.5rem;
}
/* 1 or 2 clips: let them be bigger instead of leaving empty columns */
.rv-grid[data-count="1"] { grid-template-columns: minmax(0, 760px); }
.rv-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }

.rv-card {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  border-radius: 14px; overflow: hidden; aspect-ratio: 4/3;
  cursor: pointer; background: var(--char); text-align: left; font: inherit; color: var(--white);
}
.rv-grid[data-count="1"] .rv-card { aspect-ratio: 16/9; }
.rv-card img, .rv-card video.rv-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease, filter .4s ease; filter: brightness(.75);
  pointer-events: none;
}
.rv-card:hover img, .rv-card:hover video.rv-thumb { transform: scale(1.06); filter: brightness(.6); }
.rv-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,5,.85) 0%, rgba(10,8,5,.05) 55%);
}
.rv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; z-index: 2;
  background: rgba(232,160,32,.92); color: var(--on-gold); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, background .3s;
}
.rv-card:hover .rv-play, .rv-card:focus-visible .rv-play { transform: translate(-50%, -50%) scale(1.1); background: var(--gold); }
.rv-duration {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: rgba(10,8,5,.7); color: var(--cream);
  font-size: .66rem; letter-spacing: .05em; padding: .25rem .6rem;
  border-radius: 4px; backdrop-filter: blur(4px);
}
.rv-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .9rem 1rem 1rem; padding-right: 4.2rem; }
.rv-caption .title { font-size: .86rem; font-weight: 600; }
.rv-caption .sub { font-size: .7rem; margin-top: .15rem; color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k))); }
.rv-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Lightbox (created by the script the first time a clip is opened) */
.rv-lightbox {
  position: fixed; inset: 0; z-index: 200; padding: 5vh 5vw;
  background: rgba(10,8,5,.92); display: none; align-items: center; justify-content: center;
}
.rv-lightbox.is-open { display: flex; }
.rv-lightbox-inner { position: relative; width: 100%; max-width: 900px; }
.rv-lightbox video { width: 100%; max-height: 82vh; border-radius: 12px; display: block; background: #000; }
.rv-lightbox-close {
  position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #1c1710; color: #fdfaf4; border: 1px solid rgba(232,160,32,.3); font-size: 1.1rem;
}
.rv-lightbox-close:hover { border-color: var(--gold); color: #E8A020; }

@media (max-width: 1024px) {
  .rv-grid, .rv-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
  .rv-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .rv-grid, .rv-grid[data-count="2"] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .rv-lightbox-close { top: -42px; width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .rv-card img, .rv-card video.rv-thumb, .rv-play { transition: none; } }


/* ═══════════════════════════════════════════════════════════════
   SLIDER — used automatically when a page has 2 or more clips
   (built by buildSlider() in the matching -firestore.js). One clip
   keeps the big single-card layout above.
   Arrows show for mouse users, the "Swipe for more" hint + edge fade
   show on touch screens; both only appear if the row really overflows.
   ═══════════════════════════════════════════════════════════════ */
.rv-slider { margin-top: 2.5rem; }
.rv-slider-stage { position: relative; }
.rv-slider .rv-track {
  display: flex; gap: 1rem; margin-top: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rv-slider .rv-track::-webkit-scrollbar { display: none; }
.rv-slider .rv-track.is-nudging { scroll-snap-type: none; }
.rv-slider .rv-track .rv-card {
  flex: 0 0 calc((100% - 2rem) / 3); width: auto; min-width: 0;
  scroll-snap-align: start;
}
.rv-slider .rv-track[data-count="2"] .rv-card { flex-basis: calc((100% - 1rem) / 2); }
.rv-slider .rv-track .rv-card:focus-visible { outline-offset: -3px; }

/* edge fade — "there is more to the right" */
.rv-edge-fade {
  display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
  pointer-events: none; z-index: 3; border-radius: 0 14px 14px 0;
  background: linear-gradient(to right, transparent, var(--deep) 88%);
  transition: opacity .35s ease;
}
.rv-slider.is-scrollable .rv-edge-fade { display: block; }
.rv-slider-stage.at-end .rv-edge-fade { opacity: 0; }

/* prev / next arrows (mouse) */
.rv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--char); color: var(--white); border: 1px solid rgba(232,160,32,.4);
  box-shadow: 0 10px 28px rgb(var(--shadow-rgb) / calc(.4 * var(--shadow-k)));
  transition: opacity .25s, background .2s, border-color .2s, color .2s;
}
.rv-arrow svg { width: 20px; height: 20px; }
.rv-arrow.prev { left: -10px; }
.rv-arrow.next { right: -10px; }
.rv-arrow:hover { border-color: var(--gold); color: var(--gold-ink); }
.rv-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rv-arrow.is-off { opacity: 0; pointer-events: none; }
.rv-slider:not(.is-scrollable) .rv-arrow { display: none; }

/* "Swipe for more" hint — sits under the row so it never covers a caption */
.rv-swipe-hint {
  display: flex; align-items: center; gap: .5rem; width: fit-content; margin: 0 auto;
  max-height: 0; margin-top: 0; padding: 0 1.05rem; overflow: hidden; opacity: 0;
  border: 1px solid transparent; border-radius: 99px;
  background: var(--char); color: var(--white);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
  transition: opacity .4s ease, max-height .4s ease, margin-top .4s ease, padding .4s ease, border-color .4s ease;
}
.rv-swipe-hint.show {
  max-height: 3.2rem; margin-top: 1rem; padding: .55rem 1.05rem; opacity: 1;
  border-color: rgba(232,160,32,.4);
}
.rv-swipe-hint svg { width: 16px; height: 16px; flex-shrink: 0; animation: rvSwipeNudge 1.3s ease-in-out .4s infinite; }
@keyframes rvSwipeNudge {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(6px); opacity: 1; }
}

/* progress dots */
.rv-dots { display: none; justify-content: center; align-items: center; gap: .4rem; margin-top: 1rem; }
.rv-slider.is-scrollable .rv-dots { display: flex; }
.rv-dot {
  position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--cream-rgb) / calc(.25 * var(--text-k)));
  transition: background .25s ease, width .25s ease;
}
.rv-dot::after { content: ''; position: absolute; inset: -12px -4px; }  /* bigger tap area */
.rv-dot.active { width: 20px; border-radius: 4px; background: var(--gold); }
.rv-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* per-screen card widths */
@media (max-width: 1024px) {
  .rv-slider .rv-track .rv-card,
  .rv-slider .rv-track[data-count="2"] .rv-card { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 768px) {
  /* one card at a time with the next one peeking in — itself a swipe cue */
  .rv-slider .rv-track .rv-card,
  .rv-slider .rv-track[data-count="2"] .rv-card { flex-basis: 82%; }
}
/* touch screens: swipe, no arrows.  mouse: arrows, no swipe hint / fade. */
@media (hover: none), (pointer: coarse) { .rv-arrow { display: none !important; } }
@media (hover: hover) and (pointer: fine) {
  .rv-swipe-hint { display: none; }
  .rv-edge-fade { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-swipe-hint svg { animation: none; }
  .rv-arrow, .rv-dot, .rv-swipe-hint, .rv-edge-fade { transition: none; }
}