.photo-gallery { background: #edf1df; overflow: hidden; }
.gallery-heading { align-items: flex-start; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 28px; }
.gallery-filter { appearance: none; border: 1px solid rgba(40,91,67,.24); border-radius: 999px; background: rgba(255,255,255,.48); color: #285b43; padding: 10px 16px; font: 700 12px/1 Manrope,sans-serif; cursor: pointer; transition: .35s ease; }
.gallery-filter:hover, .gallery-filter:focus-visible { background: #fff; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(40,91,67,.08); outline: none; }
.gallery-filter.active { background: #285b43; color: #fff; border-color: #285b43; }
.gallery-rail-wrap { position: relative; }
.dynamic-gallery { --gap: 20px; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: none; scroll-behavior: auto; overscroll-behavior-inline: contain; touch-action: pan-y pinch-zoom; padding: 20px 10px 26px; scrollbar-width: none; cursor: grab; user-select: none; }
.dynamic-gallery:active { cursor: grabbing; }
.dynamic-gallery::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gallery-card { position: relative; z-index: 1; flex: 0 0 calc((100% - var(--gap)*4)/5); aspect-ratio: 3/2; margin: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #dce6cf; box-shadow: 0 10px 28px rgba(32,61,46,var(--gallery-shadow,.07)); cursor: pointer; scroll-snap-align: center; opacity: 1; transform: scale(var(--gallery-scale,1)); will-change: transform; transition: box-shadow .2s linear; }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; transform: translateZ(0); transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.gallery-card.is-focused { opacity: 1; }
.gallery-card.is-focused img { filter: none; }
.gallery-card::after { content: 'Открыть'; position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.86); color: #285b43; font: 800 9px/1 Manrope,sans-serif; letter-spacing: .07em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: .35s ease; }
.gallery-card:hover img, .gallery-card:focus-visible img { filter: none; }
.gallery-card:hover::after, .gallery-card:focus-visible::after { opacity: 1; transform: none; }
.gallery-card:focus-visible { outline: 3px solid #d77c53; outline-offset: 3px; }
.gallery-scroll { position: absolute; z-index: 3; top: 50%; width: 42px; height: 42px; margin-top: -28px; border: 1px solid rgba(40,91,67,.13); border-radius: 50%; background: rgba(255,255,255,.93); color: #285b43; box-shadow: 0 9px 28px rgba(32,61,46,.14); font: 600 20px/1 sans-serif; cursor: pointer; transition: .3s ease; }
.gallery-scroll:hover { background: #fff; transform: scale(1.06); }
.gallery-scroll:focus-visible { outline: 2px solid #d77c53; outline-offset: 3px; }
.gallery-scroll-prev { left: -21px; }
.gallery-scroll-next { right: -21px; }
.gallery-scroll:disabled { opacity: .25; cursor: default; transform: none; }
.gallery-hint { margin: 8px 0 0; text-align: center; color: #6d7c74; font: 600 11px/1.4 Manrope,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gallery-lightbox { width: min(1180px,94vw); height: min(88vh,850px); padding: 0; border: 0; border-radius: 24px; background: #14251e; color: #fff; overflow: hidden; box-shadow: 0 24px 90px rgba(0,0,0,.5); }
.gallery-lightbox::backdrop { background: rgba(10,22,16,.88); backdrop-filter: blur(8px); }
.gallery-lightbox[open] { display: grid; grid-template-columns: 68px 1fr 68px; align-items: center; }
.gallery-lightbox figure { min-width: 0; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 0 18px; }
.gallery-lightbox img { display: block; max-width: 100%; max-height: calc(88vh - 80px); width: auto; height: auto; object-fit: contain; border-radius: 14px; }
.gallery-lightbox figcaption { min-height: 24px; margin-top: 12px; color: #dce8bc; font: 600 13px/1.4 Manrope,sans-serif; text-align: center; }
.lightbox-close, .lightbox-arrow { border: 0; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; transition: .25s ease; }
.lightbox-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; }
.lightbox-arrow { width: 46px; height: 60px; margin: auto; border-radius: 16px; font-size: 25px; }
.lightbox-close:hover, .lightbox-arrow:hover { background: #d77c53; }
.lightbox-close:focus-visible, .lightbox-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 900px) { .gallery-card { flex-basis: calc((100% - var(--gap)*2)/3); } .gallery-scroll-prev { left: -14px; } .gallery-scroll-next { right: -14px; } }
@media (max-width: 600px) { .gallery-filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -20px; padding: 2px 20px 9px 0; scrollbar-width: none; } .gallery-filter { flex: none; } .dynamic-gallery { --gap: 12px; margin-inline: -20px; padding: 18px 20px 24px; scroll-padding-inline: 20px; } .gallery-card { flex-basis: 84%; aspect-ratio: 4/3; border-radius: 20px; box-shadow: 0 12px 32px rgba(32,61,46,var(--gallery-shadow,.1)); } .gallery-card::after, .gallery-scroll { display: none; } .gallery-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; } .gallery-lightbox[open] { display: block; } .gallery-lightbox figure { width: 100%; height: 100%; padding: 42px 12px 18px; } .gallery-lightbox img { width: auto; height: auto; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px); object-fit: contain; border-radius: 10px; } .lightbox-arrow { position: absolute; z-index: 3; top: 50%; width: 42px; height: 58px; margin-top: -29px; background: rgba(20,37,30,.58); backdrop-filter: blur(5px); } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .gallery-lightbox figcaption { position: absolute; left: 56px; right: 56px; bottom: 8px; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .gallery-card, .gallery-card img, .gallery-filter, .dynamic-gallery { transition: none; scroll-behavior: auto; } .gallery-card, .gallery-card.is-focused { opacity: 1; } }