/* =====================================================
   Blog — article layout (/blog/<slug>) and index (/blog)
   Loaded via master.css AND linked directly on blog pages
   (production serves a flattened master.css bundle).
   ===================================================== */

.mw-article-head {
    background: var(--bg-green-tint, #f0f7f4);
    padding: 48px 0 40px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.mw-article-head .breadcrumb { margin-bottom: 18px; font-size: 0.9rem; }
.mw-article-head .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--text-light, #6a6a6a); }
.mw-article-head .breadcrumb-list li + li::before { content: "/"; margin-right: 6px; color: var(--text-light, #6a6a6a); }
.mw-article-head .breadcrumb-list a { color: var(--color-primary, #2D8659); text-decoration: none; }
.mw-article-title {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.15;
    max-width: 860px;
    margin: 0 0 16px;
    color: var(--text-dark, #1a1a1a);
}
.mw-article-standfirst {
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 760px;
    color: var(--text-medium, #4a4a4a);
    margin: 0 0 18px;
}
.mw-article-meta { font-size: 0.92rem; color: var(--text-light, #6a6a6a); display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.mw-article-author { color: var(--text-dark, #1a1a1a); font-weight: 600; }

.mw-article-hero { margin: 0; padding: 32px 0 0; }
.mw-article-hero img { width: 100%; max-width: 1000px; height: auto; display: block; margin: 0 auto; border-radius: var(--radius-lg, 18px); }

.mw-article-body .rich-text-content { font-size: 1.08rem; }
.mw-article-body .rich-text-content h2 { font-family: var(--font-heading, 'Playfair Display', Georgia, serif); font-size: 1.7rem; margin-top: 2.2rem; }
.mw-article-body .rich-text-content h3 { font-size: 1.25rem; }
.mw-article-body .faq-list { margin-top: 1rem; }
.mw-article-body .faq-item { border-top: 1px solid var(--border-color, #e0e0e0); padding: 16px 0; }
.mw-article-body .faq-question { margin: 0 0 6px; font-size: 1.1rem; color: var(--text-dark, #1a1a1a); }
.mw-article-body .faq-answer { margin: 0; }
.mw-article-body .article-cta { margin-top: 2rem; padding: 18px 22px; background: var(--bg-green-tint, #f0f7f4); border-left: 4px solid var(--color-primary, #2D8659); border-radius: var(--radius-sm, 6px); font-weight: 600; }

.mw-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
.mw-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 12px);
    padding: 22px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease);
}
.mw-blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mw-blog-card img { width: calc(100% + 44px); margin: -22px -22px 18px; height: 180px; object-fit: cover; border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0; }
.mw-blog-card h2, .mw-blog-card h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; color: var(--text-dark, #1a1a1a); }
.mw-blog-card p { color: var(--text-medium, #4a4a4a); line-height: 1.6; margin: 0 0 14px; flex: 1; }
.mw-blog-card__meta, .mw-blog-card__more { font-size: 0.88rem; color: var(--color-primary, #2D8659); font-weight: 600; }
.mw-blog-all { text-align: center; margin: 28px 0 0; }
.mw-blog-all a { color: var(--color-primary, #2D8659); font-weight: 600; text-decoration: none; }

.mw-blog-empty { text-align: center; max-width: 620px; margin: 0 auto; }
.mw-blog-empty h2 { margin-bottom: 12px; }
.mw-blog-pagination { display: flex; justify-content: center; gap: 24px; align-items: center; margin-top: 36px; color: var(--text-light, #6a6a6a); }
.mw-blog-pagination a { color: var(--color-primary, #2D8659); font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
    .mw-article-head { padding: 32px 0 28px; }
    .mw-blog-card img { height: 150px; }
}