/* ==========================================
   gallery hero
========================================== */

.gallery-hero{

    position:relative;

    min-height:75vh;

    display:flex;

    align-items:center;

    background:
        url('../images/gallery/hero.jpg')
        center/cover
        no-repeat;
}

.gallery-hero__overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,.85),
            rgba(0,0,0,.45)
        );
}

.gallery-hero__content{

    position:relative;

    z-index:2;

    max-width:850px;
}

.gallery-hero h1{

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1.1;

    margin:20px 0;
}

.gallery-hero p{

    font-size:1.15rem;

    color:#d0d0d0;

    max-width:700px;

    line-height:1.8;
}

/* ==========================================
   stats
========================================== */

.gallery-stats{

    background:var(--hgm-dark);
}

.gallery-stats-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:30px;
}

.gallery-stat{

    text-align:center;

    padding:40px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;
}

.gallery-stat h3{

    color:var(--hgm-gold);

    font-size:3rem;

    margin-bottom:10px;
}

.gallery-stat p{

    color:#cfcfcf;
}
/* ==========================================
featured transformations
========================================== */

.featured-projects{


background:#080808;


}

.transformation-project{


margin-top:80px;

padding:50px;

background:#101010;

border:1px solid rgba(255,255,255,.06);

border-radius:32px;

overflow:hidden;


}

.project-header{


text-align:center;

margin-bottom:50px;


}

.project-header h3{


font-size:2.5rem;

color:var(--hgm-white);

margin-bottom:10px;


}

.project-header span{


color:var(--hgm-gold);

text-transform:uppercase;

letter-spacing:2px;

font-size:.85rem;


}

/* ==========================================
before / after showcase
========================================== */

.before-after-showcase{


display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

margin-bottom:30px;


}

.showcase-card{


position:relative;

overflow:hidden;

border-radius:24px;

background:#161616;

border:1px solid rgba(255,255,255,.05);


}

.showcase-card img{


width:100%;

height:520px;

object-fit:cover;

display:block;

transition:.5s;


}

.showcase-card:hover img{


transform:scale(1.05);


}

.final-card{


border:2px solid rgba(1,139,69,.4);


}

/* ==========================================
repair / paint process
========================================== */

.process-gallery{


display:grid;

grid-template-columns:1fr 1fr;

gap:30px;


}

.process-card{


position:relative;

overflow:hidden;

border-radius:24px;

background:#161616;

border:1px solid rgba(255,255,255,.05);


}

.process-card img{

width:100%;

height:320px;

object-fit:cover;

display:block;

transition:.5s;


}

.process-card:hover img{


transform:scale(1.05);

}

/* ==========================================
labels
========================================== */

.stage-label{

position:absolute;

top:20px;

left:20px;

z-index:2;

padding:10px 18px;

border-radius:30px;

background:rgba(0,0,0,.85);

color:#fff;

font-size:.75rem;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

}

.final-card .stage-label{


background:var(--hgm-green);


}


/* ==========================================
   portfolio
========================================== */

.portfolio-gallery{

    background:var(--hgm-dark);
}

.portfolio-grid{

    column-count:3;

    column-gap:25px;

    margin-top:60px;
}

.portfolio-item{

    position:relative;

    margin-bottom:25px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;
}

.portfolio-item img{

    width:100%;

    display:block;

    transition:.5s;
}

.portfolio-item:hover img{

    transform:scale(1.08);
}

/* Premium Hover Overlay */

.portfolio-item::after{

    content:'View Image';

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.65);

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

    letter-spacing:1px;

    opacity:0;

    transition:.3s;
}

.portfolio-item:hover::after{

    opacity:1;
}

/* ==========================================
   tesla style video showcase
========================================== */

.video-showcase{

    background:#080808;
}

.video-showcase-card{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:0;

    overflow:hidden;

    border-radius:32px;

    margin-top:60px;

    background:#101010;

    border:1px solid rgba(255,255,255,.06);
}

.video-showcase-content{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.video-badge{

    color:var(--hgm-gold);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

    margin-bottom:20px;
}

.video-showcase-content h3{

    font-size:3rem;

    line-height:1.1;

    margin-bottom:20px;
}

.video-showcase-content p{

    color:#cfcfcf;

    line-height:1.8;

    margin-bottom:30px;
}

.video-features{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:40px;
}

.video-feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;
}

