/* ===== Gallery Header ===== */
.gallery-header {
    position: relative;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url('../images/r.jpg') center/cover no-repeat;
    color: #fff;
}
.gallery-header .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}
.gallery-header .header-content {
    position: relative; z-index: 2;
}
.gallery-header h1 { font-size: 3rem; font-weight: 700; letter-spacing:1px; margin-bottom:10px; }
.gallery-header p { font-size:1.2rem; font-weight:400; letter-spacing:0.5px; }

/* ===== Gallery Grid ===== */
.gallery-section { padding: 60px 20px; background: #f4f4f4; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}
.gallery-card {
    position: relative; overflow: hidden;
    border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-card img {
    width: 100%; height: 220px; object-fit: cover;
    display: block; transition: transform 0.5s ease; cursor: pointer;
}
.gallery-card:hover img { transform: scale(1.1); }

/* Hover Overlay */
.hover-overlay {
    position: absolute; top:0; left:0;
    width:100%; height:100%; background: rgba(0,0,0,0.35);
    display:flex; justify-content:center; align-items:center;
    opacity:0; transition: opacity 0.3s ease;
}
.hover-overlay span {
    color: #fff; font-size: 1.2rem; letter-spacing:1px; font-weight:500;
}
.gallery-card:hover .hover-overlay { opacity:1; }

/* ===== Lightbox ===== */
#lightbox {
    display: none;              /* hide initially */
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    justify-content: center;    /* center horizontally */
    align-items: center;        /* center vertically */
    cursor: pointer;
}

#lightbox .lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    animation: fadeIn 0.4s ease;
    cursor: default; /* cursor normal over image */
}

#lightbox .close {
    position: absolute;
    top: 20px; right: 30px;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10000;
}

#lightbox .close:hover { color: #ff5050; }

@keyframes fadeIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* Make gallery image hover effect still works */
.gallery-card img { cursor: pointer; }


/* ===== Responsive ===== */
@media (max-width:768px){
    .gallery-header h1{ font-size:2rem; }
    .gallery-header p{ font-size:1rem; }
    .gallery-card img{ height:180px; }
}