.news-stats{

  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);

  padding: 36px 0;

  position: relative; overflow: hidden;

}

.news-stats::before{

  content:''; position: absolute; inset: 0;

  background: radial-gradient(circle at 80% 50%, rgba(245,158,11,.18), transparent 50%);

}

.news-stats__grid{

  position: relative;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 24px;

}

.news-stat{

  display: flex; align-items: center; gap: 16px;

  color: #fff;

}

.news-stat i{

  width: 52px; height: 52px;

  display: flex; align-items: center; justify-content: center;

  background: rgba(245,158,11,.2);

  color: var(--c-accent);

  border-radius: 14px;

  font-size: 1.2rem;

  flex-shrink: 0;

}

.news-stat strong{

  display: block;

  font-family: var(--ff-display);

  font-size: 1.8rem; font-weight: 800;

  line-height: 1; color: #fff;

}

.news-stat span{

  display: block;

  font-size: .82rem; color: rgba(255,255,255,.75);

  text-transform: uppercase; letter-spacing: .06em;

  margin-top: 4px;

}


/* ----- News controls (filter + search) ----- */

.news-controls{

  background: #fff;

  border-bottom: 1px solid var(--c-border);

  padding: 24px 0;

  position: sticky;

  top: 110px; /* below the sticky header */

  z-index: 10;

  box-shadow: var(--shadow-sm);

}

.news-controls__inner{

  display: flex; gap: 20px; align-items: center;

  flex-wrap: wrap; justify-content: space-between;

}

.news-filter{ display: flex; gap: 8px; flex-wrap: wrap; }

.news-filter__btn{

  display: inline-flex; align-items: center; gap: 8px;

  background: var(--c-bg-soft);

  color: var(--c-text-soft);

  border: 1px solid var(--c-border);

  padding: 10px 18px; border-radius: 999px;

  font-size: .88rem; font-weight: 600;

  cursor: pointer;

  transition: all .25s var(--tr);

  font-family: var(--ff-body);

}

.news-filter__btn i{ color: var(--c-accent); }

.news-filter__count{

  background: #fff;

  color: var(--c-text-soft);

  padding: 2px 8px; border-radius: 999px;

  font-size: .72rem; font-weight: 700;

  border: 1px solid var(--c-border);

}

.news-filter__btn:hover{

  border-color: var(--c-accent);

  color: var(--c-primary-dark);

  transform: translateY(-2px);

}

.news-filter__btn.is-active{

  background: var(--c-primary);

  color: #fff;

  border-color: var(--c-primary);

  box-shadow: 0 8px 20px rgba(30,58,138,.25);

}

.news-filter__btn.is-active i{ color: var(--c-accent); }

.news-filter__btn.is-active .news-filter__count{

  background: rgba(255,255,255,.2);

  color: #fff;

  border-color: transparent;

}

.news-search{

  position: relative;

  flex: 1; max-width: 380px;

  min-width: 240px;

}

.news-search i{

  position: absolute; top: 50%; left: 16px;

  transform: translateY(-50%);

  color: var(--c-muted); font-size: .9rem;

}

.news-search input{

  width: 100%;

  padding: 11px 18px 11px 42px;

  font-family: var(--ff-body);

  font-size: .9rem;

  color: var(--c-text);

  background: var(--c-bg-soft);

  border: 1px solid var(--c-border);

  border-radius: 999px;

  transition: all .2s var(--tr);

}

.news-search input:focus{

  outline: none;

  background: #fff;

  border-color: var(--c-accent);

  box-shadow: 0 0 0 4px rgba(245,158,11,.12);

}

.news-search input::placeholder{ color: var(--c-muted); }


@media (max-width: 768px){

  .news-controls{ top: 76px; }

  .news-controls__inner{ flex-direction: column; align-items: stretch; }

  .news-search{ max-width: none; }

}


/* ----- Info banner (DB warning) ----- */

.news-info{

  display: flex; align-items: center; gap: 12px;

  background: rgba(245,158,11,.1);

  border: 1px solid rgba(245,158,11,.3);

  border-left: 4px solid var(--c-accent);

  color: #92400e;

  padding: 14px 20px;

  border-radius: var(--radius-sm);

  font-size: .9rem;

  margin-bottom: 32px;

}

.news-info i{ color: var(--c-accent); font-size: 1.1rem; }


/* ----- News grid ----- */

.news-grid{

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 24px;

}

.news-card{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius);

  overflow: hidden;

  transition: all .3s var(--tr);

  display: flex; flex-direction: column;

}

.news-card:hover{

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: transparent;

}

.news-card__media{

  position: relative;

  aspect-ratio: 4/3;

  background: var(--c-bg-alt);

  overflow: hidden;

}

.news-card__media img{

  width: 100%; height: 100%;

  object-fit: cover; object-position: top;

  transition: transform .5s var(--tr);

}

.news-card:hover .news-card__media img{ transform: scale(1.06); }

