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

/* Section: gallery */
.gallery-section{
    padding: 50px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #f8fafc 100%);
    position: relative;
}

  /* layout container */  
.container{
    width:90%;
    max-width:1300px;
    margin:0 auto;
}

/* Header: gallery heading */
.gallery-header{
    text-align:center;
    margin-bottom:60px;
    animation:fadeDown 1s ease forwards;
}

.gallery-header h2{
    font-size: 38px;
    font-weight: 800;
    color: #074171;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    letter-spacing: -1px;
}

 

.gallery-header p{
    margin-top: 20px;
    max-width: 700px;
    margin: auto;
    color: #555555;
    line-height: 1.7;
    font-size: 15px;
}

/* Layout: top gallery */
.gallery-top{
    display:grid;
    grid-template-columns:1.8fr 1fr;
    gap:25px;
    margin-bottom:40px;
}

/* Component: main image */
.gallery-main img{
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 16px;
    border: 4px solid #074171;
    box-shadow: 0 20px 60px rgba(7, 65, 113, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modifier: fade transition */
.gallery-main img.fade{
    opacity:0;
}

/* Component: side thumbnails */
.gallery-side{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.gallery-side img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 4px solid transparent;
    box-shadow: 0 8px 24px rgba(7, 65, 113, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Component: bottom thumbnail grid */
.gallery-bottom{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.gallery-bottom img{
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 4px solid transparent;
    box-shadow: 0 8px 24px rgba(7, 65, 113, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State: active thumbnail */
.gallery-side img.active,
.gallery-bottom img.active{
    border: 2px solid #FFD60A;
    box-shadow: 0 12px 35px rgba(255, 214, 10, 0.3);
}

/* Interaction: hover effect */
.gallery-side img:hover,
.gallery-bottom img:hover{
    transform: translateY(-8px) scale(1.05);
    border: 2px solid #070429;
    box-shadow: 0 18px 45px rgba(255, 214, 10, 0.25);
}

/* Keyframes: fade down */
@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Responsive rules */
@media(max-width:992px){

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

    .gallery-main img{
        height:350px;
    }

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


/* Mobile view adjustments */
@media(max-width:576px){

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

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

    /* ALL SMALL IMAGES SAME SIZE */
    .gallery-side img,
    .gallery-bottom img{
        height:140px;
    }

    .gallery-main img{
        height:260px;
    }
}