/* =============================================
   NEW CARD STYLING FOR BLOG MODULE
   ============================================= */

/* 1. Set up the main grid container */
/* We remove the fixed flex/max-width approach and use modern CSS Grid */
.blog-index {
    display: grid;
    /* This creates a responsive grid that fits 300px wide columns, spanning 3 total */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Space between the cards */
    padding: 20px 0;
}

/* 2. Standard Card Styling */
.blog-card {
    box-sizing: border-box; 
    border-radius: 12px; /* Rounded corners */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: #fff; 
}

/* 3. The inner wrapper that has the background image */
.blog-card-inner {
    height: 550px; /* Set a fixed height for a consistent card size */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes top and bottom meta areas to the edges */
    padding: 40px; /* Internal padding for text */
    position: relative;
    color: white !important; /* Default text color on the dark background */
    overflow: hidden;
}

/* Optional: Add a subtle overlay so text is readable on light images */
.blog-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* Subtle dark overlay */
    border-radius: 12px;
    z-index: 0;
}

/* Ensure all text/elements are above the overlay */
.blog-card-meta-top, 
.blog-card-content, 
.blog-card-meta-bottom {
    position: relative;
    z-index: 1;
}

/* Top Meta (Read Time) */
.blog-card-meta-top .read-time {
    font-size: 20px !important;
    align-items: top;
}

/* Content (Title area) */
.blog-card-content {
    flex-grow: 1; 
    display: flex;
    align-items: top; 
    padding-top: 20px;
    text-align: left;
}

/* Title Link Styling */
.blog-post-title {
    color: #fff !important;
    font-size: 50px;
    line-height: inherit;
    margin: 0 auto;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Title Hover Styling */
.blog-post-title:hover {
    color: #dddddd; /* New font color on hover */
}

/* Bottom Meta (Date and Button) */
.blog-card-meta-bottom {
    display: flex;
    justify-content: space-between; /* Pushes date left, button right */
    align-items: flex-end; /* Aligns both items to the bottom vertically */
}

.blog-card-meta-bottom .publish-date {
     font-size: 18px !important;
     text-transform: capitalize; 
}
/* 1. Ensure the container is ready for a positioned overlay */
.blog-card-inner {
    position: relative; /* Essential for positioning the ::before element correctly */
    /* Add a smooth transition for the overlay effect */
    transition: background-color 0.3s ease; 
}

/* 2. Create the base overlay using ::before */
.blog-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0); /* Starts fully transparent (0% black) */
    border-radius: 12px; /* Matches your card corners */
    z-index: 0; /* Stays behind content, but above the background image */
    
    /* Add a smooth transition for the color change */
    transition: background-color 0.3s ease;
}

/* 3. Define the hover state on the parent .blog-card */
.blog-card:hover .blog-card-inner::before {
    background-color: rgba(0, 0, 0, 0.2); /* Changes to 20% black overlay on hover */
}

/* 4. Keep your text above the overlay */
.blog-card-meta-top, 
.blog-card-content, 
.blog-card-meta-bottom {
    position: relative;
    z-index: 1;
}



/* =============================================
   RESPONSIVENESS
   ============================================= */
  @media screen and (max-width: 1300px) {
    .blog-post-title {
      font-size: 30px !important;
    }
  }
}
@media (max-width: 600px) {
     /* Stack all cards on mobile */
     .blog-index {
        grid-template-columns: 1fr; 
    }
    .blog-card-inner {
        height: 400px; /* Reduce height slightly for mobile view */
    }
}