/* ==========================================================
   /assets/ui/ljh-images.css
   LJH IMAGES – GLOBAL IMAGE SYSTEM
   Version: 1.1 (CLEAN & SAFE)
   Date: 2026-01-10

   Ansvar:
   - Globalt bildbeteende
   - Bildroller (story, panel, hero)
   - ALDRIG layout-brytande regler
   - Grid-safe per default
========================================================== */


/* ==========================================================
   1. GLOBAL IMAGE BASELINE
   Säker standard för alla bilder
========================================================== */

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


/* ==========================================================
   2. IMAGE ROLES (VISUELL ROLL – INTE LAYOUT)
   HTML väljer roll – CSS styr form & känsla
========================================================== */


/* ----------------------------------------------------------
   2.1 STORY / SERIES IMAGE
   Narrativa bilder (tjänster, onboarding)
---------------------------------------------------------- */

.ljh-img-story {
    width: 100%;
}

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


/* ----------------------------------------------------------
   2.2 PANEL / FLOW IMAGE
   Processer, steg, informationspaneler
---------------------------------------------------------- */

.ljh-img-panel {
    width: 100%;
}

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


/* ----------------------------------------------------------
   2.3 HERO IMAGE
   Enda platsen där max-bredd är OK
---------------------------------------------------------- */

.ljh-img-hero {
    width: 100%;
    max-width: 820px;   /* ✔ kontrollerad toppyta */
    margin: 0 auto;
}

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


/* ==========================================================
   3. CONTEXT SAFETY
   Bilden får ALDRIG styra sin container
========================================================== */

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


/* ==========================================================
   4. FUTURE-PROOFING
   Animationer & övergångar
========================================================== */

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


/* ==========================================================
   5. RESPONSIVE
   Ingen layout-logik här – endast säkerhet
========================================================== */

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