/* Community blog (blog/templates/blog/*). Builds on the theme's blog page
   markup (main/blog-list.html: .blog-grid cards, .news-list sidebar, page
   header) and the site tokens in style.css / site.css. Only what the theme
   was missing lives here. */

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--mb-space-5); }
.blog-grid .card { height: 100%; }
.blog-grid .card-img-top { aspect-ratio: 16 / 10; object-fit: cover; }
.blog-grid .card-body { display: flex; flex-direction: column; }
.blog-grid .post-title a { color: var(--mb-ink); text-decoration: none; }
.blog-grid .post-title a:hover { color: var(--mb-blue); }
.blog-grid .card-footer { background: transparent; border-top: 1px solid var(--mb-line); }
.blog-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
.blog-avatar--initials { display: inline-grid; place-items: center; background: var(--mb-blue-tint); color: var(--mb-blue); font-weight: 700; }
.blog-hero .bg-image { object-fit: cover; }
.blog-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mb-space-2); margin-top: var(--mb-space-6); }
.blog-pages a, .blog-pages span { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mb-line); border-radius: var(--mb-radius-md); color: var(--mb-ink); text-decoration: none; font-weight: 600; }
.blog-pages a:hover { border-color: var(--mb-blue); color: var(--mb-blue); }
.blog-pages .current { background: var(--mb-blue); border-color: var(--mb-blue); color: var(--mb-white); }
.blog-side h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--mb-space-3); }
.blog-side .news-title a { color: var(--mb-ink); text-decoration: none; }
.blog-side .news-title a:hover { color: var(--mb-blue); }
.blog-side .list-separator a.is-active span { color: var(--mb-blue); text-decoration: underline; }
.blog-cta { background: var(--mb-blue-tint); border-radius: var(--mb-radius-lg); padding: var(--mb-space-5); }

/* post page */
.blog-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-space-2) var(--mb-space-4); color: var(--mb-muted); font-size: var(--mb-fs-small); }
.blog-featured { border-radius: var(--mb-radius-lg); overflow: hidden; margin-bottom: var(--mb-space-5); }
.blog-featured img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.blog-body { font-size: 1.0625rem; line-height: 1.75; max-width: var(--mb-measure); }
.blog-body h2 { font-size: var(--mb-fs-h2); margin: var(--mb-space-6) 0 var(--mb-space-3); }
.blog-body h3 { font-size: var(--mb-fs-h3); margin: var(--mb-space-5) 0 var(--mb-space-2); }
.blog-body h4 { font-size: var(--mb-fs-h4); margin: var(--mb-space-5) 0 var(--mb-space-2); }
.blog-body blockquote { border-left: 3px solid var(--mb-blue); padding: var(--mb-space-2) var(--mb-space-4); color: var(--mb-muted); margin: var(--mb-space-4) 0; }
.blog-body img { max-width: 100%; height: auto; border-radius: var(--mb-radius-md); }
.blog-body a { color: var(--mb-blue); }

