/*
    File: styles/gallery.css
    Purpose: Styles for the image gallery and responsive thumbnails.
*/

/*==================================================*
                    GALLERY HERO
*==================================================*/

.gallery-hero{

    position:relative;

    width:100%;

    min-height:0;

    height:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#ffffff;

    padding:150px 20px 65px;

}


/*==========================================*
                    OVERLAY
*==========================================*/

.gallery-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(47,111,237,.05),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 85%,
            rgba(201,162,39,.06),
            transparent 30%
        );

    z-index:1;

    pointer-events:none;

}


/*==========================================*
                    CONTENT
*==========================================*/

.gallery-hero-content{

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    margin:0 auto;

    text-align:center;

    color:var(--royal-deep);

    animation:heroFade 1.2s ease;

}


/*==========================================*
                    TAG
*==========================================*/

.hero-tag{

    display:inline-block;

    padding:10px 28px;

    border-radius:50px;

    background:rgba(201,162,39,.10);

    border:1px solid rgba(201,162,39,.22);

    color:var(--royal);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}


/*==========================================*
                    TITLE
*==========================================*/

.gallery-hero-content h1{

    font-size:64px;

    line-height:1.2;

    font-weight:800;

    margin:0 0 22px;

    color:var(--royal-deep);

}

.gallery-hero-content h1 span{

    color:var(--gold);

}


/*==========================================*
                    DESCRIPTION
*==========================================*/

.gallery-hero-content p{

    max-width:760px;

    margin:0 auto;

    color:var(--ink-soft);

    font-size:18px;

    line-height:1.8;

}


/*==========================================*
                DECORATIVE LINE
*==========================================*/

.gallery-hero-content::after{

    content:"";

    display:block;

    width:110px;

    height:5px;

    margin:28px auto 0;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );

}


/*==========================================*
                TEXT ANIMATION
*==========================================*/

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================*
                    TABLET
*==========================================*/

@media(max-width:992px){

    .gallery-hero{

        padding:125px 25px 55px;

    }

    .gallery-hero-content h1{

        font-size:50px;

    }

    .gallery-hero-content p{

        font-size:16px;

    }

}


/*==========================================*
                    MOBILE
*==========================================*/

@media(max-width:768px){

    .gallery-hero{

        min-height:0;

        height:auto;

        padding:120px 18px 40px;

    }

    .gallery-hero-content{

        width:100%;

        max-width:650px;

    }

    .hero-tag{

        font-size:12px;

        padding:8px 20px;

        margin-bottom:18px;

    }

    .gallery-hero-content h1{

        font-size:38px;

        line-height:1.2;

        margin-bottom:17px;

    }

    .gallery-hero-content p{

        font-size:15px;

        line-height:1.7;

    }

    .gallery-hero-content::after{

        width:85px;

        height:4px;

        margin-top:23px;

    }

}


/*==========================================*
                SMALL MOBILE
*==========================================*/

@media(max-width:576px){

    .gallery-hero{

        padding:110px 16px 32px;

    }

    .gallery-hero-content h1{

        font-size:31px;

    }

    .gallery-hero-content p{

        font-size:14px;

        line-height:1.7;

    }

    .hero-tag{

        font-size:11px;

        padding:8px 17px;

        letter-spacing:1.5px;

    }

}


/*==========================================*
                VERY SMALL MOBILE
*==========================================*/

@media(max-width:380px){

    .gallery-hero{

        padding:105px 15px 28px;

    }

    .gallery-hero-content h1{

        font-size:27px;

    }

    .gallery-hero-content p{

        font-size:13px;

        line-height:1.65;

    }

    .hero-tag{

        font-size:10px;

        padding:7px 14px;

    }

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

.gallery-section{

    padding:100px 0;

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        var(--white) 0%,
        var(--smoke) 100%
    );

}

/*==================================================
                CONTAINER
==================================================*/

.container{

    width:90%;

    max-width:1320px;

    margin:auto;

}

/*==================================================
                HEADER
==================================================*/

.gallery-header{

    text-align:center;

    margin-bottom:70px;

    animation:fadeDown 1s ease forwards;

}

.gallery-header h2{

    font-size:48px;

    font-weight:800;

    color:var(--royal-deep);

    position:relative;

    display:inline-block;

    padding-bottom:18px;

    letter-spacing:-1px;

}

.gallery-header h2::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:0;

    width:90px;

    height:5px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );

}

.gallery-header p{

    max-width:720px;

    margin:25px auto 0;

    font-size:17px;

    line-height:1.9;

    color:var(--ink-soft);

}

/*==================================================
                TOP GRID
==================================================*/

