/* ===== PAGE HEADER BANNER ===== */
.page__header {
    padding-top: 8rem;
    padding-bottom: 3rem;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/gallery_header.jpg');
    background-size: cover;
    background-position: center 40%;
    text-align: center;
}

.page__header-title {
    font-size: var(--biggest-font-size);
    color: #fff;
    margin-bottom: var(--mb-0-5);
}

.page__header-subtitle {
    font-size: var(--h3-font-size);
    color: var(--text-color);
}

/* ===== GALLERY GRID STYLING ===== */
.gallery__grid {
    display: grid;
    /* Create a responsive grid with a minimum item width of 250px */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Set a consistent row height to build the grid from */
    grid-auto-rows: 250px;
    /* Automatically flow items into empty spaces */
    grid-auto-flow: dense;
    gap: 1rem;
}

.gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.2);
}

/* Define how much grid space larger items should take up */
.gallery__item--large {
    grid-row: span 2; /* This item will be twice as tall */
}

.gallery__item--wide {
    grid-column: span 2; /* This item will be twice as wide */
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is key to making the images fill the space */
    transition: transform .4s ease-in-out, filter .3s;
}

/* ===== GALLERY INTERACTIVE HOVER EFFECT ===== */
.gallery__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(38, 61%, 50%, 0.5); /* Semi-transparent gold overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Hidden by default */
    transition: opacity .4s ease;
}

.gallery__overlay i {
    font-size: 3rem;
    color: #fff;
}

.gallery__item:hover .gallery__overlay {
    opacity: 1; /* Show the overlay on hover */
}

.gallery__item:hover img {
    transform: scale(1.05); /* Zoom the image slightly on hover */
    filter: brightness(0.8);
}

/* Responsive adjustments for the grid on larger screens */
@media screen and (min-width: 768px) {
    .gallery__item--wide {
        grid-row: span 1; 
    }
}


@media screen and (max-width: 600px) {
    .gallery__item--wide {
        grid-column: span 1; 
    }
}