.documents-page,
.documents-page *{
    box-sizing:border-box;
}

.documents-page{
    width:100%;
    background:#E4DBD2;
    color:#2D2A2A;
    padding:70px 0 105px;
}

.documents-page__inner{
    width:calc(100% - 80px);
    max-width:1040px;
    margin:0 auto;
}

.documents-page__breadcrumbs{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:50px;
    font-size:12px;
    line-height:1.3;
    color:#837D77;
}

.documents-page__breadcrumbs a{
    color:inherit;
    text-decoration:none;
}

.documents-page__breadcrumbs a:hover{
    color:#2D2A2A;
}

.documents-page__title{
    margin:0 0 56px;
    max-width:850px;
    font-size:52px;
    line-height:1;
    font-weight:500;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

.documents-page__description{
    max-width:680px;
    margin:-30px 0 55px;
    font-size:17px;
    line-height:1.55;
    color:#67615C;
}


/* MAIN GRID */

.documents-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid rgba(45,42,42,.25);
    border-left:1px solid rgba(45,42,42,.25);
}

.documents-card{
    position:relative;
    min-height:205px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:28px 28px 26px;

    border-right:1px solid rgba(45,42,42,.25);
    border-bottom:1px solid rgba(45,42,42,.25);

    color:#2D2A2A;
    text-decoration:none;
    background:transparent;

    transition:
        background .2s ease,
        color .2s ease;
}

.documents-card:hover{
    background:#fff;
}

.documents-card--section{
    background:#2D2A2A;
    color:#fff;
}

.documents-card--section:hover{
    background:#171616;
}

.documents-card__type{
    font-size:11px;
    line-height:1;
    letter-spacing:.09em;
    text-transform:uppercase;
    opacity:.55;
}

.documents-card__title{
    max-width:260px;
    margin:30px 0;
    font-size:21px;
    line-height:1.2;
    font-weight:500;
}

.documents-card__bottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
}

.documents-card__note{
    font-size:12px;
    line-height:1.3;
    opacity:.6;
}

.documents-card__action{
    margin-left:auto;
    font-size:12px;
    line-height:1;
    letter-spacing:.04em;
    white-space:nowrap;
}


/* INTERNAL SECTION */

.documents-list{
    border-top:1px solid rgba(45,42,42,.25);
}

.documents-list__item{
    min-height:82px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:20px;
    align-items:center;

    border-bottom:1px solid rgba(45,42,42,.22);

    color:#2D2A2A;
    text-decoration:none;

    transition:
        padding .2s ease,
        background .2s ease;
}

.documents-list__item:hover{
    padding:0 18px;
    background:#fff;
}

.documents-list__num{
    font-size:11px;
    line-height:1;
    letter-spacing:.08em;
    color:#8C857F;
}

.documents-list__title{
    padding:20px 0;
    font-size:17px;
    line-height:1.35;
    font-weight:500;
}

.documents-list__action{
    padding-left:20px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
}

.documents-page__back{
    display:inline-flex;
    margin-top:34px;
    color:#655F5A;
    text-decoration:none;
    font-size:13px;
}

.documents-page__back:hover{
    color:#2D2A2A;
}


/* TABLET */