.gallery-top{

    display:grid;

    grid-template-columns:1.8fr 1fr;

    gap:25px;

    margin-bottom:35px;

}

/*==================================================
                MAIN IMAGE
==================================================*/

.gallery-main{

    overflow:hidden;

    border-radius:20px;

}

.gallery-main img{

    width:100%;

    height:470px;

    object-fit:cover;

    border-radius:20px;

    border:3px solid rgba(201,162,39,.45);

    box-shadow:0 25px 60px rgba(13,33,84,.18);

    transition:all .45s var(--ease);

}

.gallery-main img:hover{

    transform:scale(1.03);
    

}

.gallery-main img.fade{

    opacity:0;

}

/*==================================================
                SIDE IMAGES
==================================================*/

.gallery-side{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.gallery-side img{

    width:100%;

    height:220px;

    object-fit:cover;

    cursor:pointer;

    border-radius:16px;

    border:2px solid transparent;

    box-shadow:0 12px 30px rgba(13,33,84,.10);

    transition:.35s var(--ease);

}

/*==================================================
                BOTTOM GRID
==================================================*/

.gallery-bottom{

    display:grid;

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

    gap:18px;

}

.gallery-bottom img{

    width:100%;

    height:170px;

    object-fit:cover;

    cursor:pointer;

    border-radius:16px;

    border:2px solid transparent;

    box-shadow:0 12px 30px rgba(13,33,84,.10);

    transition:.35s var(--ease);

}

/*==================================================
                ACTIVE
==================================================*/

.gallery-side img.active,
.gallery-bottom img.active{

    border:2px solid var(--gold);

    box-shadow:

        0 0 0 4px rgba(201,162,39,.18),

        0 18px 45px rgba(13,33,84,.18);

}

/*==================================================
                HOVER
==================================================*/

.gallery-side img:hover,
.gallery-bottom img:hover{

    transform:translateY(-8px) scale(1.04);

    border-color:var(--gold);

    box-shadow:

        0 22px 45px rgba(13,33,84,.18);

}

/*==================================================
                ANIMATION
==================================================*/

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
                TABLET
==================================================*/

@media(max-width:992px){

    .gallery-header h2{

        font-size:40px;

    }

    .gallery-top{

        grid-template-columns:1fr;

    }

    .gallery-main img{

        height:360px;

    }

    .gallery-bottom{

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

    }

}

/*==================================================
                MOBILE
==================================================*/

@media(max-width:576px){

    .gallery-section{

        padding:70px 0;

    }

    .gallery-header{

        margin-bottom:45px;

    }

    .gallery-header h2{

        font-size:30px;

    }

    .gallery-header p{

        font-size:15px;

    }

    .gallery-side{

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

    }

    .gallery-bottom{

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

    }

    .gallery-side img,
    .gallery-bottom img{

        height:140px;

    }

    .gallery-main img{

        height:260px;

    }

}
/*==================================================
    HI-TECH GALLERY
    FINAL SPACING + RESPONSIVE OVERRIDE
==================================================*/


/*==================================================
    GLOBAL
==================================================*/

.gallery-section{

    padding-top:70px;

    padding-bottom:70px;

}

.gallery-header{

    margin-top:0;

    margin-bottom:45px;

}


/*==================================================
    GALLERY HERO
==================================================*/

.gallery-hero{

    height:600px;

}

.gallery-hero-content{

    padding:0 20px;

}

.gallery-hero-content h1{

    margin-bottom:20px;

}

.gallery-hero-content::after{

    margin-top:25px;

}


/*==================================================
    GALLERY TOP
==================================================*/

.gallery-top{

    gap:22px;

    margin-bottom:25px;

}


/*==================================================
    MAIN IMAGE
==================================================*/

.gallery-main img{

    height:430px;

}


/*==================================================
    SIDE IMAGES
==================================================*/

.gallery-side{

    gap:15px;

}

.gallery-side img{

    height:200px;

}


/*==================================================
    BOTTOM IMAGES
==================================================*/

.gallery-bottom{

    gap:15px;

}

.gallery-bottom img{

    height:160px;

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

    .gallery-hero{

        height:500px;

    }


    .gallery-section{

        padding-top:60px;

        padding-bottom:60px;

    }


    .gallery-header{

        margin-bottom:35px;

    }


    .gallery-header h2{

        font-size:40px;

    }


    .gallery-header p{

        margin-top:18px;

        line-height:1.75;

    }


    .gallery-top{

        grid-template-columns:1fr;

        gap:20px;

        margin-bottom:22px;

    }


    .gallery-main img{

        height:360px;

    }


    .gallery-side{

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

        gap:14px;

    }


    .gallery-side img{

        height:150px;

    }


    .gallery-bottom{

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

        gap:14px;

    }


    .gallery-bottom img{

        height:150px;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .gallery-hero{

        height:470px;

        padding:0 15px;

    }


    .gallery-hero-content{

        width:100%;

        max-width:650px;

        padding:0 15px;

    }


    .gallery-hero-content h1{

        font-size:36px;

        line-height:1.2;

        margin-bottom:18px;

    }


    .gallery-hero-content p{

        font-size:15px;

        line-height:1.7;

    }


    .hero-tag{

        font-size:12px;

        padding:8px 18px;

        margin-bottom:20px;

    }


    .gallery-hero-content::after{

        width:80px;

        height:4px;

        margin-top:22px;

    }


    /*----------------------------------------------
        GALLERY SECTION
    ----------------------------------------------*/

    .gallery-section{

        padding-top:45px;

        padding-bottom:45px;

    }


    .gallery-header{

        margin-bottom:28px;

    }


    .gallery-header h2{

        font-size:32px;

        line-height:1.2;

        padding-bottom:12px;

    }


    .gallery-header h2::after{

        width:70px;

        height:4px;

    }


    .gallery-header p{

        margin-top:16px;

        font-size:14px;

        line-height:1.7;

    }


    /*----------------------------------------------
        TOP GRID
    ----------------------------------------------*/

    .gallery-top{

        gap:18px;

        margin-bottom:20px;

    }


    /*----------------------------------------------
        MAIN IMAGE
    ----------------------------------------------*/

    .gallery-main{

        border-radius:18px;

    }


    .gallery-main img{

        height:300px;

        border-radius:18px;

        border-width:2px;

    }


    /*----------------------------------------------
        SIDE IMAGES
    ----------------------------------------------*/

    .gallery-side{

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

        gap:12px;

    }


    .gallery-side img{

        height:135px;

        border-radius:14px;

    }


    /*----------------------------------------------
        BOTTOM GRID
    ----------------------------------------------*/

    .gallery-bottom{

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

        gap:12px;

    }


    .gallery-bottom img{

        height:135px;

        border-radius:14px;

    }

}


/*==================================================
    SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .gallery-hero{

        height:440px;

    }


    .gallery-section{

        padding-top:38px;

        padding-bottom:38px;

    }


    .gallery-header{

        margin-bottom:24px;

    }


    .gallery-header h2{

        font-size:28px;

    }


    .gallery-header p{

        font-size:13px;

        line-height:1.65;

    }


    .gallery-top{

        gap:15px;

        margin-bottom:16px;

    }


    .gallery-main img{

        height:250px;

    }


    .gallery-side{

        gap:10px;

    }


    .gallery-side img{

        height:120px;

    }


    .gallery-bottom{

        gap:10px;

    }


    .gallery-bottom img{

        height:120px;

    }

}


/*==================================================
    VERY SMALL MOBILE
==================================================*/

@media (max-width:380px){

    .gallery-hero{

        height:410px;

    }


    .gallery-hero-content h1{

        font-size:27px;

    }


    .gallery-hero-content p{

        font-size:13px;

        line-height:1.6;

    }


    .gallery-section{

        padding-top:32px;

        padding-bottom:32px;

    }


    .gallery-header{

        margin-bottom:20px;

    }


    .gallery-header h2{

        font-size:25px;

    }


    .gallery-header p{

        font-size:12px;

    }


    .gallery-main img{

        height:220px;

    }


    .gallery-side img,
    .gallery-bottom img{

        height:105px;

    }


    .gallery-side,
    .gallery-bottom{

        gap:8px;

    }

}


/*==================================================
    PREVENT EXTRA HORIZONTAL SPACE
==================================================*/

.gallery-hero,
.gallery-section{

    width:100%;

    max-width:100%;

    overflow:hidden;

}


.gallery-hero-content,
.gallery-header,
.gallery-top,
.gallery-bottom,
.gallery-side{

    min-width:0;

}


/*==================================================
    MOBILE IMAGE SAFETY
==================================================*/

@media (max-width:768px){

    .gallery-main img,
    .gallery-side img,
    .gallery-bottom img{

        max-width:100%;

        object-fit:cover;

    }

}


/*==================================================
    REDUCE UNNECESSARY ANIMATION SPACE
==================================================*/

@media (prefers-reduced-motion:reduce){

    .gallery-hero{

        animation:none;

    }

    .gallery-hero-content,
    .gallery-header{

        animation:none;

    }

}