/* Отзывы-скриншоты (лента на главной, сетка на /otzyvy/, увеличенный просмотр). Работает под body.v4; разметку даёт reviews-gen/emit.py. */

/* ---------- лента ---------- */
body.v4 .rvw{position:relative;max-width:1240px;margin:8px auto 0;}      /* не «.rv»: так на сайте называется класс появления блоков при прокрутке */
body.v4 .rv-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
body.v4 .rv-count{font-size:16px;font-weight:600;color:var(--s-muted);font-variant-numeric:tabular-nums;}
body.v4 .rv-nav{display:flex;gap:10px;}
body.v4 .rv-nav button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--s-line);background:var(--s-surface);color:var(--s-fg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),background .2s,opacity .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 20px -12px rgba(15,23,42,.35);
}
body.v4 .rv-nav button svg{width:22px;height:22px;}
body.v4 .rv-nav button:hover:not(:disabled){transform:scale(1.06);}
body.v4 .rv-nav button:disabled{opacity:.35;cursor:default;box-shadow:none;}
body.v4 .rv-nav button:focus-visible,body.v4 .rv-open:focus-visible,body.v4 .rv-track:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(215,25,33,.35);}
body.v4 .rv-track{
  position:relative;display:flex;align-items:stretch;gap:24px;margin:0 -8px;padding:8px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:8px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:28px;
}
body.v4 .rv-track::-webkit-scrollbar{display:none;}
/* карточка крупная: ≈ 700 px (текст ≈ 21 px) и справа выглядывает следующая; на планшете/телефоне ширина ниже */
body.v4 .rv-card{flex:0 0 min(700px,64%);scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;}
body.v4 .rv-track .rv-open{flex:1 1 auto;}        /* карточки в ленте одной высоты: короткие отзывы остаются белыми «карточками» с текстом сверху */
body.v4 .rv-grid .rv-card{display:inline-block;}
body.v4 .rv-bar{position:relative;height:4px;margin:14px 0 0;border-radius:2px;background:rgba(15,23,42,.1);overflow:hidden;}
body.v4 .rv-thumb{position:absolute;top:0;bottom:0;left:0;width:20%;border-radius:2px;background:var(--s-fg);transition:left .15s linear,width .15s linear;}

/* ---------- карточка ---------- */
body.v4 .rv-open{
  position:relative;display:block;width:100%;padding:0;margin:0;border:0;border-radius:22px;overflow:hidden;background:#fff;cursor:zoom-in;text-align:left;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 34px -18px rgba(15,23,42,.28);transition:transform .3s var(--ease),box-shadow .3s;
}
body.v4 .rv-open:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 22px 44px -18px rgba(15,23,42,.38);}
body.v4 .rv-open img{display:block;width:100%;height:auto;}
body.v4 .rv-card.is-long .rv-open{aspect-ratio:1080 / 620;flex:0 0 auto;}
body.v4 .rv-tap{display:none;}
body.v4 .rv-card.is-long .rv-open img{position:absolute;left:0;top:0;}
body.v4 .rv-card.is-long .rv-open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 72%);pointer-events:none;}
body.v4 .rv-more{
  position:absolute;z-index:1;left:50%;bottom:16px;transform:translateX(-50%);padding:11px 22px;border-radius:999px;background:var(--s-fg);color:var(--s-bg);
  font-size:15.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
}
body.v4 .rv-src{margin:12px 6px 0;font-size:14.5px;line-height:1.4;color:var(--s-muted);}
body.v4 .rv-src a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
body.v4 .rv-src a:hover{color:var(--s-fg);}

/* ---------- ссылки на площадки и «смотреть все» ---------- */
body.v4 .rv-links{margin-top:34px;}
body.v4 .rv-all{margin:26px 0 0;text-align:center;font-size:17px;font-weight:600;}
body.v4 .rv-all a{color:var(--s-fg);text-decoration:underline;text-underline-offset:4px;}

/* ---------- сетка на /otzyvy/ ---------- */
body.v4 .rv-grid{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:24px;}
body.v4 .rv-grid .rv-card{display:inline-block;width:100%;margin:0 0 24px;break-inside:avoid;}
body.v4 .rv-grid .rv-card.is-long .rv-open{aspect-ratio:auto;}
body.v4 .rv-grid .rv-card.is-long .rv-open img{position:static;}
body.v4 .rv-grid .rv-card.is-long .rv-open::after,body.v4 .rv-grid .rv-more{display:none;}
body.v4 .rv-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;}
body.v4 .rv-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:rgba(127,127,127,.12);color:var(--s-fg);font-size:16px;font-weight:500;}
body.v4 .rv-tab.on{background:var(--s-fg);color:var(--s-bg);}
body.v4 .rv-tab.soon{opacity:.55;}

