/* Utilities */
.rounded-20 {
    border-radius: 20px;
}

.tile {
    background: #fff;
    border: 1px solid #eee;
}

.small-muted {
    font-size: .875rem;
    color: #6c757d;
}

.mb-gap {
    margin-bottom: 1.25rem;
}

.anchor-target {
    scroll-margin-top: 90px;
}

/* Figures & video */
.figure-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 14px;
}

    .video-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* Gallery layout */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    grid-auto-flow: dense;
}

    .gallery .shot {
        border: 1px solid #e6e6e6;
        border-radius: 14px;
        overflow: hidden;
        background: #fafafa;
    }

        .gallery .shot img {
            width: 100%;
            height: auto;
            display: block;
        }

    /* Large item (full row when you want it) */
    .gallery .shot-large {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
    }

    /* Optional narrower look */
    .gallery .shot-70 {
        width: 70%;
    }

    /* Bigger visual but responsive */
    .gallery .shot-large img {
        width: 100% !important;
        max-width: 600px; /* desktop cap */
        margin-inline: auto;
    }

    /* Background-filled variant */
    .gallery .shot-bg {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: .75rem;
    }

    /* Per-image tweaks */
    .gallery .shot-2main1 {
        aspect-ratio: 11 / 3; /* your wide hero look on desktop */
        min-height: 100px;
    }

    .gallery .shot-2main2 {
        aspect-ratio: 4 / 3;
        min-height: 300px;
    }

    /* Slightly larger card (spans 2 columns on wide screens) */
    .gallery .shot-bigger {
        grid-column: span 2;
    }

        .gallery .shot-bigger img {
            max-height: 600px;
            object-fit: cover;
        }

/* =========================
   Responsive breakpoints
   ========================= */

/* Laptops/tablets */
@media (max-width: 992px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

        .gallery .shot-70 {
            width: 100%;
        }
        /* avoid narrow center cards */
        .gallery .shot-bigger {
            grid-column: span 2;
        }
        /* still 2 cols if space */
        .gallery .shot-large img {
            max-width: 100%;
        }
    /* let images shrink */
}

/* Tablets / large phones */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

        .gallery .shot-bigger {
            grid-column: span 1;
        }
        /* no 2-col spans on small */
        /* Make the wide hero more reasonable on mobile */
        .gallery .shot-2main1 {
            aspect-ratio: 16 / 9;
            min-height: 200px;
        }

        .gallery .shot-2main2 {
            aspect-ratio: 4 / 3;
            min-height: 220px;
        }
}

/* Small phones */
@media (max-width: 576px) {
    .gallery {
        grid-template-columns: 1fr;
    }
        /* single column */
        .gallery .shot-70 {
            width: 100%;
        }

        .gallery .shot-bigger {
            grid-column: span 1;
        }

        .gallery .shot-large img {
            max-width: 100%;
        }

        /* Compact heights for mobile */
        .gallery .shot-2main1 {
            min-height: 180px;
        }

        .gallery .shot-2main2 {
            min-height: 200px;
        }
}

#scrollTopBtn {
    position: fixed;
    bottom: 28px; /* distance from bottom */
    right: 20px; /* distance from right edge (next to scrollbar) */
    z-index: 2000; /* above cards/sticky toc */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: 0;
    display: grid; /* centers the icon */
    place-items: center;
    opacity: .9;
    transition: opacity .2s ease, transform .1s ease;
}

    #scrollTopBtn:hover {
        opacity: 1;
    }

    #scrollTopBtn:active {
        transform: scale(.96);
    }

@media (max-width: 576px) {
    #scrollTopBtn {
        bottom: 20px;
        right: 12px;
    }
}