/* ===== MASONRY LAYOUT USING CSS COLUMNS ===== */
.gallery {
    column-count: 3;
    /* number of columns */
    column-gap: 20px;
    /* space between columns */
    max-width: 1200px;
    /* fixed max width */
    margin: 0 auto;
}

/* ===== EACH GALLERY ITEM ===== */
.gallery-item {
    break-inside: avoid;
    /* prevent item splitting across columns */
    margin-bottom: 20px;
    /* vertical gap between items */
}

/* ===== IMAGE WRAPPER (anchor for the title) ===== */
.gallery-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: visible;
    /* IMPORTANT: lets title stick out */
    /* Extra bottom padding to make room for the protruding title */
    margin-bottom: 25px;
}

.gallery-image-wrapper img {
    display: block;
    width: 100%;
    /* fill column width */
    height: auto;
    /* natural aspect ratio = mosaic effect */
    border-radius: 12px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ===== HOVER EFFECT ON IMAGE ===== */
.gallery-image-wrapper:hover img {
    transform: scale(1.03);
    filter: brightness(0.85);
}

/* ===== TITLE BOX — half in, half out ===== */
.gallery-title {
    position: absolute;
    bottom: -15px;
    /* push half outside the image */
    left: 50%;
    transform: translateX(-50%);
    /* center horizontally */
    width: 80%;
    background: rgba(255, 255, 255, 0.75);
    color: #222222;
    text-align: center;
    padding: 3px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.4x;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    z-index: 2;
    /* Smooth transition on hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Title hover lift */
.gallery-image-wrapper:hover .gallery-title {
    transform: translateX(-50%) translateY(-4px);
    box-shadow: 0 8px 25px rgba(93, 69, 96, 0.5);
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 1200px) {
    .gallery {
        column-count: 3;
    }
}

@media (max-width: 800px) {
    .gallery {
        column-count: 2;
    }
}

@media (max-width: 500px) {
    .gallery {
        column-count: 1;
        max-width: 400px;
    }
}


/* ===== GRID MODE: varying width & height ===== */
/* ===== GRID MODE: varying width & height ===== */
.gallery.gallery--grid {
    /* Reset column-based layout */
    column-count: unset;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: dense;
}

.gallery.gallery--grid .gallery-item {
    break-inside: unset;
    margin-bottom: 0;
}

.gallery.gallery--grid .gallery-image-wrapper {
    height: 100%;
}

.gallery.gallery--grid .gallery-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 480px) {
    .gallery.gallery--grid .gallery-item:first-child {
        grid-area: 1 / 1 / span 2 / span 2;
    }

    .gallery.gallery--grid .gallery-item:nth-child(3n) {
        grid-column: span 2;
    }
}

@media (max-width: 800px) {
    .gallery.gallery--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery.gallery--grid .gallery-item:nth-child(3n) {
        grid-column: span 1;
    }
}

@media (max-width: 500px) {
    .gallery.gallery--grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}