/* ==========================================================================
   NCCG
   UNIVERSAL DOCUMENT PAGE v8
   ========================================================================== */


.document-universal-page {
    background: #ffffff;
}



/* ==========================================================================
   BREADCRUMBS AREA
   ========================================================================== */

.document-universal-heading {
    padding-bottom: 18px !important;
}



/* ==========================================================================
   PAGE BACKGROUND
   ========================================================================== */

.document-universal-section {
    padding: 14px 0 72px;
    background: #eef0f5;
}



/* ==========================================================================
   MAIN CARD
   ========================================================================== */

.document-universal-card {

    position: relative;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 40px 48px 46px;

    overflow: hidden;

    background: #ffffff;

    border-radius: 30px;

    box-shadow:
        0 14px 40px
        rgba(25, 54, 90, .07);
}


/* синяя вертикальная линия */

.document-universal-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 6px;

    background: #155293;
}



/* ==========================================================================
   HEADER
   ========================================================================== */

.document-universal-card__header {
    margin-bottom: 28px;
}



.document-universal-card__meta {

    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 10px 18px;

    margin-bottom: 14px;

    color: #8d97a1;

    font-size: 15px;
    line-height: 1.3;

    font-weight: 700;
}



.document-universal-card__date {

    display: inline-flex;

    align-items: center;

    gap: 8px;
}



.document-universal-card__title {

    max-width: 1100px;

    margin: 0;

    color: #4d4f52;

    font-size: clamp(
        30px,
        3vw,
        42px
    );

    line-height: 1.16;

    font-weight: 700;

    letter-spacing: -.015em;
}



/* ==========================================================================
   MAIN IMAGE / SIMPLE GALLERY

   Никаких JS и внешних библиотек.
   ========================================================================== */

.document-universal-gallery {

    margin: 0 0 32px;

    padding: 18px;

    background: #f6f8fb;

    border-radius: 20px;
}



.document-universal-gallery__grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 18px;
}



.document-universal-gallery__item {

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border-radius: 18px;

    color: #155293;

    text-decoration: none !important;

    border: 0 !important;

    box-shadow:
        0 8px 24px
        rgba(19, 48, 79, .08);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}



.document-universal-gallery__item:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(19, 48, 79, .13);
}



.document-universal-gallery__item img {

    display: block;

    width: 100%;

    height: 280px;

    object-fit: contain;

    object-position: center;

    background: #ffffff;
}



.document-universal-gallery__caption {

    display: block;

    padding:
        13px
        16px
        15px;

    color: #344657;

    font-size: 14px;

    line-height: 1.4;
}



/* ==========================================================================
   OLD SINGLE FILE BUTTON
   ========================================================================== */

.document-universal-primary-file {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;

    margin:
        4px
        0
        30px;
}



.document-universal-primary-file__button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 46px;

    padding:
        0
        24px;

    border-radius: 24px;

    background: #155293;

    color: #ffffff !important;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    text-decoration: none !important;

    border: 0 !important;

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



.document-universal-primary-file__button:hover {

    background: #003f78;

    transform: translateY(-1px);
}





.document-universal-primary-file__button--download {
    background: #ffffff;
    color: #155293 !important;
    border: 1px solid rgba(21, 82, 147, .30) !important;
}

.document-universal-primary-file__button--download:hover {
    background: #f2f6fa;
    color: #003f78 !important;
}
/* ==========================================================================
   ARTICLE TEXT
   ========================================================================== */

.document-universal-card__text {

    max-width: 1080px;

    color: #273541;

    font-size: 17px;

    line-height: 1.65;
}



.document-universal-card__text > :first-child {

    margin-top: 0 !important;
}



.document-universal-card__text > :last-child {

    margin-bottom: 0 !important;
}



.document-universal-card__text p {

    margin:
        0
        0
        20px;
}



.document-universal-card__text h2,
.document-universal-card__text h3,
.document-universal-card__text h4 {

    margin:
        34px
        0
        16px;

    color: #155293;

    line-height: 1.25;

    font-weight: 700;
}



.document-universal-card__text h2 {
    font-size: 28px;
}


.document-universal-card__text h3 {
    font-size: 23px;
}


.document-universal-card__text h4 {
    font-size: 20px;
}



.document-universal-card__text a {

    color: #155293;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(21, 82, 147, .35);
}



.document-universal-card__text img {

    max-width: 100%;

    height: auto;
}



/* ==========================================================================
   MULTITV CONTAINER
   ========================================================================== */

.document-universal-extra {

    margin-top: 34px;
}



