/* --- Main Grid Wrapper --- */
.custom-blog-grid-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.custom-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns grid */
    gap: 30px;
    margin-bottom: 40px;
}

/* --- Individual Post Card --- */
.blog-post-card {
    background-color: #1a1a1a; /* Dark background from your design */
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.blog-post-card a {
    text-decoration: none;
    color: inherit;
}

.blog-post-card .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.blog-post-card .post-content {
    padding: 25px;
}

.blog-post-card .post-title {
    font-family: 'Montserrat', sans-serif; /* Example font, change if needed */
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
}

.blog-post-card .post-title a {
    color: #ffffff;
    transition: color 0.3s ease;
}

.blog-post-card .post-title a:hover {
    color: #c5a47e; /* Gold color on hover */
}

.blog-post-card .post-excerpt {
    font-family: 'Lato', sans-serif; /* Example font */
    font-size: 14px;
    line-height: 1.6;
    color: #cccccc; /* Lighter grey for text */
    margin-bottom: 20px;
}

/* Hides the default [...] from the excerpt */
.blog-post-card .post-excerpt a.more-link {
    display: none;
}

.blog-post-card .read-more {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c5a47e; /* A gold-like color */
    transition: color 0.3s ease;
}

.blog-post-card .read-more:hover {
    color: #ffffff;
}

/* --- Load More Button --- */
.load-more-container {
    text-align: center;
}

.load-more-btn {
    background-color: #c5a47e; /* Gold background */
    color: #111111; /* Dark text */
    border: none;
    padding: 12px 35px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.load-more-btn:hover {
    background-color: #b8986f; /* Slightly darker gold on hover */
}

.load-more-btn:disabled {
    background-color: #777;
    cursor: not-allowed;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
    .custom-blog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 767px) {
    .custom-blog-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}