/* assets/css/blog.css */

#blog-section {
    padding: 80px 0;
    background-color: var(--chocolate-dark); /* Alt background if main is too light */
    color: var(--text-light);
}

#blog-section h2 {
    text-align: center;
    margin-bottom: 40px;
}

.blog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-search-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 500px; /* Wider search bar for blog */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.blog-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.blog-search-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.5);
    border-color: var(--accent-green-default);
    background-color: rgba(255, 255, 255, 0.15);
}

.blog-posts-container {
    /* No specific max-height, allow content to flow */
    /* For uniform height in the blog grid (desktop) */
    display: flex; /* Ensure it's a flex container */
    flex-wrap: wrap; /* Allow wrapping to new rows */
    align-items: stretch; /* CRITICAL: Make children stretch to uniform height */
}

.blog-card-col { /* Added this class for the column div to apply flex properties */
    /* Adjust these based on your Bootstrap column structure, e.g., col-md-4, col-lg-3 */
    display: flex; /* Make columns flex containers */
    align-items: stretch; /* Make card fill height */
}

.blog-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-light);
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; /* CRITICAL: Ensure uniform height in rows */
}

.blog-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px); /* Slight lift on hover */
}

.blog-card .card-img-top {
    width: 100%;
    height: 200px; /* Fixed height for image/video thumbnail */
    object-fit: cover; /* Cover entire area */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-card .card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow body to take available space */
}

.blog-card .blog-title {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    color: var(--accent-green-default); /* Highlight blog titles */
}

.blog-card .blog-description {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    flex-grow: 1; /* Allow description to push date down */
}

.blog-card .blog-date {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: auto; /* Push date to bottom */
}

/* YouTube Video Embed Styling */
.blog-card .video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
    background-color: #000;
}

.blog-card .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Column Layout for Blog Cards */
/* Desktop (lg) and up: 3 Columns */
@media (min-width: 992px) {
    .blog-posts-container .blog-card-col { /* Targetting specific class here */
        flex: 0 0 auto;
        width: 33.333%; /* 3 columns on lg screens and up */
        padding-left: 7.5px; /* Add padding to columns if needed, assuming Bootstrap gutter setup */
        padding-right: 7.5px;
    }
}

/* Tablets (sm) to small Desktops (md): 2 Columns */
@media (min-width: 576px) and (max-width: 991.98px) {
    .blog-posts-container .blog-card-col {
        flex: 0 0 auto;
        width: 50%; /* 2 columns on sm and md screens */
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
}

/* Mobile: Default is 1 column, relies on col-12 from JS for grid behavior */

/* --- Mobile Carousel Overrides for Blog --- */
@media (max-width: 767.98px) { /* Applies to all mobile devices */
    .blog-container #blogPostsContainer { /* Target the row containing blog posts */
        display: flex; /* IMPORTANT: Use flex instead of block for better height control */
        flex-wrap: nowrap; /* Keep items in a single line */
        overflow-x: auto; /* Enable horizontal scrolling */
        white-space: nowrap; /* Keep items in a single line */
        scroll-snap-type: x mandatory; /* Snap to items */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-bottom: 15px; /* Space for scrollbar */
        align-items: stretch; /* CRITICAL: Stretch cards to uniform height */
    }

    .blog-container #blogPostsContainer::-webkit-scrollbar {
        display: none; /* Hide scrollbar */
    }
    .blog-container #blogPostsContainer {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    #blogPostsContainer .blog-card-col { /* Target the column div for each card */
        flex: 0 0 auto; /* Allow sizing based on width, prevent shrinking/growing */
        width: 85% !important; /* Make each card take up 85% of screen width */
        max-width: 300px; /* Optional: Limit max width of a single card on mobile */
        scroll-snap-align: start; /* Snap to the start of each card */
        margin-right: 15px; /* Space between cards in carousel */
        white-space: normal; /* Allow content inside card to wrap */
        display: flex; /* Make column a flex container for its card */
        align-items: stretch; /* Make card fill height */
    }

    #blogPostsContainer .blog-card-col:last-child {
        margin-right: 0; /* No margin on the last item */
    }

    /* Adjust padding of main container for mobile carousel */
    .blog-container {
        padding: 0 15px; /* Adjust left/right padding for better edge alignment */
    }
}