/*
 * Локальные исправления мобильной версии.
 * Десктоп и глобальные img/svg не затрагиваются.
 */

@media screen and (max-width: 700px) {

    /* =========================================================
       ОБЩИЕ СВОЙСТВА ТОЛЬКО ДЛЯ ПРОБЛЕМНЫХ СЕКЦИЙ
       ========================================================= */

    .properties__wrapper,
    .training_profiles__wrapper,
    .teacher__wrapper,
    .sign_up__wrapper,
    .review__wrapper,
    .contacts__wrapper {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* =========================================================
       1. БЛОК «ГРУППЫ / 2 ЗАНЯТИЯ В НЕДЕЛЮ»
       properties.css
       ========================================================= */

    .properties__wrapper {
        position: relative;
        padding: 32px 20px;
        overflow: hidden;

        /*
         * Уменьшаем декоративные фоновые изображения секции.
         * Если у секции несколько backgrounds, значения идут
         * в том же порядке, что и в исходном background-image.
         */
        background-size:
                90px auto,
                110px auto,
                80px auto;
        background-position:
                right -20px top 220px,
                left -15px top 40px,
                right 10px bottom 20px;
    }

    .properties__wrapper > * {
        position: relative;
        z-index: 2;
    }

    .properties__h,
    .property__content,
    .properties__list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
    }

    /*
     * В исходном CSS у .property__content было margin-right: 320px.
     * На телефоне это оставляет тексту только узкую часть экрана.
     */
    .property__content {
        display: block;
        margin-right: 0;
    }

    .properties__list {
        padding-left: 72px;
    }

    .property__item {
        min-width: 0;
    }

    .property__h,
    .property__info {
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /* =========================================================
       2. «НАПРАВЛЕНИЯ ПОДГОТОВКИ»
       training_profiles.css
       ========================================================= */

    .training_profiles__wrapper {
        position: relative;
        padding: 32px 20px;
        overflow: hidden;

        /*
         * Жёлтую декоративную фигуру уменьшаем и уводим вправо.
         * Она остаётся на странице, но больше не лежит поверх
         * заголовка и карточки.
         */
        background-size:
                150px auto,
                90px auto;
        background-position:
                right -55px top 125px,
                right 15px top 10px;
    }

    .training_profiles__wrapper > * {
        position: relative;
        z-index: 2;
    }

    .training_profiles__h {
        width: 100%;
        max-width: 100%;
        margin: 0 0 32px;
        padding: 0;

        font-size: 42px;
        line-height: 1.12;
    }

    .training_profiles__list,
    .training_profiles__cards,
    .training_profiles__table,
    .training_profile__table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .training_profile,
    .training_profile__item,
    .training_profile__card {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .training_profile__name,
    .training_profile__info,
    .training_profile__class {
        padding-left: 16px;
        padding-right: 16px;
        overflow-wrap: break-word;
    }


    /* =========================================================
       3. «РУКОВОДИТЕЛИ»
       teachers.css
       ========================================================= */

    .teacher__wrapper {
        position: relative;
        padding: 32px 20px;
        overflow: hidden;
    }

    /*
     * Шляпа и очки находятся рядом с заголовком через псевдоэлементы.
     * На мобильном их убираем именно у заголовка.
     */
    .teacher__h::before,
    .teacher__h::after {
        display: none;
    }

    .teacher__h {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 100%;
        margin: 0 0 32px;

        font-size: 46px;
        line-height: 1.1;
        text-align: center;
    }

    .teacher__leaders {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 32px;
        margin-top: 0;
    }

    .teacher__leader,
    .teacher__leader-reversed {
        box-sizing: border-box;

        flex-direction: column;
        align-items: stretch;
        gap: 24px;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 16px;
    }

    .teacher__photo {
        flex: none;

        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;

        object-fit: cover;
    }

    .teacher__content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .teacher__name,
    .teacher__role,
    .teacher__description,
    .teacher__content li {
        overflow-wrap: break-word;
    }

    /*
     * Если сова/крыло является фоновым изображением wrapper,
     * уменьшаем его, но не отключаем.
     */
    .teacher__wrapper {
        background-size:
                100px auto,
                80px auto;
        background-position:
                right -30px top 180px,
                left -20px bottom 20px;
    }


    /* =========================================================
       4. «ОСТАВИТЬ ЗАЯВКУ»
       sign_up.css
       ========================================================= */

    .sign_up__wrapper {
        position: relative;

        padding: 48px 20px;
        overflow: hidden;

        /*
         * У секции много декоративных фигур.
         * На телефоне оставляем их, но значительно уменьшаем
         * и разводим по краям.
         *
         * Количество значений должно совпадать с количеством
         * background-image в исходном sign_up.css.
         */
        background-size:
                100px auto,
                90px auto,
                80px auto,
                90px auto,
                100px auto;

        background-position:
                left -25px top 20px,
                right -25px top 70px,
                left -30px center,
                right -25px center,
                right -20px bottom 10px;
    }

    .sign_up__wrapper > * {
        position: relative;
        z-index: 2;
    }

    /*
     * В исходнике margin: 200px 0 слишком большой для телефона.
     */
    .sign_up__button {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;
        margin: 80px 0 32px;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sign_up__button .button,
    .sign_up__button button,
    .sign_up__button a {
        box-sizing: border-box;

        width: min(100%, 360px);
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        text-align: center;
        white-space: normal;
    }

    .sign_up__note {
        position: relative;
        z-index: 3;

        box-sizing: border-box;
        width: 100%;
        max-width: 440px;

        margin: 24px auto 0;
        padding: 20px;

        /*
         * Фон нужен, чтобы текст не смешивался с декором,
         * но декоративные картинки при этом остаются.
         */
        background: rgba(255, 233, 153, 0.92);
        border-radius: 20px;

        font-size: 22px;
        line-height: 1.4;
        text-align: center;
        overflow-wrap: break-word;
    }


    /* =========================================================
       5. «ОТЗЫВЫ О НАС»
       reviews.css / sliders.css
       ========================================================= */

    .review__wrapper {
        position: relative;
        padding-left: 20px;
        padding-right: 20px;
        overflow: hidden;
    }

    .review__wrapper .sliders_wrapper,
    .review__slider,
    .review__wrapper .swiper {
        box-sizing: border-box;

        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .review__wrapper .sliders_wrapper {
        position: relative;
        display: block;
        padding: 0 40px;
    }

    .review__wrapper .swiper-wrapper,
    .review__wrapper .swiper-slide,
    .review__slide {
        min-width: 0;
        max-width: 100%;
    }

    .review__slide {
        box-sizing: border-box;
        width: 100%;
        padding: 20px 16px;
    }

    /*
     * Стрелки больше не занимают отдельные колонки
     * и не выталкивают Swiper вправо.
     */
    .review__wrapper .sliders__arrow {
        position: absolute;
        top: 50%;
        z-index: 10;

        width: 30px;
        height: 48px;
        margin: 0;

        transform: translateY(-50%);
    }

    .review__wrapper .sliders__arrow:first-of-type {
        left: 0;
    }

    .review__wrapper .sliders__arrow:last-of-type {
        right: 0;
    }

    .review__name,
    .review__status,
    .review__text {
        overflow-wrap: anywhere;
    }


    /* =========================================================
       6. КАРТА И КОНТАКТЫ
       contacts.css
       ========================================================= */

    .contacts__wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 32px;

        padding: 32px 20px;
        margin: 0;

        overflow: hidden;
    }

    .contacts__content,
    .contacts__info,
    .contacts__links,
    .contacts__address,
    .contacts__map,
    .contacts__map-wrapper {
        box-sizing: border-box;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-left: 0;
        margin-right: 0;
    }

    /*
     * Карта должна занимать всю доступную ширину,
     * а не оставаться узкой колонкой desktop-flex.
     */
    .contacts__map,
    .contacts__map-wrapper {
        flex: none;
        align-self: stretch;
    }

    .contacts__wrapper iframe,
    .contacts__map iframe {
        display: block;

        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100%;
        height: 360px;

        margin: 0;
        border: 0;
    }

    .contacts__info,
    .contacts__links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;

        padding: 0;
    }

    .contacts__address,
    .contacts__phone,
    .contacts__mail,
    .contacts__social,
    .contacts__link {
        box-sizing: border-box;

        max-width: 100%;
        margin-left: 0 !important;
        padding-left: 0;

        overflow-wrap: anywhere;
    }

    .contacts__link {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .contacts__link img,
    .contacts__icon {
        flex: 0 0 auto;
    }
}