:root {
    --bg-img:none;
    --article-h2:45px;
}
@media (min-width:1024px) {
    :root {
        --article-h2:55px;
    }
}
.author-posts {
    width:100%;
    margin:0;
}
.date-author {
    font-size: inherit;
    color: var(--neutral-subtext-on-white);
    display:flex;
    align-items: center;
}
.date-author a {
    color:inherit;
    text-decoration: none;
}
.date-author a:hover {
    border-bottom:0;
}
.author-information {
  display: flex;
  flex-direction: column;
}
.article-section {
    text-align: center;
    padding-bottom:20px;
}

.articles-grid,
.articles-grid-author,
.articles-grid-related,
.articles-grid-cat,
.articles-grid-alt {
    padding-top:26px;
    padding-bottom:26px;
    gap:24px;    
}
.articles-grid-related,
.articles-grid {
    display: flex;
    flex-wrap: nowrap;              /* prevent wrapping */
    overflow-x: auto;               /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    scroll-snap-type: x mandatory;  /* snap scrolling */
    justify-content: flex-start;    /* align items to the left */
}
/* Hide scrollbar across browsers */
.articles-grid-related::-webkit-scrollbar,
.articles-grid::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.articles-grid,
.articles-grid-related {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;     /* Firefox */
}
.article-section h2 {
    color:var(--primary-main-red);
    font-size:var(--article-h2);
}
.article-section .see-more {
    border:0;
    background: var(--primary-main-red);
    font-family:var(--font-bluescreen-bold);
    color:white;
    font-size:24px;
    padding-left:24px;
    padding-right:24px;
    line-height:42px;
    border-radius: 10px;
    cursor: pointer;
}

.article-card {

    border-radius: 10px;
    background: linear-gradient(0deg, rgba(34, 66, 135, 0.90) 0%, rgba(34, 66, 135, 0.90) 100%), var(--bg-img) lightgray 50% / cover no-repeat;
    color: white;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 357px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;    
    scroll-snap-align: start;       /* snap each card to start */
    width: auto;                    /* override fixed 32% width */
    padding: 30px 20px;             /* lighter padding for mobile */
    /* below address CLS */
    content-visibility: auto;
    aspect-ratio: 3 / 4;
    flex: 0 0 clamp(250px, 80vw, 350px);
}
.article-card-alt.hidden,
.article-card.hidden {
  display: none;
}
.article-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    transform: translateY(-3px);
}
span.article-category {
    color: var(--primary-main-red);
    font-family: var(--font-fjalla-one);
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0.6px;
    border-radius: 5px;
    text-transform: uppercase;
    background: var(--neutral-background);
    padding: 0 24px;
    padding-top:5px;
}
.article-card  a, 
.article-card-author a, 
.article-card-cat a, 
.article-card-alt  a {
    text-decoration: none;
    color:inherit;
}
.article-card  a h3,
.article-card  a {
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content: center;
}
h3.article-title {
    color: var(--neutral-background);
    text-align: center;
    font-size:28px;
}
p.article-meta {
    color: var(--neutral-background);
    text-align: center;
    margin-bottom: 0;
}
.articles-grid-author,
.articles-grid-cat,
.articles-grid-alt {
    display:grid;
    gap:20px;
}
.article-card-alt:first-child {
    grid-row: span 2;
    grid-column: span 1;
    justify-content: flex-start;
}

.article-card-author,
.article-card-cat,
.article-card-alt {
    text-align: left;
    text-decoration: none;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    font-family:var(--font-fjalla-one);
}
.article-card-author img:not(.avatar),
.article-card-cat img:not(.avatar),
.article-card-alt img:not(.avatar) {
    aspect-ratio: 1000/563;
    width:100%;
    height:auto;
    border-radius: 10px;
    vertical-align: bottom;
    margin-bottom:10px;
}
.article-card-author .date-author,
.article-card-cat .date-author {
    display:flex;
    align-items: end;
}
.article-card-author .date-author,
.article-card-cat .date-author,
.article-card-alt .date-author {
    margin-bottom:15px;
    color:var(--neutral-sub-text-on-white);

}
.article-card-author .article-category,
.article-card-cat .article-category,
.article-card-alt .article-category {
    background-color:var(--category-color-alt);
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    display:table;
    width:fit-content;
}

.article-card-author .article-title,
.article-card-cat .article-title, 
.article-card-alt .article-title {
    color:var(--text-foreground-secondary);
    text-align: left;
    padding-top:15px;
    padding-bottom:15px;
}
.article-card-author .article-meta,
.article-card-cat .article-meta,
.article-card-alt .article-meta {
    color:var(--meta-color-alt);
    text-align: left;
    font-family: Fjalla One,sans-serif;
}
.article-card-author .read-more,
.article-card-cat .read-more, 
.article-card-alt .read-more {
    color:white;
    background:var(--primary-main-red);
    padding-left:20px;
    padding-right:20px;
    font-size:24px;
    line-height:42px;
    font-family:var(--font-bluescreen);
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    width:fit-content;
    align-items:end;
    gap:8px;
}
.article-card-author .read-more img,
.article-card-cat .read-more img,
.article-card-alt .read-more img {
    object-fit: contain;
    aspect-ratio: 12/24;
    height:24px;
    width:auto;
    vertical-align: middle;
}

.article-card-cat .article-footer,
.article-card-alt .article-footer {
    display:flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top:30px;
}
.article-footer .read-more {
    font-family:var(--font-fjalla-one);
    font-size:16px;
}

@media (min-width:1024px) {
    .article-section .see-more {
        font-size:30px;
        line-height:51px;
    }
    .articles-grid,
    .articles-grid-author,
    .articles-grid-cat,
    .articles-grid-alt {
        padding-top:40px;
        padding-bottom:40px;
    }
    .articles-grid {
        justify-content: center;
        flex-wrap: wrap;
    }
    .article-card {
        width: 32%;        
        height: 531px;
        padding: 55px 70px;    
        flex:none;
    }
    .article-section {
        padding-bottom:87px;
    }
    .articles-grid-cat {
        grid-template-columns: repeat(2, 1fr);
    }
    .articles-grid-author,
    .articles-grid-alt {
        grid-template-columns: repeat(3, 1fr);
    }    
}
@media (min-width:1200px) {
    .articles-grid-cat {
        gap:34px;
    }
}