/* ============================================================
   СПБ Переезд — features
   Блок «Что входит в переезд». Сетка карточек 3x2.
   Каждая карточка кликабельна целиком и ведёт на профильную
   страницу услуги — это ещё и внутренняя перелинковка.
   ============================================================ */

.sp-features-sec{position:relative;overflow:hidden;background:var(--card)}
.sp-features-sec > .sp-wrap{position:relative;z-index:1}

/* --- точечный декор по углам --- */
.sp-features-sec::before,
.sp-features-sec::after{
  content:"";position:absolute;pointer-events:none;
  background-image:radial-gradient(circle, rgba(31,95,240,.22) 1.7px, transparent 1.7px);
  background-size:16px 16px;
}
.sp-features-sec::before{
  right:0;top:0;width:250px;height:200px;opacity:.5;
  -webkit-mask-image:linear-gradient(225deg,#000,transparent 72%);
          mask-image:linear-gradient(225deg,#000,transparent 72%);
}
.sp-features-sec::after{
  left:0;bottom:0;width:190px;height:240px;opacity:.42;
  -webkit-mask-image:linear-gradient(45deg,#000,transparent 72%);
          mask-image:linear-gradient(45deg,#000,transparent 72%);
}

/* --- сетка --- */
.sp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* --- карточка --- */
.sp-feature{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 32px 30px;box-shadow:var(--sh);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.sp-feature:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#c9d9f5}
.sp-feature:focus-within{border-color:var(--brand-lt)}

.sp-feature__ic{
  width:58px;height:58px;border-radius:var(--r);background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;flex:none;
}
.sp-feature__ic svg{width:27px;height:27px;stroke:var(--brand);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.sp-feature__t{font-family:var(--f-display);font-size:19px;font-weight:700;
  color:var(--ink);margin:0;letter-spacing:-.015em;line-height:1.3}

/* фирменная черта под заголовком */
.sp-feature__rule{display:block;width:30px;height:3px;border-radius:2px;
  background:var(--brand);margin:14px 0 18px}

.sp-feature__d{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* --- низ карточки: чек-лист + стрелка --- */
.sp-feature__foot{display:flex;align-items:flex-end;gap:16px;margin-top:auto}

.sp-feature__list{list-style:none;margin:0;padding:0;flex:1}
.sp-feature__list li{display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.45;color:var(--ink-2);margin-bottom:12px}
.sp-feature__list li:last-child{margin-bottom:0}
.sp-feature__list svg{width:15px;height:15px;stroke:var(--brand);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px}

.sp-feature__more{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  color:var(--brand);text-decoration:none;transition:transform var(--dur) var(--ease);
}
.sp-feature__more svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* растянутая область клика — работает, потому что .sp-feature{position:relative},
   а сама ссылка в потоке и не создаёт своего контекста позиционирования */
.sp-feature__more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sp-feature:hover .sp-feature__more{transform:translateX(4px)}

/* ============================================================
   Адаптив
   ============================================================ */
@media(max-width:1080px){
  .sp-features{grid-template-columns:repeat(2,1fr);gap:20px}
  .sp-feature{padding:28px 26px 26px}
}

@media(max-width:680px){
  .sp-features{grid-template-columns:1fr;gap:16px}
  .sp-feature{padding:26px 22px 24px}
  .sp-feature__ic{width:52px;height:52px;margin-bottom:18px}
  .sp-feature__ic svg{width:25px;height:25px}
  .sp-feature__t{font-size:18px}
  .sp-feature__d{font-size:14.5px;margin-bottom:18px}
  .sp-features-sec::before,.sp-features-sec::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .sp-feature,.sp-feature__more{transition:none}
  .sp-feature:hover{transform:none}
  .sp-feature:hover .sp-feature__more{transform:none}
}