/* ==========================================================================
   K-BIAN — Gallery page

   Rebuilt August 2026 (client review: "The Gallery is not orderly"). A
   uniform CSS grid of 4:3 cards, replacing the previous justified-row
   layout — every card the same size regardless of its photo's native
   aspect ratio or its caption's length. No lightbox: every photo is a real
   <a> to its own full-size file, so the page works completely with
   JavaScript disabled.
   ========================================================================== */

.gallery-theme__count {
    margin-block-start: -0.5rem;
    margin-block-end: var(--kb-space-lg);
    font-size: var(--fs-small);
    color: var(--kb-text-muted);
}

.page-section--dark .gallery-theme__count {
    color: var(--kb-cream);
    opacity: 0.7;
}

/* ==========================================================================
   Uniform card grid — 4 across desktop, 2 tablet, 1 mobile
   ========================================================================== */

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem; /* 28px, Rule 4 floor */
}

@media (min-width: 37.5em) { /* 600px */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 56.25em) { /* 900px */
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Square card, caption/credit overlaid directly on the photo (a dark scrim
   gradient at the bottom) rather than a separate white strip beneath it —
   client feedback was that any visible white margin around or below a
   photo reads as broken, not "orderly". This makes every card a single
   flush square with zero non-photo area other than the card's own hairline
   border and shadow. */
.gallery-card {
    display: block;
    position: relative;
    background-color: var(--kb-ink);
    border: var(--kb-border-thin) solid rgb(var(--kb-ink-rgb) / 0.1);
    border-radius: var(--kb-radius-md);
    overflow: hidden;
    box-shadow: var(--kb-shadow-sm);
    transition: box-shadow var(--kb-duration-fast) var(--kb-ease-out);
}

.gallery-card:hover,
.gallery-card:focus-visible {
    box-shadow: var(--kb-shadow-md);
}

/* Fixed 1:1 ratio — every card exactly square regardless of the source
   photo's own aspect ratio, cropped to fit rather than letterboxed. */
.gallery-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--kb-duration-fast) var(--kb-ease-out);
}

.gallery-card:hover .gallery-card__media img,
.gallery-card:focus-visible .gallery-card__media img {
    transform: scale(1.06);
}

/* Overlaid on the image itself, bottom-anchored, never adding height to
   the card — a card with no caption/credit shows no scrim at all rather
   than an empty band. */
.gallery-card__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-3xs);
    padding: var(--kb-space-lg) var(--kb-space-md) var(--kb-space-sm);
    background: linear-gradient(to top, rgb(var(--kb-green-900-rgb) / 0.85), transparent);
}

.gallery-card__text {
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--kb-cream);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card__credit {
    font-size: var(--fs-small);
    color: var(--kb-cream);
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-card,
    .gallery-card__media img {
        transition: none;
    }

    .gallery-card:hover .gallery-card__media img,
    .gallery-card:focus-visible .gallery-card__media img {
        transform: none;
    }
}