/**
 * Path: content/themes/default/css/news-homepage.css
 *
 * Yeh "_head.tpl" mein "style.css" ke neeche load karni hai:
 *   <link href="{$system['system_url']}/content/themes/{$system['theme']}/css/news-homepage.css" rel="stylesheet">
 *
 * Covers: left sidebar (dynamic categories), breaking ticker, hero
 * section, category cards, gallery, trending widget - "index.news.tpl"
 * aur "news.tpl" dono is file ko use karte hain.
 */

/* ===== LEFT SIDEBAR ===== */
.news-sidebar {
  background: #fff;
  border-radius: 6px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  position: sticky;
  top: 80px;
}
.news-sidebar-inner {
  display: flex;
  flex-direction: column;
}
.news-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
}
.news-sidebar-item:hover {
  background: #f7f7f7;
  color: #d32f2f;
}
.news-sidebar-item i {
  width: 18px;
  text-align: center;
  color: #d32f2f;
  flex-shrink: 0;
}
.news-sidebar-toptag i {
  color: #ff6b00;
}
.news-sidebar-caret {
  margin-left: auto;
  font-size: 10px;
  color: #999 !important;
}
.news-sidebar-children {
  display: flex;
  flex-direction: column;
  background: #fafafa;
}
.news-sidebar-subitem {
  padding: 8px 14px 8px 42px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}
.news-sidebar-subitem:hover {
  color: #d32f2f;
}
.news-sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 14px;
  text-align: center;
  color: #999;
}
.news-sidebar-empty i {
  font-size: 26px;
  color: #ccc;
}
.news-sidebar-empty span {
  font-size: 14px;
  font-weight: 600;
  color: #777;
}
.news-sidebar-empty small {
  font-size: 12px;
  color: #aaa;
}
.night-mode .news-sidebar,
.night-mode .news-sidebar-children {
  background: #1e1e1e;
}
.night-mode .news-sidebar-item,
.night-mode .news-sidebar-subitem {
  color: #ddd;
  border-bottom-color: #2a2a2a;
}
/* ===== LEFT SIDEBAR ===== */

/* ===== 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%); }
}
/* ===== BREAKING TICKER ===== */

/* ===== 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: 24px; font-weight: 800; line-height: 1.3; color: #1a1a1a; }

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

/* ===== CATEGORY CARDS ===== */
.news-card { display: block; }
.news-card-image { width: 100%; height: 130px; object-fit: cover; border-radius: 4px; }
.news-card-title { font-size: 14px; margin: 8px 0 4px; color: #1a1a1a; }
/* ===== CATEGORY CARDS ===== */

/* ===== 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;
}
/* ===== GALLERY ===== */

/* ===== 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; }
/* ===== TRENDING WIDGET ===== */

/* ===== EMPTY STATES (jab DB mein abhi data nahi hai) ===== */
.news-empty-state {
  background: #fff;
  border-radius: 6px;
  padding: 50px 20px;
  text-align: center;
  color: #888;
}
.news-empty-state svg,
.news-empty-state i {
  opacity: 0.35;
  margin-bottom: 12px;
}
.news-empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: #555;
  margin: 0 0 6px;
}
.news-empty-state p {
  font-size: 13px;
  color: #999;
  margin: 0;
}
.night-mode .news-empty-state {
  background: #1e1e1e;
  color: #999;
}
/* ===== EMPTY STATES ===== */

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 991px) {
  .news-sidebar { position: static; max-height: none; margin-bottom: 16px; }
  .news-hero-image { height: 220px; }
}
/* ===== MOBILE RESPONSIVE ===== */