/* Стили блоков проектирования: тестовая и боевая страницы. */
@import url('/design/css/rosarch-projectsteps.css?v=1');

body.ra-page-blocks .legacy-cooperation,
body.ra-page-blocks .legacy-cooperation-schema,
body.ra-page-blocks .legacy-cooperation-cost {
    display: none !important;
}

.ra-cooperation {
    color: #1f2529;
    font-family: Arial, Helvetica, sans-serif;
}

.ra-cooperation__hero {
    box-sizing: border-box;
    min-height: 0;
    aspect-ratio: 1280 / 485;
    padding: 52px max(24px, calc((100% - 1160px) / 2)) 24px;
    background: #9cd0e0 url('/img/skhema-bg.jpg') center bottom / cover no-repeat;
}

.ra-cooperation__title,
.ra-documents__title {
    margin: 0;
    color: #171717;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(26px, 2.25vw, 34px);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.ra-cooperation__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1120px;
    margin: clamp(46px, calc(12vw - 84px), 145px) auto 0;
    padding: 0;
    list-style: none;
}

.ra-cooperation__step {
    position: relative;
    min-width: 0;
    text-align: center;
}

.ra-cooperation__step:not(:last-child)::after {
    position: absolute;
    top: 19px;
    left: calc(100% - 12px);
    width: 58px;
    height: 18px;
    background: url('/img/arrow.svg') center / 58px 16px no-repeat;
    content: '';
}

.ra-cooperation__icon {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 34px;
    object-fit: contain;
}

.ra-cooperation__label {
    display: block;
    max-width: 190px;
    margin: auto;
    font-size: clamp(13px, 1.15vw, 16px);
    line-height: 1.25;
}

.ra-cooperation__facts {
    display: grid;
    grid-template-columns: minmax(280px, .95fr) 2fr;
    gap: 68px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 54px 24px 46px;
}

.ra-cooperation__offer {
    align-self: center;
    padding-left: 38px;
    border-left: 5px solid #2b9caf;
}

.ra-cooperation__offer-text {
    margin: 0 0 28px;
    color: #202020;
    font-size: clamp(16px, 1.35vw, 21px);
    font-weight: 700;
    line-height: 1.38;
}

.ra-cooperation__offer .btn {
    box-sizing: border-box;
    width: auto !important;
    min-width: 310px;
    min-height: 52px;
    padding: 0 28px;
    font-size: 14px;
    line-height: 52px;
    white-space: nowrap;
}

.ra-cooperation__factors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 54px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ra-cooperation__factor {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 17px;
    align-items: center;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.35;
}

.ra-cooperation__factor img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.ra-cooperation__note {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px 56px;
    font-size: 14px;
    line-height: 1.5;
}

.ra-cooperation__note a {
    color: #2b9caf;
}

.ra-documents {
    max-width: 1650px;
    margin: 54px auto 70px;
    padding: 0 24px;
}

/*
 * Стадии проектирования остаются штатным блоком страницы: описание появляется
 * при наведении на карточку. Новая карточная версия не используется на тесте.
 */
body.ra-page-blocks .ra-documents {
    display: none;
}

.ra-documents__cards {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(460px, 2.6fr) minmax(210px, 1fr);
    min-height: 690px;
    overflow: hidden;
}

.ra-document-card {
    position: relative;
    min-width: 0;
    color: #202020;
}

.ra-document-card--concept,
.ra-document-card--working {
    background: none;
}

.ra-document-card--concept::before,
.ra-document-card--concept::after,
.ra-document-card--working::before,
.ra-document-card--working::after {
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    height: 35%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
}

.ra-document-card--concept::before,
.ra-document-card--working::before { top: 0; }
.ra-document-card--concept::after,
.ra-document-card--working::after { bottom: 0; }
.ra-document-card--concept::before,
.ra-document-card--concept::after { background-image: url('/img/ps1.jpg'); }
.ra-document-card--working::before,
.ra-document-card--working::after { background-image: url('/img/ps3.jpg'); }

