/* ==========================================================
   VAVIMS — Video Galeri page (loads after style.css)
   ========================================================== */

/* ---------- FEATURED PLAYER + PLAYLIST (light stone stage, like the other inner pages) ---------- */
.cinema{position:relative;background:var(--bg-2);padding:clamp(120px,11vw,150px) 0 clamp(70px,8vw,110px)}
.cinema .wrap{position:relative}
.cinema .crumbs{color:var(--muted)}
.cinema .crumbs a:hover{color:var(--red)}
.cinema .crumbs i{background:var(--line-2)}
.cinema .crumbs span{color:var(--ink)}
.cinema__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 60px;flex-wrap:wrap;margin-bottom:clamp(30px,3.6vw,48px)}
.cinema h1{font-size:clamp(40px,5vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.02;margin-top:10px}
.cinema h1 em{font-style:normal;color:var(--red)}
.cinema__lead{color:var(--muted);font-size:clamp(16px,1.2vw,18px);max-width:44ch}
.cinema .anim{opacity:0;transform:translateY(26px);animation:fadeUp 1.1s var(--ease-out) forwards}
.cinema .anim:nth-child(2){animation-delay:.12s}

.stage{display:grid;grid-template-columns:1fr 380px;gap:clamp(16px,2vw,24px);align-items:start}
.player{position:relative;aspect-ratio:16/9;border-radius:calc(var(--radius) + 4px);overflow:hidden;background:var(--bg-3);box-shadow:0 30px 70px -30px rgba(23,23,26,.4)}
.player__poster{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;color:#fff}
.player__poster img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.player__poster:hover img{transform:scale(1.04)}
.player__poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62))}
.player__play{position:absolute;z-index:2;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -10px rgba(143,18,23,.6);transition:transform .45s var(--ease-out),background .3s}
.player__play::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ring 2.4s var(--ease-out) infinite}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.player__play svg{width:28px;height:28px;margin-left:4px}
.player__poster:hover .player__play{transform:scale(1.08);background:var(--red-2)}
.player__info{position:absolute;z-index:2;left:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);bottom:clamp(16px,2.2vw,28px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;text-align:left}
.player__info small{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.88)}
.player__info small svg{width:14px;height:14px}
.player__info h2{font-size:clamp(22px,2.2vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:4px}
.player__n{font-size:14px;font-weight:700;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.92);color:var(--ink);white-space:nowrap}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video-error{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;text-align:center;background:var(--dark);color:#fff}
.video-error strong{font-size:clamp(18px,2vw,24px)}
.video-error p{max-width:48ch;color:rgba(255,255,255,.75);font-size:14px;overflow-wrap:anywhere}
.video-error .btn{margin-top:10px}
.player__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.player__links{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap}
.ytlink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink-2);transition:color .3s}
.ytlink svg{width:20px;height:20px;color:#e62117}
.ytlink:hover{color:var(--red)}
.player__nav{display:flex;gap:8px}

.plist-v{border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(23,23,26,.04);padding:10px;max-height:560px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.plist-v__h{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plist-v__h span:last-child{color:var(--red)}
.vitem{position:relative;display:grid;grid-template-columns:22px 112px 1fr;gap:12px;align-items:center;width:100%;padding:9px 28px 9px 10px;border-radius:12px;text-align:left;color:var(--ink-2);transition:background .3s,color .3s}
.vitem:hover{background:var(--bg-2);color:var(--ink)}
.vitem.on{background:var(--red-soft);color:var(--ink)}
.vitem__i{font-size:13px;font-weight:700;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.vitem.on .vitem__i{color:var(--red)}
.vitem__th{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.vitem__th img{width:100%;height:100%;object-fit:cover}
.vitem__th svg{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;padding:6px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--red);opacity:0;transition:opacity .3s}
.vitem:hover .vitem__th svg,.vitem.on .vitem__th svg{opacity:1}
.vitem.on .vitem__th svg{background:var(--red);color:#fff}
.vitem b{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vitem span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}
.vitem .eq{display:none;position:absolute;right:12px;top:12px;gap:2px;align-items:flex-end;height:12px}
.vitem.playing .eq{display:flex}
.eq i{width:3px;background:var(--red);border-radius:1px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* ---------- GRID ---------- */
.vtools{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,38px)}
.vgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px) clamp(16px,1.8vw,24px)}
.vcard2{display:block;width:100%;text-align:left}
.vcard2.hidden{display:none}
.vcard2__media{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--bg-3)}
.vcard2__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.vcard2:hover .vcard2__media img{transform:scale(1.06)}
.vcard2__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45));transition:background .4s}
.vcard2:hover .vcard2__media::after{background:linear-gradient(180deg,rgba(143,18,23,.15) 0%,rgba(0,0,0,.5))}
.vcard2 .vplay{transition:transform .45s var(--ease-out),background .3s,color .3s}
.vcard2:hover .vplay{transform:scale(1.1);background:var(--red);color:#fff}
.vcard2__tag{position:absolute;z-index:2;left:14px;top:14px}
.vcard2__info{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-top:16px}
.vcard2__info h3{font-size:clamp(17px,1.3vw,20px);font-weight:700;letter-spacing:-.015em;line-height:1.3;transition:color .3s}
.vcard2:hover h3{color:var(--red)}
.vcard2__loc{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-top:4px;font-weight:500}
.vcard2__loc svg{width:14px;height:14px}
.vcard2__y{font-size:13px;font-weight:700;color:var(--muted);padding:4px 10px;border-radius:8px;background:var(--bg-2);flex:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .stage{grid-template-columns:1fr}
  .plist-v{max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .plist-v__h{grid-column:1/-1}
  .vgrid2{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .cinema{padding-top:104px}
  .player__play{width:72px;height:72px;margin:-36px 0 0 -36px}
  .player__play svg{width:22px;height:22px}
  .player__n{display:none}
  .player__info h2{font-size:19px}
  .plist-v{grid-template-columns:1fr;max-height:420px}
  .vitem{grid-template-columns:18px 96px 1fr}
  .vtools .filters{width:100%}
  .vgrid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cinema .anim{opacity:1;transform:none}
  .player__play::before{animation:none}
}

/* ---------- modal caption (grid videos) ---------- */
.modal--v{flex-direction:column;gap:18px}
.modal__cap{width:min(1100px,100%);display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;color:#fff}
.modal__cap b{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.015em}
.modal__cap span{color:rgba(255,255,255,.65);font-size:14.5px;font-weight:500}
.modal__cap .link{margin-left:auto;color:#fff}
.modal__cap .link:hover{color:#ff9a9e}