/* gallery.php — small additions on top of site.css */

/* Filter pills use aria-pressed (toggle buttons), site.css only styles aria-selected tabs. */
.filters .tab[aria-pressed="true"] { background: var(--arch); border-color: var(--arch); color: #fff; box-shadow: var(--shadow-blue); }

/* Caption chip on a masonry tile (a <span>, since <figcaption> is not valid inside <button>). */
.m-item .m-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); opacity: 0; transform: translateY(10px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.m-item:hover .m-cap, .m-item:focus-visible .m-cap { opacity: 1; transform: none; }
@media (hover: none) { .m-item .m-cap { opacity: 1; transform: none; } }

/* Admin-editable headings keep their legacy inline/span accents; restyle them in the new idiom. */
.page-hero h1 em[style] { color: var(--arch) !important; font-style: italic; }
#gallery-heading span { font-style: italic; font-weight: 400; color: var(--arch); }

.gallery-empty { text-align: center; margin: 0 auto; padding: 2rem 0; }