/* ============================================================
   BLOCK 11 «CZAS ZADBAĆ O SWOJE AUTO» (Figma node 922:2941) — CTA.
   Фото-сцена мастерской + V-паттерн щитов + заголовок 116px +
   кнопка + авто по нижним углам + круг «Wszystkie usługi».
   Десктоп pixel-perfect к фрейму 1440×800 (карта 1392, left 24).
   ============================================================ */
.cta {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 100%),
    var(--dark-1100);
}
.cta__inner {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1392px;
  height: 776px;
  /* центрируем контент флексом (фото/паттерн — absolute inset:0, вне потока),
     чтобы parallax-transform на .cta__content НЕ конфликтовал с центрированием */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* фото-карта */
.cta__card {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
}
.cta__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: bottom;
  display: block;
}
.cta__photo-shade { position: absolute; inset: 0; background: rgba(1,1,1,.18); }
.cta__glow {
  position: absolute;
  left: 50%; bottom: -120px;
  transform: translateX(-50%);
  width: 1600px; height: 450px;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* паттерн щитов + V */
.cta__pattern { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cta__v {
  position: absolute; left: 117px; top: -800px;
  width: 1156px; height: 1519px; opacity: .5;
}
.cta__top-grad {
  position: absolute; left: 0; top: 0; width: 100%; height: 253px;
  background: linear-gradient(180deg, #010101 0%, rgba(1,1,1,0) 100%);
}
.cta__shield { position: absolute; width: 144.65px; opacity: .5; }

/* центральный контент — в потоке, центрируется флексом родителя .cta__inner.
   БЕЗ transform-центрирования → parallax (.prx translateY) не ломает позицию */
.cta__content {
  position: relative;
  width: 701px; max-width: calc(100% - 96px);
  display: flex; flex-direction: column; align-items: center; gap: 56px;
  z-index: 3;
}
.cta__text { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta__title {
  margin: 0; width: 100%;
  font-family: var(--ff-display); font-weight: 700; font-style: italic;
  font-size: 116px; line-height: 116px; text-transform: uppercase; text-align: center;
  background: linear-gradient(180deg, #ffffff 38.834%, #787674 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: normal; }
.cta__sub {
  margin: 0; width: 100%;
  font-family: var(--ff-body); font-size: 32px; line-height: 40px; text-align: center; color: var(--light-1000);
}
.cta__sub b { font-weight: 700; letter-spacing: normal; }
.cta__line {
  position: absolute; left: 50%; top: 215px;
  width: 522.7px; height: 1px;
  transform: translateX(-50%) rotate(2.22deg);
  pointer-events: none;
}
.cta__line svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* нижний ряд: круг услуг + авто */
.cta__bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 754px;
  padding: 65px 64px;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.cta__circle { position: relative; z-index: 1; pointer-events: auto; }
.cta__car {
  position: absolute; bottom: -64px;
  width: 607.9px; height: auto; pointer-events: none;
}
.cta__car--r { right: -118px; transform: rotate(-30deg); transform-origin: bottom right; }
.cta__car--l { left: -118px; transform: rotate(30deg) scaleX(-1); transform-origin: bottom left; }

/* ── Адаптив ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cta__title { font-size: 72px; line-height: 72px; }
  .cta__sub { font-size: 24px; line-height: 32px; }
  .cta__line { display: none; }
}
@media (max-width: 768px) {
  .cta { height: 600px; }
  .cta__inner { width: calc(100% - 24px); height: calc(100% - 24px); }
  .cta__title { font-size: 44px; line-height: 44px; }
  .cta__sub { font-size: 18px; line-height: 26px; }
  .cta__content { gap: 32px; max-width: calc(100% - 32px); }   /* шире → кнопка достаёт до 311px (как в hero) */
  .cta__text { max-width: 300px; }   /* уже текст-контейнер → заголовок в 2 строки (кнопка не задета) */
  .cta__shield, .cta__v { display: none; }
  .cta__car { width: 360px; }
  /* dash под заголовком «Czas zadbać o swoje auto», поднят на 11px */
  .cta__line {
    display: block; position: absolute; left: 50%; top: 85px;
    width: min(320px, calc(100% - 40px)); height: 1px; z-index: 1;
    transform: translateX(-50%) rotate(-2.4deg);
  }
}