.document-universal-extra:empty {

    display: none;
}



.document-universal-extra img {

    max-width: 100%;

    height: auto;
}



.document-universal-extra a {

    color: #155293;
}



/* убираем старые разделители */

.document-universal-extra hr,
.document-universal-extra .clear {

    display: none !important;
}



/* ==========================================================================
   FILES2
   ========================================================================== */

.document-attachments {

    margin-top: 8px;
}



.document-attachments__title {

    margin:
        0
        0
        22px !important;

    color: #155293 !important;

    font-size: 26px !important;

    line-height: 1.25 !important;

    font-weight: 700 !important;
}



.document-attachments__grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;
}



/* ==========================================================================
   FILE CARD
   ========================================================================== */

.document-attachment {

    display: grid;

    grid-template-columns:
        165px
        minmax(0, 1fr);

    min-height: 235px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(21, 82, 147, .09);

    border-radius: 24px;

    box-shadow:
        0 8px 26px
        rgba(25, 54, 90, .06);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}



.document-attachment:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(25, 54, 90, .10);
}



/* ==========================================================================
   FILE COVER
   ========================================================================== */

.document-attachment__visual {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 235px;

    padding: 18px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.85),
            transparent 45%
        ),

        linear-gradient(
            145deg,
            #e3eaf3,
            #f5f7fa
        );

    text-decoration: none !important;

    border: 0 !important;
}



.document-attachment__image {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 200px;

    object-fit: contain;

    background: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(25, 54, 90, .13);
}



/* placeholder */

.document-attachment__placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 90px;

    height: 118px;

    border-radius: 8px;

    background: #ffffff;

    color: #9aabc0;

    font-size: 40px;

    box-shadow:
        0 8px 20px
        rgba(25, 54, 90, .10);
}



/* ==========================================================================
   FILE BODY
   ========================================================================== */

.document-attachment__body {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        27px
        27px
        25px;
}



.document-attachment__format {

    margin-bottom: 11px;

    color: #91a2b6;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}



.document-attachment__description {

    color: #155293;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 700;
}



/* ==========================================================================
   FILE BUTTON
   ========================================================================== */

.document-attachment__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 22px;
}

.document-attachment__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    margin: 0;
    padding: 0;
    color: #155293 !important;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none !important;
    border: 0 !important;
}

.document-attachment__button--download {
    color: #65788c !important;
}

.document-attachment__button i {
    transition: transform .2s ease;
}

.document-attachment__button:hover {
    color: #003f78 !important;
}

.document-attachment__button:hover i {
    transform: translate(2px, -2px);
}

/* ==========================================================================
   OLD MULTITV OVERRIDES
   ========================================================================== */

.document-universal-extra .about-auther,
.document-universal-extra .date-text {

    float: none !important;

    width: auto !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;
}



/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991px) {

    .document-universal-card {

        padding:
            36px
            34px
            40px;

        border-radius: 24px;
    }


    .document-universal-gallery__grid {

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


    .document-attachments__grid {

        grid-template-columns: 1fr;
    }

}



/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .document-universal-section {

        padding:
            10px
            0
            48px;
    }


    .document-universal-card {

        padding:
            28px
            22px
            32px;

        border-radius: 20px;
    }


    .document-universal-card__title {

        font-size:
            clamp(
                26px,
                7vw,
                32px
            );

        line-height: 1.18;
    }


    .document-universal-card__text {

        font-size: 16px;
    }


    .document-universal-gallery {

        padding: 14px;

        border-radius: 16px;
    }

}



/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .document-attachment {

        grid-template-columns:
            105px
            minmax(0, 1fr);

        min-height: 180px;

        border-radius: 18px;
    }


    .document-attachment__visual {

        min-height: 180px;

        padding: 12px;
    }


    .document-attachment__image {

        max-height: 155px;
    }


    .document-attachment__body {

        padding:
            20px
            17px;
    }


    .document-attachment__description {

        font-size: 16px;
    }


    .document-attachment__button {

        font-size: 13px;
    }

}



@media (max-width: 520px) {

    .document-universal-card {

        padding:
            24px
            18px
            28px;
    }


    .document-universal-card::before {

        width: 4px;
    }


    .document-universal-gallery__grid {

        grid-template-columns: 1fr;
    }


    .document-universal-gallery__item img {

        height: auto;

        max-height: 340px;
    }


    .document-universal-primary-file {
        display: grid;
        grid-template-columns: 1fr;
    }

    .document-universal-primary-file__button {
        width: 100%;
    }

}