/* Shared blog article + index styles (loaded on top of styles.css) */
.article-wrap { width: min(100% - 2rem, 780px); margin: 0 auto; padding: 2rem 0 3rem; }
.article-header { padding: 2rem 0 1rem; }
.article-kicker { color: #196a48; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.article-wrap h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; margin: .5rem 0 1rem; }
.article-meta { color: #4b5c54; font-size: .9rem; margin-bottom: 1.5rem; }
.article-lead { font-size: 1.15rem; line-height: 1.6; color: #1c2f28; margin-bottom: 1.5rem; }
.article-wrap h2 { font-size: 1.5rem; margin: 2rem 0 .8rem; color: #0f3d2e; }
.article-wrap h3 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; }
.article-wrap p, .article-wrap li { line-height: 1.7; }
.article-wrap ul, .article-wrap ol { padding-left: 1.4rem; margin: .8rem 0; }
.article-wrap li { margin: .4rem 0; }
.callout { background: #f5f8f4; border-left: 4px solid #196a48; border-radius: 10px; padding: 1rem 1.2rem; margin: 1.5rem 0; }
.article-cta { background: linear-gradient(135deg, #0f3d2e, #196a48); color: #fff; border-radius: 18px; padding: 2rem; margin: 2.5rem 0; text-align: center; }
.article-cta h3 { color: #fff; margin-top: 0; }
.article-cta p { opacity: .92; margin-bottom: 1.2rem; }
.article-faq { margin-top: 2.5rem; }
.article-faq details { border: 1px solid #e2e5df; border-radius: 10px; padding: .8rem 1rem; margin: .6rem 0; }
.article-faq summary { font-weight: 600; cursor: pointer; }
.article-faq details p { margin-top: .6rem; }
.article-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; color: #12583b; text-decoration: none; font-weight: 600; }
.related { margin-top: 2rem; font-size: .95rem; }
.related a { color: #12583b; font-weight: 600; }
.disclaimer { font-size: .82rem; color: #4b5c54; margin-top: 2rem; border-top: 1px solid #e2e5df; padding-top: 1rem; }
/* Blog index */
.blog-index { width: min(100% - 2rem, 900px); margin: 0 auto; padding: 2.5rem 0 3rem; }
.blog-index h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: .5rem; }
.blog-index .lead { color: #4b5c54; font-size: 1.1rem; margin-bottom: 2rem; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.post-card { display: block; background: #fff; border: 1px solid #e2e5df; border-radius: 14px; padding: 1.3rem; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.post-card:hover { box-shadow: 0 10px 30px rgba(16,32,26,.1); transform: translateY(-2px); }
.post-card .cat { color: #196a48; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.post-card h2 { font-size: 1.2rem; margin: .4rem 0 .5rem; line-height: 1.25; }
.post-card p { color: #4b5c54; font-size: .92rem; line-height: 1.5; margin: 0; }