/* Resources section. Brand colors are hard-coded; swap for your CSS variables if main.css defines them. */
.eyebrow a { color: inherit; text-decoration: none; }
.article-meta { margin-top: 1rem; font-size: 0.9rem; color: #5F645F; }

.article-hero-image { max-width: 960px; margin: 0 auto 3rem; padding: 0 24px; }
.article-hero-image img { display: block; width: 100%; height: auto; border-radius: 8px; }

.article { padding: 56px 0 72px; }
.article-body { font-size: 1.125rem; line-height: 1.75; color: #5F645F; }
.article-body h2 { margin: 2.5rem 0 1rem; color: #3E4D3F; }
.article-body h3 { margin: 2rem 0 0.75rem; color: #3E4D3F; }
.article-body a { color: #3E4D3F; text-decoration: underline; text-decoration-color: #CFA85A; text-underline-offset: 3px; }
.article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.article-body blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 3px solid #B8C3B1; font-family: "Libre Baskerville", Georgia, serif; font-style: italic; color: #3E4D3F; }

.resources-section { padding: 56px 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 2rem; }
.article-card, .category-card { display: block; padding: 28px; background: #fff; border: 1px solid #B8C3B1; border-radius: 10px; color: inherit; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.article-card:hover, .category-card:hover { border-color: #CFA85A; box-shadow: 0 2px 10px rgba(62, 77, 63, 0.08); }
.article-card h3, .category-card h3 { margin: 0.5rem 0; color: #3E4D3F; }
.article-card p, .category-card p { margin: 0 0 1rem; color: #5F645F; }
.article-card__category { font-size: 0.8rem; letter-spacing: 0.04em; color: #3E4D3F; }
.article-card__date { font-size: 0.85rem; color: #5F645F; }
.resources-back { margin-top: 3rem; }

@media (min-width: 1024px) {
  .article { padding: 72px 0 96px; }
  .resources-section { padding: 72px 0; }
}