/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/assets/components/gallery.css by _dev/generate/theme-assets.mjs. Edit the
   snapshot and regenerate; a hand edit here fails the gate at commit
   rather than surviving to contradict its source. The snapshot is frozen:
   it has been the design of record since 2026-10-08 (frozenOn in its
   source.json), so it is edited in place and never re-synced.

     node _dev/generate/theme-assets.mjs redfish   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   all, and unchanged: the gallery component, every selector
   under .c-gallery.

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

/* gallery: the project gallery, its type chips and the grid of aged builds.
   Root: <section class="block c-gallery">. */
/* 12px under the chips rather than 28px: the gap down to the grid is tightened. */
.c-gallery .filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 8px 12px; }
.c-gallery .chips { display: flex; gap: 10px; flex-wrap: wrap; }
.c-gallery .chip { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--fg); padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.c-gallery .chip:hover { border-color: var(--fg); }
.c-gallery .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.c-gallery .result-count { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
/* ════ STANDS THE TEST OF TIME (aged builds) ════ */
.c-gallery .aged-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 26px); margin-top: clamp(30px, 4vw, 50px); }
.c-gallery .aged { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.c-gallery .aged-media { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(130% 120% at 78% 8%, #3a3a3a 0%, var(--ink-2) 42%, var(--ink) 100%); }
.c-gallery .aged-media .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-gallery .aged-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.94); background: rgba(17,17,17,.86); padding: 7px 12px; border-radius: 999px; }
.c-gallery .aged-badge b { font-size: 14px; color: var(--accent-light); }
.c-gallery .aged-years { position: absolute; bottom: 12px; right: 14px; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.c-gallery .aged-years span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: right; opacity: .85; }
.c-gallery .aged-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.c-gallery .aged-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.c-gallery .aged-body h3 { font-size: 19px; }
.c-gallery .aged-body h3 .loc { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .03em; color: var(--muted); margin-top: 5px; }
.c-gallery .aged-body p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 1080px) { .c-gallery .aged-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .c-gallery .aged-grid { grid-template-columns: 1fr; } }
