/*** |||| ***/
/*** MAIN ***/
/*** |||| ***/

:root {
    /* slider options */
    --itc-count: 4;
    --itc-gap: 13vh;
}

main {
    grid-area: main;
    z-index: 0;
}

/* first section */
#primary-section {
    position: relative;
    display: grid;
    grid-template: 
        "...    ...    title   ..."
        "...    bear    desc    ..."
        "...    controls    detail  ..."
        /0.5fr  11fr  9fr   0.5fr
    ;
    
    padding-top: 10vh;
    min-height: 75vh;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--primary-color);
}

#primary-darker {
    background-color: rgba(0, 0, 0, var(--general-page-primary-darken));
    z-index: -1;
}

#primary-backgrounds {
    z-index: -2;
    transform: translate3d(0, 0, 0);
}

.primary-background {
    object-fit: cover;
    transform: translate3d(0, 0, 0);
}

/* slider controls */
#primary-conrols{
    grid-area: controls;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#primary-conrols input {
    cursor: pointer;
    width: 12px;
    height: 12px;

    accent-color: #232323;

    border: solid 2px white;
    border-radius: 999px;
    transition-duration: .4s;
    /*box-shadow: 0 0 20px 0 #000;*/
}

#primary-conrols input:focus{
    outline: none;
}


#primary-conrols input:checked{
    background-color: white;
    color: white;
}

#primary-conrols input:checked::after{
    background-color: white;
}

#primary-conrols input:focus{
    /*box-shadow: 0 0 0 2px teal, 0 0 18px white;*/
  }

/* bear on mainspace image */
#primary-bear {
    display: grid;
    grid-area: bear;

    align-self: center;
    justify-items: center;

    background-position: center;
}

#primary-bear object {
    width: 45%; /*90*/
    
}


#primary-title {
    grid-area: title;

    align-self: self-end;
}

#primary-title p {
    /* О нас */
    align-items: end;
    margin-bottom: 0.5em;
    transition: all 200ms ease-out;
}

#primary-title a {
    color: var(--primary-color);
    
}

#primary-title :hover {
    transform: scale(1.01);
}

#primary-desc {
    grid-area: desc;
    /* Основной целью деятельности Центра является проведение комплексных фундаментальных, поисковых и прикладных научных исследований, направленных на создание конкурентоспособных научно-технологических основ обеспечения государственных интересов, сбалансированного социально-экономического развития и повышения качества жизни населения, сохранения окружающей природной среды, биологического и генетического разнообразия в Арктической зоне Российской Федерации. */
}

#primary-desc p {
    font-size: 14pt;
    line-height: 36px;
}

#primary-detail {
    grid-area: detail;
   
}

#primary-detail button{
}

.primary-detail__main{
    display: flex;
    align-items: start;
}

/* second section */
#secondary-section {
    position: relative;
    display: grid;
    grid-template: 
        "...    tabs    news    ..."
        "...    panels  panels  ..."
        /0.5fr  15fr    5fr   0.5fr;

    padding-top: 3.5em;
    padding-bottom: 3.5em;
    background-color: #fff;
}

#secondary-section > div:not(.tab-panels) {
    border-bottom: 1px solid var(--primary-color-invariant)
}

.tabs {
    grid-area: tabs;
    display: flex;
    flex-direction: row;
    align-items: start;
}

#news-btn {
    grid-area: news;
    display: flex;
    justify-content: flex-end;
}

#news-btn button {
    position: relative;
    bottom: -1px;
    margin: 0;
}

.panels {
    grid-area: panels;
}

.tab-radio {
    display: none;
}

.tab-label {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--primary-color);
    color: var(--primary-color-variant);
    border-radius: 3px 3px 0px 0px;

    font-size: 32px;
    line-height: 47px;
}

.tab-label p {
    border-bottom: 8px solid var(--primary-color-invariant);
    width: 283px;
}

.tab-panels {
    grid-area: panels;
    overflow: hidden;
    border-radius: 3px;
}

.tab-panel {
    display: none;
}

#tab-radio-one:checked ~ .tabs #tab-label-one,
#tab-radio-two:checked ~ .tabs #tab-label-two {
    color: var(--secondary-color);
}

#tab-radio-one:checked ~ .tabs #tab-label-one p,
#tab-radio-two:checked ~ .tabs #tab-label-two p {
    border-bottom: 8px solid var(--secondary-color);
    width: 283px;
}

#tab-radio-one:checked ~ .tab-panels #tab-panel-one,
#tab-radio-two:checked ~ .tab-panels #tab-panel-two {
    display: block;
}

.blocker-grid {
    display: grid;
    margin-top: 3vh;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1vw;
}

.blocker-grid .block-item {
    text-decoration: none;
    color: #000000;
    width: 100%;
}

.blocker-grid .block-item:visited{
    color: #000000;
}

.blocker-grid .msg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 15vw;

    /* grid-row: 1 / 2; */
}

.blocker-grid .msg-title {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 13pt;
    line-height: 20px;
    margin-top: 1em;
    margin-bottom: 1.7em;

    /* grid-row: 2 / 3; */
}

.divisions-title{
    color: white;
}

.blocker-grid .msg-date {
    font-family: 'Sen';
    font-style: normal;
    font-weight: 400;
    font-size: 14pt;
    line-height: 25px;
    color: var(--primary-color-invariant);
    
    /* grid-row: 3 / 4; */
}