.video-feature i{

    color:var(--hgm-gold);

    width:20px;
}

.video-showcase-player{

    position:relative;

    background:#000;
}

.video-showcase-player video{

    width:100%;

    height:100%;

    min-height:550px;

    object-fit:cover;

    display:block;
}

/* ==========================================
   transformations
========================================== */

.gallery-transformations{

    background:var(--hgm-dark);
}

.transformation-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:30px;

    margin-top:60px;
}

.transformation-card{

    height:400px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;
}


/* ==========================================
   testimonials slider
========================================== */

.gallery-testimonials{

    background:var(--hgm-dark);

    overflow:hidden;
}

.testimonial-slider{

    position:relative;

    overflow:hidden;

    margin-top:60px;
}

.testimonial-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:testimonialScroll 60s linear infinite;
}

.testimonial-track:hover{

    animation-play-state:paused;
}

.testimonial-card{

    flex:0 0 380px;

    background:#101010;

    padding:40px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.06);

    transition:.3s;
}

.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:rgba(252,208,21,.25);
}

.testimonial-stars{

    color:var(--hgm-gold);

    font-size:1.2rem;

    margin-bottom:20px;
}

.testimonial-card h4{

    color:#ffffff;

    font-size:1.8rem;

    margin-bottom:10px;

    text-transform:uppercase;
}

.vehicle-name{

    display:block;

    color:var(--hgm-green);

    font-size:1.1rem;

    margin-bottom:25px;
}

.testimonial-card p{

    color:#d0d0d0;

    line-height:1.9;

    font-style:italic;
}

.empty-testimonials{

    text-align:center;

    padding:60px;

    color:#cfcfcf;
}

@keyframes testimonialScroll{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}
/* ==========================================
   cta
========================================== */

.gallery-cta{

    background:#080808;
}

.gallery-cta-card{

    text-align:center;

    max-width:900px;

    margin:auto;

    padding:100px 60px;

    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(252,208,21,.08),
            rgba(1,139,69,.08)
        );

    border:1px solid rgba(255,255,255,.06);
}

.gallery-cta-card h2{

    font-size:3rem;

    margin-bottom:20px;
}

.gallery-cta-card p{

    color:#d0d0d0;

    margin-bottom:40px;

    line-height:1.8;
}

.gallery-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;
}

/* ==========================================
responsive
========================================== */

@media (max-width:1200px){

.video-showcase-card{

    grid-template-columns:1fr;
}

.gallery-stats-grid{

    grid-template-columns:
        repeat(2,1fr);
}

.video-grid{

    grid-template-columns:
        repeat(2,1fr);
}

.video-card--featured{

    grid-column:span 2;
}

}

.testimonial-card{

    flex:0 0 300px;

    padding:30px;
}

.testimonial-card h4{

    font-size:1.4rem;
}

@media (max-width:768px){

.video-showcase-content{

    padding:35px;
}

.video-showcase-content h3{

    font-size:2rem;
}

.video-showcase-player video{

    min-height:300px;
}
.video-card--featured{

    grid-column:span 1;
}

.play-button{

    width:70px;

    height:70px;

    font-size:1.4rem;
}

.video-content h3{

    font-size:1.2rem;
}

.gallery-stats-grid{

    grid-template-columns:1fr;
}

.before-after-showcase{

    grid-template-columns:1fr;
}

.process-gallery{

    grid-template-columns:1fr;
}

.portfolio-grid{

    column-count:1;
}

.video-grid{

    grid-template-columns:1fr;
}

.transformation-grid{

    grid-template-columns:1fr;
}

.transformation-project{

    padding:25px;
}

.project-header h3{

    font-size:1.8rem;
}

.showcase-card img{

    height:300px;
}

.process-card img{

    height:220px;
}

.gallery-cta-card{

    padding:60px 30px;
}

.gallery-cta-buttons{

    flex-direction:column;
}

.gallery-cta-card h2{

    font-size:2.2rem;
}


}