/* «Как устроена программа обучения» на /work/school/. Кадр 2068:779, заголовок y 1907.
   Desktop — absolute от 1401px; ниже — title → фото-лента → карточки блоков.
   Мятный пояс — общий на program + stats + place через `.sh-soft`. */

.sh-soft__glow,
.sh-program__line,
.sh-program__dot,
.sh-program__card {
    display: none;
}

.sh-soft {
    background: linear-gradient(180deg, #fff 0%, #E2FFE7 45%, #fff 100%);
    overflow-x: clip;
}

.sh-program {
    padding: 48px 0 16px;
}

.sh-program__stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

.sh-program__title {
    order: 1;
    margin: 0 0 24px;
    padding: 0;
    font-size: clamp(28px, 7vw, 36px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.64px;
    text-align: center;
    color: #4D4D4D;
}

.sh-program__title span {
    color: #3EA74F;
}

/* Фото-коллаж после заголовка (в DOM — до текстов) */
.sh-program__photo {
    order: 2;
    display: block;
    width: calc(33.333% - 8px);
    max-width: 120px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 4px 16px;
    border-radius: 12px;
    object-fit: cover;
    align-self: center;
    pointer-events: none;
}

.sh-program__stage {
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
}

.sh-program__title,
.sh-program__name,
.sh-program__text {
    flex: 1 0 100%;
}

.sh-program__photo--1 { transform: rotate(-8deg); }
.sh-program__photo--2 { transform: rotate(7deg); margin-top: 12px; }
.sh-program__photo--3 { transform: rotate(-7deg); }
.sh-program__photo--4 { transform: rotate(6deg); margin-top: 12px; }
.sh-program__photo--5 { transform: rotate(-7deg); }

.sh-program__name {
    order: 3;
    margin: 8px 0 0;
    padding: 22px 20px 8px;
    border-radius: 20px 20px 0 0;
    background: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.05;
    color: #0C8AE0;
}

.sh-program__text {
    order: 3;
    margin: 0 0 16px;
    padding: 0 20px 22px;
    max-width: none;
    border-radius: 0 0 20px 20px;
    background: #fff;
    box-shadow: 0 6px 44px rgba(94, 176, 226, 0.22);
    font-size: 16px;
    line-height: 1.2;
    color: #4D4D4D;
}

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

    .sh-program__stage {
        max-width: 900px;
        padding: 0 24px;
    }

    .sh-program__title {
        font-size: 44px;
        margin-bottom: 32px;
    }

    .sh-program__photo {
        width: 16%;
        max-width: 140px;
        margin: 0 6px 24px;
    }

    .sh-program__name {
        font-size: 28px;
        padding: 28px 28px 10px;
    }

    .sh-program__text {
        font-size: 18px;
        padding: 0 28px 28px;
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) {

    body.page-school .sh-soft {
        position: relative;
        overflow-x: clip;
        background: #fff;
    }

    /* От «Занятия с психологами…» до заголовка «Где проходят занятия»:
       softY = program pad 140 + psych top 1101 → 1241;
       place title = 140+1850+73+317+154 → 2534; height 1293 */
    body.page-school .sh-soft__glow {
        display: block;
        position: absolute;
        left: 50%;
        top: 1241px;
        width: 2103px;
        height: 1293px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, #fff 0%, #E2FFE7 50%, #fff 100%);
        z-index: 0;
        pointer-events: none;
    }

    body.page-school .sh-soft .sh-program,
    body.page-school .sh-soft .sh-stats,
    body.page-school .sh-soft .sh-place {
        position: relative;
        z-index: 1;
        background: transparent;
    }

    body.page-school .sh-program {
        padding-top: 140px;
        padding-bottom: 0;
    }

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

    body.page-school .sh-program__title,
    body.page-school .sh-program__line,
    body.page-school .sh-program__card,
    body.page-school .sh-program__photo,
    body.page-school .sh-program__dot,
    body.page-school .sh-program__name,
    body.page-school .sh-program__text {
        position: absolute;
        margin: 0;
        order: unset;
        flex: unset;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        padding: 0;
        max-width: none;
        align-self: unset;
    }

    body.page-school .sh-program__title {
        z-index: 5;
        left: 205px;
        top: 0;
        width: 1031px;
        height: 66px;
        padding: 0;
        font-size: 66px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -1.32px;
        text-align: center;
        white-space: nowrap;
        color: #4D4D4D;
    }

    body.page-school .sh-program__title span {
        color: #3EA74F;
    }

    body.page-school .sh-program__line {
        display: block;
        left: 523.5px;
        top: 72.5px;
        width: 431px;
        height: 1607px;
        z-index: 2;
        pointer-events: none;
    }

    body.page-school .sh-program__card {
        display: block;
        z-index: 1;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 6px 44px rgba(94, 176, 226, 0.22);
    }

    body.page-school .sh-program__card--medical { left: 0; top: 194px; width: 529px; height: 284px; }
    body.page-school .sh-program__card--routes { left: 894px; top: 304px; width: 546px; height: 310px; }
    body.page-school .sh-program__card--legal { left: 77px; top: 641px; width: 529px; height: 281px; }
    body.page-school .sh-program__card--meetings { left: 846px; top: 762px; width: 564px; height: 281px; }
    body.page-school .sh-program__card--psych { left: 175px; top: 1061px; width: 490px; height: 313px; }
    body.page-school .sh-program__card--creative { left: 924px; top: 1172px; width: 490px; height: 420px; }
    body.page-school .sh-program__card--post { left: 77px; top: 1492px; width: 495px; height: 288px; }

    body.page-school .sh-program__photo {
        display: block;
        z-index: 3;
        width: auto;
        max-width: none;
        aspect-ratio: auto;
        border-radius: 12px;
        object-fit: cover;
        pointer-events: none;
        transform: none;
    }

    body.page-school .sh-program__photo--1 {
        left: 1247px;
        top: 144.36px;
        width: 196.612px;
        height: 196.612px;
        transform: rotate(-8deg);
        margin: 0;
    }

    body.page-school .sh-program__photo--2 {
        left: 450.72px;
        top: 493px;
        width: 202.575px;
        height: 202.575px;
        transform: rotate(7.01deg);
        margin: 0;
    }

    body.page-school .sh-program__photo--3 {
        left: 1322px;
        top: 915.04px;
        width: 164.436px;
        height: 164.436px;
        transform: rotate(-7deg);
        margin: 0;
    }

    body.page-school .sh-program__photo--4 {
        left: -0.11px;
        top: 1108px;
        width: 199.813px;
        height: 199.813px;
        transform: rotate(6deg);
        margin: 0;
    }

    body.page-school .sh-program__photo--5 {
        left: 1106.37px;
        top: 1542.12px;
        width: 263.59px;
        height: 263.59px;
        transform: rotate(-7deg);
        margin: 0;
    }

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

    body.page-school .sh-program__dot--1 { left: 604px; top: 73px; }
    body.page-school .sh-program__dot--2 { left: 939px; top: 73px; }
    body.page-school .sh-program__dot--3 { left: 524px; top: 331px; }
    body.page-school .sh-program__dot--4 { left: 888px; top: 463px; }
    body.page-school .sh-program__dot--5 { left: 598px; top: 796px; }
    body.page-school .sh-program__dot--6 { left: 838px; top: 907px; }
    body.page-school .sh-program__dot--7 { left: 657px; top: 1172px; }
    body.page-school .sh-program__dot--8 { left: 916px; top: 1344px; }
    body.page-school .sh-program__dot--9 { left: 564px; top: 1664px; }

    body.page-school .sh-program__name {
        z-index: 5;
        font-size: 36px;
        font-weight: 600;
        line-height: 0.9;
        letter-spacing: 0;
        color: #0C8AE0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    body.page-school .sh-program__text {
        z-index: 5;
        max-width: none;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.22px;
        color: #4D4D4D;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    body.page-school .sh-program__name--medical { left: 36px; top: 234px; width: 457px; }
    body.page-school .sh-program__text--medical { left: 37px; top: 317px; width: 458px; }

    body.page-school .sh-program__name--routes { left: 940px; top: 352px; width: 456px; }
    body.page-school .sh-program__text--routes { left: 940px; top: 474px; width: 458px; }

    body.page-school .sh-program__name--legal { left: 113px; top: 681px; width: 380px; }
    body.page-school .sh-program__text--legal { left: 114px; top: 768px; width: 458px; }

    body.page-school .sh-program__name--meetings { left: 894px; top: 805px; width: 474px; }
    body.page-school .sh-program__text--meetings { left: 897px; top: 888px; width: 408px; }

    body.page-school .sh-program__name--psych { left: 216px; top: 1101px; width: 406px; }
    body.page-school .sh-program__text--psych { left: 216px; top: 1193px; width: 406px; }

    body.page-school .sh-program__name--creative { left: 965px; top: 1212px; width: 406px; }
    body.page-school .sh-program__text--creative { left: 965px; top: 1366px; width: 406px; }

    body.page-school .sh-program__name--post { left: 126px; top: 1532px; width: 406px; }
    body.page-school .sh-program__text--post { left: 126px; top: 1624px; width: 406px; }
}