/* =========================================================
   VELOURA EAST — CINEMATIC VIDEO MODULE
   Boxed video with poster, centered play control, and an
   overlay caption shown before play (e.g. "THE ART OF THE
   EDITION"). Falls back gracefully: if JS is off, the poster
   still shows with a visible play icon; clicking still works
   as a native <video> the browser can offer basic controls
   for once play() is called via the button's default action
   being intercepted by cinematic-video.js.
========================================================= */

.sb__cine-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 1100px;
  margin: 0 auto;
  background: #0a0a0a;
  overflow: hidden;
  border-radius: 2px;
}
.sb__cine-video-el {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.sb__cine-video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
  border: none; cursor: pointer; padding: 0;
  transition: background .35s ease;
}
.sb__cine-video-play:hover { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%); }

.sb__cine-video-play-icon {
  width: 68px; height: 68px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .35s ease, background .35s ease;
}
.sb__cine-video-play:hover .sb__cine-video-play-icon {
  transform: scale(1.08); background: rgba(255,255,255,.12);
}
.sb__cine-video-play-icon svg { margin-left: 3px; } /* optical centering of the triangle */

.sb__cine-video-caption {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.4vw, 28px);
  color: #fff;
  letter-spacing: .5px;
  text-align: center;
  padding: 0 20px;
}

.sb__cine-video.is-playing .sb__cine-video-play { display: none; }

@media (max-width: 640px) {
  .sb__cine-video { aspect-ratio: 4 / 5; border-radius: 0; }
  .sb__cine-video-play-icon { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb__cine-video-play, .sb__cine-video-play-icon { transition: none; }
}