.news-card__media--fallback{

  background:

    linear-gradient(135deg, rgba(30,58,138,.15), rgba(245,158,11,.15)),

    var(--c-bg-alt);

  display: flex; align-items: center; justify-content: center;

}

.news-card__media--fallback::after{

  content: '\f03e'; /* fa-image */

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  font-size: 3rem;

  color: var(--c-muted);

  opacity: .4;

}

.news-card__placeholder{

  position: absolute; inset: 0;

  display: flex; align-items: center; justify-content: center;

  background: var(--c-bg-alt);

  color: var(--c-muted);

  font-size: 3rem;

}


.news-card__date{

  position: absolute; top: 14px; left: 14px;

  display: inline-flex; align-items: center; gap: 6px;

  background: rgba(10, 18, 48, .85);

  color: #fff;

  font-size: .72rem; font-weight: 600;

  padding: 6px 12px; border-radius: 999px;

  backdrop-filter: blur(4px);

  z-index: 2;

}

.news-card__date i{ color: var(--c-accent); font-size: .8em; }

.news-card__tag{

  position: absolute; top: 14px; right: 14px;

  background: var(--c-primary); color: #fff;

  font-size: .68rem; font-weight: 700;

  letter-spacing: .08em; text-transform: uppercase;

  padding: 4px 12px; border-radius: 999px;

  z-index: 2;

}

.news-card__tag--event{ background: var(--c-accent); color: #1f1300; }


.news-card__overlay{

  position: absolute; inset: 0;

  background: linear-gradient(180deg, transparent 40%, rgba(10,18,48,.75) 100%);

  display: flex; align-items: flex-end; justify-content: flex-end;

  padding: 16px;

  gap: 8px;

  opacity: 0;

  transition: opacity .25s var(--tr);

}

.news-card:hover .news-card__overlay{ opacity: 1; }

.news-card__btn{

  width: 40px; height: 40px;

  display: flex; align-items: center; justify-content: center;

  background: rgba(255,255,255,.95);

  color: var(--c-primary);

  border: 0; border-radius: 50%;

  cursor: pointer; font-size: .9rem;

  box-shadow: var(--shadow);

  transition: all .2s var(--tr);

  text-decoration: none;

}

.news-card__btn:hover{

  background: var(--c-accent);

  color: #1f1300;

  transform: scale(1.1);

}


.news-card__body{

  padding: 20px 22px 24px;

  flex: 1; display: flex; flex-direction: column;

}

.news-card__meta{

  display: flex; flex-wrap: wrap; gap: 14px;

  font-size: .8rem; color: var(--c-muted);

  margin-bottom: 10px;

}

.news-card__meta i{ color: var(--c-accent); margin-right: 4px; }

.news-card__body h3{

  font-family: var(--ff-display);

  font-size: 1.08rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 8px; line-height: 1.35;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.news-card__body p{

  color: var(--c-text-soft);

  font-size: .88rem; line-height: 1.55;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.news-card--dynamic .news-card__body h3{

  -webkit-line-clamp: 3;

}


/* ----- Empty state ----- */

.news-empty{

  text-align: center;

  padding: 80px 20px;

  color: var(--c-text-soft);

}

.news-empty i{

  font-size: 3.5rem;

  color: var(--c-muted);

  margin-bottom: 16px;

  display: block;

  opacity: .6;

}

.news-empty h3{

  font-family: var(--ff-display);

  font-size: 1.3rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 6px;

}

.news-empty p{ font-size: .92rem; }


/* ----- Pagination ----- */

.news-pagination{

  display: flex; justify-content: space-between; align-items: center;

  flex-wrap: wrap; gap: 16px;

  margin-top: 48px;

  padding-top: 32px;

  border-top: 1px solid var(--c-border);

}

.news-pagination__info{

  font-size: .9rem; color: var(--c-text-soft);

}

.news-pagination__info strong{ color: var(--c-primary-dark); }

.news-pagination__nav{

  display: flex; gap: 6px;

  align-items: center;

}

.news-pagination__link{

  min-width: 40px; height: 40px;

  display: inline-flex; align-items: center; justify-content: center;

  background: #fff;

  color: var(--c-text);

  border: 1px solid var(--c-border);

  border-radius: 10px;

  font-size: .88rem; font-weight: 600;

  padding: 0 12px;

  transition: all .2s var(--tr);

  text-decoration: none;

}

.news-pagination__link:hover{

  background: var(--c-bg-soft);

  border-color: var(--c-accent);

  color: var(--c-primary-dark);

  transform: translateY(-2px);

}

.news-pagination__link.is-current{

  background: var(--c-primary);

  color: #fff;

  border-color: var(--c-primary);

  box-shadow: 0 4px 12px rgba(30,58,138,.25);

}

.news-pagination__link--next{

  background: var(--c-accent);

  color: #1f1300;

  border-color: var(--c-accent);

}

.news-pagination__link--next:hover{

  background: var(--c-accent-dark);

  color: #fff;

  border-color: var(--c-accent-dark);

}


@media (max-width: 640px){

  .news-pagination{ justify-content: center; text-align: center; }

}