/* Hidden Roots – A service: masonry gallery and the previous/next pager */

/* CSS columns give a true masonry: every photo keeps its own shape */
.gallery {
    columns:    1;
    column-gap: var(--space-md);

    @media (min-width: 600px)  { columns: 2; }
    @media (min-width: 1100px) { columns: 3; }
}

.gallery__item {
    position:      relative;
    display:       block;
    margin-bottom: var(--space-md);
    break-inside:  avoid;
    border-radius: var(--radius-md);

    /* The frame's absolute image would collapse a masonry tile – here the
       image is in flow and sets the height. */
    img {
        position:   static;
        width:      100%;
        height:     auto;
        transition: transform 1.2s var(--ease-out), filter var(--transition-base);
    }

    &:hover img {
        transform: scale(1.04);
        filter:    brightness(.88);
    }

    &[hidden] {
        display: none;
    }
}

.gallery__zoom {
    position:      absolute;
    right:         14px;
    bottom:        14px;
    display:       grid;
    place-items:   center;
    width:         44px;
    height:        44px;
    border-radius: 50%;
    background:    var(--color-paper);
    color:         var(--color-bark);
    opacity:       0;
    transform:     scale(.8);
    transition:    opacity var(--transition-base), transform var(--transition-base);

    svg {
        width:  20px;
        height: 20px;
    }

    .gallery__item:hover &,
    .gallery__item:focus-visible & {
        opacity:   1;
        transform: none;
    }
}

.gallery__more {
    margin-top: var(--space-lg);
    text-align: center;
}

/* ── Previous / next ─────────────────────────────────────── */
.service-pager {
    padding-block: var(--space-xl);
}

.service-pager__inner {
    display:         flex;
    justify-content: space-between;
    gap:             var(--space-md);
}

.service-pager__link {
    display:         flex;
    align-items:     center;
    gap:             var(--space-md);
    color:           var(--color-bark);
    text-decoration: none;

    .frame {
        width:         72px;
        height:        72px;
        flex:          none;
        border-radius: 50%;
        transition:    transform var(--transition-base);
    }

    .eyebrow {
        display:       flex;
        margin-bottom: 4px;
    }

    strong {
        display: block;
        font:    var(--text-24nb);
    }

    &.is-next {
        text-align: right;

        .eyebrow {
            justify-content: flex-end;
        }
    }

    &:hover .frame {
        transform: scale(1.08) rotate(-3deg);
    }

    @media (max-width: 599px) {
        .frame { display: none; }
    }
}