/* ---------- увеличенный просмотр ---------- */
html.rv-lock{overflow:hidden;}
.rv-lb{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;background:rgba(8,10,14,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.rv-lb[hidden]{display:none;}
.rv-lb-fig{margin:0;max-width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;gap:12px;}
.rv-lb-card{overflow:auto;max-height:calc(100vh - 110px);border-radius:22px;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;}
.rv-lb-card img{display:block;width:100%;height:auto;}
.rv-lb-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;color:rgba(255,255,255,.82);font:500 15px/1.4 "Onest","Inter",Arial,sans-serif;}
.rv-lb-cap a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.rv-lb-x,.rv-lb-nav{position:absolute;border:1px solid rgba(255,255,255,.22);background:rgba(20,23,30,.7);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.rv-lb-x{top:16px;right:16px;width:48px;height:48px;font-size:30px;line-height:1;}
.rv-lb-nav{top:50%;width:52px;height:52px;margin-top:-26px;}
.rv-lb-nav svg{width:24px;height:24px;}
.rv-lb-prev{left:max(16px,calc(50% - 530px));}
.rv-lb-next{right:max(16px,calc(50% - 530px));}
.rv-lb-zoom{display:none;}
.rv-lb-x:hover,.rv-lb-nav:hover{background:rgba(60,64,74,.9);}
.rv-lb-x:focus-visible,.rv-lb-nav:focus-visible,.rv-lb-cap a:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(215,25,33,.5);}

/* ---------- ширины ---------- */
@media (max-width:999px){
  body.v4 .rv-card{flex-basis:min(100%,680px);}
  body.v4 .rv-grid{columns:1;}
  .rv-lb-prev{left:8px;} .rv-lb-next{right:8px;}
}
@media (max-width:699px){
  body.v4 .rv-track{gap:14px;margin:0 -16px;padding:8px 16px;scroll-padding-left:16px;border-radius:0;}
  body.v4 .rv-card{flex-basis:100%;}
  /* на телефоне карточка занимает всю ширину, а читать удобнее в просмотре (он сразу открывается «крупнее») — подсказка на каждой карточке */
  body.v4 .rv-tap{display:block;position:absolute;z-index:1;right:12px;bottom:12px;padding:9px 18px;border-radius:999px;background:var(--s-fg);color:var(--s-bg);font-size:14.5px;font-weight:600;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
  body.v4 .rv-nav button{width:44px;height:44px;}
  body.v4 .rv-more{font-size:15px;padding:10px 18px;}
  .rv-lb-fig{max-width:100vw;max-height:100vh;padding:0 8px;}
  .rv-lb-card{max-height:calc(100vh - 150px);}
  .rv-lb-nav{top:auto;bottom:14px;margin-top:0;width:48px;height:48px;}
  .rv-lb-x{top:10px;right:10px;}
  /* на телефоне текст скриншота мелкий: «Крупнее» (или касание) растягивает карточку до 175 % ширины с прокруткой */
  .rv-lb-zoom{display:block;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:12px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(20,23,30,.85);color:#fff;font:600 16px/1 "Onest","Inter",Arial,sans-serif;cursor:pointer;}
  .rv-lb-zoom:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(215,25,33,.5);}
  .rv-lb-card.is-zoom img{width:175%;max-width:none;}
  .rv-lb-card{cursor:zoom-in;} .rv-lb-card.is-zoom{cursor:zoom-out;}
}
@media (prefers-reduced-motion:reduce){body.v4 .rv-open,body.v4 .rv-nav button,body.v4 .rv-thumb{transition:none;}}

/* ---------- два блока отзывов (Авито, Яндекс.Карты) ---------- */
body.v4 .rv-stat{margin:0 0 22px;text-align:center;font-size:18px;color:var(--s-muted);}
body.v4 .rv-stat b{color:var(--s-fg);font-size:28px;font-weight:700;margin-right:2px;}
body.v4 .cat-body .rv-stat{text-align:left;}
body.v4 .rv-links.rv-links-one{max-width:520px;margin-left:auto;margin-right:auto;grid-template-columns:1fr;}
/* скриншоты Авито сняты в широком окне: текст мельче, чем на Яндексе, поэтому карточка шире (на компьютере 1 карточка + край следующей) */
body.v4 .rv-card[data-platform="avito"]{flex-basis:min(1000px,88%);}
body.v4 .rv-grid .rv-card[data-platform="avito"]{width:100%;}
body.v4 .cat-body .rv-grid:has(.rv-card[data-platform="avito"]){columns:1;}
@media (max-width:999px){body.v4 .rv-card[data-platform="avito"]{flex-basis:92%;}}
/* в ленте Авито карточки разной высоты прижаты кверху (без белых полей вокруг коротких отзывов) */
body.v4 .rvw:has(.rv-card[data-platform="avito"]) .rv-track{align-items:flex-start;}
body.v4 .rvw:has(.rv-card[data-platform="avito"]) .rv-track .rv-open{flex:0 0 auto;}
body.v4 .rvw:has(.rv-card[data-platform="avito"]) .rv-track .rv-card.is-long .rv-open{aspect-ratio:1080 / 430;}      /* длинный отзыв Авито в ленте свёрнут ниже: лента не растягивается из-за одного отзыва */

/* новые карточки Авито (мобильные скриншоты, крупный текст): узкие, как у Яндекса */
body.v4 .rv-card[data-platform="avito"][data-narrow]{flex-basis:min(700px,64%);}
@media (max-width:999px){body.v4 .rv-card[data-platform="avito"][data-narrow]{flex-basis:92%;}}
body.v4 .rvw:has(.rv-card[data-platform="avito"]) .rv-track .rv-card[data-narrow].is-long .rv-open{aspect-ratio:1080 / 620;}