/* public/css/pages/gallery.css */
.masonry { display: grid; grid-template-columns: 1fr; gap: 24px; }
.gallery-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; display: block; }
.gallery-card:hover img { transform: scale(1.1); }
.gallery-card.bottom-crop img { object-position: bottom center; }
.gallery-card.bottom-crop:hover img { transform: scale(1.1); object-position: bottom center; }
.gallery-card .ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1), transparent); opacity: 0.6; transition: opacity 0.5s; }
.gallery-card:hover .ov { opacity: 0.9; }
.gallery-card .cap { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; color: #fff; transform: translateY(16px); opacity: 0.8; transition: all 0.5s; }
.gallery-card:hover .cap { transform: translateY(0); opacity: 1; }
.gallery-card .cap h3 { color: #fff; margin-bottom: 4px; }
.gallery-card .cap p { color: #fff; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.btn--accent { background: var(--accent); }
@media (min-width: 768px) {
    .masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 300px; grid-auto-flow: dense; }
    .span-2 { grid-column: span 2; }
    .span-full { grid-column: 1 / -1; }
    .row-2 { grid-row: span 2; }
}
@media (min-width: 1024px) {
    .masonry { grid-template-columns: repeat(3, 1fr); }
}