/* 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; /* remove padding left/right */
  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 */
.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 (blurred transparent black) */
.bmvs-controls,
.bmvs-actions{
  position:absolute;
  z-index: 30;
  display:flex;
  gap: 10px;
  align-items:center;
}

.bmvs-nav,
.bmvs-play,
.bmvs-eye,
.bmvs-close{
  width:54px;
  height:54px;
  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);
}

.bmvs-eye{ text-decoration:none; }
.bmvs-nav svg{ width:22px; height:22px; }
.bmvs-play 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: 25;
  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);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  outline: none;
  display:block;
}

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

.bmvs-mini button.is-current{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

/* ==========================================================
   <= 980px: MOBILE/TABLET (DO NOT ALTER MOBILE NOW)
   ========================================================== */
@media (max-width: 980px){
  .bmvs{ --h: 460px; }

  .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%;
  }

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

  .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);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding-inline: 0;
  }

  .bmvs-item{
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
    height: 100%;
    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-controls{ top: 12px; left: 12px; gap: 8px; }
  .bmvs-actions{ top: 12px; right: 12px; gap: 8px; }

  .bmvs-nav,
  .bmvs-play,
  .bmvs-eye,
  .bmvs-close{
    width: 46px;
    height: 46px;
  }

  .bmvs-mini{
    right: 12px;
    bottom: 12px;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
    scrollbar-width: none;
  }
  .bmvs-mini::-webkit-scrollbar{ width: 0; height: 0; }

  .bmvs-mini button{
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
}

/* ===========================
   DESKTOP ONLY (>=981px)
   Columns only until open
   =========================== */
@media (min-width: 981px){

  /* Closed = hide ALL overlays */
  .bmvs-controls,
  .bmvs-actions,
  .bmvs-mini{
    opacity: 0;
    pointer-events: none;
  }

  /* Open = show overlays */
  .bmvs.is-open .bmvs-controls,
  .bmvs.is-open .bmvs-actions{
    opacity: 1;
    pointer-events: auto;
  }

  /* Desktop does not show mini stack */
  .bmvs-mini{ display:none !important; }

  /* Desktop actions pinned top-right (X only) */
  .bmvs-actions{
    top: 14px;
    right: 14px;
  }

  /* Desktop: remove play & eye; use X */
  .bmvs-play{ display:none !important; }
  .bmvs-eye{ display:none !important; }
  .bmvs-close{ display:grid !important; }

  /* Desktop: arrows in middle left & middle right */
  .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
   (prevents TT5/blocks CSS overriding flex)
   =========================== */
@media (min-width: 981px){

  /* Force flex layout to win */
  .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;
  }

  /* Open state morph */
  .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;
  }

  /* Ensure video actually shows when open */
  .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;
  }
}