/*Стили для страницы со списком историй успеха*/

    
.success-stories-section{
    width: 100%;
    display: block;
    margin: 48px auto 40px;
}

.success-stories {
    max-width: 1400px; 
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2vw;
    column-gap: 1.3vw;
    margin: 0 auto;
}

.success-stories>div{
    display: block;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.success-stories a {
    cursor: default;
    text-decoration: none;
    color: #000000;
    display: block;
    width: 100%;
}

.success-stories > p:empty,
.success-stories > p:only-child {
    display: none;
}

.one-ss-list {
    min-height: 360px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    padding: 10px;
    /* border: 2px solid black; */
    cursor: pointer;
    box-sizing: border-box;
}


.one-ss-list:hover {
    background-color: #FFFFC9;
}

.one-ss-list h2 {
    font-size: 18px;
    font-family: "Ony One";
    font-weight: 500;
    line-height: 115%;
    margin: 16px 0;
    color: #313332;
}

.one-ss-list p {
    font-family: "Ony One";
    font-size: 18px;
    line-height: 130%;
    margin: 0;
    font-weight: 400;
    color: #313332;
}

.one-ss-list img {
    width: 50%;
    height: auto;
    display: block;
    aspect-ratio: 1/1;
    /*flex-shrink: 0;*/
    min-width: 224px;
    max-width: 350px;
    transform: translateX(-1.3vw);
    
}

.ossl-text {
    padding-right: 16px;
}

.ossl-violet {
    visibility: hidden;
    text-decoration: none;
    font-weight: 400;
    font-family: "Ony One";
    font-size: clamp(18px, 2vh, 50px);
    color: #AD83FF;
    transform: translateY(-14px);/*костыль для противодействия <p> из WP*/
    display: block;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: 0%;
}

.ossl-violet:hover {
    text-decoration: underline;
}

.successors_load_more{
    display: flex;
    justify-content: center;
    margin: 30px 0 20px;
    width: 100%;
    clear: both;
}

.btn_load_more_successors{
    background-color: #ECECEC;
    color: #313332;
    border: none;
    padding: 14px 27px;
    font-family: "Ony One";
    font-weight: 400;
    font-size: 18px;
    line-height: 110%;
    cursor: pointer;
}


@media (max-width: 1000px) {
    /*.success-stories {*/
    /*    width: 94%;*/
    /*    grid-template-columns: 1fr;*/
    /*    gap: 48px;*/
    /*}*/

    /*.one-ss-list {*/
    /*    min-height: 0;*/
    /*    gap: 0;*/
    /*}*/

    /*.ossl-text {*/
    /*    transform: none;*/
    /*}*/

    .success-stories-section{
        margin: 0 auto;
        width: 100%;
    }
    .success-stories {
        gap: 30px;
    }
    
    .success-stories a {
        min-width: 0;
    }
    .one-ss-list {
        flex-direction: column;
        /*width: 100%;*/
        /*box-sizing: border-box;*/
    }
    
    
    
    .one-ss-list h2 {
        text-align: left;
    }

    .one-ss-list p {
        margin-bottom: 20px;
    }


    .one-ss-list>* {
        transform: none;
    }

    .one-ss-list img {
        flex-shrink: 1;
        width: 100%;
        max-width: 500px;
        aspect-ratio: 1;
        transform: none;
        height: auto;
        min-height: auto;
        max-height: none;
        display: block;
        margin: 10px auto;
        object-fit: cover;
    }

    /*
    .ossl-text button,
    .ss-btn {
        display: block;
    }
    */
    .one-ss-list:hover {
        background-color: inherit;
    }
}

@media(max-width: 700px){
    .success-stories {
        margin: 0 auto;
        gap: 20px;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .gsbp-7995b37 {
        font-size: 20px !important;
        text-align: left !important;
        padding: 0 16px;
        margin: 10px 0 0;
    }
    .success-stories-section{
        margin: 0 auto;
        width: 100%;
    }
    /*.success-stories {*/
    /*    margin: 0 auto;*/
    /*    gap: 0;*/
    /*    grid-template-columns: 1fr;*/
    /*    width: 100%;*/
    /*    max-width: 400px;*/
    /*}*/
    .ossl-violet {
        visibility: visible;
    }
    .one-ss-list {
        flex-shrink: 0;
        display: block;
        padding: 0;
    }
    
    .one-ss-list p {
        font-size: 16px;
    }


    /*.one-ss-list>* {*/
    /*    transform: none;*/
    /*}*/

    .one-ss-list img {
        width: 100%;
        max-width: 100%;
        transform: none;

        height: auto;
        min-height: auto;
        max-height: none;

        display: block;
        margin: 10px auto;
        object-fit: cover;
    }

    /*.one-ss-list h2 {*/
    /*    font-size: 20px;*/
    /*}*/

    /*.one-ss-list p {*/
    /*    font-size: clamp(16px, 2vh, 50px);*/
    /*}*/
    /*
    .ossl-text button,
    .ss-btn {
        display: block;
    }
    */
    /*.ossl-violet {*/
    /*    visibility: visible;*/
    /*}*/

    /*.one-ss-list:hover {*/
    /*    background-color: inherit;*/
    /*}*/
}

/*  >*-*< >*-*< >*-*< >*-*< >*-*< >*-*< >*-*< */
/* Стили для страницы с одной историей успеха */
/*  >*-*< >*-*< >*-*< >*-*< >*-*< >*-*< >*-*< */

.one-success-story {
    margin: 0;
}

.one-success-story * {
    font-family: "Ony One";
    color: #313332;
    font-weight: 400;
    line-height: 130%;
}

.one-success-story h1 {
    font-family: "Ony One";
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    margin: 0 0 20px;
    text-align: left;
}

.one-success-story p {
    font-size: 18px;
    line-height: 135%;
    text-wrap: pretty;
    
    /* hyphens: auto;*/ /* Переносы слов по слогам (требует указания lang="ru" в <html>) 
    /* Явно отключаем переносы */
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
       
    /* Запрещаем разрыв слов */
    word-break: normal;
    overflow-wrap: normal;
    
    /* Борьба с висячими строками (осиротевшими строками) */
    orphans: 2; /* Минимум 2 строки абзаца могут остаться на предыдущей странице/колонке */
    widows: 2;  /* Минимум 2 строки абзаца должны перейти на новую страницу/колонку */
}

.one-success-story-row {
    display: flow-root;
}

.image-successor-left {
    float: left;
    width: 30vw;
    /*aspect-ratio: 4 / 3;*/
    margin: 0 24px 20px 0;
    min-width: 280px;
    max-width: 420px;
}

.image-successor-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.text-successor-right>p:first-of-type  {
    margin-top: 0;
}

/* Сбрасывает текст под картинку, когда JS добавляет этот класс */
/*.text-successor-right .clear-text {*/
/*    clear: left;*/
/*}*/

@media(max-width: 600px) {
    .one-success-story {
        margin: 30px auto;
    }

    .one-success-story-row {
        display: block;
    }

    .image-successor-left {
        float: none;
        width: 85%;
        max-width: 300px;
        margin: 0 auto;
    }

    .image-successor-left img {
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
    .one-success-story h1 {
        text-align: center;
        margin: 20px auto;
        font-size: 16px;
    }
        
    .one-success-story p {
        font-size: 16px;
    }
}