
.ag-gallery-wrapper { width: 100%; margin: 0 auto; font-family: inherit; --ag-gap: 15px; }
.ag-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: center; gap: 10px; margin-bottom: 30px; padding-bottom: 5px; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) { .ag-filters { justify-content: flex-start; } }
.ag-filters::-webkit-scrollbar { height: 4px; } .ag-filters::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.ag-filter-btn { background: transparent; border: 1px solid #ddd; padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 14px; transition: all 0.3s ease; white-space: nowrap; }
.ag-filter-btn:hover { background: #f5f5f5; border-color: #bbb; } .ag-filter-btn.active { background: #333; color: #fff; border-color: #333; }

.ag-layout-grid .ag-gallery-container { display: grid; gap: var(--ag-gap); grid-template-columns: repeat(4, 1fr); }
.ag-layout-grid.ag-cols-1 .ag-gallery-container { grid-template-columns: 1fr; }
.ag-layout-grid.ag-cols-2 .ag-gallery-container { grid-template-columns: repeat(2, 1fr); }
.ag-layout-grid.ag-cols-3 .ag-gallery-container { grid-template-columns: repeat(3, 1fr); }
.ag-layout-grid.ag-cols-4 .ag-gallery-container { grid-template-columns: repeat(4, 1fr); }
.ag-layout-grid.ag-cols-5 .ag-gallery-container { grid-template-columns: repeat(5, 1fr); }
.ag-layout-grid.ag-cols-6 .ag-gallery-container { grid-template-columns: repeat(6, 1fr); }

.ag-layout-masonry .ag-gallery-container { column-count: 4; column-gap: var(--ag-gap); }
.ag-layout-masonry.ag-cols-1 .ag-gallery-container { column-count: 1; }
.ag-layout-masonry.ag-cols-2 .ag-gallery-container { column-count: 2; }
.ag-layout-masonry.ag-cols-3 .ag-gallery-container { column-count: 3; }
.ag-layout-masonry.ag-cols-4 .ag-gallery-container { column-count: 4; }
.ag-layout-masonry.ag-cols-5 .ag-gallery-container { column-count: 5; }
.ag-layout-masonry.ag-cols-6 .ag-gallery-container { column-count: 6; }
.ag-layout-masonry .ag-item { break-inside: avoid; margin-bottom: var(--ag-gap); }

/* Album Layout */
.ag-layout-album .ag-gallery-container { display: grid; gap: var(--ag-gap); grid-template-columns: repeat(4, 1fr); }
.ag-layout-album .ag-album-cover-item { position: relative; cursor: pointer; }
.ag-layout-album .ag-overlay { display: flex; flex-direction: column; }
.ag-layout-album.ag-cols-1 .ag-gallery-container { grid-template-columns: 1fr; }
.ag-layout-album.ag-cols-2 .ag-gallery-container { grid-template-columns: repeat(2, 1fr); }
.ag-layout-album.ag-cols-3 .ag-gallery-container { grid-template-columns: repeat(3, 1fr); }
.ag-layout-album.ag-cols-4 .ag-gallery-container { grid-template-columns: repeat(4, 1fr); }
.ag-layout-album.ag-cols-5 .ag-gallery-container { grid-template-columns: repeat(5, 1fr); }
.ag-layout-album.ag-cols-6 .ag-gallery-container { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
    .ag-layout-grid .ag-gallery-container, .ag-layout-album .ag-gallery-container { grid-template-columns: repeat(3, 1fr); }
    .ag-layout-masonry .ag-gallery-container { column-count: 3; }
}
@media (max-width: 768px) {
    .ag-layout-grid .ag-gallery-container, .ag-layout-album .ag-gallery-container { grid-template-columns: repeat(2, 1fr); }
    .ag-layout-masonry .ag-gallery-container { column-count: 2; }
}
@media (max-width: 480px) {
    .ag-layout-grid .ag-gallery-container, .ag-layout-album .ag-gallery-container { grid-template-columns: 1fr; }
    .ag-layout-masonry .ag-gallery-container { column-count: 1; }
}

.ag-item { position: relative; overflow: hidden; border-radius: 4px; background: #f9f9f9; }
.ag-item img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.4s ease; }
.ag-layout-grid .ag-item img, .ag-layout-carousel .ag-item img, .ag-layout-album .ag-item > a > img { aspect-ratio: 4/3; }

.ag-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.ag-item-title { color: #fff; margin: 0; font-size: 16px; text-align: center; padding: 10px; transform: translateY(10px); transition: all 0.3s ease; }
.ag-item:hover .ag-overlay.ag-effect-zoom + img, .ag-item:hover img { transform: scale(1.05); }
.ag-overlay.ag-effect-overlay { background: rgba(0,0,0,0.5); }
.ag-item:hover .ag-overlay.ag-effect-overlay { opacity: 1; }
.ag-overlay.ag-effect-zoom-overlay { background: rgba(0,0,0,0.5); }
.ag-item:hover .ag-overlay.ag-effect-zoom-overlay { opacity: 1; }
.ag-item:hover .ag-overlay.ag-effect-zoom-overlay ~ img { transform: scale(1.05); }
.ag-item:hover .ag-item-title { transform: translateY(0); }
.ag-hidden { display: none !important; }
