/* Beautiful Morphing Video Slider (BMVS) */
.bmvs{
  --gap: 18px;
  --radius: 18px;
  --h: 520px;
  --speed: 520ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  width: min(1366px, 100%);
  margin-inline: auto;
  padding-inline: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.bmvs-shell{ position: relative; }

/* Track */
.bmvs-track{
  display:flex;
  flex-wrap: nowrap;
  height: var(--h);
  overflow:hidden;
  margin: 0 calc(var(--gap) / -2);
}

.bmvs-item{
  position:relative;
  flex: 1 1 0%;
  min-width: 0;
  margin: 0 calc(var(--gap) / 2);
  overflow:hidden;
  border-radius: var(--radius);
  background:#111;
  transform: translateZ(0);
  cursor:pointer;

  transition:
    flex-basis var(--speed) var(--ease),
    flex-grow var(--speed) var(--ease),
    opacity var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    border-radius var(--speed) var(--ease),
    margin var(--speed) var(--ease);
}

.bmvs-thumb,
.bmvs-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.bmvs-thumb--placeholder{ background:#1b1b1b; }

.bmvs-video{
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 220ms var(--ease), transform var(--speed) var(--ease);
  pointer-events:none;
}

.bmvs-grad{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 46%;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 85%);
  pointer-events:none;
  z-index: 2;
  opacity: 1;
  transition: opacity 220ms var(--ease);
}

.bmvs-meta{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 16px 16px 14px;
  z-index: 3;
  color:#fff;
}

.bmvs-title3{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.bmvs-desc{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.35;
  opacity: .92;
  display:none;
}

/* Open state (General) */
.bmvs.is-open .bmvs-item.is-active .bmvs-video{ opacity:1; transform:scale(1); }
.bmvs.is-open .bmvs-item.is-active .bmvs-thumb{ opacity:0; }
.bmvs.is-open .bmvs-item.is-active .bmvs-grad{ opacity:0; }
.bmvs.is-open .bmvs-item.is-active .bmvs-desc{ display:block; }

.bmvs.is-open .bmvs-item.is-active{
  flex: 1 0 100%;
  margin: 0;
  border-radius: calc(var(--radius) + 6px);
}

.bmvs.is-open .bmvs-item:not(.is-active){
  flex: 0 0 0px;
  margin: 0;
  opacity: 0;
  pointer-events:none;
  transform: scale(.98);
}

/* Controls base styles */
.bmvs-controls,
.bmvs-actions{
  position:absolute;
  z-index: 50;
  display:flex;
  gap: 10px;
  align-items:center;
}

.bmvs-nav,
.bmvs-eye,
.bmvs-close{
  width: 44px;
  height: 44px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.35);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter: blur(8px);
  padding: inherit;
  transition: background 0.2s, border-color 0.2s;
}

.bmvs-nav:hover,
.bmvs-close:hover {
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,0.8);
}

.bmvs-eye{ text-decoration:none; }
.bmvs-nav svg{width: 18px;height: 18px;}
.bmvs-eye svg{ width:22px; height:22px; }
.bmvs-close svg{ width:18px; height:18px; }

.bmvs-nav.is-hidden{ display:none !important; }

/* Fixed thumbnail stack */
.bmvs-mini{
  position:absolute;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 40;
  pointer-events:auto;
}

.bmvs-mini button{
  all: unset;
  cursor: pointer;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  outline: none;
  display:block;
}

.bmvs-mini button img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* ==========================================================
   <= 980px: MOBILE/TABLET
   ========================================================== */
