/* ==========================================================
   GALLERY PAGE — hero, filter roll, contact-sheet-style grid,
   and lightbox. Markup: gallery.html
   Built on the same design tokens (--crimson, --ink, --gray-*,
   --radius-*) and shared .wrap/.btn/.eyebrow rules already
   loaded from products.css — this file only adds what's new.
   ========================================================== */

/* ==========================================================
   HERO — same visual treatment as the products page hero
   (dark brand gradient over a full-bleed photo), sized to
   match the trimmed hero spacing used site-wide.
   ========================================================== */

.gallery-hero{
    position:relative;
    overflow:hidden;
    padding:88px 0 44px;
    background:
        linear-gradient(
            120deg,
            rgba(21,17,26,.94) 0%,
            rgba(21,17,26,.72) 45%,
            rgba(203,41,82,.42) 100%
        ),
        /* TEMP placeholder — swap for a dedicated gallery-hero-bg.jpg
           at assets/images/gallery/hero-bg.jpg once you have one */
        url("../assets/images/gallery/hero-bg.jpg") center/cover no-repeat,
        var(--ink);
}

.gallery-hero-inner{
    position:relative;
    z-index:1;
}

.gallery-hero h1{
    color:var(--white);
    font-size:clamp(30px,4vw,44px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.08;
    max-width:760px;
    margin-bottom:16px;
}

@media (max-width:980px){
    .gallery-hero{
        padding:76px 0 36px;
    }
}

@media (max-width:620px){
    .gallery-hero{
        padding:64px 0 30px;
    }
}

/* ==========================================================
   FILTER ROLL — sticky pill filters
   ========================================================== */

.gallery-roll{
    position:sticky;
    top:0;
    z-index:20;
    background:var(--white);
    border-bottom:1px solid var(--gray-150);
}

.gallery-roll-inner{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:18px 32px;
}

.filter-btn{
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.01em;
    background:var(--white);
    border:1px solid var(--gray-300);
    color:var(--gray-700);
    padding:9px 18px;
    border-radius:var(--radius-pill);
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
}

.filter-btn:hover{
    border-color:var(--crimson);
    color:var(--crimson);
}

.filter-btn.active{
    background:var(--crimson);
    border-color:var(--crimson);
    color:var(--white);
}

@media (max-width:620px){
    .gallery-roll-inner{
        padding:14px 18px;
        gap:8px;
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .filter-btn{
        white-space:nowrap;
        padding:8px 14px;
        font-size:13px;
    }
}

/* ==========================================================
   GALLERY GRID
   ========================================================== */

.gallery-section{
    padding:48px 0 88px;
    background:var(--bg-alt);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:22px;
}

.gallery-card{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);
    background:var(--white);
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    color:inherit;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.gallery-card:hover,
.gallery-card:focus-visible{
    transform:translateY(-6px);
    border-color:var(--crimson);
    box-shadow:
        0 18px 36px rgba(15,23,42,.1),
        0 28px 60px rgba(15,23,42,.07);
    outline:none;
}

.gallery-card .imgwrap{
    aspect-ratio:4/5;
    overflow:hidden;
    background:var(--bg-alt);
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
}

.gallery-card:hover img{
    transform:scale(1.06);
}

.gallery-card .card-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:14px 16px 12px;
    background:linear-gradient(0deg, rgba(21,17,26,.85) 0%, rgba(21,17,26,0) 100%);
    opacity:0;
    transform:translateY(6px);
    transition:opacity .3s ease, transform .3s ease;
}

.gallery-card:hover .card-overlay,
.gallery-card:focus-visible .card-overlay{
    opacity:1;
    transform:translateY(0);
}

.gallery-card .card-caption{
    display:block;
    color:var(--white);
    font-size:13.5px;
    font-weight:700;
}

.gallery-card .card-tag{
    display:inline-block;
    margin-top:6px;
    font-size:10.5px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:#ff9fb4;
}

.gallery-card.hidden{
    display:none;
}

@media (prefers-reduced-motion: reduce){
    .gallery-card,
    .gallery-card img,
    .gallery-card .card-overlay{
        transition:none;
    }
}

/* ==========================================================
   LIGHTBOX — full-screen viewer, same close-button treatment
   as the product fullscreen / video modal elsewhere on site.
   ========================================================== */

.lightbox{
    position:fixed;
    inset:0;
    z-index:1200;

    display:flex;
    align-items:center;
    justify-content:center;
    padding:5vh 5vw;

    background:rgba(10,10,16,.92);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);

    animation:lb-fade-in .2s ease;
}

.lightbox[hidden]{
    display:none;
}

@keyframes lb-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

.lightbox-figure{
    max-width:900px;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
}

.lightbox-figure img{
    max-width:100%;
    max-height:76vh;
    object-fit:contain;
    border-radius:var(--radius-md);
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
}

.lightbox-figure figcaption{
    font-size:13.5px;
    color:rgba(255,255,255,.75);
    letter-spacing:.02em;
    text-align:center;
}

.lightbox-close,
.lightbox-nav{
    position:fixed;
    z-index:1201;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(21,17,26,.55);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);

    color:var(--white);
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover{
    border-color:var(--crimson);
    background:var(--crimson);
}

.lightbox-close{
    top:24px;
    right:24px;
    width:44px;
    height:44px;
    font-size:18px;
}

.lightbox-close:hover{
    transform:rotate(90deg);
}

.lightbox-nav{
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    font-size:22px;
}

.lightbox-nav:hover{
    transform:translateY(-50%) scale(1.06);
}

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

@media (max-width:620px){
    .lightbox{
        padding:4vh 4vw;
    }
    .lightbox-close{
        top:16px;
        right:16px;
        width:38px;
        height:38px;
    }
    .lightbox-nav{
        width:40px;
        height:40px;
        font-size:19px;
    }
    .lightbox-prev{ left:10px; }
    .lightbox-next{ right:10px; }
}

@media (prefers-reduced-motion: reduce){
    .lightbox{
        animation:none;
    }
}