/* ─── HERO SECTION ────────────────────────────────────────────────────────────
 * Desktop: 1440×727px, horizontal flex, gap=238px, px=40px
 * Tablet:  768×940px,  vertical flex,   gap=60px,  px=20px, py=45px, 2×2 grid stats
 * Mobile:  360×960px,  vertical flex,   gap=35px,  px=20px, py=45px, 2×2 grid stats
 * ─────────────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 727px;
    background-color: var(--color-sapphire-deep);
    overflow: hidden;
}

/* Background image + 10% overlay */
.hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

/* ─── CONTENT ─────────────────────────────────────────────────────────────── */

/* .container used in HTML — override for hero layout */
.hero .container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 238px;
    min-height: 727px;
}

/* Desktop-only line break helper */
.hero__br {
    display: inline;
}

/* ─── LEFT COLUMN ─────────────────────────────────────────────────────────── */

.hero__left {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 1.736vw, 1.5625rem); /* 20px → 25px */
    width: 597px;
    flex-shrink: 0;
}

/* Hero badge — .badge--outline override: auto-height instead of 45px */
.hero .badge--outline {
    height: auto;
    padding: 10px;
    align-self: flex-start;
}

/* Hero H1 color override — .h1 uses --color-text-primary, hero needs white */
.hero .h1 {
    color: var(--color-white);
}

/* Description — .body-1 used in HTML, color override */
.hero .body-1 {
    color: var(--color-white);
}

/* ─── CTA BUTTON ──────────────────────────────────────────────────────────── */

/* .btn.btn--white used in HTML, no overrides needed */

/* ─── RIGHT / STATS ───────────────────────────────────────────────────────── */

.hero__stats {
    display: flex;
    flex-direction: column;
    gap: clamp(0.625rem, 1.042vw, 0.9375rem); /* 10px → 15px */
    flex-shrink: 0;
    align-self: center;
}

.hero__stats-row {
    display: flex;
    gap: clamp(0.625rem, 1.042vw, 0.9375rem); /* 10px → 15px */
}

/* Stat card — .card--stat used in HTML */
.hero__stat--wide {
    width: 361px;
}
.hero__stat--narrow {
    width: 149px;
}

/* Both stat heights are fixed */
.hero__stat--wide,
.hero__stat--narrow {
    height: 198px;
}

/* ─── TABLET ──────────────────────────────────────────────────────────────── */
/*
 * Figma 768×940: vertical layout, left text full-width, stats 2×2 equal grid
 * container_cards: 728×360, 4 cards each 354×170, gap=20px
 */

@media (max-width: 1439px) {
    .hero__br {
        display: none;
    }

    .hero {
        min-height: unset;
    }

    .hero .card--stat .card__number {
        font-size: clamp(1.75rem, 14vw, 3.15em);
    }

    .hero .container {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(3.75rem, 7.8125vw, 7.5rem); /* 60px at 768px */
        min-height: unset;
        padding-top: clamp(2.8125rem, 5.859vw, 4.5rem); /* 45px at 768px */
        padding-bottom: clamp(2.8125rem, 5.859vw, 4.5rem);
    }

    .hero__left {
        width: 100%;
        max-width: 434px;
        flex-shrink: unset;
        gap: clamp(1.25rem, 3.255vw, 1.5625rem); /* 25px at 768px */
    }

    .hero__left .btn__label {
        flex-grow: 1;
    }

    /* 2×2 равная сетка — Figma: 728×360, 4 карточки по 354×170, gap=20 */
    .hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.25rem, 2.604vw, 1.5625rem); /* 20px at 768px */
        width: 100%;
        flex: unset;
        min-width: unset;
        align-self: unset;
    }

    /* Flatten rows into parent grid */
    .hero__stats-row {
        display: contents;
    }

    .hero__stat--wide,
    .hero__stat--narrow {
        flex: unset;
        width: auto;
        min-width: unset;
        height: clamp(10.625rem, 22.135vw, 12.375rem); /* 170px at 768 → 198px max */
    }
    .hero__stats-row:last-child .hero__stat.hero__stat--wide {
        order: 2;
    }

    .hero__stats-row:last-child .hero__stat.hero__stat--narrow {
        order: 1;
    }
}

/* ─── MOBILE ──────────────────────────────────────────────────────────────── */
/*
 * Figma 360×960: vertical, text block 320×419 gap=25, container_cards 320×416 gap=20
 * 4 equal cards 150×198px in 2×2 grid, gap=20px
 */

@media (max-width: 767px) {
    .hero__br {
        display: none;
    }

    .hero {
        min-height: 960px;
    }

    .hero .container {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(2.1875rem, 9.722vw, 3.75rem); /* 35px at 360px */
        min-height: 960px;
        padding-top: clamp(2.8125rem, 12.5vw, 4.5rem); /* 45px at 360px */
        padding-bottom: clamp(2.8125rem, 12.5vw, 4.5rem);
    }

    .hero__left {
        width: 100%;
        max-width: unset;
        gap: clamp(1.25rem, 6.944vw, 1.5625rem); /* 25px at 360px */
    }

    /* 2×2 равная сетка — Figma: 320×416, 4 карточки по 150×198px, gap=20 */
    .hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.25rem, 5.556vw, 1.5625rem); /* 20px at 360px */
        width: 100%;
        align-self: unset;
    }

    /* Flatten rows into parent grid */
    .hero__stats-row {
        display: contents;
    }

    .hero__stat--wide,
    .hero__stat--narrow {
        width: auto;
        height: 198px;
    }
}