/* ============================================================
   СПБ Переезд — блог: список, рубрики, одна статья
   ============================================================ */

/* --- шапка списка --- */
.sp-blog-hero,.sp-post-hero{background:linear-gradient(135deg,var(--ink),var(--brand-dk));
  color:#fff;padding:110px 0 100px;position:relative;background-size:cover;background-position:center}
.sp-blog-hero__overlay,.sp-post-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(12,22,38,.86),rgba(31,95,240,.55));pointer-events:none}
.sp-blog-hero__content,.sp-post-hero__content{position:relative;z-index:1}
.sp-blog-hero h1{font-size:clamp(26px,4vw,42px);font-weight:800;margin:0 0 12px;line-height:1.15}
.sp-blog-hero p{font-size:16.5px;color:rgba(255,255,255,.85);margin:0;max-width:640px;line-height:1.5}

/* --- рубрики --- */
.sp-blog-cats{display:flex;flex-wrap:wrap;gap:8px;padding:28px 0 20px}
.sp-blog-cat{background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:8px 18px;font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:var(--dur) var(--ease);white-space:nowrap}
.sp-blog-cat:hover{border-color:var(--brand);color:var(--brand)}
.sp-blog-cat.is-active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* --- сетка карточек --- */
.sp-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding-top:32px;padding-bottom:20px}
/* если сверху есть фильтр рубрик — верхний отступ не нужен */
.sp-blog-cats + .sp-blog-grid{padding-top:0}
/* фон страницы списка */
.sp-blog-page{background:var(--bg-2);padding-bottom:8px}
.sp-blog-page .sp-blog-hero{background:linear-gradient(135deg,var(--ink),var(--brand-dk))}
.sp-blog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.sp-blog-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.sp-blog-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.sp-blog-card__img{aspect-ratio:16/9;background-size:cover;background-position:center;
  background-color:var(--bg-2);display:flex;align-items:center;justify-content:center}
.sp-blog-card__img-ph svg{width:52px;height:52px;stroke:var(--brand);opacity:.35}
.sp-blog-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.sp-blog-card__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);margin-bottom:10px}
.sp-blog-card__cat{background:var(--brand-soft);color:var(--brand);font-weight:600;
  padding:3px 10px;border-radius:99px}
.sp-blog-card__title{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.35}
.sp-blog-card:hover .sp-blog-card__title{color:var(--brand)}
.sp-blog-card__excerpt{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 14px;flex:1}
.sp-blog-card__more{display:inline-flex;align-items:center;gap:6px;font-size:14px;
  font-weight:600;color:var(--brand);margin-top:auto}
.sp-blog-card__more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.sp-blog-card:hover .sp-blog-card__more svg{transform:translateX(3px)}

/* --- пагинация --- */
.sp-pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:28px 0 56px}
.sp-pagination .page-numbers{min-width:42px;height:42px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:var(--dur) var(--ease)}
.sp-pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.sp-pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.sp-pagination .page-numbers.dots{border:none;background:none}

/* ============================================================
   Одна статья
   ============================================================ */
.sp-post-hero{padding:130px 0 112px}
.sp-post-hero h1{font-size:clamp(25px,3.8vw,40px);font-weight:800;margin:0;line-height:1.2;max-width:860px}
.sp-post-hero__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.75);margin-bottom:14px}
.sp-post-hero__cat{background:var(--brand);color:#fff;font-weight:600;
  padding:4px 12px;border-radius:99px;text-decoration:none}
.sp-post-hero__cat:hover{background:#fff;color:var(--brand-dk)}
.sp-post-hero__read{position:relative;padding-left:16px}
.sp-post-hero__read::before{content:"";position:absolute;left:0;top:50%;
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);transform:translateY(-50%)}

.sp-post-body{padding:44px 0 48px}
/* Текст статьи — на всю ширину контейнера (.sp-wrap = 1180px). */
.sp-post-body .sp-prose{max-width:1180px}
.sp-post-body .sp-prose img{max-width:100%;height:auto;border-radius:var(--r);margin:20px 0}
.sp-post-body .sp-prose figure{margin:24px 0}
.sp-post-body .sp-prose figcaption{font-size:13px;color:var(--ink-3);margin-top:8px;text-align:center}

.sp-post-related{padding:48px 0}

/* CTA под статьёй */
.sp-post-cta{padding:48px 0}
.sp-post-cta__box{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;background:linear-gradient(135deg,var(--ink),var(--brand-dk));
  color:#fff;border-radius:var(--r-lg);padding:34px 38px;box-shadow:var(--sh-lg)}
.sp-post-cta__box h2{font-size:24px;font-weight:800;margin:0 0 8px;color:#fff}
.sp-post-cta__box p{font-size:15px;color:rgba(255,255,255,.8);margin:0;line-height:1.5}

/* --- адаптив --- */
@media(max-width:900px){
  .sp-blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .sp-blog-hero,.sp-post-hero{padding:54px 0 48px}
  .sp-blog-grid{grid-template-columns:1fr;gap:16px;padding-top:22px}
  .sp-post-body{padding:28px 0 32px}
  .sp-post-cta__box{flex-direction:column;align-items:flex-start;padding:24px 20px}
  .sp-post-cta__box .sp-btn{width:100%;justify-content:center}
  .sp-pagination{padding:20px 0 40px}
}