/* Advanced Architectural Gallery Layout */

.gallery-section {
    width: 100%;
    background: white;
    padding: 0 4rem 8rem 4rem; /* Generous bottom spacing */
    display: flex;
    justify-content: center;
}

.gallery-grid {
    width: 100%;
    max-width: 1600px; /* Wider than text content for impact */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto); /* Allow rows to adapt */
    gap: 2rem; /* Clean, consistent gap */
    align-items: start;
}

.gallery-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Optional: Entrance animation hook */
    opacity: 0; 
    animation: fadeUp 0.8s ease forwards;
}

/* Staggered animation delays handled in CSS or JS, here's a simple loop for up to 10 items */
.gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-item:nth-child(5) { animation-delay: 0.5s; }
/* ... and so on */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); /* Professional easing */
    filter: grayscale(10%); /* Slight desaturation for cohesion */
}

/* Micro-interaction: Subtle scale on hover */
.gallery-item:hover img {
    transform: scale(1.03);
    filter: grayscale(0%);
}

/* Grid Spans */
.span-12 { grid-column: span 12; aspect-ratio: 21/9; } /* Cinematic Wide */
.span-8 { grid-column: span 8; aspect-ratio: 16/10; } /* Standard Landscape */
.span-6 { grid-column: span 6; aspect-ratio: 4/5; }  /* Portrait */
.span-4 { grid-column: span 4; aspect-ratio: 1/1; }  /* Square/Detail */
.span-4-vert { grid-column: span 4; aspect-ratio: 9/16; } /* Tall detail */

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .gallery-section { padding: 0 2rem 6rem; }
    .gallery-grid { gap: 1rem; }
    
    .span-8 { grid-column: span 12; }
    .span-4 { grid-column: span 6; aspect-ratio: 4/3; }
    .span-4-vert { grid-column: span 6; }
}

@media (max-width: 768px) {
    .gallery-section { padding: 0 1rem 4rem; }
    .gallery-grid { display: flex; flex-direction: column; gap: 1rem; }
    
    .gallery-item { width: 100%; aspect-ratio: auto !important; }
    .gallery-item img { height: auto; }
}

/* Lightbox Styles (Simple) */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98); /* Very light, architectural feel */
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
}