/* ==================================================
   GALLERY COMPLETA — ARTWORK STUDIO
================================================== */

.gallery-page{
    background:var(--paper);
}

.gallery-header{
    background:rgba(246,243,239,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(33,23,28,.06);
}

.gallery-header .brand-copy strong,
.gallery-header .brand-copy span,
.gallery-header .main-nav a,
.gallery-header .menu-toggle{
    color:var(--ink);
}

.gallery-header .nav-cta{
    color:var(--plum);
    border-color:var(--plum);
}

/* HERO */
.gallery-hero{
    min-height:760px;
    position:relative;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.gallery-hero-media{
    position:absolute;
    inset:0;
    background:url("../img/hero3.jpg") center 42%/cover no-repeat;
    transform:scale(1.03);
}

.gallery-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(28,13,21,.84),rgba(28,13,21,.45) 52%,rgba(28,13,21,.12)),
        linear-gradient(0deg,rgba(18,8,13,.5),transparent 48%);
}

.gallery-hero-inner{
    position:relative;
    z-index:2;
    min-height:760px;
    padding:190px 0 85px;
    color:white;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:60px;
}

.gallery-hero-copy{
    max-width:800px;
}

.gallery-hero h1{
    font-family:var(--serif);
    font-size:clamp(82px,9vw,134px);
    font-weight:500;
    line-height:.8;
    letter-spacing:-.05em;
}

.gallery-hero h1 em{
    color:#ffffff;
    font-weight:400;
}

.gallery-hero-copy p{
    max-width:590px;
    margin-top:36px;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.9;
}

.gallery-hero-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
}

.gallery-hero-meta span{
    font-family:var(--serif);
    font-size:27px;
    color:rgba(255,255,255,.82);
}

/* INTRO */
.gallery-intro{
    padding:110px 0;
    border-bottom:1px solid var(--line);
}

.gallery-intro-grid{
    display:grid;
    grid-template-columns:.7fr 2fr 1fr;
    gap:60px;
    align-items:start;
}

.gallery-intro-title h2{
    font-family:var(--serif);
    font-size:clamp(44px,4.8vw,72px);
    font-weight:500;
    line-height:1.03;
    letter-spacing:-.035em;
}

.gallery-intro-copy p{
    color:var(--muted);
    font-size:13px;
    line-height:1.95;
}

/* COMPLETE GALLERY */
.complete-gallery{
    padding:115px 0 140px;
    background:var(--white);
}

.gallery-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-bottom:50px;
    padding-bottom:22px;
    border-bottom:1px solid var(--line);
}

.gallery-filter{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.filter-button{
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
    padding:12px 18px;
    cursor:pointer;
    font-family:var(--sans);
    font-size:9px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    transition:.3s;
}

.filter-button:hover,
.filter-button.active{
    border-color:var(--plum);
    background:var(--plum);
    color:white;
}

.gallery-toolbar>p{
    color:var(--muted);
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.gallery-toolbar>p span{
    color:var(--plum);
    font-weight:600;
}

.full-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:350px;
    gap:24px;
}

.portfolio-item{
    position:relative;
    min-width:0;
    overflow:hidden;
    background:var(--paper-2);
    transition:
        opacity .45s ease,
        transform .45s ease;
}

.portfolio-item.portfolio-tall{
    grid-row:span 2;
}

.portfolio-item.portfolio-wide{
    grid-column:span 2;
}

.portfolio-item.is-hidden{
    display:none;
}

.portfolio-open{
    width:100%;
    height:100%;
    position:relative;
    display:block;
    padding:0;
    border:0;
    background:none;
    cursor:zoom-in;
    text-align:left;
    overflow:hidden;
}

.portfolio-open img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .9s var(--ease);
}

.portfolio-overlay{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:end;
    gap:22px;
    padding:28px;
    color:white;
    background:linear-gradient(0deg,rgba(25,10,17,.78),rgba(25,10,17,0) 60%);
    transition:.45s;
}

.portfolio-number{
    font-size:9px;
    letter-spacing:.16em;
    padding-bottom:5px;
}

.portfolio-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.portfolio-copy small{
    font-size:8px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.7);
}

.portfolio-copy strong{
    font-family:var(--serif);
    font-size:31px;
    font-weight:500;
}

.portfolio-arrow{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    opacity:0;
    transform:translateY(8px);
    transition:.35s;
}

.portfolio-item:hover img{
    transform:scale(1.055);
}

.portfolio-item:hover .portfolio-overlay{
    background:linear-gradient(0deg,rgba(25,10,17,.88),rgba(25,10,17,.06) 70%);
}

.portfolio-item:hover .portfolio-arrow{
    opacity:1;
    transform:none;
}

.gallery-empty{
    padding:90px 20px;
    text-align:center;
}

