/* MAKEYCOLLECTION — VIDEO TILE (centered) + modal X + brighter sound */

/* v28 — HOME (index): center the video tile the same way collages are centered.
   Desktop: same height as collage cards.
   Mobile: spans both grid columns (centered wide card).
   Safe scope: only inside .stage .gallery and only #videoOverlay.
*/

.stage .gallery{ align-items:flex-end; } /* keep bottoms aligned like other cards */

.stage .gallery #videoOverlay{
  flex: 0 0 auto;
  height: 440px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 22px);
  overflow: hidden;
  border: 1px solid rgba(255,190,120,0.18);
  background: rgba(0,0,0,0.25);
  box-shadow:
    0 0 0 1px rgba(255,150,70,0.10),
    0 0 14px rgba(255,130,50,0.14),
    inset 0 0 10px rgba(255,160,80,0.06);
}

.stage .gallery #videoOverlay .video-open,
.stage .gallery #videoOverlay a{
  height: 100%;
}

.stage .gallery #videoOverlay video,
.stage .gallery #videoOverlay .video-thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover:hover) and (pointer:fine){
  .stage .gallery #videoOverlay{
    transition: transform 120ms ease-out, box-shadow 220ms ease, border-color 220ms ease;
    border-color: rgba(255,190,120,0.22);
  }
  .stage .gallery #videoOverlay:hover{
    border-color: rgba(255,200,140,0.45);
    box-shadow:
      0 0 0 1px rgba(255,170,90,0.35),
      0 0 26px rgba(255,140,60,0.38),
      0 0 52px rgba(255,110,40,0.22),
      inset 0 0 16px rgba(255,160,80,0.12);
    transform: translateY(-3px) scale(1.01);
  }
}

@media (max-width: 520px){
  .stage .gallery #videoOverlay{
    grid-column: 1 / -1;
    height: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .stage .gallery #videoOverlay video,
  .stage .gallery #videoOverlay .video-thumb{
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* v25 FIX: bind .video-sound to the video tile (prevents overlap with header/cart) */
#videoOverlay{ position: relative; overflow: hidden; }
#videoOverlay .video-open{ display:block; }
#videoOverlay .video-sound{ position:absolute; top:12px; right:12px; z-index:6; }

/* Floating tile on top of collages */
.video-float{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(920px, calc(100% - 120px));
  z-index:5;
  pointer-events:none; /* clicks go through except inside frame */
}
@media (max-width: 900px){
  .video-float{ width:calc(100% - 48px); }
}

.video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);
  pointer-events:auto;
}

.video-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:pointer;
  filter:saturate(1.06) contrast(1.04);
}

.video-sound{
  position:absolute;
  top:12px;
  right:12px;
  width:52px;
  height:52px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  cursor:pointer;
  pointer-events:auto;
  z-index:10;
  box-shadow:0 10px 26px rgba(0,0,0,0.60);
  filter:brightness(1.35) contrast(1.12);
  opacity:0.95;
  transition:transform .15s ease, opacity .15s ease, filter .15s ease, box-shadow .15s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3zm13.5 2c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.74 2.5-2.26 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:26px 26px;
}

.video-sound:hover{
  transform:scale(1.06);
  opacity:1;
  filter:brightness(1.55) contrast(1.15);
  box-shadow:0 12px 30px rgba(0,0,0,0.70);
}

.video-sound:active{ transform:scale(0.98); }

.video-sound.is-muted{
  opacity:0.78;
  filter:brightness(1.18) contrast(1.08);
}

.video-sound.is-muted::after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:3px;
  background:rgba(255,255,255,0.80);
  transform:translateY(-50%) rotate(-35deg);
  border-radius:3px;
  box-shadow:0 0 10px rgba(255,255,255,0.25);
}

/* Modal */
.vmodal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);
  z-index:9999;
}

.vmodal-inner{
  width:min(1100px, 95vw);
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 24px 80px rgba(0,0,0,0.70);
}

.vmodal-video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}

.vmodal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(0,0,0,0.58);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08) inset;
  text-shadow:0 0 10px rgba(255,255,255,0.25);
  transition:transform .15s ease, filter .15s ease;
}

.vmodal-close:hover{
  filter:brightness(1.2);
  transform:scale(1.03);
}

.vmodal-close:active{
  transform:scale(0.97);
}