/* GH STUDIO - experience page styles */

.hero-image{

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.96),
            rgba(0,0,0,.72),
            rgba(0,0,0,.35)
        ),
        url(
        'https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=2000&q=90'
        );

    background-size:cover;

    background-position:center;

    filter:grayscale(100%);

    transform:scale(1.02);

}
/* =====================================================
   PHOTO MARQUEE (FEATURED STYLES)
===================================================== */

.photo-marquee{

    padding:70px 0 60px;
    border-bottom:1px solid var(--line);

}
.photo-marquee-label{

    width:min(
        var(--container),
        calc(100% - 50px)
    );

    margin:0 auto 25px;

    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#aaa;

}
.photo-marquee-viewport{

    overflow:hidden;

    -webkit-mask-image:linear-gradient(
        90deg,
        transparent 0,
        #000 60px,
        #000 calc(100% - 60px),
        transparent 100%
    );
    mask-image:linear-gradient(
        90deg,
        transparent 0,
        #000 60px,
        #000 calc(100% - 60px),
        transparent 100%
    );

}
.photo-marquee-track{

    display:flex;
    gap:16px;
    width:max-content;

    animation:photoMarquee 38s linear infinite reverse;

}
.photo-marquee-viewport:hover .photo-marquee-track{

    animation-play-state:paused;

}
.pm-card{

    position:relative;

    flex:0 0 auto;

    width:230px;
    height:300px;

    overflow:hidden;

    background:#111;

}
.pm-card img{

    width:100%;
    height:100%;
    object-fit:cover;

    filter:grayscale(.2);
    transition:transform .6s, filter .6s;

}
.pm-card:hover img{

    transform:scale(1.07);
    filter:grayscale(0);

}
.pm-card .pm-cap{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:16px;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.9),
            rgba(0,0,0,0) 70%
        );

    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;

}
@keyframes photoMarquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}
@media(max-width:600px){

    .pm-card{
        width:170px;
        height:230px;
    }

}
.page-hero-image{

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(5,5,5,.75) 60%,
            #050505 100%
        ),
        url(
        'https://the.splg.site/images/2026/04/18/imagecfc4452e38e37148.png'
        );

    background-size:cover;

    background-position:center;

    filter:grayscale(100%);

    transform:scale(1.02);

}
/* =====================================================
   GALLERY
===================================================== */

.gallery{

    padding:100px 0 150px;

}
.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s;

}
.gallery-item:hover img{

    transform:scale(1.06);

}
.gallery-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.85),
            rgba(0,0,0,0) 55%
        );

}
.gallery-caption{

    position:absolute;

    left:25px;

    bottom:20px;

    right:25px;

    z-index:2;

}
.gallery-caption .num{

    font-size:11px;

    color:#999;

    letter-spacing:2px;

    margin-bottom:8px;

}
.gallery-caption h3{

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:6px;

}
.gallery-caption p{

    color:#aaa;

    font-size:12px;

    line-height:1.6;

    max-width:320px;

}
/* =====================================================
   CATALOG LAYOUT VARIANTS (set from Admin → Display)
===================================================== */

.gallery-grid.layout-uniform .gallery-item{
    grid-column:span 4;
    height:360px;
}
.gallery-grid.layout-uniform .gallery-item:nth-child(6){
    grid-column:span 4;
    height:360px;
}
.gallery-grid.layout-masonry{
    display:block;
    columns:3 260px;
    column-gap:15px;
}
.gallery-grid.layout-masonry .gallery-item{
    display:inline-block;
    width:100%;
    height:auto;
    margin-bottom:15px;
    break-inside:avoid;
}
.gallery-grid.layout-masonry .gallery-item img{
    height:auto;
    display:block;
}
.gallery-item.gh-hidden{
    display:none!important;
}
/* =====================================================
   LIGHTBOX
===================================================== */

.gh-lightbox{
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(3,3,3,.95);
    display:none;
    place-items:center;
    padding:30px;
    cursor:zoom-out;
}
.gh-lightbox.open{
    display:grid;
}
.gh-lightbox img{
    max-width:min(1100px,100%);
    max-height:88vh;
    object-fit:contain;
    box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.gh-lightbox-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:28px;
    text-align:center;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#999;
}
.gh-lightbox-close{
    position:absolute;
    top:24px;
    right:30px;
    color:#fff;
    font-size:14px;
    letter-spacing:2px;
    border:1px solid rgba(255,255,255,.3);
    padding:9px 16px;
    background:transparent;
    cursor:pointer;
}
.gallery-item{
    cursor:zoom-in;
}
/* =====================================================
   MOBILE
===================================================== */

@media(max-width:800px){

    .container,
    .nav-inner,
    .page-hero-content{

        width:calc(100% - 30px);

    }

    .page-hero{

        min-height:44vh;

        padding-bottom:55px;

    }

    .page-hero-content{

        padding-top:0;

    }

    .page-hero h1{

        font-size:46px;

        letter-spacing:-2px;

    }

    .gallery-grid{

        grid-template-columns:1fr 1fr;

    }

    .gallery-item:nth-child(n){

        grid-column:span 1;

        height:300px;

    }

    .gallery-item:first-child,
    .gallery-item:last-child{

        grid-column:span 2;

    }

    .gallery-grid.layout-uniform .gallery-item{
        grid-column:span 1;
        height:300px;
    }

    .gallery-grid.layout-masonry{
        columns:2 220px;
    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        display:block;

        line-height:2;

    }

}
@media(max-width:560px){

    .gallery-grid{

        display:block;

    }

    .gallery-item:nth-child(n){

        height:400px;

        margin-bottom:12px;

    }

    .gallery-grid.layout-uniform .gallery-item{
        height:340px;
        margin-bottom:0;
    }

    .gallery-grid.layout-masonry{
        columns:1;
    }

    .page-hero h1{

        font-size:38px;

    }

    .cta h2{

        font-size:44px;

    }

}
@media(max-width:800px){
    .nav-inner{position:relative;}
    .nav-inner nav{display:none;}
    .nav-toggle{display:flex;}
    .mobile-menu{display:block;}
}
/* =====================================================
   EXPERIENCE (dedicated page)
===================================================== */
.experience-page{
    padding:170px 0 40px;
}
.experience-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}
.experience-image{
    height:650px;
    background-image:
        linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.4)),
        url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=1200&q=90');
    background-size:cover;
    background-position:center;
    filter:grayscale(100%);
}
.experience-page h1{
    font-family:"Playfair Display",serif;
    font-size:clamp(45px,6vw,80px);
    line-height:.95;
    font-weight:600;
}
.experience-page > .container > .experience-grid > div > p{
    color:var(--gray);
    margin-top:25px;
    line-height:1.9;
    max-width:500px;
}
.experience-list{ margin-top:40px; }
.experience-list div{
    display:flex;
    gap:20px;
    padding:15px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
}
.experience-list span{ color:#555; }
.experience-values{
    padding:100px 0 130px;
    border-top:1px solid var(--line);
}
.experience-values-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    margin-top:60px;
}
.experience-value-card{
    padding:40px 30px;
    border:1px solid var(--line);
}
.experience-value-card .num{
    font-family:"Playfair Display",serif;
    font-size:32px;
    color:var(--gray2);
    margin-bottom:20px;
}
.experience-value-card h3{
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:12px;
}
.experience-value-card p{
    color:var(--gray);
    font-size:13px;
    line-height:1.8;
}
@media(max-width:800px){
    .experience-grid{ grid-template-columns:1fr; gap:40px; }
    .experience-image{ height:400px; }
    .experience-values-grid{ grid-template-columns:1fr; }
}