/* ============================================================
   AlejtoDev — blog.css
   Blog listing specifics (extends main.css)
   ============================================================ */

.blog-hero {
  padding-block: clamp(2.5rem, 7vw, 4rem) 1rem;
}
.blog-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin-block: 0.6rem 0.5rem;
}
.blog-hero p {
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* Article card meta row (date / status) */
.card__date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-dim);
}
.card__status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-purple-light);
  border: 1px solid rgba(124, 92, 191, 0.45);
  background: rgba(124, 92, 191, 0.1);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

/* Tag variants reused on blog cards */
.tag--migracion { color: var(--color-coral); }
.tag--l10n { color: var(--color-purple-light); }
.tag--dev { color: var(--color-teal); }

.card--soon { opacity: 0.85; }
.card--soon:hover { transform: none; border-color: var(--color-border); }

/* Inline CTA at the bottom of the listing */
.blog-cta {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--color-border);
}
.blog-cta h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}