/* ---------- КНОПКА ---------- */ .open-gallery{ display:block; margin:2rem auto 0; padding:.75rem 2rem; border:none; border-radius:999px; background:#007bff; color:#fff; font-size:1rem; cursor:pointer; transition:background .3s; } .open-gallery:hover{background:#0056b3} /* ---------- МОДАЛЬНОЕ ОКНО ---------- */ .modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; overflow-y:auto; align-items:flex-start; justify-content:center; } .modal-content{ position:relative; width:90%; max-width:1200px; margin:2rem auto; background:#1e293b; border-radius:12px; padding:2rem; color:#e2e8f0; } .close{ position:absolute; top:1rem; right:1.5rem; font-size:2rem; color:#94a3b8; cursor:pointer; } .filter-row{ display:flex; gap:1rem; justify-content:center; margin-bottom:1rem; flex-wrap:wrap; } .filter-row select{ background:#334155; color:#e2e8f0; border:1px solid #475569; border-radius:6px; padding:.5rem 1rem; } .modal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; } .modal-item{ position:relative; border-radius:8px; overflow:hidden; background:#0f172a; } .modal-item img{ width:100%; height:200px; object-fit:cover; transition:transform .3s; } .modal-item:hover img{transform:scale(1.03)} .modal-info{ position:absolute; inset:0; background:linear-gradient(transparent 60%,rgba(0,0,0,.8)); display:flex; flex-direction:column; justify-content:flex-end; padding:.75rem; opacity:0; transition:opacity .3s; } .modal-item:hover .modal-info{opacity:1} .modal-info span{font-size:.8rem} .load-more{ display:block; margin:2rem auto 0; padding:.75rem 2rem; border:none; border-radius:999px; background:#007bff; color:#fff; cursor:pointer; } .fullscreen { position:fixed; inset:0; z-index:10000; background:#000; display:flex; align-items:center; justify-content:center; cursor:pointer; } .fullscreen img{ max-width:100%; max-height:100%; object-fit:contain; } #galleryModal { position: fixed; inset: 0; z-index: 10001; /* Let the browser treat it as if it were attached to */ position-try: viewport; /* modern keyword, works in Chromium-based browsers */ transform: none !important; contain: none !important; clip-path: none !important; } /* fallback for browsers that don’t support position-try */ @supports not (position-try: viewport) { #galleryModal { /* move it to the viewport manually */ transform: translate3d(0, 0, 0) !important; } } .fullscreen { position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; } .fullscreen img { max-width: 90vw; max-height: 90vh; object-fit: contain; } .viewer { position: absolute; inset: 0; background: #000d; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; } .viewer img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 6px; } .viewer-back { position: absolute; top: 1rem; left: 1rem; padding: .5rem 1rem; background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 4px; cursor: pointer; z-index: 2; }