/* Scoped to the Gallery page; the shared header and footer are unchanged. */
.tevah-gallery { max-width: 1120px; }
.gallery-stage { position: relative; border: 6px solid var(--white); border-radius: 14px; box-shadow: var(--shadow); background: var(--cream); }
.gallery-open { position: relative; display: block; border-radius: 9px; overflow: hidden; touch-action: pan-y pinch-zoom; }
.gallery-open img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
.gallery-expand { position: absolute; right: 18px; bottom: 18px; padding: 8px 14px; border: 1px solid #e9d3a480; border-radius: 5px; background: #411321e8; color: var(--white); font-size: 13px; }
.gallery-arrow, .gallery-close { display: inline-grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border: 1px solid var(--gold-light); border-radius: 50%; background: var(--burgundy-deep); color: var(--white); font: 24px var(--font-sans); cursor: pointer; box-shadow: 0 4px 16px #0003; }
.gallery-arrow[hidden] { display: none; }
.gallery-arrow:hover, .gallery-close:hover { background: var(--burgundy); color: var(--gold-light); }
.gallery-stage > .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.gallery-prev { left: 16px; } .gallery-next { right: 16px; }
.gallery-navigation { display: flex; flex-direction: column; align-items: center; padding-top: 14px; }
.gallery-dots { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery-dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 5px; }
.gallery-dots button::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--burgundy); background: var(--white); }
.gallery-dots button[aria-current=true]::before { background: var(--burgundy); box-shadow: 0 0 0 4px var(--gold-light); }
.gallery-count { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .12em; }
body.gallery-modal-open { overflow: hidden; }
.gallery-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; padding: 72px 24px 18px; margin: 0; border: 0; background: #140b10f5; color: var(--white); }
.gallery-lightbox::backdrop { background: #140b10ed; }
.gallery-lightbox[open] { display: flex; justify-content: center; align-items: center; }
.gallery-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 1; font-size: 30px; }
.lightbox-content { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; gap: 10px; pointer-events: none; }
.lightbox-content > * { pointer-events: auto; }
#lightbox-image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 184px); object-fit: cover; border-radius: 5px; touch-action: pan-y pinch-zoom; }
.lightbox-controls { display: flex; justify-content: center; align-items: center; gap: 18px; max-width: 100%; }
.gallery-lightbox .gallery-count { color: var(--gold-light); }
.gallery-lightbox .gallery-dots button::before { border-color: var(--gold-light); background: transparent; }
.gallery-lightbox .gallery-dots button[aria-current=true]::before { background: var(--gold-light); box-shadow: 0 0 0 3px #c99d4d50; }
.gallery-lightbox :focus-visible { outline-color: var(--gold-light); }
@media (max-width: 600px) {
  .gallery-stage { border-width: 3px; border-radius: 9px; }
  .gallery-arrow { width: 44px; height: 44px; }
  .gallery-prev { left: 6px; } .gallery-next { right: 6px; }
  .gallery-expand { right: 8px; bottom: 8px; padding: 5px 8px; font-size: 11px; }
  .gallery-lightbox { padding-inline: 10px; }
  .lightbox-controls { gap: 10px; }
}

/* Real photos: a stable frame, captions, and room for additional navigation dots. */
.gallery-open img { aspect-ratio: 4 / 3; }
.gallery-caption { margin: 4px 0 8px; color: var(--burgundy); font-size: 14px; text-align: center; }
.gallery-lightbox .gallery-caption { color: var(--gold-light); }
.gallery-dots button { flex: 0 0 44px; }
.lightbox-controls .gallery-dots { max-width: min(352px, calc(100vw - 156px)); }
#lightbox-image { max-height: calc(100dvh - 250px); object-fit: contain; }
@media (max-width: 600px) { #lightbox-image { max-height: calc(100dvh - 290px); } }