:root{
  --gold:#D4AF37;
  --bg:#0b0b0f;
}

/* page wrapper */
.vr-girl-page{ background: var(--bg); color:#fff; }

/* HERO */
.vr-girl-hero{
  position: relative;
  margin-top: calc(var(--header-h, 78px) * -1);
  padding-top: var(--header-h, 78px);
  overflow: hidden;
}

/* background layer */
.vr-girl-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* video behaves like background-image */
.vr-girl-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* SAME overlay as before */
.vr-girl-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.85),
      rgba(0,0,0,.35) 35%,
      rgba(0,0,0,0) 70%
    ),
    linear-gradient(to top,
      rgba(0,0,0,.85),
      rgba(0,0,0,.35) 35%,
      rgba(0,0,0,0) 70%
    );
}

/* content defines hero height */
.vr-girl-hero__content{
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 80px 0 120px; /* 🔑 ВОТ ЗДЕСЬ ФОРМИРУЕТСЯ ВЫСОТА */
  text-align: center;
}































/* =========================
   MID BLOCK: About + Reviews
   (inside .vr-girl-section)
========================= */

.vr-girl-mid{
  margin: 0 0 18px;
}

/* Десктоп: 2 колонки */
.vr-girl-mid__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
  gap: 14px;
  align-items: start;
}

/* ВАЖНО: на узких экранах уходим в 1 колонку раньше,
   чтобы не было “клипа” текста (как у тебя на ~700px) */
@media (max-width: 760px){
  .vr-girl-mid__grid{
    grid-template-columns: 1fr;
  }
}

/* Card base — в стиле твоих pill/золото/стекло */
.vr-midcard{
  border-radius: 18px;
  padding: 16px 16px;

  background:
    radial-gradient(120% 120% at 20% 0%, rgba(212,175,55,.10) 0%, rgba(0,0,0,0) 55%),
    rgba(255,255,255,.03);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);

  /* НЕ даём фиксированных высот — никаких клипов текста */
  overflow: visible;
}

.vr-midcard__top{
  display: flex;
  align-items: center;          /* центрируем стрелки по вертикали */
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vr-midcard__eyebrow{
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin: 0;
}

.vr-midcard__text{
  color: rgba(255,255,255,.90);
  line-height: 1.55;
}

/* Стрелки — в “тарелке”, НЕ оверлеем */
/* ===== Reviews navigation (centered, big arrows) ===== */

/* ===== PERFECT CENTERED ARROWS ===== */

.vr-midcard__nav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
}

/* КРУГ */
.vr-midcard__btn{
  width: 56px;
  height: 56px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(212,175,55,.45),
    rgba(212,175,55,.18) 45%,
    rgba(0,0,0,.55) 75%
  );

  border: 1px solid rgba(212,175,55,.85);
  box-shadow:
    0 10px 30px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.08);

  cursor: pointer;
  padding: 0;
  position: relative;
}

