.gallery-page-body { background:#fff; }
.gallery-page-main { overflow:hidden; }
.gallery-page-hero {
  min-height:310px;
  display:flex;
  align-items:center;
  padding:70px 0;
  color:#fff;
  text-align:center;
  background:
    linear-gradient(90deg,rgba(12,14,17,.88),rgba(20,22,25,.72)),
    url("../img/gallery-webp/about2.webp") center 52% / cover no-repeat;
}
.gallery-page-hero > .container { display:flex; flex-direction:column; align-items:center; }
.gallery-page-hero h1 { font-size:clamp(48px,5.2vw,66px); line-height:1; text-shadow:0 4px 20px #0006; }
.gallery-breadcrumb { display:flex; align-items:center; gap:12px; margin-top:18px; font-size:14px; font-weight:700; }
.gallery-breadcrumb a { color:#e3e5e7; }
.gallery-breadcrumb a:hover,
.gallery-breadcrumb span[aria-hidden="true"] { color:var(--red); }

.gallery-page-tabs {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:min(900px,calc(100% - 40px));
  margin:34px auto 0;
}
.gallery-page-tabs button {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:13px;
  min-height:72px;
  padding:13px 20px;
  border:1px solid #dedad4;
  border-radius:11px;
  background:#fff;
  color:#25282d;
  text-align:left;
  box-shadow:0 8px 20px #17191d0c;
  cursor:pointer;
  transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.gallery-page-tabs svg { width:36px; height:36px; padding:8px; border-radius:9px; background:#fff2f2; color:var(--red); fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.gallery-page-tabs span { display:flex; flex-direction:column; gap:2px; }
.gallery-page-tabs b { font-size:12px; }
.gallery-page-tabs small { color:#7a8086; font-size:9px; }
.gallery-page-tabs button:hover { border-color:#d7192059; color:var(--red); transform:translateY(-2px); }
.gallery-page-tabs button.active { border-color:var(--red); background:var(--red); color:#fff; box-shadow:0 12px 28px #d7192029; }
.gallery-page-tabs button.active svg { background:#fff; color:var(--red); }
.gallery-page-tabs button.active small { color:#ffe4e5; }
.gallery-page-tabs button:focus-visible { outline:3px solid #d7192038; outline-offset:3px; }

[data-gallery-panel][hidden] { display:none; }

.gallery-images-section { scroll-margin-top:88px; padding:88px 0 96px; background:#fff; }
.gallery-videos-section { scroll-margin-top:88px; padding:82px 0 92px; background:#f8f7f3; }
.gallery-page-heading { max-width:680px; margin:0 auto 38px; text-align:center; }
.gallery-page-kicker { display:flex; align-items:center; justify-content:center; gap:11px; color:var(--red); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.gallery-page-kicker::before,
.gallery-page-kicker::after { content:""; width:28px; height:1px; background:var(--red); }
.gallery-page-heading h2 { margin-top:11px; color:#17191d; font-family:"DM Sans",sans-serif; font-size:clamp(35px,4vw,48px); font-weight:700; line-height:1.1; text-transform:none; }
.gallery-page-heading p { margin-top:12px; color:#6d7379; font-size:12px; line-height:1.7; }

.gallery-page-grid {
  columns:4;
  column-gap:9px;
}
.gallery-page-item {
  position:relative;
  display:inline-block;
  width:100%;
  margin:0 0 9px;
  overflow:hidden;
  break-inside:avoid;
  border-radius:8px;
  background:#f2f0ec;
  box-shadow:0 7px 20px #17191d0c;
}
.gallery-page-item::after { content:"+"; position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--red); font:700 19px/1 "DM Sans",sans-serif; opacity:0; transform:translateY(-6px); transition:.25s ease; }
.gallery-page-item img { width:100%; height:auto; display:block; transition:transform .4s ease,filter .4s ease; }
.gallery-page-item:hover img { transform:scale(1.05); filter:saturate(1.05); }
.gallery-page-item:hover::after,
.gallery-page-item:focus-visible::after { opacity:1; transform:translateY(0); }
.gallery-page-item:focus-visible { outline:3px solid #d7192040; outline-offset:3px; }

.gallery-video-grid { max-width:1180px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0 auto; }
.gallery-video-card { min-width:0; overflow:hidden; border:1px solid #e3dfd9; border-top:3px solid var(--red); border-radius:12px; background:#fff; box-shadow:0 16px 38px #17191d0d; transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.gallery-video-card:hover { border-color:#d7192038; box-shadow:0 20px 44px #17191d17; transform:translateY(-3px); }
.gallery-video-frame { aspect-ratio:9/16; overflow:hidden; background:#16181c; }
.gallery-video-frame video { width:100%; height:100%; display:block; object-fit:contain; background:#16181c; }

.gallery-page-lightbox { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:24px; border:0; background:#08090be8; }
.gallery-page-lightbox::backdrop { background:#08090be8; }
.gallery-page-lightbox__frame { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.gallery-page-lightbox__image { max-width:min(1180px,calc(100vw - 48px)); max-height:calc(100vh - 48px); object-fit:contain; border-radius:8px; box-shadow:0 25px 80px #000b; }
.gallery-page-lightbox__close { position:fixed; z-index:2; top:22px; right:25px; width:46px; height:46px; display:grid; place-items:center; border:1px solid #ffffff4d; border-radius:50%; background:#fff; color:#17191d; font:400 30px/1 Arial,sans-serif; cursor:pointer; transition:.2s ease; }
.gallery-page-lightbox__close:hover { border-color:var(--red); background:var(--red); color:#fff; transform:rotate(90deg); }

@media (max-width:950px) {
  .gallery-page-grid { columns:3; }
  .gallery-video-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
}
@media (max-width:780px) {
  .gallery-video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .gallery-page-hero { min-height:255px; padding:55px 0; }
  .gallery-page-tabs { grid-template-columns:1fr; width:calc(100% - 28px); margin-top:26px; }
  .gallery-images-section, .gallery-videos-section { padding:65px 0 72px; }
  .gallery-images-section > .container, .gallery-videos-section > .container { width:calc(100% - 28px); }
  .gallery-page-grid { columns:2; column-gap:8px; }
  .gallery-page-item { margin-bottom:8px; }
  .gallery-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .gallery-page-lightbox { padding:14px; }
  .gallery-page-lightbox__close { top:14px; right:14px; }
}
@media (max-width:420px) {
  .gallery-page-grid { columns:1; }
  .gallery-video-grid { grid-template-columns:1fr; }
  .gallery-video-card { width:min(100%,280px); justify-self:center; }
}