/* ==========================================================
   /ui/css/base/ljh-images.css
   LJH IMAGES – Global Image System
   ----------------------------------------------------------
   Ansvar:
   - Globalt bildbeteende och baseline
   - Bildroller (story, panel, hero)
   - Grid-safe per default
   ----------------------------------------------------------
   ALDRIG layout-brytande regler
   Bilden får aldrig styra sin container
========================================================== */


/* ==========================================================
   1. GLOBAL BASELINE
========================================================== */

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ==========================================================
   2. BILDROLLER
========================================================== */

/* Story / Series – narrativa bilder */
.ljh-img-story { width: 100%; }

.ljh-img-story img {
    width: 100%;
    border-radius: 18px;
}

.ljh-step-media {
    width: 100%;
    max-width: 420px;
    align-self: flex-start;
}

.ljh-step-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
}

.ljh-step-card {
    grid-template-columns: minmax(0, 420px) 1fr;
}

/* Panel / Flow – processer och informationspaneler */
.ljh-img-panel { width: 100%; }

.ljh-img-panel img {
    width: 100%;
    border-radius: 16px;
}

/* Hero – enda platsen där max-bredd är tillåten */
.ljh-img-hero {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.ljh-img-hero img {
    width: 100%;
    border-radius: 22px;
}


/* ==========================================================
   3. CONTEXT SAFETY
========================================================== */

.ljh-step-card img,
.ljh-block img,
.ljh-hero img {
    max-width: 100%;
}


/* ==========================================================
   4. ANIMATIONER
========================================================== */

.ljh-img-animated img {
    will-change: transform, opacity;
}


/* ==========================================================
   5. RESPONSIV SÄKERHET
========================================================== */

@media (max-width: 768px) {
    .ljh-img-hero { max-width: 100%; }
}