/* gallery.css — editorial masonry, filters, lightbox */
.gallery { background: #090807; }
.gal__head { max-width: none; }
.gal__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-block-start: 10px; }
.gal__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gal__filter { min-height: 42px; padding: 8px 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .85rem; color: var(--ivory-2); transition: background-color var(--d-1), color var(--d-1), border-color var(--d-1); }
html:lang(ar) .gal__filter { font-size: .95rem; }
.gal__filter:hover { border-color: var(--gold); color: var(--ivory); }
.gal__filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--night); }
.gal__count { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
html:lang(ar) .gal__count { font-family: var(--f-text); letter-spacing: 0; text-transform: none; font-size: .9rem; }

.gal__grid { columns: 3 300px; column-gap: clamp(12px, 1.6vw, 22px); }
.gal__tile { position: relative; display: block; width: 100%; margin-block-end: clamp(12px, 1.6vw, 22px); break-inside: avoid; overflow: hidden; background: var(--char-2); }
.gal__img { display: block; aspect-ratio: var(--ar); overflow: hidden; }
.gal__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out), filter var(--d-2); filter: saturate(.9); }
.gal__tile:hover .gal__img img, .gal__tile:focus-visible .gal__img img { transform: scale(1.04); filter: none; }
.gal__tile::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; transition: border-color var(--d-2); }
.gal__tile:hover::after, .gal__tile:focus-visible::after { border-color: rgba(220,192,138,.55); }
.gal__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: 36px 16px 14px; text-align: start; font-size: .84rem; line-height: 1.45; color: var(--ivory);
  background: linear-gradient(180deg, transparent, rgba(10,9,8,.88)); opacity: 0; transform: translateY(8px); transition: opacity var(--d-2), transform var(--d-2) var(--ease-out);
}
.gal__tile:hover .gal__cap, .gal__tile:focus-visible .gal__cap { opacity: 1; transform: none; }
@media (hover: none) { .gal__cap { opacity: 1; transform: none; padding-block-start: 28px; } }
@media (max-width: 600px) { .gal__grid { columns: 1; } }

/* ------------------------------------------------------------ lightbox */
dialog.a26-dialog--lightbox { width: 100vw; height: 100dvh; }
dialog.a26-dialog--lightbox::backdrop { background: rgba(4,3,3,.94); }
.lb { background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; grid-template-rows: 1fr auto; }
.lb__stage { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; padding: 64px clamp(16px, 7vw, 110px) 12px; }
.lb__img { max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; box-shadow: var(--shadow-exhibit); animation: lb-in var(--d-2) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ivory); background: rgba(10,9,8,.6); border: 1px solid var(--line-2); transition: border-color var(--d-1), color var(--d-1);
}
.lb__nav:hover { border-color: var(--gold); color: var(--gold-hi); }
.lb__nav .icon { width: 22px; height: 22px; }
.lb__nav--prev { inset-inline-start: clamp(8px, 2vw, 32px); }
.lb__nav--next { inset-inline-end: clamp(8px, 2vw, 32px); }
.lb__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px clamp(16px, 7vw, 110px) 26px; }
.lb__caption { display: grid; gap: 4px; color: var(--ivory); font-size: .98rem; max-width: 60rem; }
.lb__place { font-size: .8rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
html:lang(ar) .lb__place { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.lb__count { color: var(--mute); font-size: .8rem; white-space: nowrap; }
html:lang(ar) .lb__count { font-family: var(--f-text); font-size: .95rem; }
@media (max-width: 720px) {
  .lb__stage { padding: 60px 8px 8px; }
  .lb__nav { top: auto; bottom: 90px; transform: none; width: 48px; height: 48px; }
  .lb__bar { padding-inline: 16px; flex-direction: column; gap: 6px; }
}