@media (max-width: 980px){
  .bmvs-close { display: none !important; }
  .bmvs-meta { padding-right: 80px; }
  .bmvs{ --h: 460px; }

  /* Default Track behavior on Mobile */
  .bmvs-track{
    height: var(--h);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding-inline: 10%;
    
    /* NUCLEAR SCROLLBAR HIDING */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .bmvs-track::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

  .bmvs-item{
    flex: 0 0 80%;
    margin: 0 12px 0 0;
    scroll-snap-align: center;
    height: 100%;
  }

  /* ===================================================
     CRITICAL: INSTANT MOBILE OPEN (CSS TRICK)
     This simulates the "is-open" state on mobile 
     even before JS loads.
     ===================================================
  */
  /* If JS hasn't added .is-open yet, apply these rules to force the look */
  .bmvs:not(.is-open) .bmvs-track {
    overflow: hidden; 
    padding-inline: 0;
  }

  /* Force 1st item to look active/full width */
  .bmvs:not(.is-open) .bmvs-item:first-child {
    flex: 0 0 100%;
    margin: 0;
    height: var(--h);
  }
  .bmvs:not(.is-open) .bmvs-item:first-child .bmvs-video {
    opacity: 1; 
    transform: scale(1);
  }
  .bmvs:not(.is-open) .bmvs-item:first-child .bmvs-thumb,
  .bmvs:not(.is-open) .bmvs-item:first-child .bmvs-grad {
    opacity: 0;
  }
  .bmvs:not(.is-open) .bmvs-item:first-child .bmvs-desc {
    display: block;
  }

  /* Hide all other items */
  .bmvs:not(.is-open) .bmvs-item:not(:first-child) {
    flex: 0 0 0px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(.98);
  }

  /* Standard Open State (applied by JS later) */
  .bmvs.is-open .bmvs-track{ overflow:hidden; padding-inline:0; }
  .bmvs.is-open .bmvs-item.is-active{ flex: 0 0 100%; margin:0; height: var(--h); }
  .bmvs.is-open .bmvs-item:not(.is-active){ flex:0 0 0px; margin:0; opacity:0; pointer-events:none; transform:scale(.98); }
}

@media (max-width: 768px){
  .bmvs{ --h: 420px; }
  .bmvs-track{ height: var(--h); }
  .bmvs-item{ flex: 0 0 100%; margin: 0; border-radius: 22px; }
  .bmvs-controls{ top: 18px; left: 18px; }
  .bmvs-actions{ top: 18px; right: 18px; }
  .bmvs-mini{ right: 18px; bottom: 18px; }
}

@media (max-width: 520px){
  .bmvs-meta { padding-right: 70px; }
  .bmvs-controls{ top: 12px; left: 12px; gap: 8px; }
  .bmvs-actions{ top: 12px; right: 12px; gap: 8px; }
  .bmvs-nav, .bmvs-eye, .bmvs-close{ width: 46px; height: 46px; }
  
  .bmvs-mini{ 
    right: 12px; 
    bottom: 12px; 
    gap: 8px; 
    max-height: 240px; 
    overflow: auto; 
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .bmvs-mini::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .bmvs-mini button{ width: 46px; height: 46px; border-radius: 12px; }
}

/* ===========================
   DESKTOP ONLY (>=981px)
   =========================== */
@media (min-width: 981px){
  .bmvs-controls, .bmvs-actions, .bmvs-mini{ opacity: 0; pointer-events: none; }
  .bmvs.is-open .bmvs-controls, .bmvs.is-open .bmvs-actions{ opacity: 1; pointer-events: auto; }
  .bmvs-mini{ display:none !important; }
  .bmvs-actions{ top: 14px; right: 14px; }
  .bmvs-eye{ display:none !important; }
  .bmvs-close{ display:grid !important; }
  .bmvs-controls{ inset: 0; }
  .bmvs-nav{position:absolute;top: 50%;transform: translateY(-50%);}
  .bmvs-nav--prev{ left: 14px; }
  .bmvs-nav--next{ right: 14px; }
  .bmvs-nav.is-hidden{ display:none !important; }
}

/* ===========================
   HARD DESKTOP MORPH FIX
   =========================== */
@media (min-width: 981px){
  .bmvs .bmvs-track{
    display: flex !important;
    flex-wrap: nowrap !important;
    height: var(--h) !important;
    overflow: hidden !important;
  }
  .bmvs .bmvs-item{ flex: 1 1 0% !important; min-width: 0 !important; }

  .bmvs.is-open .bmvs-item.is-active{
    flex: 1 0 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .bmvs.is-open .bmvs-item:not(.is-active){
    flex: 0 0 0px !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .bmvs.is-open .bmvs-item.is-active .bmvs-video{ opacity: 1 !important; transform: scale(1) !important; }
  .bmvs.is-open .bmvs-item.is-active .bmvs-thumb{ opacity: 0 !important; }
}