/* Хир «Школа приёмных родителей». Кадр 2068:779, холст 1920, колонка 1440 (x − 240).
   y = Figma y − 116 (шапка). Desktop — absolute от 1401px; ниже — поток по той же композиции. */

.sh-hero__line,
.sh-hero__dot {
    display: none;
}

.sh-hero {
    /* absolute .mv-bc--hero под шапкой — не наезжать на title */
    padding: 52px 0 16px;
    overflow-x: clip;
}

.sh-hero__stage {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

.sh-hero__title {
    order: 1;
    flex: 1 0 100%;
    margin: 0;
    color: #3EA74F;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 0.95;
    letter-spacing: -1px;
    text-align: center;
}

.sh-hero__title-line {
    display: block;
}

.sh-hero__title-line--parents {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 0.08em;
}

.sh-hero__title-icon {
    display: block;
    width: clamp(44px, 12vw, 64px);
    height: auto;
    flex: 0 0 auto;
    pointer-events: none;
}

.sh-hero__lead {
    order: 2;
    flex: 1 0 100%;
    margin: 20px auto 28px;
    max-width: 688px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.36px;
    text-align: center;
    color: #4D4D4D;
}

/* Коллаж из 4 фото — как на десктопе, сеткой 2×2 */
.sh-hero__photo {
    order: 3;
    display: block;
    width: calc(50% - 12px);
    max-width: 168px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 6px 12px;
    object-fit: cover;
    border-radius: 12px;
    pointer-events: none;
}

.sh-hero__photo--left { transform: rotate(-6deg); }
.sh-hero__photo--mid { transform: rotate(5deg); margin-top: 16px; }
.sh-hero__photo--teacher { transform: rotate(-4deg); }
.sh-hero__photo--right { transform: rotate(6deg); margin-top: 16px; }

@media (min-width: 768px) and (max-width: 991px) {
    .sh-hero {
        padding: 56px 0 24px;
    }

    .sh-hero__stage {
        max-width: 960px;
        padding: 0 24px;
    }

    .sh-hero__title {
        font-size: 64px;
        letter-spacing: -2px;
    }

    .sh-hero__title-icon {
        width: 80px;
    }

    .sh-hero__lead {
        font-size: 22px;
        letter-spacing: -0.44px;
        margin-bottom: 36px;
    }

    .sh-hero__photo {
        width: 21%;
        max-width: 180px;
        margin: 0 8px 0;
    }

    .sh-hero__photo--mid,
    .sh-hero__photo--right {
        margin-top: 28px;
    }

    .sh-hero__photo--teacher {
        margin-top: 0;
    }
}

@media (min-width: 992px) {

    body.page-school .sh-hero {
        padding: 0;
    }

    body.page-school .sh-hero__stage {
        position: relative;
        display: block;
        width: 1440px;
        max-width: 100%;
        height: 850px;
        margin: 0 auto;
        padding: 0;
    }

    body.page-school .sh-hero__line,
    body.page-school .sh-hero__photo,
    body.page-school .sh-hero__dot,
    body.page-school .sh-hero__title,
    body.page-school .sh-hero__lead {
        position: absolute;
        margin: 0;
        order: unset;
        flex: unset;
    }

    body.page-school .sh-hero__line {
        display: block;
        left: 259.5px;
        top: 547.5px;
        width: 990px;
        height: 215px;
        z-index: 1;
        pointer-events: none;
    }

    body.page-school .sh-hero__photo {
        display: block;
        z-index: 2;
        width: auto;
        max-width: none;
        aspect-ratio: auto;
        transform: none;
        pointer-events: none;
    }

    /* Экспорт 2×, поворот уже в файле. Размер/позиция — AABB макета. */
    body.page-school .sh-hero__photo--left {
        left: 31px;
        top: 434px;
        width: 243.716px;
        height: 243.716px;
    }

    body.page-school .sh-hero__photo--mid {
        left: 421px;
        top: 591px;
        width: 230.801px;
        height: 230.801px;
    }

    body.page-school .sh-hero__photo--teacher {
        left: 809px;
        top: 563px;
        width: 263.575px;
        height: 263.575px;
    }

    body.page-school .sh-hero__photo--right {
        left: 1163px;
        top: 310px;
        width: 268.427px;
        height: 268.427px;
    }

    body.page-school .sh-hero__dot {
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #185E30;
        z-index: 3;
        pointer-events: none;
    }

    body.page-school .sh-hero__dot--1 { left: 260px; top: 597px; }
    body.page-school .sh-hero__dot--2 { left: 424px; top: 687px; }
    body.page-school .sh-hero__dot--3 { left: 629px; top: 747px; }
    body.page-school .sh-hero__dot--4 { left: 817px; top: 722px; }
    body.page-school .sh-hero__dot--5 { left: 1057px; top: 680px; }
    body.page-school .sh-hero__dot--6 { left: 1234px; top: 548px; }

    body.page-school .sh-hero__title {
        z-index: 4;
        left: 148px;
        top: 71.73px;
        width: 1108px;
        padding: 0;
        font-size: 120px;
        line-height: 0.95;
        letter-spacing: -2px;
        text-align: center;
        color: #3EA74F;
    }

    body.page-school .sh-hero__title-line {
        display: block;
        white-space: nowrap;
    }

    body.page-school .sh-hero__title-line--parents {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 4px;
        letter-spacing: -4px;
    }

    body.page-school .sh-hero__title-icon {
        display: block;
        width: 159.266px;
        height: 166.553px;
        flex: 0 0 auto;
        pointer-events: none;
    }

    body.page-school .sh-hero__lead {
        z-index: 4;
        left: 376px;
        top: 480px;
        width: 688px;
        max-width: none;
        padding: 0;
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: -0.56px;
    }
}