/* /Components/Sustainability/SustainabilityContribution.razor.rz.scp.css */
/* Sustainability contribution component styles.
   Uses standard CSS (scoped) so it works regardless of the Tailwind JIT build,
   supports light + dark mode via prefers-color-scheme, and honours
   prefers-reduced-motion. No colour is used as the sole information carrier. */

.sustainability-root[b-izg26w0dzz] {
    margin-top: 1.5rem;
}

.sustainability-card[b-izg26w0dzz] {
    position: relative;
    overflow: hidden;
    border: 1px solid #C4F2DA;
    border-radius: 16px;
    background: linear-gradient(180deg, #F1FBF6 0%, #ffffff 100%);
    padding: 1.5rem;
    color: #002920;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Desktop: illustration on the left, content on the right */
@media (min-width: 768px) {
    .sustainability-card[b-izg26w0dzz] {
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
    }

    .sustainability-illustration[b-izg26w0dzz] {
        flex: 0 0 40%;
        max-width: 240px;
    }

    .sustainability-content[b-izg26w0dzz] {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.sustainability-illustration[b-izg26w0dzz] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.sustainability-illustration-svg[b-izg26w0dzz],
.sustainability-illustration[b-izg26w0dzz]  svg {
    width: 100%;
    height: auto;
    max-width: 260px;
}

/* Illustration colours – light mode (Norsk helsenett palette).
   Mørk grønn #015945, Grønn 2 #247360, Grønn 3 #02A67F, Lys grønn #7BEFB2, Grønn 4 #C4F2DA.
   The SVG is injected as raw markup (MarkupString), so its inner elements do not
   receive Blazor's scope attribute. Use ::deep so these selectors still match. */
.sustainability-illustration[b-izg26w0dzz]  .si-ground { stroke: #C4F2DA; }
.sustainability-illustration[b-izg26w0dzz]  .si-route { stroke: #02A67F; }
.sustainability-illustration[b-izg26w0dzz]  .si-node { fill: #015945; }
.sustainability-illustration[b-izg26w0dzz]  .si-fill { fill: #ffffff; stroke: #015945; }
.sustainability-illustration[b-izg26w0dzz]  .si-stroke { stroke: #015945; }
.sustainability-illustration[b-izg26w0dzz]  .si-door { fill: #C4F2DA; }
.sustainability-illustration[b-izg26w0dzz]  .si-cross { fill: #015945; }
.sustainability-illustration[b-izg26w0dzz]  .si-video-body { fill: #015945; }
.sustainability-illustration[b-izg26w0dzz]  .si-video-lens { fill: #7BEFB2; }
.sustainability-illustration[b-izg26w0dzz]  .si-leaf { fill: #7BEFB2; }

/* Font Awesome icons embedded in the illustration via <foreignObject> */
.sustainability-illustration[b-izg26w0dzz]  .si-fa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #015945;
    font-size: 28px;
    line-height: 1;
}

.sr-only[b-izg26w0dzz] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sustainability-header[b-izg26w0dzz] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sustainability-icon[b-izg26w0dzz] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #C4F2DA;
    color: #015945;
}

.sustainability-icon-sm[b-izg26w0dzz] {
    display: inline-flex;
    color: #015945;
}

.sustainability-title[b-izg26w0dzz] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #015945; /* NHN mørk grønn primær – WCAG AA on the light card; overridden in dark mode */
}

.sustainability-lead[b-izg26w0dzz] {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #143a2e;
}

.sustainability-stats[b-izg26w0dzz] {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

@media (min-width: 640px) {
    .sustainability-stats[b-izg26w0dzz] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

.sustainability-stat[b-izg26w0dzz] {
    border: 1px solid #C4F2DA;
    border-radius: 10px;
    background: #ffffff;
    padding: 0.75rem 0.85rem;
    text-align: center;
}

.sustainability-stat-value[b-izg26w0dzz] {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #015945;
}

.sustainability-stat-label[b-izg26w0dzz] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #247360;
}

/* Distance is the primary card, CO2e a clearly-labelled secondary estimate card */
.sustainability-stat--primary[b-izg26w0dzz] {
    border-color: #7BEFB2;
    background: #F1FBF6;
}

.sustainability-stat--primary .sustainability-stat-value[b-izg26w0dzz] {
    font-size: 1.75rem;
}

.sustainability-stat--secondary .sustainability-stat-value[b-izg26w0dzz] {
    font-size: 1.35rem;
}

.sustainability-totals[b-izg26w0dzz] {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #C4F2DA;
}

.sustainability-totals-title[b-izg26w0dzz] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #015945;
}

.sustainability-totals-text[b-izg26w0dzz] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #143a2e;
}

.sustainability-cta[b-izg26w0dzz] {
    margin: 1.1rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #143a2e;
}

.sustainability-estimate[b-izg26w0dzz] {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #247360;
}

/* Compact variant */
.sustainability-compact[b-izg26w0dzz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #C4F2DA;
    border-radius: 999px;
    background: #F1FBF6;
    padding: 0.35rem 0.75rem;
    color: #015945;
    font-size: 0.85rem;
}

.sustainability-compact-text[b-izg26w0dzz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sustainability-compact-sep[b-izg26w0dzz] {
    color: #8bbf9f;
}

/* Entrance animation (opt-in via .sustainability-animate), reduced-motion safe */
.sustainability-animate[b-izg26w0dzz] {
    animation: sustainability-fade-up-b-izg26w0dzz 480ms ease-out both;
}

.sustainability-animate .sustainability-icon[b-izg26w0dzz] {
    animation: sustainability-pop-b-izg26w0dzz 520ms ease-out both;
}

.sustainability-animate .sustainability-stat[b-izg26w0dzz] {
    animation: sustainability-fade-up-b-izg26w0dzz 480ms ease-out both;
}

.sustainability-animate .sustainability-stat:nth-child(1)[b-izg26w0dzz] { animation-delay: 90ms; }
.sustainability-animate .sustainability-stat:nth-child(2)[b-izg26w0dzz] { animation-delay: 180ms; }
.sustainability-animate .sustainability-stat:nth-child(3)[b-izg26w0dzz] { animation-delay: 270ms; }

/* Illustration entrance: gentle scale-in of the whole illustration */
.sustainability-animate .sustainability-illustration[b-izg26w0dzz]  svg {
    animation: sustainability-pop-b-izg26w0dzz 620ms ease-out both;
}

/* Route is drawn, then softened to signal a "saved" trip */
.sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-route {
    stroke-dasharray: 6 9;
    animation: si-route-draw-b-izg26w0dzz 900ms ease-out both;
}

/* Video symbol pops in over the route */
.sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-video {
    transform-origin: 127px 51px;
    animation: sustainability-pop-b-izg26w0dzz 500ms ease-out 300ms both;
}

.sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-leaf {
    animation: sustainability-pop-b-izg26w0dzz 500ms ease-out 500ms both;
}

@keyframes sustainability-fade-up-b-izg26w0dzz {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sustainability-pop-b-izg26w0dzz {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes si-route-draw-b-izg26w0dzz {
    0% { opacity: 0; stroke-dashoffset: 220; }
    60% { opacity: 1; }
    100% { opacity: 0.65; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sustainability-animate[b-izg26w0dzz],
    .sustainability-animate .sustainability-icon[b-izg26w0dzz],
    .sustainability-animate .sustainability-stat[b-izg26w0dzz],
    .sustainability-animate .sustainability-illustration[b-izg26w0dzz]  svg,
    .sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-route,
    .sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-video,
    .sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-leaf {
        animation: none !important;
    }

    /* Show final "saved" route state immediately */
    .sustainability-animate .sustainability-illustration[b-izg26w0dzz]  .si-route {
        opacity: 0.65;
        stroke-dashoffset: 0;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .sustainability-card[b-izg26w0dzz] {
        background: linear-gradient(180deg, #013D30 0%, #002920 100%);
        border-color: #015945;
        color: #EAF9F1;
    }

    .sustainability-icon[b-izg26w0dzz] {
        background: #015945;
        color: #7BEFB2;
    }

    .sustainability-icon-sm[b-izg26w0dzz] {
        color: #7BEFB2;
    }

    .sustainability-title[b-izg26w0dzz] {
        color: #EAF9F1; /* high-contrast on the dark card (WCAG AA) */
    }

    .sustainability-lead[b-izg26w0dzz],
    .sustainability-totals-text[b-izg26w0dzz],
    .sustainability-cta[b-izg26w0dzz] {
        color: #C4F2DA;
    }

    .sustainability-stat[b-izg26w0dzz] {
        background: #013D30;
        border-color: #015945;
    }

    .sustainability-stat-value[b-izg26w0dzz] {
        color: #7BEFB2;
    }

    .sustainability-stat-label[b-izg26w0dzz] {
        color: #A6D9C4;
    }

    .sustainability-stat--primary[b-izg26w0dzz] {
        background: #024635;
        border-color: #02A67F;
    }

    .sustainability-totals[b-izg26w0dzz] {
        border-top-color: #015945;
    }

    .sustainability-totals-title[b-izg26w0dzz] {
        color: #7BEFB2;
    }

    .sustainability-estimate[b-izg26w0dzz] {
        color: #A6D9C4;
    }

    .sustainability-compact[b-izg26w0dzz] {
        background: #013D30;
        border-color: #015945;
        color: #7BEFB2;
    }

    /* Illustration colours – dark mode (Norsk helsenett palette) */
    .sustainability-illustration[b-izg26w0dzz]  .si-ground { stroke: #247360; }
    .sustainability-illustration[b-izg26w0dzz]  .si-route { stroke: #7BEFB2; }
    .sustainability-illustration[b-izg26w0dzz]  .si-node { fill: #7BEFB2; }
    .sustainability-illustration[b-izg26w0dzz]  .si-fill { fill: #002920; stroke: #7BEFB2; }
    .sustainability-illustration[b-izg26w0dzz]  .si-stroke { stroke: #7BEFB2; }
    .sustainability-illustration[b-izg26w0dzz]  .si-door { fill: #015945; }
    .sustainability-illustration[b-izg26w0dzz]  .si-cross { fill: #7BEFB2; }
    .sustainability-illustration[b-izg26w0dzz]  .si-video-body { fill: #02A67F; }
    .sustainability-illustration[b-izg26w0dzz]  .si-video-lens { fill: #002920; }
    .sustainability-illustration[b-izg26w0dzz]  .si-leaf { fill: #7BEFB2; }
    .sustainability-illustration[b-izg26w0dzz]  .si-fa { color: #7BEFB2; }
}