/* СТРЕЛКА — НЕ ТЕКСТ, А ФОРМА */
.vr-midcard__btn::before{
  content: '';
  width: 14px;
  height: 14px;

  border-right: 3px solid var(--gold, #D4AF37);
  border-bottom: 3px solid var(--gold, #D4AF37);

  transform-origin: center;
}

/* ← */
.vr-midcard__btn--prev::before{
  transform: rotate(135deg);
}

/* → */
.vr-midcard__btn--next::before{
  transform: rotate(-45deg);
}

/* hover */
.vr-midcard__btn:hover{
  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(212,175,55,.6),
    rgba(212,175,55,.25) 45%,
    rgba(0,0,0,.45) 75%
  );
}

/* active */
.vr-midcard__btn:active{
  transform: translateY(1px);
}


/* =========================
   Reviews slider: 3 / 2 / 1
   Без клипа текста
========================= */

.vr-rev{
  position: relative;
}

.vr-rev__track{
  display: grid;
  grid-auto-flow: column;
  gap: 12px;

  /* 3 видно на больших */
  grid-auto-columns: calc((100% - 12px*2) / 3);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.vr-rev__track::-webkit-scrollbar{ height: 0; }

/* 2 видно — начиная примерно с планшета */
@media (max-width: 980px){
  .vr-rev__track{
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

/* 1 видно — мобилка */
@media (max-width: 640px){
  .vr-rev__track{
    grid-auto-columns: 100%;
  }
}

.vr-rev__item{
  scroll-snap-align: start;

  border-radius: 16px;
  padding: 14px 14px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 60px rgba(0,0,0,.45);

  color: rgba(255,255,255,.90);

  /* ключевое: НЕ фиксируем высоту, чтобы текст не обрезался */
  height: auto;
  overflow: visible;
}

.vr-rev__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.vr-rev__author{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-rev__stars{
  color: var(--gold, #D4AF37);
  letter-spacing: .12em;
  font-size: 14px;
  white-space: nowrap;
}

.vr-rev__date{
  color: rgba(255,255,255,.60);
  font-size: 12px;
  margin-bottom: 8px;
}

.vr-rev__text{
  color: rgba(255,255,255,.86);
  line-height: 1.55;
}





















.vr-girl-crumbs{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  border-radius:999px;
  font-weight:600;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}
.vr-girl-crumbs a{ color: rgba(255,255,255,.75); text-decoration:none; }
.vr-girl-crumbs a:hover{ color: var(--gold); }

.vr-girl-title{
  margin: 0 0 12px;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing:.02em;
  text-shadow: 0 12px 50px rgba(0,0,0,.65);
}

.vr-girl-specs{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 10px;
}

.vr-girl-spec{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}
.vr-girl-spec span{ color: rgba(255,255,255,.70); font-weight:600; }
.vr-girl-spec b{ color:#fff; font-weight:800; }

.vr-girl-cta{
  margin-top: 20px;
  display:flex;
  justify-content:center;
}

.vr-girl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing:.04em;
  text-decoration:none;
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(212,175,55,.14);
  color:#fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.vr-girl-btn:hover{ background: rgba(212,175,55,.22); }

/* CONTENT SECTION */
.vr-girl-section{
  width: 100%;
  margin: 0;                 /* убрали центрирование */
  padding: 70px 22px 56px;  /* общий отступ как в шапке/футере */
}
@media (max-width: 900px){
  .vr-girl-section{ padding-left: 16px; padding-right: 16px; }
}


/* GALLERY GRID */
.vr-girl-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 100px;
}


@media (max-width: 1100px){
  .vr-girl-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px){
  .vr-girl-grid{ grid-template-columns: repeat(2, 1fr); }
  .vr-girl-hero__content{ padding-top: 96px; }
}
@media (max-width: 460px){
  .vr-girl-grid{ grid-template-columns: 1fr; }
}

.vr-girl-photo{
  display:block;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position:relative;
}
.vr-girl-photo img{
  width:100%;
  height: 260px;
  object-fit: cover;
  display:block;
  transition: transform .35s ease, filter .35s ease;
}
.vr-girl-photo:hover img{
  transform: scale(1.04);
  filter: contrast(1.05);
}


/* ==== HARD FIX for ~700px break ==== */

/* 1) НИЧЕГО не должно вылазить из колонки */
.vr-girl-mid__grid,
.vr-girl-mid__about,
.vr-girl-mid__reviews,
.vr-midcard,
.vr-rev,
.vr-rev__track,
.vr-rev__item{
  min-width: 0;          /* ключ: предотвращает “вылезание” */
}

/* 2) Переходим в 1 колонку РАНЬШЕ, чтобы на ~700px не было 2 колонок вообще */
@media (max-width: 820px){
  .vr-girl-mid__grid{
    grid-template-columns: 1fr !important;
  }
}

/* 3) На 820 и ниже: отзывы показываем 1 за раз (иначе текст клипается) */
@media (max-width: 820px){
  .vr-rev__track{
    grid-auto-columns: 100% !important;
  }
}

/* 4) Чуть ужимаем внутренние отступы карточек на узких */
@media (max-width: 820px){
  .vr-midcard{
    padding: 14px 14px;
    border-radius: 16px;
  }
  .vr-rev__item{
    padding: 14px 14px;
    border-radius: 16px;
  }
}

/* 5) Если где-то есть длинные слова/строки — принудительно переносим */
.vr-midcard__text,
.vr-rev__text{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* по умолчанию: 2 карточки */
.vr-rev__track{
  display: grid;
  grid-auto-flow: column;
  gap: 12px;

  grid-auto-columns: calc((100% - 12px) / 2);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.vr-rev__track::-webkit-scrollbar{ height: 0; }

/* только на очень широких экранах: 3 карточки */
@media (min-width: 1500px){
  .vr-rev__track{
    grid-auto-columns: calc((100% - (12px * 2)) / 3);
  }
}

/* мобилка/узкие: 1 карточка */
@media (max-width: 820px){
  .vr-rev__track{
    grid-auto-columns: 100%;
  }
}

































/* OTHER MASTERS: всегда 8 в ряд на десктопе */
.vr-girl-cards{
  width: 100%;
  display: grid;
  gap: 16px;
  justify-content: start;               /* слева */

  grid-template-columns: repeat(8, minmax(0, 1fr));  /* всегда 8 */
}

/* карточка = плитка (фон всегда шире/равен аватару) */
.vr-girl-card{
  width: 100%;
  text-decoration: none;
  color: #fff;

  display: grid;
  justify-items: center;
  gap: 10px;

  padding: 10px 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* аватар всегда квадрат, никогда не вылезает */
.vr-girl-card__img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  display: block;
}

.vr-girl-card__img img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* подпись */
.vr-girl-card__body{ width: 100%; }
.vr-girl-card__name{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
  color: rgba(255,255,255,.92);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* адаптив: но меньше 2 в ряд не делаем */
@media (max-width: 1400px){
  .vr-girl-cards{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px){
  .vr-girl-cards{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .vr-girl-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}






/* 8-я плитка-заглушка */
.vr-girl-card--more{
  position: relative;
  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(120% 120% at 20% 10%, rgba(212,175,55,.16) 0%, rgba(0,0,0,0) 55%),
    rgba(255,255,255,.03);

  border: 1px solid rgba(212,175,55,.28);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
}

/* чтобы высота была как у карточек (квадрат) */
.vr-girl-card--more::before{
  content:"";
  display:block;
  padding-top: 100%;
}

.vr-girl-card--more__content{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
}

.vr-girl-card--more__title{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.vr-girl-card--more__sub{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.55);
  color: var(--gold, #D4AF37);
  font-weight: 800;
}

.vr-girl-card--more:hover{
  border-color: rgba(212,175,55,.6);
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(212,175,55,.22) 0%, rgba(0,0,0,0) 55%),
    rgba(255,255,255,.04);
}







/* LIGHTBOX */
/* ===== LIGHTBOX (close on photo corner + arrows) ===== */
.vr-lightbox{
  position: fixed;
  inset: 0;
  z-index: 90000; /* шапка выше — ок */
  display: none;
}
.vr-lightbox.is-open{ display:block; }

.vr-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.vr-lightbox__wrap{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
}

.vr-lightbox__frame{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* место под кнопки ВНЕ фото */
  padding: 18px 74px 18px;   /* слева/справа под стрелки */
  max-width: min(1100px, 100%);
  max-height: min(86vh, 100%);
}


.vr-lightbox__img{
  max-width: 100%;
  max-height: 86vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  display:block;
}

/* close outside photo (top-right of frame area) */
.vr-lightbox__close{
  position: absolute;
  top: 0;
  right: 0;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.55);
  background: rgba(0,0,0,.55);
  color: var(--gold, #D4AF37);
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 0;
  line-height: 1;
  z-index: 3;
}
.vr-lightbox__close span{
  display:block;
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}
.vr-lightbox__close:hover{
  background: rgba(212,175,55,.14);
}

/* arrows outside photo (left/right of frame area) */
.vr-lightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 54px;
  height: 54px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 0;
  line-height: 1;
  z-index: 2;
}
.vr-lightbox__nav span{
  display:block;
  font-size: 34px;
  line-height: 1;
  transform: translateY(-1px);
}

.vr-lightbox__prev{ left: 10px; }
.vr-lightbox__next{ right: 10px; }

.vr-lightbox__nav:hover{
  border-color: rgba(212,175,55,.45);
  color: var(--gold, #D4AF37);
}

/* mobile tweaks */
@media (max-width: 760px){
  .vr-lightbox__frame{
    padding: 14px 58px 14px; /* меньше место под кнопки */
  }
  .vr-lightbox__nav{
    width: 46px;
    height: 46px;
  }
  .vr-lightbox__nav span{ font-size: 30px; }
  .vr-lightbox__close{
    width: 42px;
    height: 42px;
  }
}

/* smooth image transition */
.vr-lightbox__img{
  opacity: 1;
  transition: opacity .18s ease;
  will-change: opacity;
}
.vr-lightbox__img.is-fading{
  opacity: 0;
}
/* =========================
   VIDEO TILE + LIGHTBOX VIDEO
   ========================= */

/* video thumbnail overlay (square like photos) */
.vr-girl-photo--video{ position:relative; }
.vr-video-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  line-height:1;
  color:#fff;
  background:rgba(0,0,0,.35);
  pointer-events:none;
}
.vr-video-play::before{
  content:'';
  width:64px;
  height:64px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  position:absolute;
}
.vr-video-play{
  z-index:2;
}
.vr-video-play{ text-shadow:0 10px 30px rgba(0,0,0,.55); }

/* lightbox supports image + html5 video + iframe */
.vr-lightbox__video,
.vr-lightbox__iframe{
  display:block; /* <-- ВОТ ЭТО ЛЕЧИТ “ПУСТО” */
  max-width:min(1100px, 92vw);
  max-height:86vh;
  border-radius:16px;
  border:1px solid rgba(255,255,255,12);
  background:#000;
}


.vr-lightbox__video{
  max-width:100%;
  max-height:86vh;
  border-radius:18px;
  background:#000;
}


.vr-lightbox__iframe{
  width:min(1100px, 92vw);
  height:min(70vh, 620px);
}


/* video tile */
.vr-girl-photo--video{ position:relative; }
.vr-video-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; color:#fff;
  background:rgba(0,0,0,.35);
  pointer-events:none;
}

/* lightbox stage */
.vr-lightbox__stage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height: 60vh;
}
.vr-lightbox__img{
  max-width:90vw;
  max-height:90vh;
  display:block;
}

.vr-girl-photo--video img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}



/* =========================
   SYMMETRY: About = Reviews height
   (Girl page mid block)
========================= */

/* 1) Растягиваем колонки по высоте */
.vr-girl-mid__grid{
  align-items: stretch !important;
}

/* 2) Обе карточки одинаковой высоты */
.vr-girl-mid__about .vr-midcard,
.vr-girl-mid__reviews .vr-midcard{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 3) Контент отзывов занимает оставшееся место,
      чтобы карточка не “сжималась” */
.vr-girl-mid__reviews .vr-rev{
  flex: 1;
  min-height: 0; /* важно для внутренних скроллов/гридов */
}

/* 4) Трек отзывов не ломает высоту карточки */
.vr-girl-mid__reviews .vr-rev__track{
  align-content: start;
}