/* ==========================================================================
   PostBoard Media · Blog styles
   Builds on site.css + content.css. Index list + article extras. No inline styles.
   ========================================================================== */

/* Breadcrumb (top of article) */
.breadcrumb {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream-70);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Article meta (byline / date / read time) */
.post-meta {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .04em;
  color: var(--cream-70);
  margin-top: var(--space-5);
}

/* Tags */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.post-tag {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--gold-ink-2);
  background: var(--gold-12);
  border: 1px solid var(--gold-25);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* Blog index list */
.post-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 28px 88px;
  display: grid;
  gap: 22px;
}
.post-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.post-card .post-date {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
}
.post-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--navy);
  line-height: 1.2;
  margin: 8px 0 10px;
}
.post-card p { color: var(--slate); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 12px; }
.post-card .read-more { font-weight: 600; color: var(--gold-ink); font-size: var(--fs-sm); }

/* In-article CTA box */
.article-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  border-radius: var(--radius-xl);
  padding: 32px 34px;
  margin: 40px 0 8px;
}
.article-cta h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-lg); color: var(--cream); margin: 0 0 8px; }
.article-cta h3 em { color: var(--gold); font-style: italic; }
.article-cta p { color: var(--cream-82); font-size: var(--fs-sm); margin: 0 0 16px; }

@media (max-width: 700px) {
  .post-list { padding: 40px 20px 64px; }
}