/* DIALOG */
#gallery-dialog::backdrop{background:var(--color-overlay-dark)}
#gallery-dialog-panel{background:var(--color-gallery-dialog-bg);overflow:hidden}
#gallery-dialog-panel > header{align-items:center;background:var(--color-gallery-dialog-bg);display:flex;padding:0.75rem 1rem}
#gallery-dialog-close{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--color-surface);display:flex;height:2.5rem;justify-content:center;transition:background-color 0.15s;width:2.5rem}
#gallery-dialog-close:hover{background:var(--color-surface-overlay-10)}
#gallery-dialog-close .material-symbols-outlined{font-size:24px}
#gallery-dialog-nav{background:var(--color-gallery-dialog-bg);display:flex;flex-shrink:0;gap:0.75rem;-ms-overflow-style:none;overflow-x:auto;padding:0 1rem 1rem;scroll-snap-type:x proximity;scrollbar-width:none}
#gallery-dialog-nav::-webkit-scrollbar{display:none}
.gallery-dialog__nav-item{display:flex;flex-direction:column;flex-shrink:0;gap:0.5rem;scroll-snap-align:start;text-align:center;width:4.5rem}
.gallery-dialog__nav-thumb{align-items:center;border:2px solid transparent;border-radius:0.75rem;display:flex;height:4.5rem;justify-content:center;padding:0.125rem;position:relative;transition:border-color 0.15s;width:4.5rem}
.gallery-dialog__nav-thumb img{border-radius:0.5rem;height:100%;object-fit:cover;width:100%}
.gallery-dialog__nav-icon{align-items:center;backdrop-filter:blur(4px);background:var(--color-overlay-medium);border-radius:50%;color:var(--color-surface);display:inline-flex;height:1.5rem;justify-content:center;position:absolute;width:1.5rem;z-index:var(--z-base)}
.gallery-dialog__nav-icon .material-symbols-outlined{font-size:16px}
.gallery-dialog__nav-item.is-active .gallery-dialog__nav-thumb{border-color:var(--color-link)}
.gallery-dialog__nav-label{color:var(--color-text-light);font-size:0.75rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;transition:color 0.15s;white-space:nowrap}
.gallery-dialog__nav-item.is-active .gallery-dialog__nav-label{color:var(--color-surface)}
#gallery-dialog-content{background:var(--color-gallery-dialog-bg);flex:1;-ms-overflow-style:none;overflow-y:auto;overscroll-behavior:contain;padding:0 0.5rem calc(var(--gallery-dialog-bottom-offset, 5.5rem) + 1rem);position:relative;scroll-behavior:smooth;scrollbar-width:none}
#gallery-dialog-content::-webkit-scrollbar{display:none}
.gallery-dialog__section{scroll-margin-top:0}
.gallery-dialog__section + .gallery-dialog__section{margin-top:0.5rem}
.gallery-dialog__grid{display:grid;gap:0.5rem;grid-template-columns:repeat(6, minmax(0, 1fr))}
.gallery-dialog__media{background-color:var(--color-gallery-dialog-media);border:none;border-radius:0.5rem;display:block;overflow:hidden;padding:0;position:relative;transition:opacity 0.15s}
.gallery-dialog__media:hover{opacity:0.8}
.gallery-dialog__media img{height:100%;object-fit:cover;width:100%}
.gallery-dialog__media--portrait,.gallery-dialog__media--video{aspect-ratio:9 / 16;grid-column:span 2}
.gallery-dialog__media--landscape{aspect-ratio:4 / 3;grid-column:span 3}
.gallery-dialog__media-play{align-items:center;color:var(--color-surface);display:flex;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));font-size:2rem;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);z-index:var(--z-base)}
.gallery-dialog__media:focus-visible,.gallery-dialog__nav-item:focus-visible,#gallery-dialog-close:focus-visible,#gallery-viewer-close:focus-visible{outline:var(--focus-ring);outline-offset:2px}

/* FULLSCREEN VIEWER */
#gallery-viewer::backdrop{background:var(--color-overlay-darker)}
#gallery-viewer-panel{align-items:stretch;background:transparent;padding:1rem 1rem calc(var(--gallery-dialog-bottom-offset, 5.5rem) + 1rem)}
#gallery-viewer-close{align-items:center;align-self:flex-end;background:var(--color-surface-overlay-10);border:1px solid var(--color-surface-overlay-20);border-radius:var(--radius-full);color:var(--color-surface);display:flex;font-size:0.8125rem;font-weight:700;gap:0.25rem;margin-bottom:1rem;padding:0.5rem 0.75rem;transition:background-color 0.15s}
#gallery-viewer-close:hover{background:var(--color-surface-overlay-20)}
#gallery-viewer-close .material-symbols-outlined{font-size:18px}
#gallery-viewer-frame{align-items:center;background:transparent;border:none;border-radius:0;display:flex;flex:1;justify-content:center;min-height:0;padding:0}
#gallery-viewer-image{border-radius:0.5rem;max-height:100%;object-fit:contain;width:100%}
#gallery-viewer-caption{display:flex;flex-direction:column;gap:0.25rem;padding-top:0.875rem;text-align:center}
#gallery-viewer-title{color:var(--color-surface);font-size:0.9375rem;font-weight:700}

@media (min-width: 768px){
#gallery-dialog-panel{max-width:min(72rem, 100%)}
.gallery-dialog__grid{grid-template-columns:repeat(8, minmax(0, 1fr))}
.gallery-dialog__media--landscape{grid-column:span 4}
.gallery-dialog__media--portrait,.gallery-dialog__media--video{grid-column:span 2}
}