/* ============================================================
   GameLost — блог (стили раздела)
   Использует CSS-переменные темы из style.css — автоматически
   подстраивается под светлые/тёмные темы сайта.
   ============================================================ */

/* ---------- Чипы категорий ---------- */
.blog-cats{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 26px;
}
.blog-cat-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  font-size:13.5px; font-weight:600; color:var(--muted);
  transition:all .15s ease; white-space:nowrap;
}
.blog-cat-pill b{
  font-weight:700; font-size:12px; color:var(--accent-2);
  background:var(--card-2); border-radius:999px; padding:1px 8px;
}
.blog-cat-pill:hover{ color:var(--text); border-color:var(--border-2); transform:translateY(-1px); }
.blog-cat-pill.active{
  background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--glow);
}
.blog-cat-pill.active b{ background:rgba(255,255,255,.22); color:#fff; }

/* ---------- Сетка карточек ---------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.b-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.b-card:hover{
  transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow);
}
.b-cover{
  position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.b-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .25s ease;
}
.b-card:hover .b-cover img{ transform:scale(1.04); }
.b-cover .emoji{ font-size:52px; line-height:1; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.b-chip{
  position:absolute; left:10px; top:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:999px;
  background:rgba(10,12,20,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.02em;
}
.b-body{
  display:flex; flex-direction:column; gap:8px; flex:1;
  padding:15px 16px 14px;
}
.b-title{
  font-size:16.5px; font-weight:700; line-height:1.35; margin:0;
  color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.b-excerpt{
  font-size:13.5px; line-height:1.5; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.b-meta{
  display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:6px;
  font-size:12.5px; color:var(--muted-2);
}
.b-meta .b-go{
  margin-left:auto; color:var(--accent-2); font-weight:700;
  transition:transform .15s ease;
}
.b-card:hover .b-go{ transform:translateX(4px); }

/* ---------- Пагинация ---------- */
.b-pager{
  display:flex; align-items:center; justify-content:center; gap:14px; margin:28px 0 8px;
}
.b-pager-info{ font-size:13.5px; color:var(--muted); }

/* ---------- Статья ---------- */
.post-wrap{ max-width:800px; margin:0 auto; padding-bottom:20px; }
.post-topline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
}
.b-chip:not(.blog-cat-pill){
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  color:var(--muted); font-size:12.5px; font-weight:600;
  transition:all .15s ease;
}
.b-chip:not(.blog-cat-pill):hover{ color:var(--text); border-color:var(--border-2); }
.post-meta-inline{ font-size:13px; color:var(--muted-2); }

.post-title{
  font-size:clamp(26px,4.2vw,40px); line-height:1.2; margin:14px 0 10px;
}
.post-lead{
  font-size:17px; line-height:1.55; color:var(--muted); margin:0 0 20px;
}
.post-cover{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/8; display:flex; align-items:center; justify-content:center;
  margin:6px 0 26px; border:1px solid var(--border);
}
.post-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.post-cover .emoji{ font-size:72px; line-height:1; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4)); }

/* ---------- Типографика текста статьи ---------- */
.blog-body{ font-size:16.5px; line-height:1.75; color:var(--text); }
.blog-body p{ margin:0 0 1em; }
.blog-body h2{
  font-size:22px; margin:1.4em 0 .6em; line-height:1.3;
}
.blog-body ul{ margin:0 0 1.2em; padding-left:22px; }
.blog-body li{ margin:0 0 .45em; }
.blog-body strong{ font-weight:700; }

/* Ключевые слова-ссылки: кликабельны, но никак не выделены */
.blog-body a.kw-link{
  color:inherit; text-decoration:none; cursor:pointer;
  border-bottom:none; background:none;
}

/* ---------- CTA-блок товара ---------- */
.blog-cta{
  display:flex; align-items:center; gap:16px;
  margin:26px 0 10px; padding:16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}