/* Protected previews use the same reading measure and shared public colours. */
.blog-reading-surface { width: 100%; max-width: 866px; box-sizing: border-box; background: var(--mb-brand-white); color: var(--mb-brand-ink); }
.blog-reading-surface .blog-body { max-width: 800px; font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.blog-reading-surface .blog-body :is(h2,h3,h4) { color: var(--mb-brand-ink); }
.blog-reading-surface .blog-body a { color: var(--mb-brand-primary); }
.blog-reading-surface .blog-body a:hover { color: var(--mb-brand-hover); }
.blog-reading-surface .blog-post-meta { color: var(--mb-brand-muted); }
.blog-reading-surface .blog-body blockquote { padding: 20px; border-color: var(--mb-brand-primary); background: var(--mb-brand-section); }
.blog-reading-surface .blog-body > blockquote:last-child strong a { display: inline-block; padding: 10px 16px; border-radius: 4px; background: var(--mb-brand-primary); color: var(--mb-brand-white); text-decoration: none; }
.blog-reading-surface .blog-body > blockquote:last-child strong a:hover { background: var(--mb-brand-hover); }
.blog-reading-surface :where(a,button):focus-visible { outline: 3px solid var(--mb-brand-primary); outline-offset: 3px; }
.blog-reading-surface .blog-featured img { height: auto; object-fit: contain; }
@media (max-width: 575.98px) { .blog-reading-surface .blog-body { font-size: 15px; line-height: 1.85; } }
.blog-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--mb-space-3); margin: var(--mb-space-5) 0; }
.blog-gallery figure { margin: 0; }
.blog-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mb-radius-md); }
.blog-gallery figcaption { font-size: var(--mb-fs-small); color: var(--mb-muted); margin-top: var(--mb-space-1); }
.blog-video { margin: var(--mb-space-5) 0; border-radius: var(--mb-radius-lg); overflow: hidden; background: var(--mb-scrim); }
.blog-report { border-top: 1px solid var(--mb-line); margin-top: var(--mb-space-6); padding-top: var(--mb-space-4); }
.blog-report summary { cursor: pointer; color: var(--mb-muted); font-size: var(--mb-fs-small); font-weight: 600; }
.blog-report summary:hover { color: var(--mb-red); }
.blog-guidelines-draft { background: var(--mb-amber-tint); border: 1px solid var(--mb-amber-border); border-radius: var(--mb-radius-md); padding: var(--mb-space-3) var(--mb-space-4); }

/* editor (inside the dashboard shell; tabs/panes/nav reuse claim.css) */
.blog-type-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--mb-space-3); }
.blog-type-options label { display: flex; gap: var(--mb-space-2); align-items: flex-start; padding: var(--mb-space-3); border: 1px solid var(--mb-line-strong);
    border-radius: var(--mb-radius-md); cursor: pointer; font-weight: 600; }
.blog-type-options input { margin-top: 4px; }
.blog-type-options label:has(input:checked) { border-color: var(--mb-blue); background: var(--mb-blue-tint); }
.blog-type-options small { display: block; font-weight: 400; color: var(--mb-muted); }
.blog-img-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--mb-space-3); padding: var(--mb-space-3) 0; border-top: 1px solid var(--mb-line); }
.blog-img-row img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--mb-radius-sm); }
.blog-picked { display: flex; flex-wrap: wrap; gap: var(--mb-space-2); margin-top: var(--mb-space-2); }
.blog-picked .mb-chip { display: inline-flex; align-items: center; gap: 6px; }
.blog-picked button { border: 0; background: none; padding: 0; line-height: 1; color: inherit; }
.blog-search-results { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--mb-line); border-radius: var(--mb-radius-md); max-height: 240px; overflow: auto; }
.blog-search-results:empty { display: none; }
.blog-search-results button { width: 100%; text-align: left; border: 0; background: var(--mb-paper); padding: 8px 12px; }
.blog-search-results button:hover, .blog-search-results button:focus { background: var(--mb-blue-tint); outline: none; }
.blog-status { font-size: var(--mb-fs-caption); font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.blog-status--draft { background: var(--mb-paper-alt); color: var(--mb-muted); border: 1px solid var(--mb-line); }
.blog-status--pending_review { background: var(--mb-amber-tint); color: var(--mb-amber-text); }
.blog-status--published { background: var(--mb-green-tint); color: var(--mb-green); }
.blog-status--rejected, .blog-status--removed { background: var(--mb-red-tint); color: var(--mb-red); }
.blog-status--changes_requested { background: var(--mb-amber-tint); color: var(--mb-amber-text); }
.blog-posting-notice, .blog-review-flags { padding: 16px 20px; border: 1px solid var(--mb-line); border-radius: 4px; background: var(--mb-paper); color: var(--mb-ink); line-height: 1.7; }
.blog-posting-notice a, .blog-review-flags a { color: var(--mb-accent); text-decoration: underline; }
@media (max-width: 575.98px) { .blog-grid { grid-template-columns: 1fr; } }