/* ============================================================
   СПБ Переезд — materials (дизайн по референсу)
   Фото 16:9 сверху · иконка+заголовок · зелёная плашка
   ============================================================ */

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

.sp-mat{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-mat:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.sp-sec--light .sp-mat{background:var(--card)}

/* фото всегда 16:9 */
.sp-mat__img{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.sp-mat__img--ph{background:linear-gradient(135deg,#efe6d8,#e5dccb);
  display:flex;align-items:center;justify-content:center;position:relative}
.sp-mat__img--ph::after{content:"";width:48px;height:48px;opacity:.4;
  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="%23a8967a" stroke-width="1.5"><path d="M3 8l9-5 9 5v8l-9 5-9-5z"/><path d="M3 8l9 5 9-5"/></svg>')}

.sp-mat__body{padding:18px 20px 20px}

/* иконка + заголовок в ряд */
.sp-mat__head{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.sp-mat__ic{flex:none;width:38px;height:38px;border-radius:10px;background:#e8f0fe;
  display:flex;align-items:center;justify-content:center}
.sp-mat__ic svg{width:19px;height:19px;fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sp-mat__head h3{font-size:16.5px;font-weight:700;margin:0;color:var(--ink)}

.sp-mat__body p{margin:0;font-size:14px;color:var(--ink-3);line-height:1.5}

/* зелёная плашка «входит в стоимость» */
.sp-mats__note{margin-top:22px;background:#e7f6ec;border:1px solid #bfe6cd;border-radius:var(--r);
  padding:18px 22px;display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.sp-mats__note-ic{flex:none;width:40px;height:40px;border-radius:10px;background:#0f9d4f;
  display:flex;align-items:center;justify-content:center}
.sp-mats__note-ic svg{width:20px;height:20px;stroke:#fff}
.sp-mats__note-txt{flex:1;min-width:240px;font-size:14.5px;color:#14532d;line-height:1.5}
.sp-mats__note-txt b{color:#0f7a37}
.sp-mats__note-link{color:var(--brand);font-weight:600;text-decoration:none;white-space:nowrap;
  margin-left:auto}
.sp-mats__note-link:hover{text-decoration:underline}

@media(max-width:640px){
  .sp-mats__note{flex-direction:column;align-items:flex-start}
  .sp-mats__note-link{margin-left:0}
}