/* ── Gallery Hero ───────────────────────────────────────────────────────── */

.gal-hero {
    height: 100vh;
    background: url('../hero-portfolio.png') center center / cover no-repeat;
    position: relative;
    z-index: 4;
}

.gal-hero::after,
.gal-grid-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../22-texture.png') top left / 400px auto repeat;
    opacity: 0.35;
    pointer-events: none;
    z-index: 10;
}

/* ── Fav Shoots ─────────────────────────────────────────────────────────── */

.gal-trio {
    background: url('../blue-background.png') center center / cover no-repeat;
    padding: 100px 0 140px;
}

.fav-shoot {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 36px 6vw;
}

.fav-shoot--reverse {
    flex-direction: row-reverse;
}

.fav-shoot-img {
    flex: 0 0 40%;
}

.fav-shoot-img img {
    width: 100%;
    height: auto;
    display: block;
}

.fav-shoot-text {
    flex: 1;
    padding: 0 4vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fav-shoot-text .display-heading {
    font-size: clamp(1.6rem, 2.8vw, 3rem);
    margin: 0;
}

.fav-shoot-text .body-text {
    font-size: 14px;
    margin: 0;
    line-height: 1.7;
}

.gal-trio .text-link::before {
    background: url('../yellow-tape.png') center center / 100% 100% no-repeat;
    opacity: 1;
}

/* ── Gallery Grid Section ───────────────────────────────────────────────── */

.gal-grid-section {
    background: url('../yellow-stripes.png') top center / 100% auto repeat-y;
    background-color: #EBEBE4;
    padding: 40px 6vw 60px;
    position: relative;
    z-index: 2;
}

.gal-grid {
    position: relative;
    z-index: 51;
    isolation: isolate;
}

.gal-trio {
    position: relative;
    z-index: 3;
}

.gal-grid-section ~ .site-footer {
    position: relative;
    z-index: 5;
}

/* Filter buttons */
.gal-filters {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
    position: relative;
    isolation: isolate;
    padding: 14px 28px;
}

.gal-filters::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../blue-tape.png') center center / 100% 100% no-repeat;
    z-index: -1;
    opacity: 1;
    transform: rotate(-0.8deg);
}

.gal-filter {
    font-family: 'Butterclub', sans-serif;
    font-size: 20px;
    color: #5F361E;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    padding: 2px 18px;
    transition: opacity 0.2s;
    opacity: 0.7;
}

.gal-filter::before {
    content: '';
    position: absolute;
    inset: -2px -10px;
    background: url('../yellow-tape.png') center center / 100% 100% no-repeat;
    z-index: -1;
    opacity: 1;
    transform: rotate(-1.5deg) scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease;
}

.gal-filter:hover,
.gal-filter.active {
    opacity: 1;
}

.gal-filter:hover::before,
.gal-filter.active::before {
    transform: rotate(-1.5deg) scaleX(1);
}

/* ── Masonry grid ────────────────────────────────────────────────────────── */

.gal-grid {
    column-count: 2;
    column-gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1400px) {
    .gal-grid {
        column-count: 3;
        max-width: 1600px;
    }
}

.gal-item {
    break-inside: avoid;
    margin-bottom: 18px;
    overflow: hidden;
    cursor: pointer;
}

.gal-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

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

.gal-item.hidden {
    display: none;
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.lightbox.open {
    opacity: 1;
    pointer-events: all;
}

.lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.lightbox-img.fading {
    opacity: 0;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    font-family: 'Butterclub', sans-serif;
    color: #EFE095;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    transition: opacity 0.2s;
    line-height: 1;
}

.lightbox-close {
    top: 24px;
    right: 32px;
    font-size: 28px;
    opacity: 0.85;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    padding: 8px 16px;
    opacity: 0.85;
}

.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }

/* ── Responsive ─────────────────────────────────────────────────────────── */


@media (max-width: 768px) {
    .gal-trio {
        padding: 60px 0 100px;
    }

    .fav-shoot,
    .fav-shoot--reverse {
        flex-direction: column;
        padding: 40px 28px;
        gap: 28px;
    }

    .fav-shoot-img {
        flex: none;
        width: 100%;
    }

    .fav-shoot-text {
        padding: 0;
        text-align: center;
    }

    .gal-grid-section {
        padding: 60px 20px 80px;
    }

    .gal-grid {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gal-grid-section {
        padding: 48px 16px 64px;
    }

    .gal-grid {
        column-count: 1;
    }

    .lightbox-close {
        top: 16px;
        right: 16px;
        font-size: 18px;
        padding: 4px 10px;
    }

    .lightbox-prev {
        left: 10px;
        font-size: 18px;
        padding: 6px 10px;
    }

    .lightbox-next {
        right: 10px;
        font-size: 18px;
        padding: 6px 10px;
    }
}