/* =========================================================
   Empire Poker Club — «VIP-комната»
   Макет Figma: 3mc4Mi8U4nOJfeZbcv9fNf, узел 90:14535, 1920 × 5893.
   Все размеры точны при ширине окна 1920px.

   Токены, кнопки (.btn), .container, .round-btn, лента .rail и форма
   заявки .lead-form живут в styles.css — здесь только то, чего там нет.
   ========================================================= */

/* ---------- Типографика макета ---------- */
.vip-d-120,
.vip-d-80{
  display:block;
  font-family:var(--font-display);font-weight:400;
  line-height:.9;overflow-wrap:break-word;
}
.vip-d-120{font-size:120px;letter-spacing:-2.4px}
.vip-d-80 {font-size:80px; letter-spacing:-1.6px}

/* Заголовки макета залиты вертикальным градиентом. */
/* Заливка background-clip:text покрывает только рамку элемента, а при
   line-height:.9 хвосты «р», «у», «д», запятая и точки «ё» выходят за неё и
   оставались без цвета. Расширяем рамку внутренним отступом и тут же
   компенсируем его отрицательным — место в вёрстке не меняется. */
.vip-grad{
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-block:.14em;margin-block:-.14em;
}
.vip-grad--hero{background-image:linear-gradient(180deg,#fff 0%,#717171 100%)}
.vip-grad--1{background-image:linear-gradient(180deg,#fff 0%,#cfcfcf 100%)}
.vip-grad--2{background-image:linear-gradient(180deg,#cfcfcf 0%,#9e9e9e 100%)}

/* Абзацы: Manrope Medium 16/1.3 и 18/1.3, приглушённые. */
.vip-lead,
.vip-text{color:rgba(255,255,255,.65);opacity:.8;line-height:1.3}
.vip-lead{font-size:16px}
.vip-text{font-size:18px}

.vip-page main a:focus-visible,
.vip-page main button:focus-visible,
.vip-page main input:focus-visible,
.vip-page main [tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px}
.vip-page main .btn:focus-visible{border-radius:150px}

/* Фон макета — чистый чёрный («Bg with noise»), а не общий #0c0c0d сайта:
   иначе чёрные края фото первого экрана читаются как рамка. */
body.vip-page{background:#000}
/* Подсветка формы заходит под футер; ниже футера страница не удлиняется. */
.vip-clip{position:relative;overflow:hidden;overflow:clip}

/* Шапка лежит поверх первого экрана, как на главной. */
body.vip-page.page-inner > .header{position:absolute;padding-bottom:0}

/* Между блоками страницы в макете 240px, перед футером тоже. */
.vip-page .footer{padding-top:var(--section-gap)}

.vip-photo{margin:0;overflow:hidden;border-radius:36px;background:#181819}
.vip-photo img{width:100%;height:100%;object-fit:cover}

/* ═══════════════ ПЕРВЫЙ ЭКРАН ═══════════════ */
.vip-hero{position:relative;height:1080px;overflow:hidden}
/* Фото прижато к низу экрана; края исходника уже растворены в чёрном. */
.vip-hero__photo{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:1440px;max-width:none;height:836px;object-fit:cover;
}
.vip-hero__content{
  position:absolute;top:163px;left:50%;transform:translateX(-50%);
  width:594px;max-width:calc(100% - 48px);
  display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;
}
.vip-hero__text{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%}
.vip-hero__text h1{white-space:nowrap}
.vip-hero__lead{width:476px;max-width:100%}

/* ═══════════════ ЗАКРЫТАЯ ИГРА ═══════════════ */
/*
 * Сетка 6 колонок по 233px. Высоты рядов сняты с координат макета, поэтому
 * фото и подписи встают ровно на свои места: заголовок 72, подзаголовок 136,
 * до верха второго фото 288, перехлёст фото 152, до списка 221, список 147,
 * зазор 152, последнее фото 520. Итог — 1688px, как в Figma.
 */
.vip-private{
  margin-top:var(--section-gap);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:72px 136px 288px 152px 221px 147px 152px 520px;
}
/* Две строки заголовка — один h2: «Закрытая игра» и смещённое «своим составом». */
.vip-private__title{display:contents}
.vip-private__title > :first-child{grid-column:1 / span 4;grid-row:1}
.vip-private__subtitle{grid-column:2 / span 4;grid-row:2;align-self:start;white-space:nowrap}
.vip-private__text{grid-column:2 / span 2;grid-row:3;width:348px;max-width:100%}
.vip-private__photo--1{grid-column:4 / span 3;grid-row:3 / span 2}
.vip-private__photo--2{grid-column:1 / span 2;grid-row:4 / span 3}
.vip-private__photo--3{grid-column:3 / span 2;grid-row:8}
.vip-private__formats{
  grid-column:4 / span 2;grid-row:6;align-self:end;
  display:flex;flex-direction:column;gap:8px;
  color:#878788;font-size:18px;line-height:1.3;
}

/* ═══════════════ ОРГАНИЗАЦИЯ, ДИЛЕР И РЕСТОРАН ═══════════════ */
.vip-org{margin-top:var(--section-gap)}
/* flex: отрицательные отступы строк градиентного заголовка не схлопываются */
.vip-org__title{display:flex;flex-direction:column}
.vip-org__viewport{margin-top:72px}
.vip-service{width:445px;display:flex;flex-direction:column;gap:32px}
.vip-service__photo{margin:0;height:425px;border-radius:36px;overflow:hidden;background:rgba(255,255,255,.04)}
.vip-service__photo img{width:100%;height:100%;object-fit:cover}
/* В макете у первой карточки видна верхняя часть кадра, у остальных — центр. */
.vip-service__photo--top img{object-position:50% 0}
.vip-service__photo--framed{border:1px solid rgba(255,255,255,.04)}
.vip-service__text{width:348px;max-width:100%}

/* ═══════════════ ЗАЯВКА ═══════════════ */
.vip-request{position:relative;margin-top:var(--section-gap);padding-top:120px}
/*
 * Овал подсветки: эллипс 983×1719 из макета, повёрнутый на −30°.
 * Центр — на 1236px ниже верха блока, по оси формы; он уходит под футер,
 * как в Figma, а лишнее срезает overflow-x:hidden у body.
 */
.vip-request__glow{
  position:absolute;z-index:-1;left:50%;top:1236px;
  width:983px;max-width:none;height:1719px;
  transform:translate(-50%,-50%) rotate(-30deg);pointer-events:none;
}
.vip-request__block{
  width:650px;max-width:calc(100% - 48px);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:96px;
}
.vip-request__head{
  width:566px;max-width:100%;
  display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center;
}
/* Заголовок шире текста и намеренно выходит за его края. */
.vip-request__title{white-space:nowrap}

/* =========================================================
   Адаптив — макет зафиксирован на 1920px, ниже плавно сжимается
   ========================================================= */
@media (max-width:1520px){
  .vip-d-120{font-size:100px;letter-spacing:-2px}
  .vip-d-80{font-size:68px;letter-spacing:-1.36px}
  .vip-hero{height:960px}
  .vip-hero__photo{width:1240px;height:720px}
  .vip-hero__content{top:150px}
  /* Колонки сжимаются вместе с контейнером, высоты рядов — пропорционально. */
  .vip-private{grid-template-rows:62px 120px 250px 132px 190px 147px 132px 450px}
  .vip-service{width:400px}
  .vip-service__photo{height:382px}
}

@media (max-width:1180px){
  .vip-d-120{font-size:72px;letter-spacing:-1.44px}
  .vip-d-80{font-size:56px;letter-spacing:-1.12px}
  .vip-hero{height:auto;padding:150px 0 0;display:flex;flex-direction:column;align-items:center}
  /* текст и кнопка сверху, фото под ними — как на широком экране */
  .vip-hero__content{position:relative;top:auto;left:auto;transform:none;order:-1}
  .vip-hero__photo{position:relative;left:auto;bottom:auto;transform:none;width:100%;height:auto;aspect-ratio:1440/836;margin-top:48px}
  /* Две колонки: текст и список слева, фото справа и под ними. */
  .vip-private{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:32px}
  .vip-private__title{display:block;grid-column:1 / -1}
  .vip-private__subtitle{white-space:normal;padding-left:16%}
  .vip-private__text{grid-column:1;grid-row:2;width:auto}
  .vip-private__formats{grid-column:1;grid-row:3;align-self:start}
  .vip-private__photo--1{grid-column:2;grid-row:2 / span 2;aspect-ratio:700/440;align-self:start}
  .vip-private__photo--2{grid-column:1;grid-row:4;aspect-ratio:467/520}
  .vip-private__photo--3{grid-column:2;grid-row:4;aspect-ratio:467/520}
  .vip-org__viewport{margin-top:48px}
  .vip-service{width:360px;gap:24px}
  .vip-service__photo{height:344px;border-radius:28px}
  .vip-request{padding-top:72px}
  .vip-request__block{gap:64px}
  .vip-request__head{gap:32px}
  .vip-request__glow{top:900px;width:720px;height:1259px}
}

@media (max-width:760px){
  .vip-d-120{font-size:52px;letter-spacing:-1.04px}
  .vip-d-80{font-size:40px;letter-spacing:-.8px}
  .vip-text{font-size:16px}
  .vip-hero{padding-top:120px}
  .vip-hero__text{gap:24px}
  .vip-hero__text h1{white-space:normal}
  .vip-hero__content .btn{height:60px;font-size:18px;padding-inline:28px}
  .vip-hero__photo{width:140%;max-width:none;margin-top:32px}
  .vip-private{grid-template-columns:minmax(0,1fr);gap:24px}
  .vip-private__subtitle{padding-left:0}
  .vip-private__text,.vip-private__formats,.vip-private__photo{grid-column:1;grid-row:auto}
  .vip-private__formats{font-size:16px}
  .vip-photo{border-radius:24px}
  .vip-service{width:min(300px,78vw);gap:20px}
  .vip-service__photo{height:auto;aspect-ratio:445/425;border-radius:24px}
  .vip-request__block{max-width:calc(100% - 32px);gap:48px}
  .vip-request__head{gap:24px}
  .vip-request__title{white-space:normal}
  .vip-request__glow{top:760px;width:520px;height:909px}
}