/* Gallery page — loads AFTER home.css + about.css */

.gallery-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 90px 24px 40px;
    column-count: 3;
    column-gap: 18px;
}
.gallery-item {
    break-inside: avoid;
    margin: 0 0 18px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    cursor: zoom-in;
    position: relative;
    background: #eee;
}
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .8s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(1,156,192,0.25) 100%);
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.92);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 40px;
    animation: fadeIn .25s var(--ease);
}
.lightbox.open { display: flex; }
.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    animation: zoomIn .25s var(--ease);
}
.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 48px; height: 48px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--teal); transform: scale(1.05); }
.lightbox-close { top: 20px; right: 24px; font-size: 32px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 960px) {
    .gallery-grid { column-count: 2; padding: 60px 18px 20px; column-gap: 12px; }
    .gallery-item { margin-bottom: 12px; }
}
@media (max-width: 560px) {
    .gallery-grid { column-count: 1; padding: 40px 16px 20px; }
    .lightbox-close, .lightbox-nav { width: 42px; height: 42px; }
    .lightbox-close { top: 14px; right: 14px; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}