/* =================================================================== HIGHLIGHT section css =================================================================== */
/* Photo band with a dark wash: title on the left, big-number glass boxes on
   the right (3-2-1 backup, lab sizes, company facts). */
.highlight {
    & .highlight__panel {
        position: relative;
        padding: var(--sp100) var(--sp70);
        background: var(--ink);
        border-radius: var(--r-xl);
        overflow: hidden;
    }

    & .highlight__media {
        position: absolute; inset: 0;
        overflow: hidden;

        &::after { position: absolute; inset: 0; background: var(--hero-shade); content: ''; }
    }

    & .highlight__img { width: 100%; height: 100%; object-fit: cover; }

    & .highlight__inner {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        align-items: center;
        gap: var(--sp60);
    }

    & .highlight__actions {
        display: flex; flex-wrap: wrap;
        gap: var(--sp15);
        margin-top: var(--sp35);
    }

    & .highlight__stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--sp20);
        list-style: none;
    }

    & .highlight__stat {
        display: flex; flex-direction: column;
        gap: var(--sp10);
        padding: var(--sp35) var(--sp25);
        background: var(--glass);
        border: 1px solid var(--glass-line);
        border-radius: var(--r-lg);
        transition: var(--transition);
        -webkit-backdrop-filter: blur(15px);
                backdrop-filter: blur(15px);

        &:hover { background: var(--primary); border-color: var(--primary); }
    }

    & .highlight__value {
        font-family: var(--font-mona);
        font-size: var(--f50);
        font-weight: 600;
        line-height: 1;
        letter-spacing: var(--lsTight);
        color: var(--white);
    }

    & .highlight__label { color: var(--white-muted); }
    & .highlight__stat:hover .highlight__label { color: var(--white); }
}

/* =================================================================== HIGHLIGHT responsive =================================================================== */
@media (max-width: 1199.98px) {
    .highlight {
        & .highlight__panel { padding: var(--sp80) var(--sp40); }
        & .highlight__inner { grid-template-columns: 1fr; gap: var(--sp40); }
    }
}

@media (max-width: 575.98px) {
    .highlight {
        & .highlight__panel { padding: var(--sp60) var(--sp20); border-radius: var(--r-lg); }
    }
}