/* ============================================================
   СТРАНИЦА РЕЗЕРВАЦИИ (rezerwacja.html) — Figma 909:1657 (hero) +
   909:1710 (услуги). Переиспользуем готовые компоненты сайта:
   шапку (.hero__header/.nav/.contacts), карточки услуг (.svc),
   контакты (.ct), футер (.ft). Здесь — только специфика страницы:
   компактный hero c новым фоном, полоски на фоне услуг, скругление
   верхних углов у контактов. Десктоп 1:1 к макету (1440×426 hero).
   ============================================================ */

/* ── BLOCK 1: компактный hero «Umów wizytę» (909:1657, h=426) ──── */
.rezhero {
  position: relative;
  width: 100%;
  height: 426px;
  background: var(--dark-1100, #000);
  overflow: hidden;
  isolation: isolate;
}
/* фон-фото гаража: инсет 24 по бокам + скругление низа 24 (как в макете) */
.rezhero__bg {
  position: absolute; left: 24px; right: 24px; top: 0; bottom: 0;
  border-radius: 0 0 24px 24px; overflow: hidden; z-index: 0;
}
.rezhero__bg picture { display: block; }
.rezhero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block;
}
/* лёгкое затемнение для читаемости заголовка (фон silver-bg уже тёмный, не перетемняем) */
.rezhero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(1,1,1,.42) 0%, rgba(1,1,1,.12) 38%, rgba(1,1,1,.5) 100%);
}

.rezhero__inner {
  position: relative; z-index: 2;
  max-width: 1440px; height: 100%; margin: 0 auto;
}

/* мега-выпадашка «Usługi» — закреплённая под шапкой (как на страницах услуг),
   видна с любого места при открытии (.is-open задаёт hero.js по клику «Usługi») */
.mega { position: fixed; top: 80px; left: 24px; right: 24px; width: auto; max-width: 1392px; padding: 0; z-index: 500; }

/* шапка переиспользуется (.hero__header) — снимаем абсолют из hero.css, ставим в поток */
.rezhero .hero__header {
  position: relative; left: auto; top: auto;
  width: 100%; max-width: 1440px; margin: 0 auto;
}

/* контент: заголовок + подзаголовок (Figma: top 176, w 697, по центру) */
.rezhero__content {
  position: absolute; left: 50%; top: 176px; transform: translateX(-50%);
  width: 697px; max-width: calc(100% - 48px);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  text-align: center; z-index: 3;
}
.rezhero__title {
  margin: 0; width: 100%;
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 92px; line-height: 104px; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #787674 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; letter-spacing: normal; }
.rezhero__sub {
  margin: 0; width: 100%;
  font-family: var(--ff-body); font-size: 20px; line-height: 28px;
  letter-spacing: var(--ls-body); color: var(--light-1000, #fff);
}
.rezhero__sub b { font-weight: 700; letter-spacing: normal; }

/* плавающая звонилка — только мобайл (Figma 909:2477) */
.rezhero__call { display: none; }

/* ── BLOCK 2: услуги — те же карточки, но фон чёрный + вертикальные полоски
   (Figma 909:1710). Убираем funnel-фон bg-03 и наезд −32. ─────────────── */
.rez-svc {
  margin-top: 0;
  border-radius: 0;
  background: #0A0A0A;
  padding-top: 56px;   /* заголовок убран → подтягиваем карточки к верху */
}
/* на странице резервации показываем ВСЕ услуги сразу (без кнопки «Zobacz więcej») */
.rez-svc .svc-item--more { display: flex; }
/* вертикальные «полоски»-колонны, затухающие книзу (мотив сайта: r8/faq lines) */
.rez-svc__lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: stretch; padding: 0 88px; gap: 152px; opacity: .05;
}
.rez-svc__lines span {
  flex: 1;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 100%) no-repeat left top;
  background-size: 1px 100%;
}

/* ── BLOCK 3: контакты — те же, верхние углы скруглены на 32 ──────────── */
.rez-ct {
  border-radius: 32px 32px 0 0;
  overflow: hidden;
  position: relative; z-index: 3;
  margin-top: -32px;   /* наезжаем на блок услуг на 32px → углы открывают его фон, скругление видно */
}

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rezhero { height: auto; min-height: 360px; }
  .rezhero__title { font-size: 64px; line-height: 68px; }
  .rezhero__content { position: static; transform: none; width: 100%; max-width: none;
    padding: 8px 40px 56px; }
}
@media (max-width: 768px) {
  /* мобайл 1:1 с Figma 909:2298: фон silver-bg-2 в скруглённой карте (24), header
     бургер|лого|PL, заголовок Druk 64/64, подзаг 20/28, плавающая звонилка снизу-справа */
  .rezhero { height: auto; }
  /* фон silver-bg-2 на всю ширину — без боковых отступов и скругления (убрали чёрные поля) */
  .rezhero__bg { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; }
  .rezhero__bg img { object-position: center bottom; }   /* серебряные streaks снизу */
  .rezhero__inner { display: flex; flex-direction: column; }
  .rezhero__content { position: static; transform: none; width: 100%; max-width: none;
    gap: 16px; padding: 8px 16px 80px; }   /* место снизу под плавающую звонилку (не перекрывает текст) */
  .rezhero__title { font-size: 64px; line-height: 64px; }
  .rezhero__sub { font-size: 20px; line-height: 28px; letter-spacing: var(--ls-body); }
  .rez-svc__lines { padding: 0 24px; gap: 64px; }

  /* плавающая белая звонилка 64×64 (Figma 909:2477) */
  .rezhero__call {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: 16px; bottom: 16px; z-index: 4;
    width: 64px; height: 64px; border-radius: 100px;
    background: var(--light-1000); color: var(--dark-1000);
    border: 4px solid var(--light-40);
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
  }
  .rezhero__call .icon { width: 24px; height: 24px; }
}