/* Image-led masonry gallery using the shared graphite and silver palette. */
.gallery-header { position:sticky; top:0; z-index:20; background:#17191cee; backdrop-filter:blur(16px); border-bottom:1px solid var(--color-line); }
.gallery-header-inner { max-width:1540px; margin:auto; padding:var(--space-xl) var(--space-2xl); display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,340px) auto; align-items:center; gap:var(--space-lg); }
.gallery-header h1 { font-size:21px; font-weight:550; letter-spacing:0; }
.gallery-name-search { position:relative; margin:0; }
.gallery-name-search svg { position:absolute; left:var(--space-md); top:13px; color:var(--color-muted); width:17px; height:17px; }
.gallery-name-search input { padding-left:38px; height:44px; font-size:13px; font-weight:400; }
.gallery-page main { max-width:1540px; min-height:calc(100vh - 92px); padding:var(--space-2xl) var(--space-2xl) var(--space-3xl); }
.gallery-grid { position:relative; width:100%; }
.gallery-card { position:absolute; top:0; left:0; min-width:0; overflow:hidden; border:1px solid var(--color-line); border-radius:10px; background:var(--color-surface); box-shadow:0 8px 24px #0002; }
.gallery-open { width:100%; display:block; padding:0; border:0; border-radius:0; min-height:0; line-height:0; background:var(--color-image-mat); overflow:hidden; }
.gallery-open img { width:100%; height:auto; display:block; object-fit:contain; }
.gallery-open:focus-visible { outline-offset:-4px; }
.gallery-card-footer { display:flex; align-items:center; gap:var(--space-sm); padding:var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md); min-height:52px; }
.gallery-card-footer h2 { flex:1; min-width:0; font-size:12px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gallery-card-footer .icon-button { color:var(--color-accent); }
.gallery-card-footer .icon-button:hover { background:var(--color-soft-accent); }
.gallery-card.image-unavailable .gallery-open { min-height:120px; }
.gallery-card.image-unavailable img { color:var(--color-muted); line-height:1.7; font-size:12px; }
.gallery-loading,.gallery-more-wrap { text-align:center; padding:var(--space-2xl) 0; color:var(--color-muted); font-size:13px; }
.gallery-empty { min-height:52vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-md); text-align:center; }
.gallery-empty > svg { width:34px; height:34px; color:var(--color-muted); margin-bottom:var(--space-sm); }
.gallery-empty h2 { font-size:17px; font-weight:500; }
.gallery-empty p { color:var(--color-muted); font-size:13px; max-width:38ch; }
#gallery-error:empty { display:none; }
.gallery-search-result { display:flex; gap:var(--space-lg); align-items:center; padding-bottom:var(--space-xl); margin-bottom:var(--space-xl); border-bottom:1px solid var(--color-line); }
.gallery-search-result > img { width:56px; height:64px; object-fit:contain; border:1px solid var(--color-line); border-radius:6px; background:var(--color-image-mat); }
.gallery-search-result > div { min-width:0; flex:1; }
.gallery-search-result h2 { font-size:16px; margin-bottom:var(--space-xs); }
.gallery-search-result p { font-size:12px; }
.gallery-search-result button { font-size:12px; }
.gallery-preview { width:min(1080px,calc(100% - 32px)); padding:var(--space-xl); }
.gallery-preview-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-lg); margin-bottom:var(--space-lg); }
.gallery-preview-top > div:first-child { min-width:0; }
.gallery-preview-top h2 { font-size:17px; }
.gallery-preview-meta { margin-top:var(--space-xs); }
.gallery-preview-nav { display:flex; gap:var(--space-sm); flex:none; }
.gallery-preview-stage { background:var(--color-image-mat); min-height:160px; display:flex; justify-content:center; align-items:center; }
.gallery-preview-stage img { max-width:100%; max-height:65dvh; object-fit:contain; display:block; }
.gallery-preview-bottom { display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); margin-top:var(--space-lg); }
.gallery-preview-bottom p { overflow-wrap:anywhere; }
.gallery-preview-bottom button { flex:none; }
.gallery-search-dialog { width:min(480px,calc(100% - 32px)); }
.gallery-search-dialog .dialog-heading p { margin-top:var(--space-sm); }
.gallery-search-dialog .dropzone { min-height:240px; }
.gallery-search-dialog .query-preview { height:260px; }
.gallery-page button:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.gallery-page .gallery-open:focus-visible { outline-offset:-4px; }
@media (max-width:760px) {
 .gallery-header-inner { grid-template-columns:minmax(0,1fr) auto; padding:var(--space-lg); gap:var(--space-md); }
 .gallery-header h1 { font-size:20px; }
 .gallery-name-search { grid-column:1 / -1; grid-row:2; }
 .gallery-page main { padding:var(--space-lg) var(--space-lg) var(--space-2xl); }
 .gallery-card { border-radius:8px; }
 .gallery-card-footer { padding-left:var(--space-sm); gap:0; }
 .gallery-card-footer h2 { font-size:11px; }
 .gallery-preview { padding:var(--space-lg); }
 .gallery-preview-top { flex-wrap:wrap; }
 .gallery-preview-top > div:first-child { flex:1; min-width:120px; }
 .gallery-preview-top h2 { font-size:15px; }
 .gallery-preview-nav { gap:var(--space-xs); }
 .gallery-preview-nav .icon-button { width:36px; min-height:40px; padding:var(--space-xs); }
 .gallery-preview-stage img { max-height:58dvh; }
 .gallery-preview-bottom { align-items:flex-start; flex-direction:column; gap:var(--space-md); }
 .gallery-preview-bottom button { width:100%; }
 .gallery-search-result { flex-wrap:wrap; gap:var(--space-md); }
 .gallery-search-result > div { flex-basis:calc(100% - 80px); }
 .gallery-search-result button { margin-left:auto; }
}