/* ============ Blog ============ */

.blog-hero { position: relative; overflow: hidden; }
.blog-hero::before {
  content: ''; position: absolute; inset: -40% -10% auto; height: 420px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(26,110,240,.14), transparent 70%),
              radial-gradient(50% 50% at 85% 10%, rgba(124,92,240,.12), transparent 70%);
  pointer-events: none;
}
.blog-hero .container { position: relative; }
.blog-hero { padding-top: clamp(20px, 3vw, 32px); }

/* ---- Tag pills (rotating colors, same palette as .badge) ---- */
.blog-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--blue); background: var(--blue-soft);
  border-radius: 999px; padding: 4px 12px; display: inline-block;
}
.blog-tag[data-c="1"] { color: var(--blue); background: var(--blue-soft); }
.blog-tag[data-c="2"] { color: var(--purple); background: #eee9ff; }
.blog-tag[data-c="3"] { color: var(--teal); background: #dcf5f3; }

/* ---- Meta row (avatar + author + date + read time) ---- */
.blog-meta-row { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--ink-2); }
.blog-meta-row .sep { opacity: .5; }
.blog-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-family: var(--font); font-weight: 800; font-size: .74rem; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}

/* ---- Featured post (first card, full width) ---- */
.blog-featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 36px;
}
.blog-featured-cover { position: relative; min-height: 260px; background: var(--sky); }
.blog-featured-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.blog-featured-flag {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.blog-featured-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.blog-featured-body h2 a { color: var(--ink); text-decoration: none; }
.blog-featured-body h2 a:hover { color: var(--blue); }
.blog-featured-body p.excerpt { color: var(--ink-2); font-size: 1rem; }
.blog-featured-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Grid of remaining cards ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.blog-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #c9dcf7; }
.blog-card-cover { position: relative; aspect-ratio: 16 / 10; background: var(--sky); overflow: hidden; }
.blog-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.blog-card:hover .blog-card-cover img { transform: scale(1.05); }
.blog-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-card h3 { font-size: 1.1rem; line-height: 1.35; }
.blog-card h3 a { color: var(--ink); text-decoration: none; }
.blog-card h3 a:hover { color: var(--blue); }
.blog-card p { font-size: .88rem; color: var(--ink-2); flex: 1; margin: 0; }
.blog-card .blog-meta-row { margin-top: auto; padding-top: 6px; }

.blog-empty, .blog-error {
  grid-column: 1 / -1; text-align: center; padding: 64px 16px; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--sky);
}

/* ---- Single post page ---- */
.blog-back {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .85rem;
  color: var(--blue); text-decoration: none; margin-bottom: 18px;
}
.blog-back:hover { text-decoration: underline; }
.blog-post-meta.blog-meta-row { margin-top: 14px; }

.blog-post-cover {
  margin: 30px 0 8px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); aspect-ratio: 16 / 8; background: var(--sky);
}
.blog-post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prose.blog-post-body { font-size: 1.05rem; }
.prose.blog-post-body p:first-of-type { font-size: 1.12rem; color: var(--ink); }
.prose.blog-post-body img { border-radius: 14px; margin: 18px 0; }

.blog-post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

.blog-cta {
  margin-top: 40px; padding: 28px clamp(20px, 4vw, 36px); border-radius: 22px;
  background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.blog-cta h3 { color: #fff; font-size: 1.15rem; margin-bottom: 4px; }
.blog-cta p { color: rgba(255,255,255,.85); font-size: .92rem; margin: 0; }
.blog-cta .btn-primary { background: #fff; color: var(--blue-dark); box-shadow: none; }

.blog-more-title { font-size: 1.3rem; font-weight: 800; margin: 56px 0 20px; }
.blog-grid-more { grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---- Skeleton loading state ---- */
.blog-skel { border-radius: var(--radius); background: var(--sky); position: relative; overflow: hidden; }
.blog-skel::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: blog-shimmer 1.4s infinite;
}
@keyframes blog-shimmer { 100% { transform: translateX(100%); } }

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-cover { min-height: 220px; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-cta { flex-direction: column; align-items: flex-start; }
}