.gallery-empty span{
    color:var(--plum);
    font-size:9px;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.gallery-empty h2{
    margin-top:16px;
    font-family:var(--serif);
    font-size:46px;
    font-weight:500;
}

.gallery-load-note{
    margin-top:70px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:25px;
}

.note-line{
    height:1px;
    background:var(--line);
}

.gallery-load-note p{
    max-width:580px;
    text-align:center;
    color:var(--muted);
    font-size:10px;
    line-height:1.7;
    letter-spacing:.04em;
}

.gallery-load-note strong{
    color:var(--plum);
}

/* QUOTE */
.gallery-quote{
    padding:140px 0;
    background:var(--paper);
}

.gallery-quote-inner{
    max-width:980px;
    text-align:center;
}

.quote-mark{
    display:block;
    height:65px;
    color:var(--plum);
    font-family:var(--serif);
    font-size:100px;
    line-height:1;
}

.gallery-quote blockquote{
    font-family:var(--serif);
    font-size:clamp(45px,5vw,74px);
    font-weight:500;
    line-height:1.08;
    letter-spacing:-.03em;
}

.quote-signature{
    display:block;
    margin-top:34px;
    color:var(--plum);
    font-size:9px;
    letter-spacing:.3em;
    text-transform:uppercase;
}

/* CTA */
.gallery-cta{
    min-height:680px;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
}

.gallery-cta-media{
    position:absolute;
    inset:0;
    background:url("../img/cta.jpg") center/cover no-repeat;
}

.gallery-cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(40,17,28,.68);
}

.gallery-cta-inner{
    position:relative;
    z-index:2;
    text-align:center;
    color:white;
}

.gallery-cta h2{
    margin-bottom:44px;
    font-family:var(--serif);
    font-size:clamp(67px,7vw,110px);
    font-weight:500;
    line-height:.86;
    letter-spacing:-.04em;
}

.gallery-cta h2 em{
    color:#d7b7c6;
    font-weight:400;
}

/* LIGHTBOX */
.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:4000;
    display:grid;
    grid-template-columns:90px 1fr 90px;
    align-items:center;
    background:rgba(20,10,15,.96);
    opacity:0;
    visibility:hidden;
    transition:.35s;
}

.gallery-lightbox.open{
    opacity:1;
    visibility:visible;
}

.lightbox-stage{
    min-width:0;
    height:calc(100vh - 100px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.lightbox-stage img{
    max-width:100%;
    max-height:calc(100% - 70px);
    object-fit:contain;
    box-shadow:0 35px 100px rgba(0,0,0,.35);
}

.lightbox-caption{
    color:white;
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:14px;
}

.lightbox-caption span{
    color:#d7b7c6;
    font-size:8px;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.lightbox-caption strong{
    font-family:var(--serif);
    font-size:27px;
    font-weight:500;
}

.lightbox-close,
.lightbox-control{
    border:0;
    background:transparent;
    color:white;
    cursor:pointer;
}

.lightbox-close{
    position:absolute;
    top:25px;
    right:30px;
    z-index:2;
    width:50px;
    height:50px;
    font-size:34px;
    font-weight:200;
}

.lightbox-control{
    height:100%;
    font-size:30px;
    opacity:.7;
    transition:.3s;
}

.lightbox-control:hover{
    opacity:1;
    background:rgba(255,255,255,.04);
}

body.lightbox-open{
    overflow:hidden;
}

/* RESPONSIVE */
@media(max-width:1050px){
    .gallery-hero-inner{
        padding-top:165px;
    }

    .gallery-intro-grid{
        grid-template-columns:1fr;
    }

    .full-gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .portfolio-item.portfolio-wide{
        grid-column:span 1;
    }
}

@media(max-width:760px){
    .gallery-hero,
    .gallery-hero-inner{
        min-height:650px;
    }

    .gallery-hero-inner{
        padding:150px 0 60px;
    }

    .gallery-hero h1{
        font-size:69px;
    }

    .gallery-hero-meta{
        display:none;
    }

    .gallery-intro{
        padding:80px 0;
    }

    .gallery-intro-grid{
        gap:28px;
    }

    .complete-gallery{
        padding:85px 0 100px;
    }

    .gallery-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .full-gallery-grid{
        grid-template-columns:1fr;
        grid-auto-rows:430px;
    }

    .portfolio-item.portfolio-tall{
        grid-row:span 1;
    }

    .portfolio-overlay{
        padding:22px;
    }

    .gallery-load-note{
        grid-template-columns:1fr;
    }

    .gallery-load-note .note-line{
        display:none;
    }

    .gallery-quote{
        padding:100px 0;
    }

    .gallery-quote blockquote{
        font-size:43px;
    }

    .gallery-cta{
        min-height:570px;
    }

    .gallery-cta h2{
        font-size:60px;
    }

    .gallery-lightbox{
        grid-template-columns:50px 1fr 50px;
    }

    .lightbox-stage{
        height:calc(100vh - 70px);
    }

    .lightbox-caption{
        flex-direction:column;
        align-items:center;
        gap:5px;
    }
}