/* Container */
.rss-embed { margin: 0.75rem 0 1.25rem; }

/* List layout */
.rss-embed-list { list-style: none; padding-left: 0; }
.rss-embed-item { margin: 0.6rem 0; }
.rss-embed-link { text-decoration: none; font-weight: 600; }
.rss-embed-link:hover { text-decoration: underline; }
.rss-embed-date { opacity: 0.7; font-size: 90%; margin-left: 0.5ch; }
.rss-embed-thumb img { max-width: 160px; height: auto; display: block; margin: 0.35rem 0; border-radius: 4px; }
.rss-embed-desc { margin-top: 0.25rem; }

/* Cards layout */
.rss-embed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rss-card {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  overflow: hidden;
  background: #222; /* dark gray */
  color: #f1f1f1;   /* make text light */
}
.rss-card-title a { color: #9cf; } /* bluish links */
.rss-card-meta { color: #ccc; }
.rss-card-media img { width: 100%; height: auto; display: block; }
.rss-card-body { padding: 10px 12px; }
.rss-card-title { margin: 0 0 6px; font-size: 1rem; line-height: 1.25; }
.rss-card-title a { text-decoration: none; }
.rss-card-title a:hover { text-decoration: underline; }
.rss-card-meta { opacity: .7; font-size: .9rem; margin-bottom: 6px; }
.rss-card-desc { margin: 0; }

/* Change background color */
.card.news-item {
    background-color: #f5f5f5; /* light gray */
    border: 1px solid #ccc;
}

/* Change text color */
.card.news-item h3, 
.card.news-item p {
    color: #333; /* dark gray */
}

/* Add hover effect */
.card.news-item:hover {
    background-color: #e8f0ff; /* light blue */
}

/* Compact layout */
.rss-embed-compact { list-style: none; padding-left: 0; }
.rss-embed-compact li { margin: 0.4rem 0; }
.rss-compact-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.rss-compact-link:hover { text-decoration: underline; }
.rss-compact-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.rss-compact-title { font-weight: 600; }
.rss-compact-date { opacity: .7; font-size: .9rem; margin-left: .5ch; }

/* Empty state */
.rss-empty { opacity: .75; font-style: italic; }
/* Header */
.rss-embed-header { margin-bottom: .5rem; }
.rss-embed-heading { margin: 0 0 .25rem; font-size: 1.1rem; }
.rss-embed-subtitle { opacity: .8; }

/* Footer */
.rss-embed-footer { margin-top: .5rem; }
.rss-embed-more { text-decoration: none; font-weight: 600; }
.rss-embed-more:hover { text-decoration: underline; }