/* ======= LIGHTBOX (bez zásahu do původních miniatur) ======= */
:root{
  --glx-accent: #cdb68c;
  --glx-bg: rgba(0,0,0,.92);
  --glx-ctrl-bg: rgba(0,0,0,.6);
  --glx-ctrl-bg-hover: rgba(0,0,0,.75);
}

.glx-lightbox{ position:fixed; inset:0; z-index: 10990; display:none; }
.glx-lightbox.is-open{ display:block; }

.glx-backdrop{
  position:absolute; inset:0; background: var(--glx-bg);
  opacity:0; animation: glx-fade .2s ease forwards;
}

.glx-stage{
  position:absolute; inset:0; display:grid; place-items:center;
  padding: clamp(12px,3vw,36px);
}

.glx-media{
  max-width: 92vw; max-height: 90vh;
  border-radius: 12px; background:#111;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  opacity:0; transform: scale(.96);
  animation: glx-zoom-in .22s ease .02s forwards;
}
.glx-media img{ display:block; max-width:100%; max-height:90vh; height:auto; width:auto; }

.glx-caption{
  position:absolute; left:50%; bottom: clamp(8px,2.2vw,24px); transform:translateX(-50%);
  color:#f0eadc; font-size:14px; line-height:1; background: rgba(0,0,0,.55);
  padding: 6px 10px; border-radius: 6px; max-width:min(88vw,900px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Controls (velké i na 4k) */
.glx-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width: clamp(44px, 3.5vw, 64px); height: clamp(44px, 3.5vw, 64px);
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background: var(--glx-ctrl-bg); color: var(--glx-accent);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  cursor:pointer; transition: background .18s ease, transform .12s ease;
}
.glx-btn:hover{ background: var(--glx-ctrl-bg-hover); transform: translateY(-50%) scale(1.04); }
.glx-btn svg{ width: 50%; height: 50%; fill: currentColor; }

.glx-prev{ left: clamp(8px, 1.8vw, 28px); }
.glx-next{ right: clamp(8px, 1.8vw, 28px); }

/* Close */
.glx-close{
  position:absolute; top: clamp(8px, 2vw, 24px); right: clamp(8px, 2vw, 24px);
  width: clamp(40px, 3vw, 56px); height: clamp(40px, 3vw, 56px);
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background: var(--glx-ctrl-bg); color:#fff; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 22px rgba(0,0,0,.5); cursor:pointer;
}
.glx-close:hover{ background: var(--glx-ctrl-bg-hover); }

/* Slide hints */
.glx-slide-enter-left{ animation: glx-slide-left .22s ease both; }
.glx-slide-enter-right{ animation: glx-slide-right .22s ease both; }

/* Accessibility */
body.glx-open{ overflow:hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .glx-media{ animation:none; opacity:1; transform:none; }
  .glx-backdrop{ animation:none; opacity:1; }
}

/* Keyframes */
@keyframes glx-fade{ to{ opacity:1 } }
@keyframes glx-zoom-in{ to{ opacity:1; transform:scale(1) } }
@keyframes glx-slide-left{ from{ transform:translateX(-24px); opacity:.6 } to{ transform:none; opacity:1 } }
@keyframes glx-slide-right{ from{ transform:translateX(24px); opacity:.6 } to{ transform:none; opacity:1 } }

/* Odstraní dědičné pseudo-ikonky a nativní vzhled tlačítek */
.glx-btn,
.glx-close{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  font-size: 0;           /* kdyby někde dědil ikonfont */
  line-height: 0;
  position: absolute;     /* ponecháváme pozicování */
}

.glx-btn::before,
.glx-btn::after
.glx-close::before,
.glx-close::after{
  content: none !important; /* přepíše cokoliv globálního */
}

.mt-30 {
    margin-top: 30px;
}