/* Blog catalog (category-blog.php) — v1, 15.09.2026 */

.sc-blog{
  width:100%; padding:0 15px; /* внутри .row.content-layout-wrapper */
  --ink:#0f172a; --ink-2:#1e293b; --ink-3:#475569; --mute:#94a3b8;
  --line:#eef0f4; --line-2:#dbe2ee; --bg:#f8f9fb; --blue:#2563eb;
  --r:18px; --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.sc-toolbar{display:flex;justify-content:flex-end;padding:32px 0 0}

/* сортировка — сегменты вместо select */
.sc-sort{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px;flex-shrink:0}
.sc-sort a{text-decoration:none;font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink-3);padding:8px 16px;border-radius:999px;white-space:nowrap;transition:color .15s,background .15s}
.sc-sort a:hover{color:var(--ink)}
.sc-sort a.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px var(--line-2)}

/* ---------- articles ---------- */
.sc-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 44px}
.sc-post{display:flex;color:var(--ink);text-decoration:none;font-family:var(--font);flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .25s,transform .25s}
.sc-post:hover{border-color:var(--line-2);box-shadow:0 12px 32px -16px rgba(15,23,42,.18);transform:translateY(-2px)}
.sc-post-img{aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.sc-post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sc-post:hover .sc-post-img img{transform:scale(1.03)}
.sc-post-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:10px}
.sc-post h2{margin:0;font-family:var(--font);font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sc-post p{margin:0;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-post-meta{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--mute);display:flex;gap:14px}

/* первая статья страницы — широкая */
.sc-post.is-lead{grid-column:span 2;flex-direction:row}
.sc-post.is-lead .sc-post-img{width:56%;aspect-ratio:auto;flex-shrink:0}
.sc-post.is-lead .sc-post-body{padding:28px 30px}
.sc-post.is-lead h2{font-size:22px;line-height:1.3}
.sc-post.is-lead p{-webkit-line-clamp:3;font-size:15px}
.sc-post.is-lead.is-right{flex-direction:row-reverse}
.sc-posts.is-mirror .sc-post.is-lead{grid-column:2/span 2}
.sc-posts.is-mirror .sc-post:nth-child(2){grid-column:1;grid-row:1}

/* ---------- bestsellers (как сейчас на сайте) ---------- */
.sc-bs-wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 44px}
.sc-bs-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .25s,transform .25s}
.sc-bs-item:hover{border-color:var(--line-2);box-shadow:0 12px 32px -16px rgba(15,23,42,.18);transform:translateY(-2px)}
.sc-bs-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #f1f3f7}
.sc-bs-title{font-family:var(--font);color:var(--ink);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;max-width:calc(100% - 70px)}
.sc-bs-all a{text-decoration:none;font-size:13px;font-weight:500;color:var(--blue);padding:6px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;transition:background .2s}
.sc-bs-all a::after{content:"→";font-size:14px;transition:transform .2s}
.sc-bs-all a:hover{background:rgba(37,99,235,.08)}
.sc-bs-all a:hover::after{transform:translateX(2px)}
.sc-bs-products{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1}
.sc-bs-product-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;height:100%}
.sc-bs-product-img{aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--bg)}
.sc-bs-product-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sc-bs-product:hover .sc-bs-product-img img{transform:scale(1.04)}
.sc-bs-product-sale{position:absolute;top:10px;left:10px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;line-height:1.4;box-shadow:0 4px 12px -4px rgba(37,99,235,.5)}
.sc-bs-product-title{font-family:var(--font);font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.sc-bs-product-price{font-family:var(--font);color:var(--ink);display:flex;align-items:baseline;gap:8px;margin-top:auto}
.sc-bs-price-new,.sc-bs-price-single{font-size:17px;font-weight:700;line-height:1;letter-spacing:-.01em}
.sc-bs-price-old{font-size:13px;font-weight:500;color:var(--mute);text-decoration:line-through;line-height:1}

/* ---------- pagination ---------- */
.sc-pag{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 72px}
.sc-pag .page-numbers{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-3);border:1px solid transparent;transition:background .15s,border-color .15s}
.sc-pag a.page-numbers:hover{background:var(--bg);border-color:var(--line)}
.sc-pag .page-numbers.current{background:var(--ink);color:#fff}
.sc-pag .page-numbers.dots{color:var(--mute)}

@media(max-width:1199px){
  .sc-posts{grid-template-columns:repeat(2,1fr)}
  .sc-bs-wrapper{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sc-toolbar{padding-top:20px}
  .sc-sort{width:100%;overflow-x:auto}
  .sc-posts,.sc-bs-wrapper{grid-template-columns:1fr;gap:14px}
  .sc-post.is-lead,.sc-post.is-lead.is-right{grid-column:auto;flex-direction:column}
  .sc-posts.is-mirror .sc-post.is-lead{grid-column:auto}
  .sc-posts.is-mirror .sc-post:nth-child(2){grid-column:auto;grid-row:auto}
  .sc-post.is-lead .sc-post-img{width:100%;aspect-ratio:16/9}
  .sc-post.is-lead .sc-post-body{padding:20px 22px}
  .sc-post.is-lead h2{font-size:18px}
}