/**
 * Path: content/themes/default/css/news.css
 *
 * Yeh file alag se load karni hai - _head.tpl ke andar
 * line 52 ke (style.css) just neeche yeh line add karo:
 *
 *   <link href="{$system['system_url']}/content/themes/{$system['theme']}/css/news.css" rel="stylesheet">
 *
 * Bootstrap already load hoti hai (line 50), is liye card/col/badge
 * jaisi saari classes already kaam karengi - yeh file sirf un
 * cheezon ke liye hai jo Bootstrap nahi karta.
 */

/* Breaking ticker */
.news-ticker-card { overflow: hidden; }
.news-ticker-scroll-wrap { overflow: hidden; flex: 1; }
.news-ticker-list {
  display: flex;
  list-style: none;
  padding: 8px 0;
  white-space: nowrap;
  animation: news-ticker-scroll 30s linear infinite;
}
.news-ticker-list li { margin-right: 50px; }
.news-ticker-list a { color: #fff; }
@keyframes news-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Category nav */
.news-category-nav { overflow-x: auto; white-space: nowrap; }

/* Hero */
.news-hero-image-wrap { position: relative; }
.news-hero-image { width: 100%; height: 360px; object-fit: cover; border-radius: 6px; }
.news-hero-badge { position: absolute; top: 12px; left: 12px; }
.news-hero-title { font-size: 26px; font-weight: 800; line-height: 1.3; }

.news-secondary-item { background: #fff; border-radius: 6px; overflow: hidden; }
.news-secondary-image-wrap { width: 110px; }
.news-secondary-image-wrap img { width: 100%; height: 80px; object-fit: cover; }
.news-secondary-title { font-size: 14px; margin: 4px 0 0; }

/* Category block cards */
.news-card-image { width: 100%; height: 130px; object-fit: cover; border-radius: 4px; }
.news-card-title { font-size: 14px; margin: 8px 0 4px; }

/* Gallery */
.news-gallery-item { position: relative; display: block; }
.news-gallery-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; }
.news-gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 11px;
  padding: 4px 6px; border-radius: 0 0 4px 4px;
}

/* Trending widget */
.news-trending-list li { padding: 8px 0; border-bottom: 1px solid #eee; }
.news-trending-list li:last-child { border-bottom: none; }
.news-trending-rank { font-weight: 800; color: #d32f2f; width: 24px; flex-shrink: 0; }

/* Article detail */
.news-article-title { font-size: 28px; font-weight: 800; margin-top: 10px; }
.news-article-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: 6px; margin-bottom: 16px; }
.news-article-content { font-size: 16px; line-height: 1.7; }
.news-article-badge { display: inline-block; margin-top: 10px; }