/*
 * Blog styles. The theme sets html{font-size:62.5%} (1rem = 10px), so sizes
 * here are in px to stay predictable. Scale: 34 title / 26 section / 19 card
 * title / 16-17 body / 15 secondary / 13-14 meta.
 */
.megamix-blog .mmb-list,
.megamix-blog .mmb-post {
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}
.megamix-blog .mmb-list,
.megamix-blog .mmb-post { padding-top: 24px; }
.megamix-blog .mmb-list .mmb-title,
.megamix-blog .mmb-post .mmb-title,
.megamix-blog.page-layout-1column .mmb-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 20px;
    padding: 0;
}
.mmb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.mmb-cats a,
.mmb-tags a {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    color: inherit;
}
.mmb-cats a:hover, .mmb-tags a:hover { background: #f3f3f3; }

.mmb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.mmb-card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.mmb-card-image { display: block; aspect-ratio: 3 / 2; background: #f3f3f3; overflow: hidden; }
.mmb-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmb-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mmb-card-body time { font-size: 13px; line-height: 1.4; color: #777; }
.mmb-card-body h2,
.mmb-card-body h3 { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 700; }
.mmb-card-body h2 a,
.mmb-card-body h3 a { color: inherit; text-decoration: none; }
.mmb-card-body p { margin: 0; font-size: 15px; line-height: 1.55; color: #444; }
.mmb-more { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.4; }

.mmb-pager { display: flex; gap: 6px; justify-content: center; margin: 32px 0; }
.mmb-pager a,
.mmb-pager span {
    min-width: 36px;
    padding: 6px 10px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    text-decoration: none;
    color: inherit;
}
.mmb-pager span { background: #222; color: #fff; border-color: #222; }
.mmb-empty { padding: 32px 0; font-size: 16px; }

.mmb-post { max-width: 820px; margin: 0 auto; }
.mmb-crumbs { font-size: 14px; margin-bottom: 8px; }
.mmb-meta { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; font-size: 14px; color: #777; }
.mmb-hero { width: 100%; height: auto; border-radius: 6px; margin: 16px 0 24px; }
.mmb-content { font-size: 17px; line-height: 1.75; }
.mmb-content p { margin: 0 0 1em; }
.mmb-content h2 { font-size: 26px; line-height: 1.3; margin: 1.6em 0 .6em; }
.mmb-content h3 { font-size: 21px; line-height: 1.3; margin: 1.4em 0 .5em; }
.mmb-content img { max-width: 100%; height: auto; }
.mmb-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0; }
.mmb-related { margin-top: 48px; }
.mmb-related h2 { font-size: 26px; line-height: 1.3; margin: 0 0 20px; }
.mmb-related .mmb-card-body h3 { font-size: 16px; }