@media(max-width:900px){

    .documents-page__inner{
        width:calc(100% - 60px);
    }

    .documents-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* MOBILE */

@media(max-width:640px){

    .documents-page{
        padding:50px 0 70px;
    }

    .documents-page__inner{
        width:calc(100% - 38px);
    }

    .documents-page__breadcrumbs{
        margin-bottom:35px;
    }

    .documents-page__title{
        margin-bottom:38px;
        font-size:38px;
    }

    .documents-page__description{
        margin-top:-15px;
        margin-bottom:40px;
        font-size:15px;
    }

    .documents-grid{
        display:block;
        border-left:0;
    }

    .documents-card{
        min-height:155px;
        border-left:0;
    }

    .documents-list__item{
        grid-template-columns:30px minmax(0,1fr);
        gap:12px;
    }

    .documents-list__action{
        display:none;
    }

    .documents-list__title{
        font-size:15px;
    }

}



/* ==========================================
   DOCUMENTS — UNIFIED LIST VERSION
   ========================================== */

.documents-page{
    background:#ffffff !important;
}

.documents-list{
    width:100%;
    border-top:1px solid rgba(45,42,42,.22);
}

.documents-list__item{
    width:100%;
    min-height:82px;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:32px !important;
    align-items:center;

    padding:0 !important;

    border-bottom:1px solid rgba(45,42,42,.20);

    background:transparent;
    color:#2D2A2A;
    text-decoration:none;

    transition:
        padding .22s ease,
        background .22s ease;
}

.documents-list__item:hover{
    padding-left:18px !important;
    padding-right:18px !important;
    background:#F6F3F0;
}

.documents-list__title{
    min-width:0;
    padding:24px 0;

    font-size:17px;
    line-height:1.35;
    font-weight:500;
}

.documents-list__action{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;

    padding:0 !important;

    font-size:12px;
    line-height:1.2;
    white-space:nowrap;

    color:#625D58;
}

.documents-list__count{
    color:#99918A;
}

.documents-list__num{
    display:none !important;
}


/* Main and internal pages use same width */

.documents-page__inner{
    width:calc(100% - 80px) !important;
    max-width:1040px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


@media(max-width:900px){

    .documents-page__inner{
        width:calc(100% - 60px) !important;
    }

}


@media(max-width:640px){

    .documents-page__inner{
        width:calc(100% - 38px) !important;
    }

    .documents-list__item{
        grid-template-columns:minmax(0,1fr) auto !important;
        gap:15px !important;
    }

    .documents-list__title{
        font-size:15px;
    }

    .documents-list__count{
        display:none;
    }

    .documents-list__action{
        display:block !important;
        font-size:11px;
    }

}



/* ==========================================
   DOCUMENTS — STANDARD BREADCRUMB BAR
   ========================================== */

.documents-breadcrumbbar{
    width:100%;
    background:#ffffff;
    border-bottom:1px solid rgba(45,42,42,.10);
}

.documents-breadcrumbbar__inner{
    width:calc(100% - 80px);
    max-width:1040px;
    min-height:52px;

    display:flex;
    align-items:center;
    gap:8px;

    margin:0 auto;

    font-size:12px;
    line-height:1.3;
    color:#8A837D;
}

.documents-breadcrumbbar__inner a{
    color:inherit;
    text-decoration:none;
}

.documents-breadcrumbbar__inner a:hover{
    color:#2D2A2A;
}


/* старые внутренние крошки больше не нужны */

.documents-page__breadcrumbs{
    display:none !important;
}


/* контент начинается уже после отдельной полосы */

.documents-page{
    padding-top:58px !important;
}


@media(max-width:900px){

    .documents-breadcrumbbar__inner{
        width:calc(100% - 60px);
    }

}


@media(max-width:640px){

    .documents-breadcrumbbar__inner{
        width:calc(100% - 38px);
        min-height:46px;
    }

    .documents-page{
        padding-top:42px !important;
    }

}


/* ==========================================
   DOCUMENTS — STANDARD 1040 CONTAINER
   ========================================== */

.documents-page__inner,
.documents-breadcrumbbar__inner{
    width:calc(100% - 80px) !important;
    max-width:1040px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

.documents-list,
.documents-page__title,
.documents-page__description{
    width:100% !important;
    max-width:1040px !important;
    box-sizing:border-box !important;
}

.documents-list__item{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

@media(max-width:900px){

    .documents-page__inner,
    .documents-breadcrumbbar__inner{
        width:calc(100% - 60px) !important;
    }

}

@media(max-width:640px){

    .documents-page__inner,
    .documents-breadcrumbbar__inner{
        width:calc(100% - 38px) !important;
    }

}