/* Container */
.brookewater-gallery-grid {
    max-width: 1350px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    gap: 40px; /* 40px total gap between items */
}

/* Card */
.brookewater-gallery-card {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color:#fff !important;
}

/* Thumbnail */
.brookewater-gallery-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.brookewater-gallery-card:hover .brookewater-gallery-thumb img {
    transform: scale(1.02);
}

/* Content overlay (bottom bar) */
.brookewater-gallery-card-green .brookewater-gallery-content{
    background-color:var(--e-global-color-14d7717);
}
.brookewater-gallery-card-blue .brookewater-gallery-content{
    background-color:var(--e-global-color-secondary);
}
.brookewater-gallery-content {
    background: #446b6b; /* default overlay background */
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.brookewater-gallery-title {
    margin: 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-family: var(--e-global-typography-cd7ce25-font-family), Sans-serif;
    color:#fff !important;
}

/* Button */
.brookewater-gallery-btn {
    background: #446b6b; /* fallback, override per brand color */
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.brookewater-gallery-btn:hover {
    background: #333; /* hover state */
}

/* Responsive */
@media (max-width: 1024px) {
    .brookewater-gallery-grid {
        grid-template-columns: 1fr; /* 1 column on tablets/mobile */
    }
}



/* Single Page Gallery CSS */

.brookewater-masonry-grid {
    max-width: 1350px;
    margin: 0 auto;
}

.brookewater-masonry-item {
    width: calc(25% - 20px); /* 4 columns with gutter */
    margin-bottom: 20px;
    float: left;
}

.brookewater-masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Outline style */
    border: 1px solid #e0e0e0 !important;        /* light grey border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; /* subtle shadow */
}

.brookewater-masonry-item:hover img {
    transform: scale(1.03) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important; /* stronger shadow on hover */
}


/* Responsive */
@media (max-width: 1024px) {
    .brookewater-masonry-item {
        width: calc(50% - 20px); /* 2 columns */
    }
}

@media (max-width: 600px) {
    .brookewater-masonry-item {
        width: 100%; /* single column */
    }
}