/**
 * Главная: фон страницы + специфика hero--home (ноут + телефон по Figma).
 * Desktop Group 5395: 722×536 · Tablet · Phone — пропорции как на десктопе.
 */

.home {
    background-color: var(--site-bg);
    color: var(--site-text-primary);
}

body.home.site-page {
    background-color: var(--site-bg);
}

.hero--home .hero__media::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 0.1875rem;
    margin: 1rem auto 0;
    border-radius: 624.9375rem;
    background-color: var(--site-accent);
}

/* —— Phone: Group 5395 ≈ 335×226, ноут 314.52×222.75, тел 78.7×161 —— */
.hero--home.hero--devices .hero__media {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: min(100%, 20.9375rem);
    aspect-ratio: 20.9375 / 14.0906;
    height: auto;
    min-height: 0;
    margin-inline: auto;
}

.hero--home .hero__device {
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: top left;
    filter: none;
}

.hero--home .hero__device--primary {
    position: absolute;
    top: 0;
    left: 0;
    width: 93.887%; /* 19.6575 / 20.9375 */
    max-width: none;
    height: auto;
}

.hero--home .hero__device--secondary {
    position: absolute;
    top: 27.88%; /* 62.87 / 225.45 */
    left: 76.5%; /* 256.29 / 335 */
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 23.49%; /* 78.7 / 335 */
    max-width: none;
    height: auto;
}

/* —— Tablet ≥768: ноут 578×410, тел 144.64×297 @ x471 y116 —— */
@media (min-width: 48rem) {
    .hero--home.hero--devices .hero__media {
        width: min(100%, 38.4775rem); /* 29.4375 + 9.04 */
        aspect-ratio: 38.4775 / 26.0625;
    }

    .hero--home .hero__device--primary {
        top: 0;
        left: 0;
        width: 93.886%; /* 36.125 / 38.4775 */
    }

    .hero--home .hero__device--secondary {
        top: 27.82%; /* 7.25 / 26.0625 */
        left: 76.506%; /* 29.4375 / 38.4775 */
        width: 23.494%; /* 9.04 / 38.4775 */
    }
}

/* —— Desktop ≥1024: Group 5395 722×536 —— */
@media (min-width: 64rem) {
    .hero--home {
        grid-template-columns: minmax(0, 1fr) 45.125rem;
        overflow: visible;
    }

    .hero--home .hero__media::after {
        display: none;
    }

    .hero--home.hero--devices .hero__media {
        width: 45.125rem;
        max-width: 45.125rem;
        height: 33.5rem;
        min-height: 33.5rem;
        aspect-ratio: auto;
        margin-inline: 0;
        justify-self: end;
    }

    .hero--home .hero__device--primary {
        top: 0;
        left: 0.4375rem;
        width: 44.375rem; /* 44.375rem */
        height: 31.5rem; /* 31.5rem */
    }

    .hero--home .hero__device--secondary {
        top: 4.0625rem;
        left: 28rem;
        width: 13.875rem; /* 13.875rem */
        height: 29.1875rem; /* 29.1875rem */
    }

    .hero--home .hero__title {
        max-width: 32rem;
        font-size: 2.875rem; /* 2.875rem */
        line-height: 3.375rem;
    }
}