/* ==========================================================================
   Shimmer placeholder pro <img class="img-loading"> - vidět, dokud se
   obrázek nenačte (viz assets/js/img-loading.js, který třídu po načtení/
   chybě odebere). Hodí se hlavně pro náhledy přes /ajax/image.php
   (lib/image/) - při první žádosti o danou velikost teprve generuje a
   ukládá variantu do S3 (viz ImageVariants), takže první zobrazení může
   chvíli trvat, další už jen z cache.
   ========================================================================== */
img.img-loading {
    background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 37%, var(--bg-hover) 63%);
    background-size: 400% 100%;
    animation: img-loading-shimmer 1.4s ease infinite;
}

@keyframes img-loading-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    img.img-loading {
        animation: none;
        background: var(--bg-hover);
    }
}

/* Obrázek se nepodařilo načíst (assets/js/img-loading.js) - `src` je pak
   datové URI ikony, ale stránky obrázku samy nastavují `object-fit: cover`
   (viz např. .feed-nahled, .studio-nahled img) a to by ikonu nevhodně
   ořízlo. `!important` je tu schválně: tenhle stav musí přebít cokoli, co
   si o velikosti/výplni obrázku řekla konkrétní stránka - je to jediné
   místo, které tenhle "chybí" stav vůbec zná. */
img.img-nedostupny {
    object-fit: contain !important;
    padding: 18% !important;
    box-sizing: border-box !important;
    background: #e4e6eb !important;
}