/**** NEWS INTRO ****//**** NEWS INTRO ****//**** NEWS INTRO ****/

#news-intro {background-color: var(--color-bg-primary);}
#news-intro .lead {max-width: 62ch;}

/**** NEWS LIST ****//**** NEWS LIST ****//**** NEWS LIST ****/

#news-list {background-color: var(--color-bg-light);}
.news-filters {display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0px 0px var(--space-xl) 0px;}
.news-filter {display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-sm); cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-navy); background-color: var(--color-bg-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);}
.news-filter:hover {color: var(--color-navy-dark); background-color: var(--color-bg-secondary); border-color: var(--color-gold-dark);}
.news-filter.check {color: var(--color-bg-light); background-color: var(--color-navy); border-color: var(--color-navy);}
#news-list .cards {display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr));}
#news-list .card {display: flex; flex-direction: column;}
#news-list .card[hidden] {display: none;}
#news-list .card h2 {font-size: var(--font-size-xl);}
#news-list .card > :last-child {margin-top: auto;}

/**** MEDIA 1350 ****//**** MEDIA 1350 ****//**** MEDIA 1350 ****/

@media (max-width: 1350px) {
    #news-list .cards {grid-template-columns: repeat(2, minmax(0px, 1fr));}
}

/**** MEDIA 750 ****//**** MEDIA 750 ****//**** MEDIA 750 ****/

@media (max-width: 750px) {
    #news-list .cards {grid-template-columns: 1fr;}
}

/**** MEDIA 500 ****//**** MEDIA 500 ****//**** MEDIA 500 ****/

@media (max-width: 500px) {
    .news-filters {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: var(--space-2xs);}
    .news-filter {width: 100%;}
}

/**** MEDIA 350 ****//**** MEDIA 350 ****//**** MEDIA 350 ****/

@media (max-width: 350px) {
    .news-filters {grid-template-columns: 1fr;}
}
