/* ==========================================================================
   Photo and video galleries. Two pages, one grid: a card is a picture with
   its title under it, and the picture is what the reader came for, so it is
   given the room. Colours, type and spacing come from the site's own tokens.
   ========================================================================== */

.gallery-page {
    --gal-line: #e4eae4;
    --gal-muted: #5b6b5e;
    background: var(--snow-2, #f4f7f4);
}

/* ---------- Toolbar ---------- */
.gallery-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.gallery-filter {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border: 1px solid var(--gal-line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.gallery-filter:hover { border-color: var(--marigold); }

.gallery-filter.is-current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--snow);
    font-weight: 600;
}

.gallery-filter b {
    font-family: var(--ff-mono);
    font-size: .68rem;
    font-weight: 500;
    opacity: .7;
}

/* Pushed right when it sits beside the filters; on its own it starts at the
   left like everything else on the page. */
.gallery-count {
    margin: 0 0 0 auto;
    font-family: var(--ff-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gal-muted);
}

/* ---------- Grid ---------- */
.gallery-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.gallery-card {
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #0d2415;
    border: 1px solid var(--gal-line);
    text-decoration: none;
    isolation: isolate;
}

.gallery-card figure {
    margin: 0;
    /* Every card the same shape, whatever the photograph's proportions. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}

.gallery-card:hover img { transform: scale(1.05); }

/* The caption sits on the photograph, over a wash dark enough to read on
   whatever is underneath it. */
.gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.4rem .95rem .9rem;
    background: linear-gradient(180deg, rgba(0, 20, 8, 0) 0%, rgba(0, 20, 8, .82) 100%);
    color: var(--snow);
}

.gallery-caption strong {
    display: block;
    font-family: var(--ff-display);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    /* Long titles are clipped rather than covering the picture. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-caption span {
    display: block;
    margin-top: .25rem;
    font-family: var(--ff-mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--marigold);
}

.gallery-card::after {
    /* The zoom cue, bottom right, so a card reads as openable. */
    content: "\f4a5";
    font-family: bootstrap-icons;
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 20, 8, .55);
    color: #fff;
    font-size: .85rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.gallery-card:hover::after,
.gallery-card:focus-visible::after {
    opacity: 1;
    transform: none;
}

.gallery-card:focus-visible {
    outline: 2px solid var(--marigold);
    outline-offset: 3px;
}

/* ---------- Video cards ---------- */
.video-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--gal-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.video-card:hover {
    border-color: var(--marigold);
    transform: translateY(-2px);
}

.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0d2415;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}

.video-card:hover .video-thumb img { transform: scale(1.05); }

.video-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 20, 8, .28);
    transition: background .25s var(--ease);
}

.video-card:hover .video-play { background: rgba(0, 20, 8, .12); }

.video-play i {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: 1.3rem;
    padding-left: 3px;
    transition: transform .25s var(--ease), background .25s var(--ease);
}

.video-card:hover .video-play i {
    background: var(--marigold);
    color: var(--text);
    transform: scale(1.08);
}

.video-body {
    padding: 1rem 1.1rem 1.2rem;
}

.video-body strong {
    display: block;
    font-family: var(--ff-display);
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-body span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .6rem;
    font-family: var(--ff-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gal-muted);
}

.video-card:hover .video-body span { color: var(--ink); }

/* ---------- Empty state and pagination ---------- */
.gallery-empty {
    padding: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
    background: #fff;
    border: 1px dashed var(--gal-line);
    border-radius: 14px;
    color: var(--gal-muted);
}

.gallery-bar > .gallery-count:only-child {
    margin-left: 0;
}

.gallery-pagination {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.gallery-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-pagination .page-link {
    display: block;
    min-width: 38px;
    padding: .45rem .7rem;
    text-align: center;
    border: 1px solid var(--gal-line);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-size: .9rem;
    text-decoration: none;
}

.gallery-pagination .page-link:hover { border-color: var(--marigold); }

.gallery-pagination .active .page-link {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--snow);
    font-weight: 600;
}

.gallery-pagination .disabled .page-link {
    opacity: .45;
    pointer-events: none;
}

@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
    .gallery-count { margin-left: 0; width: 100%; }
}