/*
 * BlazingTrips - Travel Moments Photo Gallery.
 *
 * Loaded after bt.css, from $page['stylesheets'] in Home::index(). It is a
 * short sheet on purpose: the client supplied no design for this section, so
 * nothing here invents a new visual language. The tiles are bt.css's existing
 * .bt-gallery / .bt-gallery__item block, which the hotel detail page already
 * uses, and every colour, radius and spacing value below comes from the .bt
 * tokens rather than a new palette.
 *
 * All that is genuinely new is the wall modifier: bt.css's .bt-gallery is a
 * single column stack meant to sit inside a detail page's narrow content
 * column, and this section is a full width band on the home page.
 *
 * Two columns and four columns, and nothing in between. That is deliberate.
 * Every count the partial will hand us is a multiple of four (see the header
 * comment in views/home/partials/gallery.php), so a 2-up and a 4-up wall
 * always tile completely - no half empty final row at any width. Adding a
 * 3-up band would break that guarantee for the sake of one breakpoint.
 *
 * These rules will be folded back into bt.css once the parallel section work
 * lands; they live here only to keep three agents off one file.
 */

.bt-gallery--wall {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    /* bt.css gives .bt-gallery a bottom margin for the detail page, where a
       booking panel follows it. Here the section padding already does that. */
    margin-bottom: 0;
}

/* The cap bt.css puts on a lone .bt-gallery item is for a one image detail
   page. A wall is many small tiles and must not inherit it. */
.bt-gallery--wall .bt-gallery__item {
    aspect-ratio: 1 / 1;
    max-height: none;
    border: 1px solid var(--bt-line);
}

/* No lightbox, no captions, no links: there is no gallery page to link to and
   no per image copy worth printing over a photo. The only affordance is a slow
   zoom, which reads as "these are photographs" without promising a click. */
.bt-gallery--wall .bt-gallery__item img {
    transition: transform .4s ease;
}

.bt-gallery--wall .bt-gallery__item:hover img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .bt-gallery--wall .bt-gallery__item img,
    .bt-gallery--wall .bt-gallery__item:hover img {
        transition: none;
        transform: none;
    }
}

@media (min-width: 768px) {
    .bt-gallery--wall {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .bt-gallery--wall .bt-gallery__item {
        aspect-ratio: 4 / 3;
    }
}