#news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); /* caber em telas menores */
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
  max-width: clamp(960px, 90vw, 1200px);
  padding-inline: clamp(8px, 3vw, 16px);
  margin: 0 auto;
}

.news-card {
  background: rgb(39, 39, 80);
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news-thumb-wrap { display: block; }
.news-thumb { width: 100%; height: 160px; object-fit: cover; background: #0e0e0e; }

.news-content {
  font-family: "Poppins", sans-serif;
  padding: 12px; 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}

.news-title { font-size: 1rem; line-height: 1.3; margin: 0; }
.news-title a { color: #fff; text-decoration: none; }
.news-title a:hover { text-decoration: underline; }

.news-meta { color: #aaa; font-size: 0.85rem; }
.news-desc { color: #ddd; font-size: 0.95rem; }

.news-link {
  margin-top: 4px;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: none;
}

.news-card.loading { animation: pulse 1.2s infinite ease-in-out; }
.news-card.loading .news-thumb { height: 160px; background: #1b1b1b; }
.shimmer { height: 14px; background: #1b1b1b; border-radius: 6px; }
.news-title.shimmer { height: 20px; width: 80%; }
.news-meta.shimmer { width: 60%; }
.news-desc.shimmer { height: 36px; width: 100%; }

@keyframes pulse {
  0% { opacity: .8; } 50% { opacity: .5; } 100% { opacity: .8; }
}

.news-empty, .news-error {
  padding: 16px;
  background: #141414;
  border: 1px solid #222;
  border-radius: 12px;
  text-align: center;
  color: #ccc;
}