/* ============================================================
   BLOCK 5 «BRUTALNA JAKOŚĆ SERWISU» (Figma node 913:1535)
   Фуллскрин-фото-карта 1440×800, rounded 32:
   фон-фото + радиальное затемнение → верхний лид-текст (32/40,
   right) → gap 296 → нижний ряд: пунктирная линия + заголовок
   Druk 72 + белая кнопка «Umów wizytę».
   ============================================================ */
.feat {
  --feat-pad:   88px;
  --feat-gap:   296px;
  --feat-lead:  32px;
  --feat-lead-lh: 40px;
  --feat-title: 72px;

  width: 100%;
  padding: 0;
}

.feat__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--feat-gap);
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-1000);
}

/* picture-обёртка не влияет на лейаут — img позиционируется как раньше */
.feat__bgpic { display: contents; }

/* фон-фото (cover); на мобайле <source> подменяет на вертикальный bg-mob.png */
.feat__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* радиальное затемнение (Figma fill: radial 55.85% at 50%/44.15%) */
.feat__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55.85% 55.85% at 50% 44.15%,
    rgba(15, 15, 15, 0) 22.82%,
    rgba(15, 15, 15, 0.56) 100%
  );
}

/* ── Верхний лид-текст (913:1536 / 913:1537) ──────────────── */
.feat__top {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--feat-pad);
  overflow: hidden;
}
.feat__lead {
  flex: 1 1 0;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--feat-lead);
  line-height: var(--feat-lead-lh);
  text-align: right;
  color: var(--light-1000);
  word-break: break-word;
}
.feat__lead b { font-weight: 700; letter-spacing: normal; }

/* ── Нижний ряд (913:1538) ────────────────────────────────── */
.feat__bottom {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--feat-pad);
  overflow: hidden;
}

/* декоративная пунктирная линия (913:1539, Line 15): наклон −3.25°,
   x 32.73 / y 688.74 от блока (= top 136.74 внутри .feat__bottom), штрих 8/8 */
.feat__line {
  position: absolute;
  left: 32.73px;
  top: 136.74px;
  width: 609.815px;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  transform: rotate(-3.25deg);
  transform-origin: top left;
}
.feat__line svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* заголовок (913:1540): Druk Cyr Bold Italic 72/72, белый градиент */
.feat__title {
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--feat-title);
  line-height: var(--feat-title);
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 10.33%, rgba(255, 255, 255, 0.64) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; letter-spacing: normal; }

.feat__cta { position: relative; z-index: 1; }

/* ── Адаптив (мобильного фрейма в Figma нет — пропорц. сжатие) ─ */
@media (max-width: 1100px) {
  .feat {
    --feat-pad:  56px;
    --feat-gap:  200px;
    --feat-lead: 24px;
    --feat-lead-lh: 32px;
    --feat-title: 52px;
  }
  .feat__line { display: none; }
}

@media (max-width: 768px) {
  /* мобайл pixel-perfect (Figma 941:4143): фуллскрин-фото, контент СНИЗУ слева,
     порядок: заголовок → dash(через него) → подзаголовок → кнопка во всю ширину */
  .feat { --feat-title: 40px; --feat-lead: 20px; --feat-lead-lh: 28px; }
  .feat__card { border-radius: 24px; }
  /* разворачиваем обе группы в общий поток карточки → можно упорядочить весь контент */
  .feat__top, .feat__bottom { display: contents; }
  /* dash через заголовок (Figma frame-child: ~332px, под текстом) */
  .feat__line {
    display: block; order: 1; position: relative; z-index: 1;
    left: auto; top: 20px; transform-origin: center; transform: rotate(-2.4deg);   /* опущена на 20px вниз */
    width: min(332px, 100%); height: 1px; align-self: flex-start;
    margin: 0 0 -34px;                 /* налезает на нижнюю часть заголовка */
  }
  .feat__title {
    order: 2; position: relative; z-index: 2; align-self: stretch;
    white-space: normal; text-align: left;
  }
  .feat__lead {
    order: 3; position: relative; z-index: 2; align-self: stretch;
    flex: 0 0 auto; text-align: left; letter-spacing: var(--ls-body);
  }
  .feat__lead br { display: none; }   /* естественный перенос как в дизайне */
  .feat__cta {
    order: 4; display: flex; width: 100%; max-width: none; align-self: stretch; margin-top: 16px;
  }
  .feat__cta .btn-appt__label { flex: 1 1 0; }
}

