/* Horizontal video rail with wrap-around arrows — 2026-11-04 (1x3 desktop, phone: 1 card + peek, arrows under) */
.vrail{position:relative}
.vtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.vtrack::-webkit-scrollbar{display:none}
.vtrack>.vcard{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start}
@media(min-width:901px){
  .vtrack:has(>.vcard:nth-child(2):last-child)>.vcard{flex:0 0 calc((100% - 18px)/2)}
  .vrail:has(>.vtrack>.vcard:nth-child(2):last-child) .vbtn{display:none}
}

.vbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:138px;height:138px;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);background:rgba(10,10,31,.72);color:#fff;font:300 84px/1 system-ui,sans-serif;
  cursor:pointer;display:grid;place-items:center;padding:0 0 10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.vbtn:hover,.vbtn:focus-visible{background:var(--pink);color:#12001a;border-color:transparent;outline:none;
  transform:translateY(-50%) scale(1.04)}
.vbtn.prev{left:-69px}
.vbtn.next{right:-69px}

@media(max-width:1100px){
  .vbtn{width:110px;height:110px;font-size:66px}
  .vbtn.prev{left:-44px}.vbtn.next{right:-44px}
}
@media(max-width:900px){.vtrack>.vcard{flex:0 0 calc((100% - 18px)/2)}}
@media(max-width:760px){
  .vbtn{width:84px;height:84px;font-size:50px;padding-bottom:8px}
  .vbtn.prev{left:-10px}.vbtn.next{right:-10px}
}

/* phone: one card per view with a 34px peek of the next; arrows moved under the row, thumb reach */
@media(max-width:660px){
  .vtrack>.vcard{flex:0 0 calc(100% - 52px)}
  .vrail{margin-bottom:96px}
  .vbtn{top:auto;bottom:-92px;transform:none;width:72px;height:72px;font-size:44px;padding:0 0 6px}
  .vbtn:hover,.vbtn:focus-visible{transform:none;background:var(--pink);color:#12001a;border-color:transparent}
  .vbtn.prev{left:calc(50% - 84px);right:auto}
  .vbtn.next{right:calc(50% - 84px);left:auto}
}

/* 2026-11-05: tablet/desktop — arrows sit above the rail, right-aligned, so they never cover card content */
@media(min-width:661px){
  .vrail{margin-top:64px}
  .vbtn{top:-64px;transform:none;width:52px;height:52px;font-size:30px;padding:0 0 5px}
  .vbtn.prev{left:auto;right:62px}
  .vbtn.next{left:auto;right:0}
  .vbtn:hover,.vbtn:focus-visible{transform:none}
}