/* =================================================================
   ENERGI-HUB COMPONENTS — ISHELLA 2.5
   KPI-tiles, big-five bars og benchmark-komponenter for kunnskapssenter
   ================================================================= */

/* ----------------------------------------------------
   KPI-strip — 4-tile horisontal layout
   ---------------------------------------------------- */
.is25-ks-wrap .eh-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 2rem auto 0;
    padding: 0 1.5rem;
}

.is25-ks-wrap .eh-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem 1.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.is25-ks-wrap .eh-kpi::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--ice-blue, #38bdf8);
    opacity: .8;
}

.is25-ks-wrap .eh-kpi:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.25);
}

.is25-ks-wrap .eh-kpi-num {
    display: block;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary, #f8fafc);
    margin-bottom: .15rem;
}

.is25-ks-wrap .eh-kpi-unit {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ice-blue, #38bdf8);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .35rem;
}

.is25-ks-wrap .eh-kpi-label {
    display: block;
    font-size: .8rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.4;
}

/* Color variants for KPI tiles */
.is25-ks-wrap .eh-kpi.--ice::before { background: #38bdf8; }
.is25-ks-wrap .eh-kpi.--ice .eh-kpi-unit { color: #38bdf8; }

.is25-ks-wrap .eh-kpi.--red::before { background: #ef4444; }
.is25-ks-wrap .eh-kpi.--red .eh-kpi-unit { color: #f87171; }

.is25-ks-wrap .eh-kpi.--amber::before { background: #f59e0b; }
.is25-ks-wrap .eh-kpi.--amber .eh-kpi-unit { color: #fbbf24; }

.is25-ks-wrap .eh-kpi.--green::before { background: #10b981; }
.is25-ks-wrap .eh-kpi.--green .eh-kpi-unit { color: #34d399; }

.is25-ks-wrap .eh-kpi.--purple::before { background: #a855f7; }
.is25-ks-wrap .eh-kpi.--purple .eh-kpi-unit { color: #c084fc; }


/* ----------------------------------------------------
   Big-five — animerte fordeling-barer
   ---------------------------------------------------- */
.is25-ks-wrap .eh-bigfive {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: 720px;
    margin: 0 auto;
}

.is25-ks-wrap .eh-bigfive-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr 60px;
    align-items: center;
    gap: 1rem;
    padding: .65rem 0;
}

.is25-ks-wrap .eh-bigfive-label {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
}

.is25-ks-wrap .eh-bigfive-label i {
    color: var(--ice-blue, #38bdf8);
    width: 20px;
    text-align: center;
}

.is25-ks-wrap .eh-bigfive-bar {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.is25-ks-wrap .eh-bigfive-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background: linear-gradient(90deg, #475569, #94a3b8);
    border-radius: 999px;
    transform-origin: left center;
    animation: ehBigFiveGrow 1.2s cubic-bezier(.22,.61,.36,1) .2s backwards;
}

.is25-ks-wrap .eh-bigfive-fill.--ice    { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.is25-ks-wrap .eh-bigfive-fill.--red    { background: linear-gradient(90deg, #dc2626, #ef4444); }
.is25-ks-wrap .eh-bigfive-fill.--amber  { background: linear-gradient(90deg, #d97706, #f59e0b); }
.is25-ks-wrap .eh-bigfive-fill.--green  { background: linear-gradient(90deg, #059669, #10b981); }
.is25-ks-wrap .eh-bigfive-fill.--purple { background: linear-gradient(90deg, #7c3aed, #a855f7); }

/* Width-attributter via data-pct — støtter både .eh-bigfive-fill[data-pct] og .eh-bigfive-row[data-pct] */
.is25-ks-wrap .eh-bigfive-fill[data-pct="5"],   .is25-ks-wrap .eh-bigfive-row[data-pct="5"]   .eh-bigfive-fill { width: 5%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="10"],  .is25-ks-wrap .eh-bigfive-row[data-pct="10"]  .eh-bigfive-fill { width: 10%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="15"],  .is25-ks-wrap .eh-bigfive-row[data-pct="15"]  .eh-bigfive-fill { width: 15%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="20"],  .is25-ks-wrap .eh-bigfive-row[data-pct="20"]  .eh-bigfive-fill { width: 20%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="25"],  .is25-ks-wrap .eh-bigfive-row[data-pct="25"]  .eh-bigfive-fill { width: 25%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="30"],  .is25-ks-wrap .eh-bigfive-row[data-pct="30"]  .eh-bigfive-fill { width: 30%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="35"],  .is25-ks-wrap .eh-bigfive-row[data-pct="35"]  .eh-bigfive-fill { width: 35%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="40"],  .is25-ks-wrap .eh-bigfive-row[data-pct="40"]  .eh-bigfive-fill { width: 40%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="45"],  .is25-ks-wrap .eh-bigfive-row[data-pct="45"]  .eh-bigfive-fill { width: 45%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="50"],  .is25-ks-wrap .eh-bigfive-row[data-pct="50"]  .eh-bigfive-fill { width: 50%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="55"],  .is25-ks-wrap .eh-bigfive-row[data-pct="55"]  .eh-bigfive-fill { width: 55%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="60"],  .is25-ks-wrap .eh-bigfive-row[data-pct="60"]  .eh-bigfive-fill { width: 60%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="65"],  .is25-ks-wrap .eh-bigfive-row[data-pct="65"]  .eh-bigfive-fill { width: 65%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="70"],  .is25-ks-wrap .eh-bigfive-row[data-pct="70"]  .eh-bigfive-fill { width: 70%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="75"],  .is25-ks-wrap .eh-bigfive-row[data-pct="75"]  .eh-bigfive-fill { width: 75%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="80"],  .is25-ks-wrap .eh-bigfive-row[data-pct="80"]  .eh-bigfive-fill { width: 80%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="85"],  .is25-ks-wrap .eh-bigfive-row[data-pct="85"]  .eh-bigfive-fill { width: 85%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="90"],  .is25-ks-wrap .eh-bigfive-row[data-pct="90"]  .eh-bigfive-fill { width: 90%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="95"],  .is25-ks-wrap .eh-bigfive-row[data-pct="95"]  .eh-bigfive-fill { width: 95%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="100"], .is25-ks-wrap .eh-bigfive-row[data-pct="100"] .eh-bigfive-fill { width: 100%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="125"], .is25-ks-wrap .eh-bigfive-row[data-pct="125"] .eh-bigfive-fill { width: 100%; }
.is25-ks-wrap .eh-bigfive-fill[data-pct="150"], .is25-ks-wrap .eh-bigfive-row[data-pct="150"] .eh-bigfive-fill { width: 100%; }

.is25-ks-wrap .eh-bigfive-pct {
    text-align: right;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .8rem;
    font-weight: 700;
    color: var(--ice-blue, #38bdf8);
}

@keyframes ehBigFiveGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}


/* ----------------------------------------------------
   Hero-meta inline ikoner (under heroens KPI-strip)
   ---------------------------------------------------- */
.is25-ks-wrap .is25-ks-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    color: var(--text-secondary, #cbd5e1);
    font-size: .85rem;
}


/* ----------------------------------------------------
   Lesetid-badge i hero
   ---------------------------------------------------- */
.is25-ks-wrap .is25-ks-readtime {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .85rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: var(--ice-blue-light, #7dd3fc);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
}

.is25-ks-wrap .is25-ks-readtime i {
    font-size: .75rem;
    opacity: .85;
}


/* ----------------------------------------------------
   Callout-bokser — info / warn / success / danger
   ---------------------------------------------------- */
.is25-ks-wrap .is25-ks-callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 1.4rem;
    margin: 1.5rem 0;
    border-radius: 12px;
    border-left: 4px solid var(--ice-blue, #38bdf8);
    background: rgba(56, 189, 248, 0.06);
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.65;
}

.is25-ks-wrap .is25-ks-callout-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.15);
    color: var(--ice-blue, #38bdf8);
    font-size: 1.05rem;
}

.is25-ks-wrap .is25-ks-callout-body {
    flex: 1;
    font-size: .9rem;
}

.is25-ks-wrap .is25-ks-callout-body strong {
    color: var(--text-primary, #f8fafc);
    display: block;
    margin-bottom: .25rem;
    font-size: .92rem;
}

.is25-ks-wrap .is25-ks-callout--info {
    border-left-color: #38bdf8;
    background: rgba(56, 189, 248, 0.06);
}

.is25-ks-wrap .is25-ks-callout--success {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}
.is25-ks-wrap .is25-ks-callout--success .is25-ks-callout-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.is25-ks-wrap .is25-ks-callout--warn {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}
.is25-ks-wrap .is25-ks-callout--warn .is25-ks-callout-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.is25-ks-wrap .is25-ks-callout--danger {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.is25-ks-wrap .is25-ks-callout--danger .is25-ks-callout-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}


/* ----------------------------------------------------
   Prosessdiagram — sekvensiell flyt
   ---------------------------------------------------- */
.is25-ks-wrap .is25-ks-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    counter-reset: processStep;
    margin: 2rem 0;
}

.is25-ks-wrap .is25-ks-process-step {
    position: relative;
    padding: 1.4rem 1.25rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    counter-increment: processStep;
}

.is25-ks-wrap .is25-ks-process-step::before {
    content: counter(processStep);
    position: absolute;
    top: -14px;
    left: 1.25rem;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: #0f172a;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 800;
    font-size: .85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.is25-ks-wrap .is25-ks-process-step h3,
.is25-ks-wrap .is25-ks-process-step h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1rem;
    color: var(--text-primary, #f8fafc);
    margin: .35rem 0 .5rem;
    font-weight: 700;
}

.is25-ks-wrap .is25-ks-process-step p {
    color: var(--text-secondary, #cbd5e1);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
}


/* ----------------------------------------------------
   Fargekort — visuell fargepallet
   ---------------------------------------------------- */
.is25-ks-wrap .is25-ks-color-swatch {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .25s ease;
}

.is25-ks-wrap .is25-ks-color-swatch:hover {
    transform: translateY(-3px);
}

.is25-ks-wrap .is25-ks-color-swatch-preview {
    height: 80px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.is25-ks-wrap .is25-ks-color-swatch-body {
    padding: .9rem 1.1rem 1.1rem;
}

.is25-ks-wrap .is25-ks-color-swatch-name {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    font-size: .95rem;
    margin: 0 0 .15rem;
}

.is25-ks-wrap .is25-ks-color-swatch-code {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--ice-blue, #38bdf8);
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.is25-ks-wrap .is25-ks-color-swatch-desc {
    color: var(--text-muted, #94a3b8);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}


/* ----------------------------------------------------
   Grid--4 (4-kolonne) for utvidet layout
   ---------------------------------------------------- */
.is25-ks-wrap .is25-ks-article-grid.is25-ks-grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}


/* ----------------------------------------------------
   Reduced motion — slå av animasjoner
   ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .is25-ks-wrap .eh-bigfive-fill {
        animation: none;
    }
    .is25-ks-wrap .eh-kpi {
        transition: none;
    }
    .is25-ks-wrap .is25-ks-color-swatch {
        transition: none;
    }
}


/* ----------------------------------------------------
   Responsiv håndtering
   ---------------------------------------------------- */
@media (max-width: 1024px) {
    .is25-ks-wrap .is25-ks-article-grid.is25-ks-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .is25-ks-wrap .eh-kpi-strip {
        gap: .75rem;
        padding: 0 1rem;
    }
    .is25-ks-wrap .eh-kpi {
        padding: 1.1rem 1.15rem;
    }
    .is25-ks-wrap .eh-kpi-num {
        font-size: 1.6rem;
    }
    .is25-ks-wrap .eh-bigfive-row {
        grid-template-columns: minmax(110px, 160px) 1fr 50px;
        gap: .65rem;
    }
    .is25-ks-wrap .eh-bigfive-label {
        font-size: .8rem;
    }
}