/* ==========================================================================
   1. GLOBAL STYLES & RESET
   ========================================================================== */
body { 
    font-family: sans-serif; 
    background: #111; 
    color: #fff; 
    margin: 0; 
    padding: 20px; 
    box-sizing: border-box;
}

/* ==========================================================================
   2. STABLE 4-COLUMN GALLERY GRID
   ========================================================================== */
.gallery {
    column-count: 4; /* Creates exactly 4 columns across the screen */
    column-gap: 20px; /* Clean breathing room between columns */
    padding: 20px;
}

.gallery-item {
    break-inside: avoid; /* Essential: keeps the photo card intact */
    display: inline-block; /* Allows the card to scale vertically to fit text */
    width: 100%; /* Forces the item to fill the column width perfectly */
    margin-bottom: 20px; /* Clean breathing room below each photo card */
    position: relative;
    border-radius: 8px;
    overflow: visible; /* Changing from hidden to visible reveals your captions! */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: auto; /* Lets the height adapt naturally, ending all cropping and side padding */
    display: block;
    border-radius: 8px 8px 0 0; /* Rounds the top corners, keeps text frame crisp */
}

.gallery-item.featured {
    transform: scale(1.01); /* Gives your hero shot a subtle graphic presence */
}

.gallery-item:hover {
    transform: scale(1.02);
    z-index: 5;
}

/* ==========================================================================
   3. INTERACTIVE SMOOTH HOVER CAPTIONS
   ==========================================================================
.caption-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.gallery-item:hover .caption-overlay {
    opacity: 1;
}

.caption-overlay h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.caption-overlay p {
    margin: 0;
    font-size: 0.85rem;
    color: #ccc;
    letter-spacing: 0.5px;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.gallery-item:hover .caption-overlay h3,
.gallery-item:hover .caption-overlay p {
    transform: translateY(0);
}
*/

/* Item Details ========================================================================== */
.item-details {
    padding: 12px 5px 5px 5px; /* Clean breathing room below the asset frame */
    box-sizing: border-box;
    text-align: center;
}

/* Elegant framing header text */
.item-details h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #fff;
    text-align: center;
}

/* Subtle, muted subtext caption */
.item-details p {
    margin: 0;
    font-size: 0.8rem;
    color: #888; /* Soft gray so it stays visually secondary to the title */
    letter-spacing: 0.5px;
}

/* ==========================================================================
   4. LIGHTBOX POP-UP OVERLAY
   ========================================================================== */
.lightbox { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.9); 
    justify-content: center; 
    align-items: center; 
    z-index: 1000;
}

.lightbox img { 
    max-width: 90%; 
    max-height: 80%; 
    border: 3px solid #fff; 
}

/* ==========================================================================
   5. MINIMALIST FOOTER & COPYRIGHT NOTICE
   ========================================================================== */
footer {
    text-align: center;
    padding: 40px 20px;
    font-size: 0.85rem;
    color: #666;
    letter-spacing: 1px;
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1200px) { 
    .gallery { column-count: 3; } 
}

@media (max-width: 768px) { 
    .gallery { column-count: 2; } 
}

@media (max-width: 480px) { 
    .gallery { column-count: 1; } 
}