/* ========================================================================= * MediTravel — 11-lightbox.css (KOREKCE 2) * Lightbox fotografií detailu pobytu (assets/js/mt-lightbox.js). * Odkazy a.mt-lb vypisuje single-zajezd.php + shortcode [mt_itinerar]; * overlay se vkládá až na konec (mimo #page-container — Divi * button styly ho nezasáhnou). * ======================================================================= */ a.mt-lb { display: inline-block; cursor: zoom-in; } .mt-lb-overlay { position: fixed; inset: 0; z-index: 1100; /* nad drawerem (--mt-z-drawer: 1000) */ display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(25, 28, 29, 0.94); } .mt-lb-overlay--open { display: flex; animation: mt-lb-fade 0.2s ease; } @keyframes mt-lb-fade { from { opacity: 0; } to { opacity: 1; } } body.mt-lb-open { overflow: hidden; } .mt-lb-figure { margin: 0; max-width: min(1200px, 100%); text-align: center; } .mt-lb-figure img { max-width: 100%; max-height: 84vh; width: auto; height: auto; border-radius: var(--mt-r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); cursor: default; } .mt-lb-figure figcaption { margin-top: 12px; font-family: var(--mt-font-body); font-size: var(--mt-fs-small); color: rgba(255, 255, 255, 0.85); } /* Tlačítka — vlastní reset, žádné dědění z Divi */ .mt-lb-btn { appearance: none; position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-family: var(--mt-font-body); font-size: 22px; line-height: 1; cursor: pointer; transition: background var(--mt-tr), border-color var(--mt-tr); } .mt-lb-btn:hover { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.6); } .mt-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .mt-lb-close { top: 20px; right: 20px; font-size: 30px; } .mt-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); } .mt-lb-next { right: 20px; top: 50%; transform: translateY(-50%); } .mt-lb-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--mt-font-body); font-size: var(--mt-fs-label-sm); letter-spacing: var(--mt-ls-label); color: rgba(255, 255, 255, 0.7); } @media (max-width: 640px) { .mt-lb-overlay { padding: 12px; } .mt-lb-btn { width: 40px; height: 40px; font-size: 18px; } .mt-lb-close { top: 12px; right: 12px; font-size: 26px; } .mt-lb-prev { left: 8px; } .mt-lb-next { right: 8px; } .mt-lb-figure img { max-height: 78vh; } }