/* ========================================================= */
/* LATEST BLOG POSTS SECTION - CUSTOM STYLES */
/* Uses prefix 'blog-list-' for unique styling */
/* ========================================================= */

.blog-list-section {
    /* Optional: Simulating Tailwind's container/mx-auto/px-4 */
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

/* --- 1. Section Header --- */

.blog-list-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem; /* mb-8 */
}

h2.blog-list-section-title{
    font-size: 1.6rem; 
    font-weight: 700;
    color: #292524; /* text-stone-900 */
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* mb-2 */
    line-height: 1.2;
    
}

.blog-list-section-subtitle {
    font-size: 1rem;
    color: #78716c; /* text-stone-600 */
    margin: 0;
}

/* View All Posts Link */
.blog-list-view-all {
    display: none;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    font-size: 1rem;
    font-weight: 400;
    color: #b45309; /* text-amber-700 */
    text-decoration: none;
    transition: color 0.2s;
}

/* Visible only on tablet/desktop */
@media (min-width: 768px) {
    .blog-list-view-all {
        display: flex; /* md:flex */
    }
}

.blog-list-view-all:hover {
    color: #b45309; /* hover:text-amber-800 */
}

/* Lucide ArrowRight Icon */
.blog-list-view-all-icon,
.blog-list-view-all-icon svg {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    stroke: currentColor; /* Inherit color from parent link */
    stroke-width: 1.8;
}


/* --- 2. Grid Container & Responsiveness --- */

.blog-list-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 1.5rem; /* gap-6 */
}

/* Tablet Layout (md: 768px+) */
@media (min-width: 768px) {
    .blog-list-grid-container {
        grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
    }
}


/* --- 3. Blog Card (Link) --- */

.blog-list-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; /* shadow-sm */
    transition: box-shadow 0.3s;
    overflow: hidden;
    text-decoration: none;
    height: 100%;
}

.blog-list-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* hover:shadow-md */
}

/* --- 4. Image --- */

.blog-list-image-wrap {
    position: relative;
    height: 15rem; /* h-48 */
    overflow: hidden;
}

.blog-list-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out; /* duration-300 */
}

.blog-list-card:hover .blog-list-image {
    transform: scale(1.05); /* group-hover:scale-105 */
}

/* --- 5. Content --- */

.blog-list-content-wrap {
    padding: 1.25rem; /* p-5 */
    flex-grow: 1;
}

/* Meta Bar */
.blog-list-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem; /* text-xs */
    color: #a8a29e; /* text-stone-500 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.blog-list-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
}

/* Lucide Calendar/Clock Icons */
.blog-list-meta-icon,
.blog-list-meta-icon svg {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    stroke: #a8a29e;
    stroke-width: 2.5;
}

/* Title */
.blog-list-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600;
    color: #292524; /* text-stone-900 */
    margin-top: 0;
    margin-bottom: 0.8rem; /* mb-2 */
    transition: color 0.2s;
    line-height: 1.3;
}

.blog-list-card:hover .blog-list-title {
    color: #b45309; /* group-hover:text-amber-700 */
}

/* Excerpt */
.blog-list-excerpt {
    font-size: 0.875rem; /* text-sm */
    color: #78716c; /* text-stone-600 */
    margin: 0;
    line-height: 1.4;
    /* line-clamp-2 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    h2.blog-list-section-title {
        font-size: 1.3rem;
    }
    .blog-list-header-wrap {
        justify-content: center;
        flex-direction: column;
        gap: 20px;
    }
}