/* gallery.css - compatible with Bootstrap 3.2 */
/* Grid container */
.masonry-grid {
    margin-left: -10px; /* gutter compensation */
}

/* Each item */
.grid-item {
    width: 250px; /* column width; Masonry percentPosition works with px as well */
    margin-left: 10px;
    margin-bottom: 20px;
    float: left;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Responsive: reduce width on small screens */
@media (max-width: 768px) {
    .grid-item { width: 48%; margin-left: 2%; }
}
@media (max-width: 480px) {
    .grid-item { width: 100%; margin-left: 0; }
}

/* Image */
.grid-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .25s ease;
}

.grid-item:hover img { transform: scale(1.03); }

/* Info area */
.grid-item .info {
    padding: 10px 12px;
}

.grid-item .painting-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}
.grid-item .painting-title a {
    color: #333;
    text-decoration: none;
}
.grid-item .painting-title a:hover { text-decoration: underline; }

/* Meta small text */
.grid-item .meta { font-size: 13px; color: #666; margin: 4px 0; }

/* Filters */
#painting-filters { margin-bottom: 20px; }
#painting-filters .btn { margin: 3px; }
#painting-filters .btn.active { background-color: #337ab7; color: #fff; border-color: #2e6da4; }

/* Load more button */
#load-more-paintings { min-width: 160px; }

/* Lightbox override small tweak */
.lightboxOverlay { z-index: 1050 !important; } /* so it doesn't sit under Bootstrap modal */
.lightbox { z-index: 1060 !important; }

/* Modal image style */
#paintingModalImage img { border-radius: 4px; max-height: 60vh; object-fit: contain; }

/* Small UX */
.masonry-grid:after { content: ''; display: block; clear: both; }