/* ==========================================================================
   Gallery grid and category filter. Loaded only by the gallery page.
   The enlarged view lives in lightbox.css, because the area guide uses it too.
   ========================================================================== */

.chip--active {
    border-color: var(--color-terracotta);
    background-color: var(--color-terracotta);
    color: #fff;
}

.chip--active:hover {
    border-color: var(--color-terracotta-dark);
    background-color: var(--color-terracotta-dark);
    color: #fff;
}

.chip--active .chip__count {
    color: rgb(255 255 255 / 0.75);
}

.gallery__status {
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* --- Masonry grid --------------------------------------------------------
   CSS columns rather than grid: the photos have mixed portrait and landscape
   aspect ratios, and columns let each one keep its own height instead of being
   cropped into a uniform cell. The trade-off is reading order — a screen reader
   goes down each column rather than across rows — which is fine for a set of
   photos where there is no meaningful sequence. */

.gallery {
    columns: 3;
    column-gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 64rem) {
    .gallery { columns: 2; }
}

@media (max-width: 40rem) {
    .gallery { columns: 1; }
}

.gallery__item {
    /* Never split a photo across two columns. */
    break-inside: avoid;
    margin: 0 0 var(--space-4);
}

/* `hidden` on a list item loses to `display: block` from the columns layout
   without this. The filter relies on it. */
.gallery__item[hidden] {
    display: none;
}

/* An anchor, so the thumbnail still opens the large photo without JavaScript. */
.gallery__button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    cursor: zoom-in;
    /* Only a hit target; the photo inside carries the meaning. */
    line-height: 0;
}

.gallery__button img {
    width: 100%;
    height: auto;
    transition: transform var(--duration-slow) var(--ease-out),
                filter var(--duration) var(--ease-out);
}

.gallery__button:hover img,
.gallery__button:focus-visible img {
    transform: scale(1.03);
}

.gallery__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-10) var(--space-4) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-snug);
    text-align: left;
    color: var(--color-sand);
    background: linear-gradient(to top, rgb(43 38 34 / 0.82), transparent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}

.gallery__button:hover .gallery__caption,
.gallery__button:focus-visible .gallery__caption {
    opacity: 1;
}

/* Touch devices have no hover, so the caption would never be reachable. */
@media (hover: none) {
    .gallery__caption { opacity: 1; }
}

.gallery__empty {
    padding: var(--space-16) 0;
    text-align: center;
    color: var(--color-ink-muted);
}