/* ==========================================================================
   CGM Blog Grid Layout
   ========================================================================== */

/* Main wrapper: 45% left column, 55% right column */
.cgm-blog-grid-wrapper {
    display: grid;
    grid-template-columns: 45fr 55fr; 
    gap: 40px;
    width: 100%;
}

/* Wrapper for the right side to stack the two smaller posts */
.cgm-blog-small-posts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 35px;
    justify-content: flex-start; 
}

/* Horizontal layout for the small posts: Image gets 55%, Text gets 45% */
.cgm-blog-small-post {
    display: grid;
    grid-template-columns: 55fr 45fr; 
    gap: 30px;
    align-items: start;
}

/* ==========================================================================
   Images & Orange Badges
   ========================================================================== */

.cgm-blog-img-wrap {
    position: relative;
    border-radius: 15px; 
    overflow: hidden;
    background-color: #e5e5e5; 
}

/* Forces the large image to the exact 626x473 proportions & adds mockup spacing */
.cgm-blog-large-post .cgm-blog-img-wrap {
    aspect-ratio: 626 / 473;
    margin-bottom: 30px; /* INCREASED to match the airy gap in your mockup */
}

/* Forces the small images to the exact 436x330 proportions */
.cgm-blog-small-post .cgm-blog-img-wrap {
    aspect-ratio: 436 / 330;
    margin-bottom: 0;
}

.cgm-blog-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center; 
    display: block;
    transform: scale(1.02); /* Fixes the sub-pixel border bleeding */
    transition: transform 0.4s ease-out; /* NEW: Tells the browser to smoothly animate any scale changes */
}

/* NEW: Subtle hover zoom effect */
.cgm-blog-img-link:hover img {
    transform: scale(1.08); /* Zooms the image in just enough to grab attention */
}

/* The Orange Category Badge */
.cgm-blog-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: #F89820; 
    color: #193A80; 
    padding: 5px 10px; 
    border-radius: 50px; 
    font-size: 14px; 
    font-weight: 700; 
    z-index: 2;
    text-transform: capitalize;
}

/* ==========================================================================
   Typography & Content
   ========================================================================== */

.cgm-blog-content h3, 
.cgm-blog-content h4 {
    color: #193A80; /* Deep blue to match your exact mockup hex */
    margin-top: 0; 
    margin-bottom: 15px;
    line-height: 1.3;
    font-weight: 700;
}

/* NEW: Force the large post title to be prominent */
.cgm-blog-large-post h3 {
    font-size: 28px !important;
}

/* Force the small post titles to be proportionally smaller */
.cgm-blog-small-post h4 {
    font-size: 20px !important; 
}

.cgm-blog-content h3 a, 
.cgm-blog-content h4 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cgm-blog-content h3 a:hover, 
.cgm-blog-content h4 a:hover {
    color: #F89820; 
}

/* Excerpt text styling */
.cgm-blog-content p {
    color: #2B2B2B;
    line-height: 1.6;
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 0;
}

.cgm-blog-content h4,
.cgm-blog-content h3 {
    margin-bottom: 15px !important;
}

/* Learn More Link styling */
.cgm-blog-learn-more {
    color: #3b82f6; 
    font-family: Arial, sans-serif; 
    font-weight: 400; 
    font-size: 16px; 
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

.cgm-blog-learn-more:hover {
    color: #F89820;
}

/* Style the Font Awesome icon inside the Learn More link */
.cgm-blog-learn-more i {
    margin-left: 8px !important;
    font-size: 14px !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important; /* Prepares a smooth slide transition */
}

/* Subtly nudge the arrow to the right when the link is hovered */
.cgm-blog-learn-more:hover i {
    transform: translateX(4px) !important;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

/* Target screens smaller than 992px (Tablets and Phones) */
@media only screen and (max-width: 991px) {
    /* Stack the left and right main columns vertically */
    .cgm-blog-grid-wrapper {
        grid-template-columns: 1fr;
    }
    
    /* Revert small posts back to vertical stacking on small screens */
    .cgm-blog-small-post {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Adjust the small image for mobile */
    .cgm-blog-small-post .cgm-blog-img-wrap {
        aspect-ratio: 626 / 473; 
        margin-bottom: 15px;
    }

    /* NEW: Force the large blog post heading to match the 20px size of the smaller ones on mobile */
    .cgm-blog-large-post h3 {
        font-size: 20px !important;
    }
}