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

/* Section: gallery */
.gallery-section{
    padding:80px 0;
    background:linear-gradient(to bottom, #f3f4f6, #e5e7eb);
}

  /* 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:35px;
    font-weight:700;
    color: #0b1f3a;
    position:relative;
    display:inline-block;
    padding-bottom:12px;
}

/* Underline accent */
.gallery-header h2::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
   
    height:4px;
    background:#facc15;
    border-radius:4px;
}

.gallery-header p{
    margin-top:20px;
    max-width:700px;
    margin:auto;
    color:#555;
    line-height:1.6;
}

/* 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:20px;
    border:3px solid  #0b1f3a;
    box-shadow:0 12px 30px rgba(0,0,0,0.25); /* SHADOW */
    transition:all 0.4s ease;
}

/* 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:16px;
    cursor:pointer;
    border:3px solid transparent;
    box-shadow:0 8px 20px rgba(0,0,0,0.2); /* SHADOW */
    transition:all 0.3s ease;
}

/* 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:16px;
    cursor:pointer;
    border:3px solid transparent;
    box-shadow:0 8px 20px rgba(0,0,0,0.2); /* SHADOW */
    transition:all 0.3s ease;
}

/* State: active thumbnail */
.gallery-side img.active,
.gallery-bottom img.active{
    border:3px solid #facc15;
}

/* Interaction: hover effect */
.gallery-side img:hover,
.gallery-bottom img:hover{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,0.3);
}

/* 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;
    }
}