/* =====================================================
   Blog Grid Widget Styles
   2-column (configurable) grid layout for blog pages.
   ===================================================== */

.ark-blog-grid {
    display: grid;
    gap: 40px 30px;
    padding: 0;
}

/* Column Variants */
.ark-blog-grid--cols-1 {
    grid-template-columns: 1fr;
}

.ark-blog-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ark-blog-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Let the card fill the grid cell instead of using a fixed width */
.ark-blog-grid .ark-insight-card {
    width: 100%;
}

.ark-blog-grid .ark-insight-card__image-wrapper {
    height: auto;
    aspect-ratio: 4 / 3;
}

.ark-blog-grid .ark-insight-card__image {
    height: 100% !important;
    width: 100%;
}

/* Load More Button */
.ark-blog-grid__load-more {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

/* Responsive — single column on small screens */
@media (max-width: 767px) {

    .ark-blog-grid--cols-2,
    .ark-blog-grid--cols-3 {
        grid-template-columns: 1fr;
    }
}