/* ============================================================
   СПБ Переезд — hero
   Первый экран страницы услуги. Десктоп: текст слева, фото
   справа с мягким уходом в фон. Мобильный: текст, УТП, CTA,
   затем фото на всю ширину и карточка доверия внахлёст.
   ============================================================ */

.sp-hero{
  position:relative; overflow:hidden; padding:0;
  background-color:var(--bg);
  background-image:url(../../img/hero.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Белая полупрозрачная маска — осветляет фото, чтобы текст читался.
   Плотность регулируется последним числом: больше = светлее. */
.sp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(255,255,255,.2);
  pointer-events:none;
}

/* --- декор: мягкие круги и точечная сетка --- */
.sp-hero__deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sp-hero__deco i{position:absolute;border-radius:50%;background:rgba(31,95,240,.055);display:block}
.sp-hero__deco i:nth-child(1){width:230px;height:230px;left:44%;top:5%}
.sp-hero__deco i:nth-child(2){width:120px;height:120px;left:38%;top:54%}
.sp-hero__deco i:nth-child(3){width:64px;height:64px;left:50%;top:78%}

/* Десктоп: центрируем контент по высоте, даём кадру вертикальный простор */
@media(min-width:1201px){
  .sp-hero{display:flex;align-items:center;min-height:min(80vh,720px)}
  /* .sp-wrap здесь становится флекс-элементом и сжимается по содержимому.
     Возвращаем ему полную ширину, иначе max-width:1180 и margin:auto
     центрируют сжатую коробку и контент уезжает вправо. */
  .sp-hero > .sp-wrap{width:100%;min-width:0}
}
.sp-hero__dots{
  position:absolute;left:0;bottom:0;width:150px;height:160px;z-index:1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle, rgba(31,95,240,.30) 1.7px, transparent 1.7px);
  background-size:15px 15px;
}

/* --- контент --- */
.sp-hero__in{position:relative;z-index:2;width:100%;padding:28px 0 40px}
/* узкая колонка — только на десктопе, где справа фото */
@media(min-width:1201px){
  .sp-hero__in{width:60%;padding:48px 0 60px}
}

