/*
 * Keymetrics component styles
 *
 * Used on (as of 2026-05-25, CType mask_keymetrics):
 *   - /
 *
 * Source: extracted from frontend/scss/includes/elements/_keymetrics.scss
 */

.keymetrics {
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.keymetrics .jarallax-img {
    position: absolute;
    left: 0;
    top: -15%;
    width: 100%;
    height: 130%;
    object-fit: cover;
    z-index: -1;
    will-change: transform;
}

@supports (animation-timeline: view()) {
    .keymetrics .jarallax-img {
        animation: keymetricsParallax linear both;
        animation-timeline: view();
    }
    @keyframes keymetricsParallax {
        from { transform: translate3d(0, -15%, 0); }
        to   { transform: translate3d(0,  15%, 0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .keymetrics .jarallax-img {
        animation: none;
        transform: none;
    }
}

.keymetrics__container {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

@media (min-width: 768px) {
    .keymetrics__container {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

.keymetrics__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.keymetrics__keyfacts {
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .keymetrics__keyfacts {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
}

.keymetrics__keyfact {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .keymetrics__keyfact {
        width: 28%;
        margin-bottom: 0;
    }
}

.keymetrics__keyfact__title {
    font-family: var(--bs-body-font-family);
}

.keymetrics__keyfact__number {
    font-size: 3rem;
}

@media (min-width: 768px) {
    .keymetrics__keyfact__number {
        font-size: 3.5rem;
    }
}

@media (min-width: 992px) {
    .keymetrics__keyfact__number {
        font-size: 4.5rem;
    }
}

@media (min-width: 1330px) {
    .keymetrics__keyfact__number {
        font-size: 5.75rem;
    }
}

.keymetrics__keyfact__unit {
    display: inline-block;
    margin-left: 1rem;
}

.keymetrics__button {
    text-align: center;
}