/* Style settings for blog articles section */
.blog-articles {
    padding-top: 60px;       
    margin-bottom: 200px;  
}

/* Style settings for blog title */
.blog-articles__title {
    text-transform: uppercase;  
    font-size: 26px;            
    text-align: left;          
    margin-bottom: 30px;     
}

/* Organize the list of blog posts (grid system) */
.blog-articles__list {
    display: grid;                    
    gap: 30px;                         
    grid-template-columns: repeat(4, 1fr); /* Create a 4-column grid structure */
    position: relative;                 /* Make it relative to determine positioning */
    
}

/* If there are no posts, style settings for the "No posts found" message */
.blog-articles .no-posts {
    font-weight: 400;    
    position: absolute;  
}



/* Style settings for elements that list blog posts */
.blog-articles__item {
    margin: 0 auto;   /*Automatic horizontal centering */
}



/* Style settings for links to blog posts */
.blog-articles__item a {
    width: 275px; 
}

/* Style settings for images in blog posts */
.blog-articles__item img {
    width: 275px;         
    height: 275px;        
    object-fit: cover;    /* Set image to cover without cropping */
    border-radius: 10px;
}


.blog-articles__item header {
    margin-top: 12px;
    font-weight: 400;   
    font-size: 17px;     
}



/* blog date - blog description - read more*/

.post-meta {
    font-size: 10px;
    color: var(--t-foreground-secondary-rgb);
    font-family: 'Be Vietnam Pro';
    font-weight: 400;
}

.post-excerpt {
    font-size: 12px;
    color: var(--t-foreground-primary-rgb);
    margin-top: 10px;
    font-family: 'Be Vietnam Pro';
    font-weight: 400;
}
.read-more {
    display: inline-block;
    width: 95px;
    max-width: 95px;
    padding: 5px 5px;
    text-align: center;
    background: var(--primary-500-rgb);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 12px;
    font-family: 'Be Vietnam Pro';
    font-weight: 400;
}


.read-more:hover {
    background: rgba(var(--primary-500-csv), 0.9);
}


/* Responsive Design - For screens 1200px and smaller */
@media (max-width: 1200px) {
    .blog-articles__list {
        grid-template-columns: repeat(3, 1fr); /* Reduce the grid structure to 3 columns */
    }
    
    .blog-articles__title{
        margin-left: 40px;
    }
       .blog-articles__item{
        margin-bottom: 30px;
    }
}

/* Responsive Design - For screens 992px and smaller */
@media (max-width: 992px) {
    .blog-articles__list {
        grid-template-columns: repeat(2, 1fr); /* Reduce the grid structure to 2 columns */
        gap: 20px; 
    }
     .blog-articles__title{
        margin-left: 80px;
    }
       .blog-articles__item{
        margin-bottom: 30px;
    }
   
}

/* Responsive Design - For screens 729px and smaller */
@media (max-width: 729px) {
    .blog-articles__list {
        grid-template-columns: repeat(1, 1fr); /* Reducing the grid structure to a single column */
    }
         .blog-articles__title{
        margin-left: 170px;
    }
    .blog-articles__item{
        margin-bottom: 30px;
    }
}




.news-filters {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.news-filters .news-filter-btn {
    padding: 8px 12px;
    border: 1px solid var(--t-accent-light-rgb);
    border-radius: 8px;
    margin-right: 5px;
    text-decoration: none;
    color: var(--t-foreground-primary-rgb);
    transition: background-color 0.3s, color 0.3s;
}

.news-filters .news-filter-btn:hover {
    background-color: var(--primary-500-rgb);
    color: #fff;
}

.news-filters .news-filter-btn.active {
    background-color: var(--primary-500-rgb);
    color: #fff;
}

.pagination-nav .page-numbers {
    display: inline-block;
    margin: 0 2px;
    padding: 5px 12px 5px;
    border: 1px solid var(--t-accent-light-rgb);
    color: var(--t-foreground-primary-rgb);
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Be Vietnam Pro';
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.3s, color 0.3s;
    max-width: 35px;
    width: 35px;
}

.pagination-nav .page-numbers:hover {
    background-color: var(--primary-500-rgb);
    color: #fff;
}


.pagination-nav .page-numbers.prev,
.pagination-nav .page-numbers.next {
    border: 1px solid var(--t-accent-light-rgb);
    color: var(--t-foreground-primary-rgb);
    transition: background-color 0.3s, color 0.3s;
    max-width: 80px;
    width: 80px;
}

.pagination-nav .page-numbers.prev:hover,
.pagination-nav .page-numbers.next:hover {
    background-color: var(--primary-500-rgb);
    color: #fff;
}

.pagination-nav .page-numbers.current {
    background-color: var(--primary-500-rgb);
    color: #fff;
}

.pagination-nav .page-numbers.prev.current,
.pagination-nav .page-numbers.next.current
{
    background-color: var(--primary-500-rgb);
    color: #fff;
}

@media screen and (max-width: 480px) {
    .pagination-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .pagination-nav .page-numbers {
        font-size: 12px;
        padding: 4px 8px;
        width: auto;
        min-width: 30px;
    }

    .pagination-nav .page-numbers.prev,
    .pagination-nav .page-numbers.next {
        font-size: 12px;
        padding: 4px 10px;
        width: auto;
        min-width: 50px;
    }
}