.blog-cta-cover{
  position:relative; flex:0 0 auto; width:86px; height:86px;
  border-radius:var(--radius-sm); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.blog-cta-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.blog-cta-cover .emoji{ font-size:40px; line-height:1; }
.blog-cta-info{
  display:flex; flex-direction:column; gap:4px; flex:1 1 220px; min-width:200px;
}
.blog-cta-info b{ font-size:16px; line-height:1.35; }
.blog-cta-info small{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.blog-cta-price{
  font-family:var(--font-head); font-size:18px; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  width:fit-content;
}
.blog-cta .btn{ flex:0 0 auto; }

/* ---------- Читайте также ---------- */
.blog-more{ margin-top:36px; }
.blog-more h2{ font-size:24px; margin-bottom:16px; }
.blog-more .blog-grid{ grid-template-columns:repeat(3,1fr); }
.post-back{ margin-top:26px; }

/* ---------- Блок «Поделиться» ---------- */
.share-block{
  display:flex; align-items:stretch; gap:10px; margin-top:26px; flex-wrap:wrap;
}
.share-label{
  flex-basis:100%; font-size:15px; color:var(--muted); font-weight:600;
  margin-bottom:2px;
}
.share-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  flex:1 1 calc(50% - 5px); min-height:50px; padding:12px 18px;
  border-radius:14px; border:none; cursor:pointer;
  color:#fff; text-decoration:none;
  font-size:15px; font-weight:700; letter-spacing:.01em;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, filter .18s;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.share-btn svg{ flex:0 0 auto; width:21px; height:21px; }
.share-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22); filter:brightness(1.06); }
.share-btn:active{ transform:scale(.98); }
.share-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.share-vk{ background:linear-gradient(135deg,#0A5CDB 0%,#0077FF 100%); }
.share-tg{ background:linear-gradient(135deg,#2AABEE 0%,#1D87C9 100%); }
.share-max{ background:linear-gradient(135deg,#00D4AA 0%,#0090E8 100%); }
.share-max .share-max-word{
  font-family:var(--font-head); font-size:15px; font-weight:800; letter-spacing:.06em;
}
.share-copy{
  background:var(--card); color:var(--text); border:1px solid var(--border-2);
  box-shadow:none;
}
.share-copy:hover{ background:var(--card-2); }
.share-copy.is-done{ border-color:var(--ok); color:var(--ok); }
.share-copy.is-done svg{ display:none; }
.share-copy.is-done::after{ content:'✓ Скопировано'; font-size:14px; }

/* ---------- Адаптивность ---------- */
@media (max-width:1000px){
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-more .blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  /* чипы категорий: перенос строк, чтобы всё было видно без скролла */
  .blog-cats{
    flex-wrap:wrap; overflow:visible; padding-bottom:0; margin-bottom:20px;
  }
  .blog-cat-pill{ flex:0 0 auto; padding:8px 13px; font-size:13px; }
  .blog-grid, .blog-more .blog-grid{ grid-template-columns:1fr; gap:14px; }
  .b-cover{ aspect-ratio:16/10; }
  .post-title{ font-size:clamp(23px,6.4vw,30px); }
  .post-lead{ font-size:15.5px; }
  .post-cover{ aspect-ratio:16/10; }
  .post-cover .emoji{ font-size:56px; }
  .blog-body{ font-size:15.5px; line-height:1.7; }
  .blog-body h2{ font-size:19px; }
  .blog-cta{ gap:12px; padding:14px; }
  .blog-cta-cover{ width:72px; height:72px; }
  .blog-cta .btn{ width:100%; }
  .b-pager{ flex-wrap:wrap; }
  /* кнопки «Поделиться»: сетка 2×2 во всю ширину */
  .share-btn{ flex:1 1 calc(50% - 5px); min-height:52px; padding:12px 10px; font-size:14px; }
  .share-copy.is-done::after{ font-size:12.5px; }
}