/* Gallery styles extracted from gallery view */

/* Masonry-like grid using CSS columns for organic layout */
.gallery-grid {
    /* Use column-width so the grid adapts fluidly to container width */
    column-width: 280px;
    column-gap: 18px;
}

@media (max-width: 1200px) {
    .gallery-grid {
        column-width: 240px;
    }
}

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

.gallery-item {
    /* Make items inline-block so column layout behaves predictably */
    display: inline-block;
    width: 100%;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(19, 24, 30, 0.06);
    background: #fff;
}

/* Override any global rule that forces a large fixed height (e.g. styles.css) */
.gallery-item {
    min-height: 0 !important;
}

/* Make the image determine the height. Use object-fit: cover for cropped tiles but allow natural height when needed */
.gallery-item img {
    width: 100%;
    height: auto;
    /* allow natural aspect ratio */
    display: block;
    transition: transform .35s ease;
    object-fit: cover;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

.gallery-caption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(4px);
}

/* Make some feature tiles larger for premium look */
.gallery-item--large {
    /* Make feature tile span all columns in supporting browsers */
    column-span: all;
    -webkit-column-span: all;
}

@supports not (column-span: all) {
    .gallery-item--large {
        /* fallback: ensure it visually appears larger by full width */
        display: block;
        width: 100%;
    }
}

/* Optional utility size modifiers you can apply per item to give variety
   - portrait: taller box (good for portrait images)
   - wide: wider visual presence via aspect ratio (still spans column cell)
*/
.gallery-item--portrait img {
    height: 420px;
    /* fixed taller height for portrait emphasis */
    object-fit: cover;
}

.gallery-item--wide img {
    height: 240px;
    object-fit: cover;
}

/* Two-column layout: left vertical tabs, right gallery */
.gallery-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}


/* Make the left column slightly wider for better layout */
.gallery-row .col-side {
    flex: 0 0 320px !important;
}

/* Side tabs - use block buttons so the whole area is clickable and matches service sidebar styles */
.side-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.list .item.side-tab {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    text-align: left;
    color: inherit;
    transition: background .18s ease, color .18s ease;
}

/* Hover and focus state */
.list .item.side-tab:hover,
.list .item.side-tab:focus {
    background: #E1A0A2;
    color: #fff;
}

/* Active / selected state uses the same color as hover per request */
.list .item.side-tab.active {
    background: #E1A0A2;
    color: #fff;
    box-shadow: none;
}

.gallery-panel {
    display: none;
}

.gallery-panel.active {
    display: block;
}

@media (max-width: 767px) {
    .gallery-row {
        flex-direction: column;
    }

    .side-tabs {
        flex-direction: row;
        overflow: auto;
    }

    .side-tab-btn {
        white-space: nowrap;
    }
}

/* before/after popup styles */
.before-after-popup .before-after-inner {
    padding: 10px 0;
}

.before-after-popup .caption {
    text-align: center;
    padding: 8px 0;
    font-weight: 600;
}

/* small responsive tweaks for the left column */
@media (min-width: 1200px) {
    .col-side {
        position: sticky;
        top: 120px;
    }
}