.gallery-page { padding-bottom: 88px; }
.gallery-intro { max-width: 850px; margin: 0 auto; padding: 42px 0 35px; text-align: center; }
.gallery-intro h1 { margin-top: 8px; font-size: clamp(31px, 4vw, 54px); line-height: 1.08; letter-spacing: -.035em; }
.gallery-intro p { max-width: 680px; margin: 18px auto 0; color: #5d5a54; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; }
.gallery-filters button { min-height: 44px; padding: 10px 19px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gallery-filters button[aria-pressed="true"] { border-color: var(--graphite); background: var(--graphite); color: var(--white); }
.gallery-filters button:hover { border-color: var(--gold-dark); }
.gallery-filters button:focus-visible, .gallery-item__preview:focus-visible, .gallery-lightbox button:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; }
.gallery-item { min-width: 0; }
.gallery-item[hidden] { display: none; }
.gallery-item figure { margin: 0; }
.gallery-item__preview { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid #e9e4dc; border-radius: 15px; background: #eeeae3; }
.gallery-item__preview img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.gallery-item__preview:hover img { transform: scale(1.025); }
.gallery-item__play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 64px; height: 64px; place-items: center; padding-left: 4px; transform: translate(-50%, -50%); border: 1px solid #ffffff9e; border-radius: 50%; background: #171616d9; box-shadow: 0 8px 26px #0005; color: #fff; font-size: 23px; }
.gallery-item figcaption { padding: 13px 3px 0; }
.gallery-item h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.32; }
.gallery-item p { margin: 7px 0 0; color: #65625d; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gallery-lightbox { position: fixed; width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 56px 18px 14px; overflow: auto; border: 1px solid #52483b; border-radius: 17px; background: #171717; box-shadow: 0 22px 70px #0009; color: #fff; }
.gallery-lightbox::backdrop { background: #080808e8; }
.gallery-lightbox__close { position: absolute; top: 10px; right: 12px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #ffffff4d; border-radius: 50%; background: #292929; color: #fff; font-size: 27px; cursor: pointer; }
.gallery-lightbox__stage { display: grid; place-items: center; min-height: min(55vh, 580px); }
.gallery-lightbox__stage img, .gallery-lightbox__stage video { display: block; max-width: 100%; max-height: min(70vh, 680px); width: auto; height: auto; object-fit: contain; }
.gallery-lightbox__stage video { width: 100%; }
.gallery-lightbox__caption { margin: 16px auto 8px; text-align: center; line-height: 1.45; }
.gallery-lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.gallery-lightbox__nav button { min-width: 46px; min-height: 42px; border: 1px solid #ffffff4d; border-radius: 9px; background: #292929; color: #fff; font: inherit; font-size: 23px; cursor: pointer; }
.gallery-lightbox__count { min-width: 66px; text-align: center; color: #d9c4a4; font-size: 13px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .gallery-page { padding-bottom: 48px; }
  .gallery-intro { padding: 24px 0 26px; }
  .gallery-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -12px; padding: 0 12px 10px; scrollbar-width: thin; }
  .gallery-filters button { flex: 0 0 auto; padding-inline: 16px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 27px; }
  .gallery-item figcaption { padding-top: 10px; }
  .gallery-lightbox { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); padding: 54px 10px 12px; }
  .gallery-lightbox__stage { min-height: 48vh; }
  .gallery-lightbox__stage img, .gallery-lightbox__stage video { max-height: 62vh; }
}