/* --- Reusable Blog Grid Container (Strict 4-Column Rule) --- */
/* --- Reusable Blog Grid Container (With Added Width Containment & Padding) --- */
.blog-grid-holder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    
    /* 🟢 THIS ADDS BREATHING ROOM ON SIDES AND SPACING TOP/BOTTOM */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 15px; 
    box-sizing: border-box;
}


/* --- Clean Modern Blog Card Layout --- */
.blog-card {
    background: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Cards won't stretch weirdly when alone anymore because they follow 1fr columns */
    max-width: 100%; 
	    /* 🟢 APPLIES POPPINS TO THE ENTIRE CARD */
    /* font-family: 'Poppins', sans-serif; */
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.blog-card img {
    width: 100%;
    height: 180px; /* Slightly tighter height for 4-column cards */
    object-fit: cover;
}


/* --- Author & Date Meta Line Layout --- */
.blog-card-meta {
	font-family: sans-serif;
    font-size: 0.85rem;
    color: #8c98a5; /* Sleek, modern grey */
    margin: 0 15px 12px 15px;
    font-family: sans-serif;
    font-weight: 500;
}

/* --- Mockup Red Accents for Read More Action --- */
.blog-card a {
    display: inline-block;
    color: #b30000; /* Beautiful dark red text string */
    text-decoration: none;
    font-weight: 700;
    margin: 0 15px 15px 15px;
    transition: transform 0.2s ease, color 0.2s ease;
    font-size: 0.95rem;
}
.blog-card a:hover {
    color: #800000;
    transform: translateX(3px); /* Subtle shift animation forward on hover */
}


.blog-card h3 {
    font-family: 'Poppins', sans-serif;
	font-size: 1.15rem; /* Balanced down slightly for 4-column rows */
    color: #0b1a30;
    margin: 15px 15px 10px 15px;
    line-height: 1.4;
	text-decoration: none;
}

.blog-card p {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
    margin: 0 15px 15px 15px;
    flex-grow: 1;
}
.blog-card a {
    display: inline-block;
    color: #0056b3;
    text-decoration: none;
    font-weight: 700;
    margin: 0 15px 15px 15px;
    transition: color 0.2s ease;
    font-size: 0.9rem;
}
/* Safely isolates just the title link so it can behave differently */
/* --- Dedicated Title Link Style --- */
/*.blog-card .title-link {
    display: block !important;
    
    /* 🎯 PERFECT ALIGNMENT: Top (15px), Right (0px), Bottom (10px), Left (15px) */
 /*   padding: 15px 0px 10px 15px !important;
    margin: 0 !important; /* Overrides default link margins completely */
    
  /*  color: inherit; /* Keeps your beautiful dark #0b1a30 heading color */
  /*  text-decoration: none; /* Removes default browser link underline */
   /* font-family: inherit;
    font-size: inherit;
    font-weight: inherit;*/
}

.blog-card a:hover {
    color: #000066;
}

/* --- 🔘 VIEW ALL POSTS CONTAINER BUTTON --- */
.blog-view-more-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}
.blog-view-more-btn {
    display: inline-block;
    background-color: #000066;
    color: #ffffff;
    padding: 14px 35px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.blog-view-more-btn:hover {
    background-color: #0b1a30;
    transform: scale(1.03);
}

/* Automatically hides card number 9, 10, 11+ on this specific feed section */
.blog-grid-holder .blog-card:nth-child(n+9) {
    display: none !important;
}


/* ==========================================
   📱 FLUID RESPONSIVE BREAKPOINTS
   ========================================== */
@media screen and (max-width: 1024px) {
    /* Shifts gracefully to 2 columns on tablets */
    .blog-grid-holder {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media screen and (max-width: 600px) {
    /* Stacks perfectly 1-by-1 on mobile phones */
    .blog-grid-holder {
        grid-template-columns: 1fr;
    }
    .blog-view-more-btn {
        width: 100%;
        box-sizing: border-box;
    }
}