.ra-document-card__toggle {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ra-document-card__toggle:focus-visible {
    outline: 4px solid #ed1746;
    outline-offset: -8px;
}

.ra-document-card__name {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 35%;
    bottom: 35%;
    left: 0;
    margin: 0;
    padding: 28px 16px;
    background: #98aac4;
    color: #fff;
    font-size: clamp(20px, 2.1vw, 35px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .24);
}

.ra-document-card--project {
    display: flex;
    flex-direction: column;
    padding: 72px clamp(28px, 4vw, 85px);
    background: #98aac4;
}

.ra-document-card--project .ra-document-card__toggle {
    position: static;
    order: -1;
    min-height: 0;
    margin: 0 0 28px;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.ra-document-card__content {
    font-size: clamp(15px, 1.35vw, 21px);
    line-height: 1.35;
}

.ra-document-card__content p { margin: 0 0 34px; }
.ra-document-card__content ol { margin: 0; padding-left: 1.45em; }
.ra-document-card__content ol ol { margin-top: 6px; }

.ra-documents__cards.is-concept {
    grid-template-columns: minmax(460px, 2.6fr) minmax(210px, 1fr) minmax(210px, 1fr);
}

.ra-documents__cards.is-working {
    grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) minmax(460px, 2.6fr);
}

.ra-documents__cards.is-concept .ra-document-card--concept,
.ra-documents__cards.is-working .ra-document-card--working {
    display: flex;
    flex-direction: column;
    padding: 72px clamp(28px, 4vw, 85px);
    background-color: #98aac4;
    background-image: none;
}

.ra-documents__cards.is-concept .ra-document-card--concept::before,
.ra-documents__cards.is-concept .ra-document-card--concept::after,
.ra-documents__cards.is-working .ra-document-card--working::before,
.ra-documents__cards.is-working .ra-document-card--working::after {
    display: none;
}

.ra-documents__cards.is-concept .ra-document-card--concept .ra-document-card__name,
.ra-documents__cards.is-working .ra-document-card--working .ra-document-card__name {
    position: static;
    order: -1;
    margin: 0 0 28px;
    padding: 0;
    background: transparent;
    color: #202020;
    font-size: clamp(26px, 3vw, 42px);
    text-align: left;
    text-shadow: none;
}

.ra-documents__cards.is-concept .ra-document-card--concept::after,
.ra-documents__cards.is-working .ra-document-card--working::after,
.ra-documents__cards.is-concept .ra-document-card--concept .ra-document-card__content,
.ra-documents__cards.is-working .ra-document-card--working .ra-document-card__content {
    display: block;
}

.ra-document-card--concept .ra-document-card__content,
.ra-document-card--working .ra-document-card__content,
.ra-document-card--project .ra-document-card__name {
    display: none;
}

.ra-documents__cards.is-concept .ra-document-card--project,
.ra-documents__cards.is-working .ra-document-card--project {
    padding: 0;
    background-position: center;
    background-size: cover;
}

.ra-documents__cards.is-concept .ra-document-card--project { background-image: url('/img/ps22.jpg'); }
.ra-documents__cards.is-working .ra-document-card--project { background-image: url('/img/ps22.jpg'); }

.ra-documents__cards.is-concept .ra-document-card--project .ra-document-card__toggle,
.ra-documents__cards.is-working .ra-document-card--project .ra-document-card__toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
}

.ra-documents__cards.is-concept .ra-document-card--project .ra-document-card__content,
.ra-documents__cards.is-working .ra-document-card--project .ra-document-card__content {
    display: none;
}

.ra-documents__cards.is-concept .ra-document-card--project::after,
.ra-documents__cards.is-working .ra-document-card--project::after {
    position: absolute;
    right: 0;
    bottom: 18%;
    left: 0;
    padding: 28px 16px;
    background: #98aac4;
    color: #fff;
    content: 'Проектная документация';
    font-size: clamp(20px, 2.1vw, 35px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .24);
}

@media (max-width: 959px) {
    .ra-cooperation__hero { min-height: auto; aspect-ratio: auto; padding-top: 54px; background-image: linear-gradient(rgba(156, 208, 224, .8), rgba(156, 208, 224, .8)), url('/img/skhema-bg.jpg'); }
    .ra-cooperation__steps { display: flex; flex-direction: column; gap: 38px; margin: 46px auto 0; }
    .ra-cooperation__step { display: grid; flex: 0 0 auto; grid-template-columns: 72px 1fr; gap: 20px; min-height: 64px; align-items: center; text-align: left; }
    .ra-cooperation__icon { width: 64px; height: 64px; margin: 0; }
    .ra-cooperation__label { max-width: none; margin: 0; }
    .ra-cooperation__step:not(:last-child)::after { top: calc(100% - 4px); left: 31px; width: 2px; height: 31px; background: #202020; }
    .ra-cooperation__facts { grid-template-columns: 1fr; gap: 38px; }
    .ra-documents { padding: 0; }
    .ra-documents__cards,
    .ra-documents__cards.is-concept,
    .ra-documents__cards.is-working { display: block; min-height: 0; }
    .ra-document-card { min-height: 220px; }
    .ra-document-card--project,
    .ra-documents__cards.is-concept .ra-document-card--concept,
    .ra-documents__cards.is-working .ra-document-card--working { padding: 38px 24px; }
    .ra-document-card__name { top: auto; bottom: 0; padding: 22px 16px; }
    .ra-document-card__content { max-height: none; }
}

@media (max-width: 599px) {
    .ra-cooperation__hero { padding-right: 18px; padding-left: 18px; }
    .ra-cooperation__title { font-size: 29px; }
    .ra-cooperation__facts { padding-right: 18px; padding-left: 18px; }
    .ra-cooperation__factors { grid-template-columns: 1fr; gap: 23px; }
    .ra-cooperation__offer { padding-left: 23px; }
    .ra-cooperation__offer .btn {
        display: flex;
        width: 100% !important;
        min-width: 0;
        align-items: center;
        justify-content: center;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }
    .ra-cooperation__note { padding-right: 18px; padding-left: 18px; }
}