/* metzler-lazy-media: shimmer skeleton placeholder + fade-in img */

.metzler-lazy-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    /* aspect-ratio sa nastavuje inline na zaklade width/height povodneho <img> */
    max-width: 100%;
    vertical-align: top;
    /* placeholder potrebuje min-height aby bol viditelny aj ked zatial nemame
       img dimenzie - aspect-ratio drzi pomer, max-height drzi cap */
    min-height: 1em;
}

.metzler-lazy-wrap .metzler-lazy-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        #e7e7e7 0%,
        #f4f4f4 30%,
        #ffffff 50%,
        #f4f4f4 70%,
        #e7e7e7 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: metzler-lazy-shimmer 1.4s linear infinite;
    transition: opacity 0.4s ease-out;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

.metzler-lazy-wrap .metzler-lazy-img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

/* Po nacitani: placeholder fade out, obrazok fade in */
.metzler-lazy-wrap.is-loaded .metzler-lazy-placeholder {
    opacity: 0;
}

.metzler-lazy-wrap.is-loaded .metzler-lazy-img {
    opacity: 1;
}

/* Error stav - placeholder zostane ale neanimuje */
.metzler-lazy-wrap.is-error .metzler-lazy-placeholder {
    background: repeating-linear-gradient(
        45deg,
        #f8d7da,
        #f8d7da 8px,
        #fff 8px,
        #fff 16px
    );
    animation: none;
}

/* Animation - svetlo putuje sprava dolava (background-position 100% -> -100%) */
@keyframes metzler-lazy-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Respect user preference - nikdy nehybeme keď reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .metzler-lazy-wrap .metzler-lazy-placeholder {
        animation: none;
        opacity: 0.6;
    }
}

/* Fallback ked JS nebezi: src ostane na 1x1 placeholder, ale `<noscript>`
   alebo `loaded` trieda nikdy nepride. Skry placeholder, aby user nevidel
   permanentny shimmer, a ukaz nieco zmysluplne (jemny graficky `?`). */
.no-js .metzler-lazy-wrap .metzler-lazy-placeholder {
    background: #f0f0f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23bbb'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") no-repeat center;
    animation: none;
    opacity: 1;
}