/* Gallery — column-count masonry + a native <dialog> fullscreen lightbox.
   Driven by build-blog.js (markup) + js/main.js (the lightbox + filter).
   Uses the design tokens from critical.css (--c-*, --dur-*, --ease-*, --font-mono);
   the fallbacks keep it sane if loaded standalone. */

/* --- section chrome (the home block + the /gallery.html page) --- */
.gallery-section,
.gallery-page {
    padding-block: clamp(56px, 8vw, 96px);
    background: var(--c-bg, #fff);
    color: var(--c-text, #1a1a1a);
}
.gallery-page { padding-block: clamp(56px, 8vw, 96px) clamp(72px, 10vw, 120px); }
.gallery-section__head,
.gallery-page__head {
    max-width: 680px;
    margin: 0 0 clamp(20px, 3vw, 32px);
}
.gallery-section__head h2,
.gallery-page__head h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-text, #1a1a1a);
}
.gallery-section__head p,
.gallery-page__head p {
    margin: 0;
    color: var(--c-text-muted, #555);
    font-size: clamp(1rem, 1.5vw, 1.1rem);
}

/* --- filter row (the /gallery.html page only) --- */
.gallery-filter {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 clamp(20px, 3vw, 28px);
}
.gallery-filter button {
    padding: 8px 16px;
    background: var(--c-surface, #f5f6f8);
    border: 1px solid var(--c-border, #dfe2e8);
    border-radius: 2px;
    font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--c-text-muted, #56585c);
    cursor: pointer;
    transition: color var(--dur-fast, .15s) var(--ease-out, ease),
                border-color var(--dur-fast, .15s) var(--ease-out, ease),
                background var(--dur-fast, .15s) var(--ease-out, ease);
}
.gallery-filter button:hover { color: var(--c-text, #1a1a1a); border-color: var(--c-accent, #2563eb); }
.gallery-filter button.is-active { background: var(--c-accent, #2563eb); color: #fff; border-color: var(--c-accent, #2563eb); }
.gallery-filter button:focus-visible { outline: 2px solid var(--c-accent, #2563eb); outline-offset: 2px; }

/* --- masonry grid (photos at their natural shape, packed into columns) --- */
.gallery-grid {
    column-count: 1;
    column-gap: clamp(12px, 1.4vw, 18px);
}
@media (min-width: 600px)  { .gallery-grid { column-count: 2; } }
@media (min-width: 920px)  { .gallery-grid { column-count: 3; } }
@media (min-width: 1320px) { .gallery-grid { column-count: 4; } }

.gallery-figure {
    break-inside: avoid;
    display: block;
    width: 100%;
    margin: 0 0 clamp(12px, 1.4vw, 18px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--c-border, #dfe2e8);
    border-radius: 2px;
    background: var(--c-surface, #f5f6f8);
}
.gallery-figure[hidden] { display: none; }
.gallery-figure > a {
    display: block;
    position: relative;
    line-height: 0;
    color: inherit;
    text-decoration: none;
}
.gallery-figure img {
    display: block;
    width: 100%;
    height: auto;                 /* natural aspect — no 4:3 crop */
    transition: transform var(--dur-slow, .4s) var(--ease-out, ease);
}
.gallery-figure > a:hover img,
.gallery-figure > a:focus-visible img { transform: scale(1.025); }
.gallery-figure > a:focus-visible { outline: 2px solid var(--c-accent, #2563eb); outline-offset: -2px; }
.gallery-figure figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    padding: 30px 14px 12px;
    font-size: 0.8125rem; line-height: 1.4;
    color: #fff;
    background: linear-gradient(to top, rgba(8, 10, 12, .72), rgba(8, 10, 12, 0));
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--dur-base, .25s) var(--ease-out, ease),
                transform var(--dur-base, .25s) var(--ease-out, ease);
    pointer-events: none;
}
.gallery-figure figcaption::after { content: "\2197"; flex: 0 0 auto; font-size: 0.875rem; opacity: .8; }
.gallery-figure > a:hover figcaption,
.gallery-figure > a:focus-visible figcaption,
.gallery-figure:focus-within figcaption { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .gallery-figure img,
    .gallery-figure figcaption { transition: none; }
    .gallery-figure > a:hover img { transform: none; }
}

/* --- "view all photos" link (home block) --- */
.gallery-more { margin-top: clamp(20px, 3vw, 28px); }
.gallery-more a {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 0.9375rem;
    color: var(--c-accent, #2563eb);
    text-decoration: none;
}
.gallery-more a:hover { text-decoration: underline; }

/* --- the fullscreen lightbox (one <dialog> per page; JS-driven) --- */
.lightbox {
    position: fixed; inset: 0;
    width: auto; height: auto; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: hidden;
    background: rgba(8, 10, 12, .96);
    color: #fff;
}
.lightbox::backdrop { background: rgba(8, 10, 12, .96); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox[open] { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] { animation: lb-in var(--dur-base, .25s) var(--ease-out, ease); }
    @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}
.lightbox__stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 96px);
}
.lightbox__img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain;
    box-shadow: var(--shadow-lg, 0 24px 70px rgba(0, 0, 0, .55));
    transition: opacity var(--dur-fast, .15s) var(--ease-out, ease);
}
.lightbox.is-loading .lightbox__img { opacity: .3; }
.lightbox__spinner {
    position: absolute; left: 50%; top: 50%; width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
    opacity: 0; pointer-events: none;
}
.lightbox.is-loading-slow .lightbox__spinner { opacity: 1; animation: lb-spin .8s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lightbox[open] { animation: none; }
    .lightbox.is-loading-slow .lightbox__spinner { animation: none; }
}

/* controls — close / prev / next */
.lightbox__ctrl {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; margin: 0;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 2px;
    color: #fff; cursor: pointer;
    transition: background var(--dur-fast, .15s) var(--ease-out, ease),
                border-color var(--dur-fast, .15s) var(--ease-out, ease);
}
.lightbox__ctrl:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); }
.lightbox__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__ctrl svg { width: 22px; height: 22px; display: block; }
.lightbox__ctrl[hidden] { display: none; }
.lightbox__close { top: 14px; right: 16px; }
.lightbox__prev  { left: 14px;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
    .lightbox__ctrl { width: 44px; height: 44px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
    .lightbox__close { right: 10px; top: 10px; }
    .lightbox__stage { padding: 56px 12px 64px; }
}

/* caption + counter bar */
.lightbox__bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap;
    padding: 14px clamp(16px, 4vw, 64px);
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    font-size: 0.875rem;
    pointer-events: none;
}
.lightbox__caption { color: rgba(255, 255, 255, .92); }
.lightbox__counter { margin-left: auto; flex: 0 0 auto; color: rgba(255, 255, 255, .65); font-family: var(--font-mono, monospace); font-size: 0.8125rem; }

/* the gallery sections use the --c-* tokens, so they adapt to dark automatically;
   the lightbox is dark in both themes by design. A couple of explicit nudges: */
[data-theme="dark"] .gallery-figure { background: var(--c-surface); }
[data-theme="dark"] .gallery-filter button { background: var(--c-surface); }