/* Blog grid styles for template-blog-grid.php */
.asbmeb-blog-grid-wrap { padding: 4px 0 0 0; }

/* Make the blog section full-bleed (edge-to-edge) while keeping inner content centered */
.asbmeb-blog-grid-wrap {
    position: relative;
    width: calc(100% + 60px); /* expand by the left/right offsets */
    margin-left: -30px;
    margin-right: -30px;
    box-sizing: border-box;
    /* small top offset to separate the grid from preceding content */
    padding: 4px 0 0 0;
}

/* Keep inner container centered and constrained (matches other sections) */
.asbmeb-blog-grid-wrap > .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Force the blog section's inner container to 1300px so the grid fills that width.
   Scoped to the blog section to avoid changing other containers. Use !important to
   override builder container limits. */
.asbmeb-blog-grid-wrap > .container {
    max-width: 1330px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
}

/* Ensure the grid itself uses full width of the container */
.asbmeb-blog-grid .asbmeb-grid { width: 100%; }

/* If the theme builder row sets a max-width (e.g. 1300px) it can constrain
   our blog grid. When JS marks the parent row with .asbmeb-blog-row we remove
   that constraint so the blog grid can align with #anews and other fullwidth blocks. */
.asbmeb-blog-row {
    max-width: none !important;
    width: 100% !important;
}

/* Keep the same side offsets used elsewhere so widths align visually */
.asbmeb-blog-row .asbmeb-blog-grid-wrap {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
}

/* Force 3 columns on desktop */
.asbmeb-blog-grid .asbmeb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

/* Make each card a flex column so content can be arranged and equalized */
.asbmeb-grid-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .15s ease;
    display: flex;
    flex-direction: column;
    height: 400px; /* fixed desktop card height to equalize all cards */
    box-sizing: border-box;
}
.asbmeb-grid-item:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.asbmeb-grid-link { color: inherit; display: block; text-decoration: none; }
.asbmeb-grid-thumb { flex: 0 0 auto; }
.asbmeb-grid-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; padding: 0; box-sizing: border-box; }

/* Remove the top padding above images inside individual blog grid cards so
   thumbnails sit flush to the top of the card. Keep bottom padding for
   spacing between the image and the card body. This targets images only
   inside the blog grid to avoid affecting other uses of .asbmeb-grid-thumb. */
