/* ============================================================
   AIVON — Blog styles
   ============================================================ */

/* ── Blog index ─────────────────────────────────────────── */
.blog-index { padding-block: var(--space-lg); background: var(--ink); }
.blog-index__inner { max-width: var(--max-w); padding-inline: var(--gutter); margin-inline: auto; }
.blog-index__header { padding-block: var(--space-lg) 3rem; }
.blog-index__eyebrow {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.blog-index__title {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--paper); margin-bottom: 1.25rem;
}
.blog-index__subtitle {
  font-size: var(--text-base); color: var(--paper);
  opacity: 0.65; max-width: 60ch; line-height: 1.7;
}

/* ── Blog grid ──────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem; padding-bottom: var(--space-lg);
}
.blog-card {
  background: var(--ink-2, #121b26);
  border: 1px solid var(--steel);
  border-radius: 12px; padding: 2rem;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none;
}
.blog-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.blog-card__tag {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.blog-card__title {
  font-size: 1.15rem; font-weight: 800;
  color: var(--paper); line-height: 1.3;
  margin-bottom: 0.75rem; letter-spacing: -0.01em;
}
.blog-card__excerpt {
  font-size: var(--text-sm); color: var(--paper);
  opacity: 0.6; line-height: 1.65;
  flex: 1; margin-bottom: 1.5rem;
}
.blog-card__cta {
  font-size: 0.78rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.04em;
}

/* ── Blog article ───────────────────────────────────────── */
.blog-article__header {
  padding-block: 5rem 3rem;
  background: var(--ink);
  border-bottom: 1px solid var(--steel);
}
.blog-article__inner {
  max-width: 72ch; padding-inline: var(--gutter);
  margin-inline: auto;
}
.blog-article__breadcrumb {
  font-size: 0.78rem; color: var(--paper);
  opacity: 0.5; margin-bottom: 1.5rem;
}
.blog-article__breadcrumb a { color: var(--paper); opacity: 0.7; text-decoration: none; }
.blog-article__breadcrumb a:hover { color: var(--gold); opacity: 1; }
.blog-article__category {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.blog-article__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--paper); margin-bottom: 1.25rem;
}
.blog-article__meta {
  font-size: 0.82rem; color: var(--paper);
  opacity: 0.5; display: flex; gap: 0.5rem; align-items: center;
}

/* ── Article body prose ─────────────────────────────────── */
.blog-article__body {
  background: var(--ink); padding-block: 3.5rem;
}
.blog-article__body h2 {
  font-size: 1.35rem; font-weight: 800;
  color: var(--paper); margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.02em; line-height: 1.25;
}
.blog-article__body h2:first-child { margin-top: 0; }
.blog-article__body p {
  font-size: var(--text-base); color: var(--paper);
  opacity: 0.78; line-height: 1.75;
  margin-bottom: 1.1rem;
}
.blog-article__body strong { color: var(--paper); opacity: 1; font-weight: 700; }
.blog-article__body ul {
  margin: 0.5rem 0 1.1rem 1.25rem;
  list-style: disc;
}
.blog-article__body ul li {
  font-size: var(--text-base); color: var(--paper);
  opacity: 0.78; line-height: 1.7; margin-bottom: 0.4rem;
}

/* ── CTA box at end of article ──────────────────────────── */
.blog-cta-box {
  background: var(--ink-2, #121b26);
  border-top: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  padding-block: 3rem;
}
.blog-cta-box__text {
  font-size: 1.15rem; font-weight: 700;
  color: var(--paper); margin-bottom: 1.25rem;
}
.blog-cta-box__btn {
  display: inline-block; background: var(--gold);
  color: var(--ink); font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.03em; padding: 0.85rem 1.75rem;
  border-radius: 8px; text-decoration: none;
  transition: opacity 0.2s;
}
.blog-cta-box__btn:hover { opacity: 0.85; }