/* ── BLOG PAGE STYLES ── */

/* FEATURED POST (великий перший) */
.blog-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; margin-bottom: 48px;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none; color: inherit;
}
.blog-featured:hover { border-color: rgba(168,85,247,0.5); transform: translateY(-3px); }
@media (max-width: 760px) { .blog-featured { grid-template-columns: 1fr; } }

.blog-featured-img {
  min-height: 300px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1A0F3A 0%, #0A0A0F 100%);
  display: flex; align-items: center; justify-content: center;
}
.blog-featured-img svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.blog-featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-body .blog-cat { margin-bottom: 16px; }
.blog-featured-body h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.5px; }
.blog-featured-body p { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.blog-featured-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); }

/* GRID */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* CARD */
.blog-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.blog-card:hover { border-color: rgba(168,85,247,0.5); transform: translateY(-4px); }

.blog-card-img {
  height: 180px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1A0F3A 0%, #0A0A0F 100%);
  display: flex; align-items: center; justify-content: center;
}
.blog-card-img svg { width: 100%; height: 100%; }

.blog-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card-body h3 { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.blog-card-body p { font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1; margin-bottom: 16px; }

/* CATEGORY BADGE */
.blog-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.blog-cat.crm { background: rgba(108,62,244,0.15); color: #A78BFA; }
.blog-cat.business { background: rgba(236,72,153,0.15); color: #F9A8D4; }
.blog-cat.tips { background: rgba(34,197,94,0.12); color: #4ADE80; }
.blog-cat.news { background: rgba(249,115,22,0.15); color: #FB923C; }

/* DATE + READ TIME */
.blog-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--muted);
}
.blog-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }

/* DATE BADGE on image */
.blog-date-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(10,10,15,0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text);
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.blog-date-badge span:first-child { font-size: 18px; font-weight: 900; color: #A78BFA; }

/* READ MORE LINK */
.blog-read-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #A78BFA;
  transition: gap 0.2s;
}
.blog-card:hover .blog-read-more,
.blog-featured:hover .blog-read-more { gap: 10px; }

/* ARTICLE PAGE */
.article-hero {
  padding: 120px 5vw 60px;
  max-width: 800px; margin: 0 auto;
}
.article-hero h1 {
  font-size: clamp(28px, 5vw, 52px); font-weight: 900;
  line-height: 1.1; letter-spacing: -1.5px; margin: 20px 0 16px;
}
.article-hero-img {
  width: 100%; height: clamp(200px, 35vw, 420px);
  border-radius: 20px; overflow: hidden; margin: 40px 0;
  background: linear-gradient(135deg, #1A0F3A, #0A0A0F);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}
.article-body {
  max-width: 760px; margin: 0 auto; padding: 0 5vw 80px;
  font-size: 17px; line-height: 1.85; color: #D4D2E8;
}
.article-body h2 {
  font-size: clamp(22px, 3vw, 28px); font-weight: 800;
  color: var(--text); margin: 48px 0 16px; letter-spacing: -0.5px;
}
.article-body h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 32px 0 12px; }
.article-body p { margin-bottom: 20px; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-body blockquote {
  border-left: 3px solid var(--c1); padding: 16px 24px;
  background: rgba(108,62,244,0.08); border-radius: 0 12px 12px 0;
  margin: 28px 0; color: var(--text); font-style: italic;
}
.article-body .highlight-box {
  background: linear-gradient(135deg, rgba(108,62,244,0.1), rgba(236,72,153,0.08));
  border: 1px solid rgba(168,85,247,0.25); border-radius: 16px;
  padding: 24px 28px; margin: 32px 0;
}

/* BACK LINK */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted); text-decoration: none;
  transition: color 0.2s; margin-bottom: 24px;
}
.back-link:hover { color: var(--text); }

/* RELATED */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

/* PROGRESS BAR */
.read-progress {
  position: fixed; top: 64px; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.05); z-index: 99;
}
.read-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #6C3EF4, #EC4899);
  transition: width 0.1s;
}

/* ABSTRACT COVER ILLUSTRATIONS (SVG in card) */
.cover-abstract {
  width: 100%; height: 100%;
}