/* StrIM blog — каталог і статті (разом із strim-public.css) */

.blog-intro{
  max-width:44rem;margin:0 0 28px;color:var(--muted);font-size:1.05rem;line-height:1.65;
}

.blog-grid{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:600px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .blog-grid{grid-template-columns:repeat(3,1fr)}
}

.blog-card{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--panel);backdrop-filter:blur(8px);
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  height:100%;
}
.blog-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,189,248,.35);
  box-shadow:0 16px 48px rgba(0,0,0,.28);
}
html[data-theme="light"] .blog-card:hover{box-shadow:0 14px 40px rgba(15,23,42,.1)}

.blog-card-cover{
  display:block;aspect-ratio:16/9;
  background:
    linear-gradient(135deg,rgba(0,87,184,.35),rgba(56,189,248,.2) 45%,rgba(250,204,21,.15)),
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(56,189,248,.25), transparent);
  position:relative;
}
.blog-card-cover::after{
  content:"StrIM · Binance spot";
  position:absolute;left:16px;bottom:14px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,245,249,.85);
}
html[data-theme="light"] .blog-card-cover::after{color:rgba(15,23,42,.65)}

.blog-card-body{
  padding:20px 20px 22px;
  display:flex;flex-direction:column;flex:1;
}
.blog-card-body h2{
  margin:0 0 10px;font-size:1.12rem;font-weight:800;line-height:1.35;
  border-bottom:none;padding-bottom:0;
}
.blog-card-body h2 a{color:var(--heading);text-decoration:none}
.blog-card-body h2 a:hover{color:var(--blue)}
.blog-card-excerpt{
  margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.6;flex:1;
}
.blog-card-meta{
  font-size:12px;color:var(--muted);margin-bottom:14px;
}
.blog-card .btn-read{
  align-self:flex-start;
  padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;
  border:1px solid rgba(56,189,248,.45);
  background:linear-gradient(180deg,rgba(56,189,248,.22),rgba(56,189,248,.08));
  color:var(--text);text-decoration:none;
}
.blog-card .btn-read:hover{filter:brightness(1.06);text-decoration:none}

/* Стаття */
.page-main--article{padding-bottom:clamp(32px,5vw,48px)}
.blog-article-wrap{max-width:800px;margin:0 auto}
.blog-article-wrap article.blog-article{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(22px,4vw,36px);
  box-shadow:0 16px 48px rgba(0,0,0,.2);
}
html[data-theme="light"] .blog-article-wrap article.blog-article{
  box-shadow:0 12px 40px rgba(15,23,42,.08);
}

.blog-article .article-meta{
  font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.5;
}
.blog-article h1{
  margin:0 0 16px;font-size:clamp(1.45rem,3vw,1.85rem);
}
.blog-article .prose{
  font-size:17px;line-height:1.6;color:var(--text);
}
.blog-article .prose > *:first-child{margin-top:0}
.blog-article .prose h2{
  margin:28px 0 12px;font-size:1.25rem;
}
.blog-article .prose h3{
  margin:22px 0 10px;font-size:1.05rem;border-bottom:none;padding-bottom:0;
}
.blog-article .prose p{margin:0 0 16px}
.blog-article .prose ul,
.blog-article .prose ol{
  margin:0 0 16px;padding-left:1.35rem;
}
.blog-article .prose li{margin:6px 0}
.blog-article .prose blockquote{
  margin:20px 0;padding:14px 18px;
  border-left:4px solid var(--gold);
  background:rgba(250,204,21,.08);
  border-radius:0 12px 12px 0;
  color:var(--text);font-size:16px;line-height:1.55;
}
html[data-theme="light"] .blog-article .prose blockquote{
  background:rgba(254,243,199,.45);
}
.blog-article .prose a{font-weight:600}
.blog-article .prose img{
  max-width:100%;height:auto;border-radius:12px;margin:16px 0;
}
.blog-article .prose figure{margin:20px 0}
.blog-article .prose figcaption{
  font-size:13px;color:var(--muted);margin-top:8px;
}

.blog-cta{
  max-width:800px;margin:clamp(32px,5vw,48px) auto 0;
  padding:28px 24px;border-radius:var(--radius);
  text-align:center;
  border:1px solid rgba(250,204,21,.35);
  background:linear-gradient(165deg,rgba(250,204,21,.12),rgba(56,189,248,.08));
}
.blog-cta p{
  margin:0 0 18px;font-size:1.05rem;line-height:1.55;color:var(--text);
  max-width:36rem;margin-left:auto;margin-right:auto;
}
.blog-cta .btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:14px;font-weight:800;font-size:16px;
  background:linear-gradient(165deg,#facc15,#eab308);
  border:1px solid rgba(234,179,8,.75);color:#1c1917;text-decoration:none;
  box-shadow:0 12px 36px rgba(250,204,21,.28);
}
.blog-cta .btn-cta:hover{filter:brightness(1.05);text-decoration:none}
html[data-theme="light"] .blog-cta .btn-cta{color:#422006}

.template-hint{
  margin-bottom:24px;padding:14px 16px;border-radius:12px;
  border:1px dashed rgba(56,189,248,.45);
  background:rgba(56,189,248,.08);
  font-size:13px;line-height:1.55;color:var(--muted);
}
.template-hint code{font-size:12px}