/* Хир «Социальный центр». Кадр 2049:1735, холст 1920, колонка 1440 (x − 240).
   y от верха кадра минус шапка 116px. Absolute-сцена только от 1401px.
   ≤1400 — тот же контент столбиком (фото видны, линия/точки скрыты). */

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

.sc-hero__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

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

.sc-hero__title {
    grid-column: 1 / -1;
    order: 1;
    margin: 0;
    color: #3EA74F;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-align: center;
}

.sc-hero__title span {
    display: block;
}

.sc-hero__title span + span {
    margin-left: 0;
}

.sc-hero__lead {
    grid-column: 1 / -1;
    order: 2;
    margin: 8px 0 8px;
    max-width: none;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.36px;
    text-align: center;
    color: #4D4D4D;
}

.sc-hero__photo {
    display: block;
    order: 3;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

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

    .sc-hero__stage {
        max-width: 720px;
        gap: 16px 20px;
        padding: 0 32px;
    }

    .sc-hero__title {
        font-size: 72px;
    }

    .sc-hero__lead {
        font-size: 22px;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 992px) {

    body.page-social-center .sc-hero {
        padding: 0;
        overflow: visible;
    }

    body.page-social-center .sc-hero__stage {
        display: block;
        position: relative;
        width: 1440px;
        max-width: 100%;
        height: 900px;
        margin: 0 auto;
        padding: 0;
    }

    body.page-social-center .sc-hero__line,
    body.page-social-center .sc-hero__photo,
    body.page-social-center .sc-hero__dot,
    body.page-social-center .sc-hero__title,
    body.page-social-center .sc-hero__lead {
        position: absolute;
        margin: 0;
        order: unset;
        grid-column: unset;
    }

    body.page-social-center .sc-hero__line {
        display: block;
        left: 291.5px;
        top: 518.5px;
        width: 947px;
        height: 328px;
        z-index: 1;
        pointer-events: none;
    }

    body.page-social-center .sc-hero__photo {
        display: block;
        z-index: 2;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        border-radius: 0;
        object-fit: fill;
        transform: none;
        pointer-events: none;
    }

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

    body.page-social-center .sc-hero__photo--mid {
        left: 432.95px;
        top: 497px;
        width: 230.801px;
        height: 230.801px;
    }

    body.page-social-center .sc-hero__photo--teacher {
        left: 776px;
        top: 565.2px;
        width: 263.575px;
        height: 263.575px;
    }

    body.page-social-center .sc-hero__photo--right {
        left: 1151.08px;
        top: 278px;
        width: 268.427px;
        height: 268.427px;
    }

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

    body.page-social-center .sc-hero__dot--1 { left: 292px; top: 597px; }
    body.page-social-center .sc-hero__dot--2 { left: 411px; top: 626px; }
    body.page-social-center .sc-hero__dot--3 { left: 538px; top: 709px; }
    body.page-social-center .sc-hero__dot--4 { left: 631px; top: 831px; }
    body.page-social-center .sc-hero__dot--5 { left: 788px; top: 764px; }
    body.page-social-center .sc-hero__dot--6 { left: 1024px; top: 668px; }
    body.page-social-center .sc-hero__dot--7 { left: 1223px; top: 519px; }

    body.page-social-center .sc-hero__title {
        z-index: 4;
        left: 0;
        right: 0;
        top: 65px;
        padding: 0;
        font-size: 136px;
        line-height: 0.95;
        letter-spacing: -2px;
        text-align: center;
        color: #3EA74F;
        white-space: nowrap;
    }

    body.page-social-center .sc-hero__title span {
        display: inline;
    }

    body.page-social-center .sc-hero__title span + span {
        margin-left: 42px;
        letter-spacing: -4px;
    }

    body.page-social-center .sc-hero__lead {
        z-index: 4;
        left: 369px;
        top: 325px;
        width: 688px;
        max-width: none;
        padding: 0;
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: -0.56px;
    }
}