/* ============================================================
   СПБ Переезд — cases (дизайн по референсу)
   Фото сверху · мета синим · параметры · Итог крупно · плашка
   ============================================================ */

.sp-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}

.sp-case{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.sp-case:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}

/* фото сверху */
.sp-case__img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.sp-case__img--ph{background:linear-gradient(135deg,var(--brand-soft),#dde7ff);
  display:flex;align-items:center;justify-content:center;position:relative}
.sp-case__img--ph::after{content:"";width:44px;height:44px;opacity:.35;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f5ff0" stroke-width="1.5"><path d="M3 8l9-5 9 5v8l-9 5-9-5z"/><path d="M3 8l9 5 9-5"/></svg>')}

.sp-case__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}

/* мета: район · тип — синим */
.sp-case__meta{font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:9px}

.sp-case__title{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 6px}

/* параметры строками */
.sp-case__specs{margin-top:6px}
.sp-case__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.sp-case__row:last-child{border-bottom:none}
.sp-case__k{color:var(--ink-3)}
.sp-case__v{font-weight:600;color:var(--ink);text-align:right}

/* итоговая строка — крупно, синим */
.sp-case__row.is-total{margin-top:4px;padding-top:14px;border-top:none;border-bottom:none}
.sp-case__row.is-total .sp-case__k{font-size:15px;color:var(--ink-2);font-weight:500}
.sp-case__row.is-total .sp-case__v{font-family:var(--f-display);font-size:22px;font-weight:700;
  color:var(--brand);letter-spacing:-.01em}

/* нижняя плашка-заметка */
.sp-cases-note{display:flex;align-items:flex-start;gap:14px;justify-content:center;
  max-width:900px;margin:26px auto 0;padding:0 10px;text-align:left}
.sp-cases-note__ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--brand);
  display:flex;align-items:center;justify-content:center}
.sp-cases-note__ic svg{width:20px;height:20px;stroke:#fff}
.sp-cases-note__txt{font-size:13.5px;color:var(--ink-3);line-height:1.55;padding-top:2px}

@media(max-width:720px){
  .sp-cases-note{flex-direction:column;align-items:center;text-align:center}
}