@media (max-width: 420px) {
  /* размер заголовка по Figma 941:4143 = 40px (не ужимаем на узких) */
  .feat { --feat-gap: 96px; }
}

/* ============================================================
   MERGE блок4→блок5: STANDARD пинится по нижней грани (sticky),
   его круг (.std__circle) раскрывается клип-кругом в блок 5 на
   весь экран. Центр клипа = живая позиция .std__circle (feat-zoom.js
   читает её каждый кадр → круги совпадают 1:1). Переменные
   --feat-r/--feat-cx/--feat-cy/--feat-bgs/--feat-cc — из feat-zoom.js.
   ============================================================ */
.merge {
  position: relative;
  height: 220vh;                  /* драйвер скролла: ~120vh на раскрытие */
  margin-top: -48px;              /* блок 3 (услуги) накрывает сверху (выровнять фон) */
  z-index: 1;
}
.merge__pin {
  position: sticky;
  top: 0;
  height: 100svh; height: 100dvh;   /* dvh = живая высота вьюпорта iOS (раньше 100vh давал чёрную полосу при скролле вверх в Safari) */
  overflow: hidden;
  background: var(--dark-1000);
}

/* блок 4 — прижат к нижней грани вьюпорта */
.merge .std {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;                      /* сброс прежнего -48 */
  z-index: 1;
}

/* блок 5 — слой-оверлей с клип-кругом поверх блока 4 */
.feat-stage {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.feat-stage .feat { width: 100%; height: 100%; padding: 0; }
.feat-stage .feat__card {
  width: 100%;
  height: 100%;
  gap: 0;
  justify-content: space-between;
  background: var(--dark-1000);
  /* круговое окно: от круга блока 4 (≈⌀208) до полного экрана */
  clip-path: circle(var(--feat-r, 150vmax) at var(--feat-cx, 50%) var(--feat-cy, 50%));
  will-change: clip-path;
}
.feat-stage .feat__bg {
  transform: scale(var(--feat-bgs, 1));
  transform-origin: center;
  will-change: transform;
}
/* тексты/кнопка проявляются к концу раскрытия */
.feat-stage .feat__top,
.feat-stage .feat__bottom {
  opacity: var(--feat-cc, 1);
  transition: opacity .15s linear;
}

/* мобайл — зум блок4→5 РАБОТАЕТ (как на десктопе): merge/pin/std/feat-stage
   используют десктопные значения. Меняем только раскладку контента блока 5
   внутри клип-круга (прижат к низу слева, Figma 941:4143). */
@media (max-width: 768px) {
  .feat-stage .feat__card {
    gap: 16px;
    justify-content: flex-end;          /* контент прижат к низу */
    align-items: flex-start;
    padding: 44px 16px;
    /* height:100% и clip-path — от десктопа (зум-раскрытие) */
  }
}
/* reduced-motion — без pin: блок 4, затем обычный статичный блок 5 */
@media (prefers-reduced-motion: reduce) {
  .merge { height: auto; }
  .merge__pin { position: static; height: auto; overflow: visible; }
  .merge .std { position: relative; }
  .feat-stage { position: relative; inset: auto; }
  .feat-stage .feat { height: auto; }
  .feat-stage .feat__card { height: auto; clip-path: none; }
  .feat-stage .feat__bg { transform: none; }
}