.sp-hero__geo{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:24px;
  font-family:var(--f-text);font-weight:700;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
}
.sp-hero__geo i{
  width:28px;height:28px;border-radius:50%;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.sp-hero__geo svg{width:14px;height:14px;stroke:var(--brand);fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

.sp-hero h1{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
  font-size:clamp(30px,3.5vw,54px);line-height:1.1;letter-spacing:-.025em;margin:0;
}
.sp-hero h1 em{font-style:normal;color:var(--brand)}

.sp-hero__lead{
  margin:22px 0 0;max-width:100%;line-height:1.6;color:var(--ink-2);
  font-size:clamp(15px,1.05vw,17px);
}

/* --- УТП --- */
.sp-usp{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:30px 0 0;
  padding:0;list-style:none}
.sp-usp li{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r);padding:13px 17px;
  box-shadow:var(--sh);font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;
}
.sp-usp svg{width:23px;height:23px;stroke:var(--brand);fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* --- CTA + телефон --- */
.sp-hero__cta{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:34px}
.sp-hero__cta .sp-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.sp-hero__call{display:flex;flex-direction:column;gap:5px}
.sp-hero__call span{font-size:13px;color:var(--ink-3)}
.sp-hero__call a{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.01em;
}
.sp-hero__call a:hover{color:var(--brand)}
.sp-hero__call svg{width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2.1}

/* --- фото --- */
/* --- карточка доверия --- */
.sp-trust{
  position:relative;z-index:2;display:flex;max-width:580px;margin-top:40px;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px 6px;
}
.sp-trust__i{flex:1;padding:2px 24px;border-right:1px solid var(--line-2)}
.sp-trust__i:last-child{border-right:none}
.sp-trust__top{display:flex;align-items:center;gap:10px}
.sp-trust__top svg{width:23px;height:23px;stroke:var(--brand);fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp-trust__val{font-family:var(--f-display);font-weight:700;font-size:21px;color:var(--ink);
  letter-spacing:-.015em;white-space:nowrap}
.sp-trust__lab{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}
.sp-trust__stars{display:flex;gap:3px;margin-top:9px}
.sp-trust__stars svg{width:14px;height:14px;fill:var(--brand);stroke:none}

/* ============================================================
   Акция / промокод — не входит в макет первого экрана.
   Разметка сохранена: включается флагом promo_show в ACF.
   ============================================================ */
.sp-promo{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--ink),var(--brand-dk));color:#fff;border-radius:var(--r);
  padding:17px 22px;max-width:660px;box-shadow:var(--sh-lg);position:relative;overflow:hidden;z-index:2}
.sp-promo::after{content:"";position:absolute;right:-26px;top:-26px;width:150px;height:150px;
  background-image:radial-gradient(circle,rgba(255,255,255,.15) 1.6px,transparent 1.6px);
  background-size:16px 16px}
.sp-promo__pct{font-family:var(--f-display);font-weight:700;font-size:30px;flex:none;line-height:1;
  position:relative;z-index:1}
.sp-promo__txt{font-size:14px;color:rgba(255,255,255,.88);line-height:1.55;position:relative;z-index:1}
.sp-promo__txt b{color:#fff}
.sp-promo a{color:#9dc0ff;text-decoration:none;font-weight:700;font-family:var(--f-display)}
.sp-promo__code{font-family:var(--f-mono);font-weight:700;font-size:13.5px;letter-spacing:.12em;
  border:1.5px dashed rgba(255,255,255,.55);border-radius:var(--r-sm);padding:8px 14px;
  margin-left:auto;white-space:nowrap;position:relative;z-index:1}

/* ============================================================
   Адаптив
   ============================================================ */
@media(min-width:1201px) and (max-width:1400px){
  .sp-hero__in{width:66%}
}

@media(min-width:1201px) and (max-width:1320px){
  .sp-hero__in{width:74%}
    background:linear-gradient(90deg,
      rgba(238,242,249,1)   0%,
      rgba(238,242,249,.98) 34%,
      rgba(238,242,249,.90) 52%,
      rgba(238,242,249,.60) 68%,
      rgba(238,242,249,.18) 84%,
      rgba(238,242,249,0)   96%);
  }
  .sp-usp li{padding:12px 13px;font-size:12.5px;gap:10px}
  .sp-trust__i{padding:2px 16px}
}

@media(max-width:1200px){
  /* Мобильный/планшет: всё на всю ширину */
  .sp-hero__in{width:100%!important;max-width:none!important;padding:28px 0 40px;text-align:center}
  .sp-hero__deco,.sp-hero__dots{display:none}

  .sp-hero__geo{margin-bottom:20px}
  /* текст на всю ширину контейнера */
  .sp-hero__in h1,
  .sp-hero__in .sp-hero__h1,
  .sp-hero__lead,
  .sp-hero__geo{max-width:none!important;width:100%}
  .sp-hero__lead{margin-top:20px}

  /* УТП: одна колонка, каждый пункт на всю ширину */
  .sp-usp{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .sp-usp li{flex-direction:row;justify-content:center;text-align:center;
    gap:12px;padding:14px 16px;font-size:13.5px;line-height:1.35}
  .sp-usp svg{width:23px;height:23px}

  .sp-hero__cta{flex-direction:column;align-items:stretch;gap:16px;margin-top:26px}
  .sp-hero__cta .sp-btn{width:100%;justify-content:center}
  .sp-hero__call{align-items:center}

  .sp-trust{max-width:none;margin-top:30px;padding:18px 4px;text-align:center}
  .sp-trust__i{padding:6px 12px}
  .sp-trust__top{justify-content:center}
  .sp-trust__stars{justify-content:center}
  .sp-trust__val{font-size:20px}
  .sp-trust__lab{font-size:12px}

  .sp-promo{max-width:none;justify-content:center;text-align:center}
  .sp-promo__code{margin-left:0}
}

@media(max-width:560px){
  .sp-hero h1{line-height:1.14}

  /* карточка доверия: строки — иконка, значение и подпись в один ряд */
  .sp-trust{flex-wrap:wrap;gap:0;padding:8px 4px;text-align:left}
  .sp-trust__i{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line-2);
    padding:12px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
  .sp-trust__i:last-child{border-bottom:none}
  .sp-trust__top{gap:9px;justify-content:flex-start;flex:none}
  /* подпись встаёт справа от цифры с отступом 10px */
  .sp-trust__lab{margin-top:0;flex:1;min-width:0;font-size:12.5px;line-height:1.35}
  .sp-trust__stars{margin-top:0;justify-content:flex-start;flex-basis:100%;order:3;
    margin-top:4px}
}

@media(prefers-reduced-motion:reduce){
  .sp-hero *{transition:none !important}
}