.asbmeb-blog-grid .asbmeb-grid-thumb img {
    padding: 0 !important;
}
.asbmeb-grid-body { padding: 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
.asbmeb-grid-title {
    font-size: 24px !important;
    margin: 0 0 8px; /* reduced bottom margin so date can sit closer */
    color: #222;
    line-height: 1.2;
    /* small top padding so titles don't sit flush against the element above */
    padding-top: 4px;
    /* clamp to maximum 2 lines with an ellipsis if longer */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
/* Removed specific post ID rule in favor of a global rule on
    .asbmeb-grid-title so all grid titles receive consistent spacing. */
.asbmeb-grid-excerpt { 
    color: #666; 
    font-size: 14px; 
    line-height: 1.5; 
    margin-bottom: 8px;
    /* Limit to 3 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 3); /* 3 lines at line-height 1.5 */
}

/* Show Read More text after the excerpt */
.asbmeb-readmore {
    display: inline;
    margin-left: 4px;
    color: #034272;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

/* Date shown under the grid title inside each card */
.asbmeb-grid-date {
    font-size: 13px;
    color: #034272; /* updated per request */
    margin-bottom: 12px;
}

/* Pagination wrapper */
.asbmeb-pagination { 
    margin-top: 28px; 
    text-align: center; 
}
.asbmeb-pagination ul { list-style: none; display: inline-flex; gap: 8px; padding: 0; margin: 0; align-items: center; }
.asbmeb-pagination li { display: inline-block; }
.asbmeb-pagination a, .asbmeb-pagination .page-numbers { display: inline-block; padding: 8px 12px; border-radius: 6px; border: 1px solid #e6e6e6; color: #333; text-decoration: none; font-weight: 500; }
.asbmeb-pagination a:hover, .asbmeb-pagination a:focus { background: #f5f5f5; border-color: #dcdcdc; outline: none; }
.asbmeb-pagination .current { background: #222; color: #fff; border-color: #222; }
.asbmeb-pagination .dots { padding: 8px 10px; color: #666; border: none; background: transparent; }
.asbmeb-pagination .prev a, .asbmeb-pagination .next a { font-weight: 600; }

/* Loading state for pagination buttons: show a small spinner inside the button
   while keeping its size. The .loading class is applied to the <a> element.
*/
.asbmeb-pagination .page-numbers.loading {
    position: relative;
    color: transparent; /* hide text while spinner shows */
    pointer-events: none;
}
.asbmeb-pagination .page-numbers.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0,0,0,0.25);
    border-top-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    box-sizing: border-box;
    animation: asbmeb-spin 0.8s linear infinite;
}

@keyframes asbmeb-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Disabled/aria-disabled state */
.asbmeb-pagination .page-numbers.disabled, .asbmeb-pagination a[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Small screens: smaller padding and wrap */
@media (max-width: 480px) {
    .asbmeb-pagination ul { gap: 6px; flex-wrap: wrap; }
    .asbmeb-pagination a, .asbmeb-pagination .page-numbers { padding: 6px 8px; font-size: 14px; }
}

/* Responsive: 2 columns on medium screens, 1 on small */
@media (max-width: 1000px) {
    .asbmeb-blog-grid .asbmeb-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* Slightly reduce card heights and thumbnail for medium screens */
    .asbmeb-grid-item { height: 320px; }
    .asbmeb-grid-thumb img { height: 160px; }
    .asbmeb-grid-title { font-size: 20px !important; }
}

@media (max-width: 600px) {
    .asbmeb-blog-grid .asbmeb-grid { grid-template-columns: 1fr; gap: 16px; }
    /* Use auto height on small screens so cards can shrink to content size */
    .asbmeb-grid-item { height: auto; }
    .asbmeb-grid-thumb img { height: 140px; }
    .asbmeb-grid-body { padding: 12px; }
    .asbmeb-grid-title { font-size: 18px !important; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
}

/* When the viewport is narrower than the large container width, stop forcing
   the blog wrap to full-bleed with negative margins — allow the normal
   page padding to apply so left/right padding works on smaller displays. */
@media (max-width: 1330px) {
    .asbmeb-blog-grid-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    /* If JS marked the parent row, prevent the special full-bleed override
       from applying on smaller screens. */
    .asbmeb-blog-row .asbmeb-blog-grid-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    /* Ensure the inner container keeps its normal gutters */
    .asbmeb-blog-grid-wrap > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Ensure blog post images have comfortable vertical spacing
   Applies to images inside common blog/content containers. */
.blogs img,
.blog-post img,
.entry-content img,
.post img,
article img {
    padding-top: 32px;
    padding-bottom: 32px;
    display: block;
    box-sizing: border-box;
    /* center horizontally */
    margin-left: auto;
    margin-right: auto;
    /* ensure images scale down on narrow viewports but keep natural size when available */
    max-width: 100%;
    height: auto;
}

/* Gutenberg / block editor alignment helpers: ensure front-end shows block alignment
   classes (e.g. when the editor outputs `has-text-align-center`). These are safe
   and scoped to entry content so they won't affect other parts of the site. */
.entry-content .has-text-align-left { text-align: left; }
.entry-content .has-text-align-center { text-align: center; }
.entry-content .has-text-align-right { text-align: right; }
.entry-content .has-text-align-justify { text-align: justify; }

/* Limit images on individual Blog (single 'blog' CPT) pages to 800px wide
   while keeping them responsive (height:auto). This overrides the more
   general `max-width: 100%` rule above when viewing a single blog post. */
.single-blog .entry-content img,
.single-blog .post img,
.single-blog article img,
.single-blog .blogs img,
.single-blog .blog-post img {
    max-width: 1000px;
    width: 100%; /* allow images to scale down on narrow viewports */
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Make the single blog post title render at h3 size so it's visually smaller
   than page headings but still prominent. This targets common title selectors
   used by themes/plugins while scoped to `.single-blog` so it doesn't affect
   archive or grid titles. */
.single-blog .entry-title,
.single-blog article .entry-title,
.single-blog .blog-post .entry-title {
    font-size: 1.17em; /* equivalent to a browser default h3 */
    line-height: 1.3;
    margin: 0 0 16px;
    font-weight: 600;
}

/* More specific override for Avada/Fusion classes which set h1.fusion-post-title
   from a bundled stylesheet. This rule uses a more specific selector and
   !important to ensure the h1 on single blog pages is displayed at h3 size. */
.single-blog h1.fusion-post-title,
.single-blog .fusion-post-title,
.single-blog h1.entry-title {
    font-size: 1.17em !important;
    line-height: 1.3 !important;
    margin: 0 0 16px !important;
    font-weight: 600 !important;
}

/* Limit the readable text column on single blog posts to 1000px and center it.
   The page's outer fusion row uses --site_width (1300px), so constrain the
   inner `.post-content` to create a comfortable text measure. */
.single-blog article.post .post-content,
.single-blog .entry-content,
.single-blog .fusion-post-content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Justify paragraph text on single blog pages for a cleaner measure */
.single-blog .entry-content,
.single-blog .post-content,
.single-blog .fusion-post-content {
    text-align: justify;
    text-justify: inter-word;
}

/* Hide the featured image on single blog posts. Targets common featured
   image containers and the WordPress "wp-post-image" class which is added
   when the theme outputs the post thumbnail. */
.single-blog img.wp-post-image,
.single-blog .post .post-thumbnail,
.single-blog .fusion-post-slideshow,
.single-blog .fusion-post-featured-image,
.single-blog .fusion-post-image {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Avada's "About the Author" section on single blog posts. If a template
   edit isn't available in the child theme, hiding with CSS is non-destructive. */
.single-blog section.about-author,
.single-blog #post-2428 > section {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}