/* АКСИ Blog Styles */
.blog-wrap{max-width:1200px;margin:0 auto;padding:80px 24px 40px;min-height:60vh}
.blog-list-head{text-align:center;margin-bottom:40px}
.blog-list-head h1{font-family:'Nunito',sans-serif;font-weight:900;font-size:clamp(32px,4vw,48px);background:linear-gradient(135deg,var(--gold),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.blog-list-head p{color:var(--mut);font-size:16px;max-width:560px;margin:10px auto 0}

/* Categories filter */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.blog-cat-btn{font-size:13px;font-weight:600;padding:7px 18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut);transition:all .2s;cursor:pointer}
.blog-cat-btn:hover,.blog-cat-btn.active{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-light)}

/* Grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:all .3s;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px}
.blog-card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--sh-h)}
.blog-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pink)}
/* h2 внутри карточки: сбрасываем браузерные отступы и наследуем размер,
   чтобы смена div→h2 не поехала визуально. */
.blog-card-t{font-weight:700;font-size:16px;line-height:1.4;color:var(--text);margin:0;font-family:inherit;letter-spacing:normal}
.blog-card-d{font-size:14px;color:var(--mut);line-height:1.5}
.blog-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:13px;color:var(--mut2)}
.blog-read{color:var(--acc-light);font-weight:600}

/* Single article */
.blog-article{max-width:800px;margin:0 auto}
.blog-bread{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--mut2);margin-bottom:24px}
.blog-bread a{color:var(--mut2);transition:color .2s}
.blog-bread a:hover{color:var(--acc-light)}
.blog-art-head{margin-bottom:32px}
.blog-art-head h1{font-family:'Nunito',sans-serif;font-weight:900;font-size:clamp(26px,3.5vw,42px);line-height:1.1;letter-spacing:-.02em;margin-top:10px}
.blog-art-meta{display:flex;gap:8px;font-size:13px;color:var(--mut2);margin-top:8px}

/* Article body */
.blog-art-body{font-size:16px;line-height:1.8;color:var(--text)}
.blog-art-body h2{font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(20px,2.5vw,28px);margin:40px 0 16px;letter-spacing:-.01em}
.blog-art-body h3{font-weight:700;font-size:18px;margin:32px 0 12px}
.blog-art-body p{margin-bottom:16px;color:var(--mut);font-size:15.5px}
.blog-art-body ul,.blog-art-body ol{padding-left:24px;margin-bottom:16px;color:var(--mut)}
.blog-art-body li{margin-bottom:6px;font-size:15px}
.blog-art-body a{color:var(--acc-light);border-bottom:1px solid rgba(165,120,255,.2);transition:border-color .2s}
.blog-art-body a:hover{border-color:var(--acc-light)}
.blog-art-body strong{color:var(--text);font-weight:600}
.blog-art-body blockquote{border-left:3px solid var(--acc);padding:12px 20px;margin:24px 0;background:rgba(124,58,255,.06);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--mut);font-style:italic}
.blog-art-body img{border-radius:var(--radius-sm);margin:24px auto;max-width:100%}
.blog-art-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px}
.blog-art-body th,.blog-art-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.blog-art-body th{background:rgba(255,255,255,.04);font-weight:600;color:var(--text)}
.blog-art-body td{color:var(--mut)}
.blog-art-body code{font-family:'JetBrains Mono',monospace;font-size:13px;background:rgba(255,255,255,.05);padding:2px 8px;border-radius:6px;color:var(--acc-light)}

/* Tags */
.blog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:32px}
.blog-tag{font-size:12px;padding:4px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut2)}

/* CTA */
.blog-cta{margin:48px 0;background:linear-gradient(135deg,rgba(124,58,255,.1),rgba(255,90,0,.06));border:1px solid var(--line);border-radius:var(--radius);padding:36px}
.blog-cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.blog-cta-in h3{font-size:20px;color:var(--text);max-width:400px}

/* Related */
.blog-related{margin-top:48px}
.blog-related h3{font-size:20px;margin-bottom:20px}

/* Pagination */
.blog-pages{display:flex;justify-content:center;gap:6px;margin-top:36px}
.blog-page{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:14px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut);transition:all .2s}
.blog-page:hover,.blog-page.active{background:var(--acc-soft);border-color:var(--acc);color:var(--acc-light)}

/* Empty */
.blog-empty{text-align:center;padding:60px 0;color:var(--mut2)}

/* Footer */
.blog-footer{background:rgba(0,0,0,.3);border-top:1px solid var(--line);padding:40px 0 24px}
.blog-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-bottom:32px}
.blog-footer .footer-col{display:flex;flex-direction:column;gap:10px}
.blog-footer .footer-col h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);margin-bottom:4px}
.blog-footer .footer-col a{font-size:14px;color:var(--mut);transition:color .2s}
.blog-footer .footer-col a:hover{color:var(--acc-light)}
.blog-footer .footer-bottom{text-align:center;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--mut2)}

/* Responsive */
@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr}
  .blog-cta-in{flex-direction:column;text-align:center}
  .blog-wrap{padding:70px 16px 32px}
}

/* AKSI:A11Y */
/* Цели касания в блоге. Правила лежат именно здесь, а не в aksi.css: этот файл
   подключается последним, и его display побеждал inline-flex из aksi.css —
   а на строчном элементе min-height не действует, поэтому габарит не менялся.
   Работает только на сенсорных экранах, десктоп не трогаем. */
@media (pointer: coarse) {
  .nav-links a,
  .blog-bread a,
  .footer-col a,
  .blog-cta-in .btn,
  .blog-pages a,
  .blog-cat-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-in .brand { min-height: 44px; }
  /* Ссылки в подвале идут столбиком на всю ширину — им хватает высоты строки. */
  .footer-col a { align-items: center; }
  /* Метка категории на карточке набрана 11 px. */
  .blog-cat { font-size: 12px; }
}