/**
 * Post Image Gallery – Frontend Styles
 *
 * Styles for [post_gallery] shortcode.
 * Renders a responsive grid of images that link to their full-size version.
 *
 * @package BrineAndBloom
 */

/* ============================================================
   GRID CONTAINER
   ============================================================ */

.bnb-post-gallery {
    display: grid;
    grid-template-columns: repeat(var(--bnb-gallery-cols, 3), 1fr);
    gap: 8px;
    width: 100%;
}

/* 2 columns on tablet (regardless of shortcode columns setting) */
@media (max-width: 768px) {
    .bnb-post-gallery {
        grid-template-columns: repeat(min(var(--bnb-gallery-cols, 3), 2), 1fr);
    }
}

/* 1 column on mobile */
@media (max-width: 480px) {
    .bnb-post-gallery {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   GALLERY ITEMS
   ============================================================ */

.bnb-gallery-item {
    display: block;
    overflow: hidden;
    line-height: 0;
}

.bnb-gallery-item:hover .bnb-gallery-img {
    transform: scale(1.04);
}

/* ============================================================
   IMAGES
   ============================================================ */

.bnb-gallery-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}