/* ==========================================================================
   Gallery

   Replaces the template's masonry grid, which depended on jQuery, Magnific
   Popup and lightGallery to show a picture. This is a CSS grid with a small
   self contained viewer, so the page drops three script dependencies.

   The old markup also carried filter classes inherited from the template
   demo (office, children-aid, commercial, construction, apartment, window)
   with no filter UI to use them, so every photo was tagged with something
   meaningless. Categories here are real and drive the filter bar.

   Kept in its own file because theme.css and site-ui.css are replaced by an
   external sync. Loaded last, so these win on equal specificity.
   ========================================================================== */

:root {
    --gal-ink: #3f3832;
    --gal-earth: #7b6d61;
    --gal-earth-dark: #62564d;
    --gal-gold: #c79c66;
    --gal-line: rgba(123, 109, 97, 0.24);
    --gal-cream: #fbf7f1;
}

/* ---------- Intro ---------- */
/* The title sat flush left, the lead was a centred 760px column so it started
   78px further in, the count went back to flush left and the filter bar was
   centred: four alignments in four consecutive elements. All centred now.
   The class in the selector is doing real work, since `body#bg .content-area p`
   sets text-align on any paragraph here. */
body#bg .content-area > .container > h1 {
    text-align: center;
}

/* The site draws its heading ornament as an ::after on the heading, but every
   rule for it is scoped to `.section-full .container`, and the gallery lives in
   `.content-area`. So the ornament never reached this page. Same asset, same
   proportions, centred under the title. */
body#bg .content-area > .container > h1::after {
    aspect-ratio: 4161 / 484;
    background-image: url("../images/decorative/retro-calligraphic-heading-divider.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    display: block;
    height: auto;
    margin: 20px auto 18px;
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
    width: clamp(160px, 18vw, 220px);
}

body#bg .content-area .gal-lead,
body#bg .gal-lead,
.gal-lead {
    color: #5c534b;
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto 10px;
    max-width: 760px;
    text-align: center;
}

body#bg .content-area .gal-count,
body#bg .gal-count,
.gal-count {
    color: #8a7d71;
    font-size: 14px;
    letter-spacing: 0.04em;
    margin: 0 0 26px;
    text-align: center;
    text-transform: uppercase;
}

/* ---------- Filter bar ---------- */
.gal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 30px;
    padding: 0;
}

.gal-filters button {
    background: #fff;
    border: 1px solid var(--gal-line);
    border-radius: 999px;
    color: #5c534b;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 9px 18px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.gal-filters button:hover {
    background: var(--gal-cream);
    border-color: var(--gal-earth);
}

.gal-filters button[aria-pressed="true"] {
    background: var(--gal-earth);
    border-color: var(--gal-earth);
    color: #fff;
}

.gal-filters button .n {
    opacity: 0.62;
    font-weight: 500;
    margin-left: 5px;
}

/* ---------- Grid ---------- */
.gal-grid {
    display: grid;
    gap: 14px;
    /* 240 rather than 255: the content container is 916px at common laptop
       widths, which gives three columns either way, but wide screens then get
       a fourth instead of stretching three tiles to 370px each. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.gal-grid > li {
    margin: 0;
    padding: 0;
}

.gal-grid > li[hidden] {
    display: none;
}

.gal-item {
    background: var(--gal-cream);
    border: 0;
    border-radius: 12px;
    cursor: zoom-in;
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

.gal-item img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 100%;
}

.gal-item:hover img,
.gal-item:focus-visible img {
    transform: scale(1.06);
}

/* the caption only exists on hover, so the grid stays a wall of photographs */
.gal-item::after {
    background: linear-gradient(to top, rgba(35, 30, 26, 0.82) 0%, rgba(35, 30, 26, 0) 62%);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.25s ease;
}

.gal-item:hover::after,
.gal-item:focus-visible::after {
    opacity: 1;
}

.gal-cap {
    bottom: 0;
    color: #fff;
    font-size: 13px;
    left: 0;
    line-height: 1.45;
    opacity: 0;
    padding: 14px 15px;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: left;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2;
}

.gal-item:hover .gal-cap,
.gal-item:focus-visible .gal-cap {
    opacity: 1;
    transform: none;
}

.gal-item:focus-visible {
    outline: 3px solid var(--gal-gold);
    outline-offset: 3px;
}

.gal-empty {
    color: #8a7d71;
    padding: 40px 0;
    text-align: center;
}

/* ---------- Viewer ---------- */
.gal-lb {
    align-items: center;
    background: rgba(28, 24, 21, 0.94);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 4000;
}

.gal-lb.is-open {
    display: flex;
}

.gal-lb figure {
    margin: 0;
    max-height: 100%;
    text-align: center;
}

.gal-lb img {
    border-radius: 8px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    max-height: calc(100vh - 150px);
    max-width: min(1400px, 92vw);
    object-fit: contain;
    width: auto;
}

.gal-lb figcaption {
    color: #f3ece3;
    font-size: 14.5px;
    line-height: 1.5;
    margin: 14px auto 0;
    max-width: 720px;
}

.gal-lb .gal-lb-num {
    color: #b6a897;
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

.gal-lb button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 46px;
    line-height: 1;
    position: absolute;
    transition: background-color 0.18s ease;
    width: 46px;
}

.gal-lb button:hover {
    background: rgba(255, 255, 255, 0.24);
}

.gal-lb button:focus-visible {
    outline: 3px solid var(--gal-gold);
    outline-offset: 2px;
}

.gal-lb-close { right: 18px; top: 18px; }
.gal-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.gal-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
    .gal-grid {
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .gal-filters {
        gap: 8px;
        margin-bottom: 22px;
    }

    .gal-filters button {
        font-size: 13px;
        padding: 8px 14px;
    }

    /* no hover on touch, so the caption would never show. It lives in the
       viewer instead, and the tiles stay clean. */
    .gal-cap { display: none; }

    .gal-lb { padding: 12px; }
    .gal-lb img { max-height: calc(100vh - 190px); }
    .gal-lb-prev { left: 8px; }
    .gal-lb-next { right: 8px; }
    .gal-lb-close { right: 8px; top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .gal-item img,
    .gal-item::after,
    .gal-cap {
        transition: none;
    }

    .gal-item:hover img {
        transform: none;
    }
}