.basic-news__div{
    background-color: #fff;
    padding: 3vh 3vw;
}

.articles-list{
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-template-rows: auto;
    grid-column-gap: 2% ;
}

.article_basic{

    grid-template-rows: 45vh auto auto
    ;
}

#about-us__section{
    display: none;
}

/* third section */
#third-section {
    display: grid;
    grid-template:
        "...    d-header      ..." 
        "...    divisions   ..."        
        /0.5fr  20fr        0.5fr
    ; 

    padding-top: 12vh;
    min-height: 76vh;
    padding-bottom: 12vh;

    background-image: url(../images/index/thirdspace.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--primary-color)
}

#divisions-grid .block-item {
    display: block;
}

#divisions-grid .block-item .msg-image, #divisions-grid .block-item .msg-title {
    cursor: pointer;
}

#divisions-header {
    grid-area: d-header;
}

#divisions-grid {
    grid-area: divisions;
}

/* fourth section */
#fourth-section {
    display: grid;
    grid-template:
        "... title-sl ..."
        "slider slider  slider"
        "... title-fl ..."
        "...    filial  ..."  
        /0.5fr  20fr    0.5fr
    ;
}

.title-fourth-section{
    font-size: 2em;
    font-weight: bold;
}

.title-filial{
    grid-area: title-fl;
}

#filial-grid {
    grid-area: filial;
    column-gap: 3vh;
    row-gap: 15vh;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 3.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#filial-grid .block-item {
    display: block;
    width: 15vw;
    margin: 0 3vw;
}

#filial-grid .block-item .msg-image {
    background-size: contain;
}

.title-slider{
    grid-area: title-sl;
    margin-top: 2em;

}

.itc-slider {
    grid-area: slider;
    display: grid;
    grid-template:
        "left   body    right"
        /0.5fr  20fr    0.5fr    
    ;
    position: relative;
    
    margin-top: 1em;
    margin-bottom: 3em;
}

.itc-slider-btn {
    display: grid;
    padding: 0;
    margin: 0;
    align-content: center;
    justify-content: center;
  
    background: transparent;
    border: none;
    cursor: pointer;
  }

.itc-slider-btn-prev {
    grid-area: left;
}
  
.itc-slider-btn-next {
    grid-area: right;
}

.itc-slider-btn-hide {
    display: none;
}
  
.itc-slider-btn:hover {
    color: #fff;
    text-decoration: none;
    background: rgb(0 0 0 / 20%);
    outline: 0;
}
  

.itc-slider-wrapper {
    grid-area: body;
    overflow: hidden;
}

.itc-slider-item {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 20vh;
    /* border: 1px solid black; */
}

/*** ||||| ***/
/*** MEDIA ***/
/*** ||||| ***/
@media(max-width: 1500px) {
    :root {
        /* slider options */
        --itc-count: 2;
        --itc-gap: 13vh;
    }

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

    .blocker-grid .block-item {
        display: grid;
    }

    .blocker-grid .msg-image {
        height: 25vw;
    }
}   

@media(max-width: 900px) {
    #secondary-section #news-btn button {
        display: none;
    }

}


@media(max-width: 700px) {
    :root {
        /* slider options */
        --itc-count: 1;
        --itc-gap: 13vh;
    }
    .main-div{    
        margin: 3vh 5vw;
    }
    
    #primary-section {
        margin-top: auto;
        grid-template:
        "...    bear    ..."
        "...    title   ..."
        "...    desc    ..."
        "...    detail  ..."
        /1fr    20fr    1fr;
        /*padding-top: 15vh;*/
        padding-top: 20vh;
        min-height: 85vh;
    }

    #primary-conrols{
        display: none;
    }

    #primary-detail button{
        border-radius: 40px;
        margin: 50px auto;
    }

    #primary-bear {
        grid-row:unset;
        margin-left: auto;
        text-align: center;
    }

    #primary-bear object {
        align-self: left;
    }

    #secondary-section {
        grid-template: 
            "...    tabs    ..."
            "...    panels  ..."
            /0.5fr    20fr  0.5fr;
    }

    #tab-label-two {
        display: none;
    }
    /* -------------------------------------------------- */
    /* START Новости */

    .blocker-grid .msg-title, .blocker-grid .msg-date {
        font-size: 1.4em;
        letter-spacing: 1px;
        margin-left: 10px;
        line-height: 1.8em;
        margin-bottom: 50px;
    }

    /* END Новости */
    /* ---------------------------------------------------- */

    /* ---------------------------------------------------- */
    /* START Научные подразделения */

    #divisions-grid .block-item .msg-title{
        font-size: 1.4em;
        font-weight: bold;
        letter-spacing: 1px;
        margin-left: 10px;
        line-height: 1.8em;
    }

    /* END Научные подразделения */
    /* -------------------------------------------------- */

    .title-fourth-section{
        margin-left: 3vw;
    }

    .blocker-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .blocker-grid .msg-image {
        height: 35vmax;
    }

    .msg-image{
        border-radius: 15px;
    }

    .msg-date{
        margin-bottom: 20px;
    }

    .title-filial{
        display: none;
    }
    
    #filial-grid{
        display: none;
    }
}