/* CARVE — Галерия */
.gl-geroi .uvod { margin-top: 20px; }
.gl-filtar { position: sticky; top: var(--glava); z-index: 30; background: var(--snyag); border-block: 1px solid var(--mraz); transition: top .45s var(--ease); }
.glava-skrita .gl-filtar { top: 0; }
.gl-filtar-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 12px; }
.gl-filtar button { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--mraz); border-radius: var(--r-btn); font-weight: 600; font-size: 14.5px; transition: background-color .2s, color .2s, border-color .2s; }
.gl-filtar button:hover { border-color: var(--mastilo); }
.gl-filtar button[aria-pressed="true"] { background: var(--mastilo); border-color: var(--mastilo); color: #fff; }
.gl-broi { margin-left: auto; color: var(--sivo); }
@media (max-width: 760px) {
  .gl-filtar-v { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--rub)); padding-inline: var(--rub); }
  .gl-filtar-v::-webkit-scrollbar { display: none; }
  .gl-filtar button { flex: none; }
  .gl-broi { display: none; }
}

.gl-oblast { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(80px, 10vw, 140px); }
.gl-mreja { columns: 3 320px; column-gap: clamp(12px, 1.4vw, 20px); }
.gl-k { break-inside: avoid; margin-bottom: clamp(12px, 1.4vw, 20px); }
.gl-k button { display: block; width: 100%; overflow: hidden; background: var(--led); cursor: zoom-in; }
.gl-k img { width: 100%; height: auto; transition: transform 1s var(--ease), opacity .4s; }
.gl-k button:hover img { transform: scale(1.035); }
.gl-k p { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 14px; }
.gl-k p span { font: 500 12px var(--f-mono); color: var(--sivo); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.js .gl-k { animation: gl-vhod .6s var(--ease) both; }
@keyframes gl-vhod { from { opacity: 0; transform: translateY(14px); } }
.tiho .gl-k { animation: none; }

/* ---------- Прегледът на цял екран ---------- */
.gl-preg { position: fixed; inset: 0; z-index: 140; background: rgba(8,13,18,.96); display: grid; place-items: center; padding: 70px clamp(12px, 6vw, 96px) 24px; }
.gl-preg-f { margin: 0; display: grid; gap: 12px; max-width: 100%; max-height: 100%; }
.gl-preg-f img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; margin: 0 auto; object-fit: contain; transition: opacity .25s; }
.gl-preg-f img.zarezhda { opacity: .25; }
.gl-preg-f figcaption { display: flex; justify-content: space-between; gap: 16px; color: var(--nosht-tekst); font-size: 15px; }
.gl-preg-f figcaption .mono { color: var(--nosht-sivo); }
.gl-preg-b { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; color: #fff; font-size: 24px; border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--r-btn); transition: background-color .2s, border-color .2s; }
.gl-preg-b:hover { background: var(--oranzh); border-color: var(--oranzh); color: var(--mastilo); }
.gl-preg-l { left: clamp(8px, 2vw, 28px); }
.gl-preg-d { right: clamp(8px, 2vw, 28px); }
.gl-preg-x { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; color: #fff; }
.gl-preg-x i::before, .gl-preg-x i::after { content: ''; position: absolute; left: 12px; right: 12px; top: 23px; height: 2px; background: currentColor; }
.gl-preg-x i::before { transform: rotate(45deg); }
.gl-preg-x i::after { transform: rotate(-45deg); }
@media (max-width: 760px) { .gl-preg-b { top: auto; bottom: 18px; transform: none; } .gl-preg { padding-bottom: 90px; } .gl-preg-f img { max-height: calc(100svh - 190px); } }
@media (max-width: 760px) {
  .gl-mreja { columns: 2; column-gap: 10px; }
  .gl-k { margin-bottom: 10px; }
  .gl-k p { font-size: 12.5px; padding-top: 6px; }
  .gl-k p span { display: none; }
}