/* =========================================================
   ДАРСИ — видеоотзывы. Тёмная тема, вертикальные превью,
   по клику видео открывается в попапе.
   ========================================================= */

.rev{
  --r-ink:#0B0B0C;
  --r-card:#141416;
  --r-line:rgba(255,255,255,.12);
  --r-muted:rgba(255,255,255,.66);
  --r-rose:#E3A9BA;

  position:relative;
  padding:clamp(56px,7vw,110px) var(--pad-x);
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(227,169,186,.10) 0%, rgba(227,169,186,0) 60%),
    var(--r-ink);
  color:#fff;
}
.rev__inner{width:100%; max-width:var(--maxw); margin:0 auto}

/* ---------- шапка ---------- */
.rev__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:clamp(28px,3.4vw,48px);
}
.rev__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1; letter-spacing:-.015em;
  margin:0; max-width:none; white-space:nowrap;
}

/* плашка рейтинга */
.rev__rating{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:14px 20px;
  background:rgba(255,255,255,.07); border:1px solid var(--r-line);
}
.rev__rating-ya{width:34px; height:34px; flex:0 0 auto}
.rev__rating-ya svg{width:100%; height:100%; display:block}
.rev__rating-num{
  font-family:var(--f-head); font-size:30px; line-height:1; letter-spacing:-.01em;
}
.rev__rating-txt{display:flex; flex-direction:column; gap:3px}
.rev__rating-stars{font-size:13px; letter-spacing:.14em; color:#FFC53D; line-height:1}
.rev__rating-note{font-size:12.5px; line-height:1.3; color:var(--r-muted); letter-spacing:-.02em}

/* ---------- сетка ---------- */
.rev__grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px,1.4vw,22px);
}

/* ---------- карточка ---------- */
.rev-card{
  position:relative; display:block; overflow:hidden;
  background:var(--r-card); border:0; padding:0; cursor:pointer;
  aspect-ratio:9/16;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.rev-card:hover{transform:translateY(-4px)}

.rev-card img{
  max-width:none;
  position:absolute; inset:-2px;
  width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.3,1);
}
.rev-card:hover img{transform:scale(1.05)}

.rev-card__scrim{
  position:absolute; inset:-2px; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,9,.30) 0%, rgba(8,8,9,0) 34%, rgba(8,8,9,.55) 74%, rgba(8,8,9,.9) 100%);
}

.rev-card__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(56px,4.4vw,68px); height:clamp(56px,4.4vw,68px);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.rev-card:hover .rev-card__play{background:rgba(255,255,255,.3); transform:translate(-50%,-50%) scale(1.08)}
.rev-card__play svg{width:20px; height:20px; fill:#fff; margin-left:3px; position:relative; z-index:1}
.rev-card__play::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  animation:revRing 3s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes revRing{
  0%{transform:scale(1); opacity:.6}
  70%,100%{transform:scale(1.45); opacity:0}
}

.rev-card__name{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(14px,1.2vw,20px);
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(15px,1.15vw,19px); line-height:1.15; letter-spacing:-.01em;
  text-align:left;
}

/* =========================================================
   ПОПАП С ВИДЕО
   ========================================================= */
.vpop{
  position:fixed; inset:0; z-index:95;
  display:grid; place-items:center;
  padding:clamp(14px,3vh,40px) clamp(14px,3vw,40px);
  background:rgba(8,6,8,.8);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s ease;
}
.vpop[hidden]{display:none}
.vpop.is-open{opacity:1}

.vpop__win{
  position:relative;
  height:min(86svh, 900px); aspect-ratio:9/16; max-width:100%;
  background:#000; overflow:hidden;
  transform:translateY(16px) scale(.98);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.vpop.is-open .vpop__win{transform:none}
.vpop__video{width:100%; height:100%; object-fit:cover; display:block}

.vpop__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(8,8,9,0), rgba(8,8,9,.85));
  font-family:var(--f-head); font-size:18px; letter-spacing:-.01em; color:#fff;
  pointer-events:none;
}
.vpop__note{
  position:absolute; inset:0; z-index:3;
  display:none; place-items:center; padding:24px; text-align:center;
  background:rgba(8,8,9,.72); color:#fff; font-size:15px; letter-spacing:-.03em;
}
.vpop.is-error .vpop__note{display:grid}

.vpop__close{
  position:absolute; top:-46px; right:0; z-index:4;
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); color:#fff;
  transition:background .25s ease, transform .25s ease;
}
.vpop__close:hover{background:rgba(255,255,255,.28); transform:rotate(90deg)}
.vpop__close svg{width:14px; height:14px; fill:currentColor}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width:1000px){
  .rev__head{flex-direction:column; align-items:flex-start; gap:18px}
  .rev__title{white-space:normal}
  .rev__grid{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:720px){
  .rev{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .rev__rating{width:100%}
  .rev__grid{gap:10px}
  .vpop__win{height:auto; width:100%; max-height:80svh}
  .vpop__close{top:-42px}
}

@media (prefers-reduced-motion:reduce){
  .rev-card__play::before{animation:none; opacity:0}
}

@media (max-width:900px){
  .rev-card__play{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.26)}
}