@import url(../../variables/colorVariables.css);
@import url(../../variables/variables.css);

:root{

}



#article-topic-list-container{
    height: auto;
    width: 62%;
    padding: var(--pages-main-padding);
}

#article-topic-list{
    height: 100%;
    box-shadow: var(--default-shadow);
    border-radius: var(--default-border-radius);
    border: 1px solid var(--default-border-color);
}



.small-articles-container {
    padding: var(--pages-main-padding);
    margin-top: var(--default-margin-top) ;
    width: 100%;
    height: calc(100% - var(--leading-article-height) - 2.5%);
}

.small-article {
    overflow: hidden;
    box-shadow: var(--default-shadow);
    border-radius: var(--small-articles-radius);
    width: 100%;
    height: 250px;
    padding: 10px;
}

.small-article:not(:first-child) {
    margin-top: 30px;
}
.small-article .image-container {
    border-radius: var(--default-border-radius);
    width: 40%;
    height: 100%;
}

.small-article .title-writing-container{
    width: 60%;
    height: 100%;
}

.small-article .title-writing-container .title-container {
    padding: var(--default-text-padding);
    font-size: 30px;
    height: 30%;
    width: 100%;
}

.small-article .title-writing-container .title-container div {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


.small-article .title-writing-container .writing-container {
    padding: var(--default-text-padding);
    height: 55%;
    width: 100%;
}

.small-article .title-writing-container .writing-container div {
    font-size: 22px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}


.small-article .title-writing-container .writing-container div *{
    padding: 0;
    margin: 0;
}

.small-article .title-writing-container .others-container {
    height: 15%;
    width: 100%;
}

.small-article .title-writing-container .others-container .more-button,
.small-article .title-writing-container .others-container .video-more-button,
.small-article .title-writing-container .others-container .audio-more-button,
.small-article .title-writing-container .others-container .pdf-more-button{
    margin: var(--default-text-padding);
    box-shadow: var(--default-shadow);
    border-radius: var(--full-radius);
    color: var(--site-tertiary);
    cursor: pointer;
    text-decoration: none;
    font-size: 25px;

}

.small-article .title-writing-container .others-container .more-button{
    background-color: var(--read-more-color);
}
.small-article .title-writing-container .others-container .video-more-button{
    background-color: var(--video-color);
}
.small-article .title-writing-container .others-container .audio-more-button{
    background-color: var(--audio-color);
}
.small-article .title-writing-container .others-container .pdf-more-button{
    background-color: var(--pdf-color);
}


.small-article .title-writing-container .others-container .small-article-history {
    padding: 0 5px;
    color: var(--default-history-color);
    font-size: 20px;
}


.small-article .title-writing-container .others-container .small-article-history .article-history {
    padding: 0 5px;
    line-height: 1.72;
}

.pagination-container{
    padding: 5px;
    height: 90px;
}

.pagination{
    width: 325px;
    height: 50px;
    margin-bottom: 10px;
    /*margin: var(--default-text-padding);*/
    box-shadow: var(--default-shadow);
    border-radius: var(--full-radius);
    border: 1px solid var(--default-border-color);
    overflow: hidden;

}

.pagination-button-next, .pagination-button-previous {
    height: 100%;
    width: 30%;
    font-size: 28px;
    cursor: pointer;
    user-select: none;
}
.pagination-button-next:hover, .pagination-button-previous:hover {
    background-color: #f1f1f1;
}

.pagination-button-next:active, .pagination-button-previous:active {
    background-color: #d9d9d9;
}


.pagination-button-next{
    border-left: 1px solid var(--default-border-color);
}

.pagination-button-previous{
    border-right: 1px solid var(--default-border-color);
}

.numbers-container{
    font-size: 30px;
    padding: 0 10px ;
}


/*#follow-header-space {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: flex-start;*/
/*}*/



@media screen and (min-width: 600px) and (max-width: 1100px) {

    #article-topic-list-container{
        width: 100%;
    }

}


@media screen and (min-width: 0px) and (max-width: 600px) {

    #article-topic-list-container{
        width: 100%;
        padding: 5px 10px;
    }
    /*.small-article {*/

    /*}*/


    .small-article .title-writing-container .title-container div {

        -webkit-line-clamp: 2;
    }


    .small-article .title-writing-container .writing-container div {

        -webkit-line-clamp: 3;
        padding-top: 15px;

    }

    .small-articles-container {
        padding: 15px 10px;
    }

    .pagination{
        width: 300px;
    }
    #article-topic-list-container{
        padding: 8px 10px ;
    }

    .small-article{
        height: 460px;
        flex-direction: row !important;
    }
    .small-article .image-container {
        border-radius: var(--default-border-radius);
        width: 100%;
        height: 50%;
    }

    .small-article .title-writing-container{
        width: 100%;
        height: 50%;
    }

}