/* =========================
   Sports page — fixed styles
   (Includes breaking-news + footer fixes)
   ========================= */

:root{
  --primary:#0b5f8a;
  --primary-dark:#093f57;
  --secondary:#e63946;
  --accent:#ffb703;
  --light:#f8f9fa;
  --dark:#2c3e50;
  --gray:#7f8c8d;
  --border:#e0e0e0;
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --shadow-hover:0 8px 24px rgba(0,0,0,.12);
  --breaking-red: #D90000;
}

/* -------------------------
   Reset & base
   ------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:auto;            /* avoid forcing vh-based layouts that create gaps */
  overflow-x:hidden;      /* prevent horizontal scroll from spilled children */
  background:#f5f7fa;
}
body{
  font-family:'Poppins','Noto Sans Devanagari',sans-serif;
  color:#222;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hindi-text{font-family:'Noto Sans Devanagari',sans-serif}

/* -------------------------
   Breaking News (matches Uttarakhand)
   ------------------------- */
.breaking-news{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--breaking-red);
  color:#fff;
  padding:0.65rem 1rem;
  margin: 0 0 1.5rem 0;
  border-radius:8px;
  animation: pulse 2s infinite;
  overflow:hidden;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.88; }
  100% { opacity: 1; }
}

.breaking-label{
  background:#fff;
  color:var(--breaking-red);
  padding:0.25rem 0.9rem;
  border-radius:20px;
  font-weight:700;
  font-size:0.9rem;
  white-space:nowrap;
  flex:0 0 auto;
}

.breaking-text{flex:1;font-weight:500}

/* marquee area — the JS injects anchors inside the span */
.marquee{
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}

.marquee span{
  display:inline-block;
  padding-left:100%;
  animation: marquee-left 28s linear infinite;
}

.marquee a{
  color:#fff;
  text-decoration:none;
  display:inline-block;
  margin-right: 28px;
  font-weight:500;
  white-space:nowrap;
}
.marquee a:hover{text-decoration:underline;opacity:0.95}

/* smoother marquee — move full width to left */
@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* -------------------------
   Hero
   ------------------------- */
.sports-hero{
  background:
    linear-gradient(rgba(11,95,138,.85),rgba(9,63,87,.05)),
    url('https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1600');
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:4rem 0;
  text-align:center;
  margin-bottom:2rem;
}
.hero-container{max-width:1200px;margin:0 auto;padding:0 20px}
.hero-title{font-size:3rem;font-weight:700}
.hero-subtitle{font-size:1.2rem;margin-top:.5rem}

/* -------------------------
   Stats
   ------------------------- */
.stats{
  display:flex;
  justify-content:center;
  gap:3rem;
  margin-top:2rem;
}
.stat-number{font-size:2rem;color:var(--secondary);font-weight:700}

/* -------------------------
   Layout
   ------------------------- */
.main-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 20px;  /* reduced bottom padding — prevents large gap after footer */
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2rem;
}

/* -------------------------
   Filters
   ------------------------- */
.filter-section{
  background:#fff;padding:1.5rem;border-radius:12px;box-shadow:var(--shadow);
  display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center;
}
.filter-btn{
  border:2px solid var(--border);
  padding:.5rem 1.2rem;border-radius:25px;background:#fff;cursor:pointer;
}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.refresh-btn{background:var(--accent);border:none;padding:.5rem 1.2rem;border-radius:25px;cursor:pointer}

/* -------------------------
   Cards
   ------------------------- */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
}
.news-card{
  background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:.3s;display:flex;flex-direction:column;
}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.news-image{height:200px;position:relative;overflow:hidden}
.news-image img{width:100%;height:100%;object-fit:cover;display:block}
.video-indicator{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;padding:4px 8px;border-radius:6px;font-size:.85rem}
.news-content{padding:1.2rem;display:flex;flex-direction:column}
.news-category{background:var(--primary);color:#fff;padding:.25rem .8rem;border-radius:14px;font-size:.75rem;margin-bottom:.6rem;align-self:flex-start}
.news-title{font-size:1.1rem;font-weight:600}
.news-desc{color:var(--gray);margin:.6rem 0 1rem}
.read-more{color:var(--secondary);font-weight:500}

/* Loading */
.loading{text-align:center;padding:2rem;grid-column:1/-1}
.loading-spinner{width:40px;height:40px;border:5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* -------------------------
   Sidebar
   ------------------------- */
.sidebar{display:flex;flex-direction:column;gap:1.5rem}
.sidebar-section{background:#fff;padding:1.2rem;border-radius:12px;box-shadow:var(--shadow)}
.section-title{border-bottom:2px solid var(--primary);padding-bottom:.4rem;margin-bottom:1rem;color:var(--primary)}
.top-districts{display:flex;flex-wrap:wrap;gap:.6rem}
.district-tag{background:#e8f4fc;padding:.4rem .9rem;border-radius:20px;cursor:pointer}

/* -------------------------
   Footer & footer-gap fixes
   ------------------------- */
/* Explicit footer container (your page uses <div id="footer">) */
#footer{
  margin:0;
  padding:0;
  height:auto;
  min-height:0;
  background:transparent;
  clear:both;
}

/* Ensure main container doesn't force gap at page bottom */
.main-container{margin-bottom:0}

/* -------------------------
   Back to top — force fixed so it never affects layout
   ------------------------- */
.back-to-top{
  position:fixed;
  bottom:20px;
  right:20px;
  background:var(--primary);
  color:#fff;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:var(--shadow);opacity:0;transform:translateY(20px);
  transition:all .3s ease;z-index:1000;
}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:var(--primary-dark);transform:translateY(-5px)}

/* -------------------------
   Utilities & responsive
   ------------------------- */
@media(max-width:992px){.main-container{grid-template-columns:1fr}}
@media(max-width:768px){
  .news-grid{grid-template-columns:1fr}
  .stats{flex-direction:column;gap:1.25rem}
  .hero-title{font-size:2.4rem}
}
@media(max-width:480px){
  .filter-section{flex-direction:column;align-items:stretch}
  .filter-btn,.refresh-btn{width:100%;text-align:center}
}

/* small helper for video badge when used in card markup */
.news-image .video-indicator{right:8px;left:auto}
/* -------------------------
   Latest Updates (matches current JS output)
   Selector: #latestUpdates > div  (each item contains an <a> and a <small>)
   ------------------------- */
#latestUpdates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;        /* allow scrolling when many items */
  overflow-y: auto;
  padding-right: 8px;       /* room for scrollbar */
  margin: 0;
}

/* each injected row */
#latestUpdates > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  animation: fadeInUp .26s ease both;
}

/* headline link */
#latestUpdates > div > a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  display: block;
  max-width: calc(100% - 92px); /* leave room for time/meta */
  word-break: break-word;
}

/* small/time column */
#latestUpdates > div > small {
  flex: 0 0 88px;
  text-align: right;
  color: var(--gray);
  font-size: 0.82rem;
  white-space: nowrap;
  display: inline-block;
  margin-left: 6px;
}

/* optional LIVE badge if you add it inside <small> or <a> */
#latestUpdates .live-badge {
  display: inline-block;
  background: var(--secondary);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
}

/* hover states */
#latestUpdates > div:hover { background: rgba(0,0,0,0.02); }
#latestUpdates > div > a:hover { text-decoration: underline; opacity: 0.95; }

/* light scrollbar styling (WebKit) */
#latestUpdates::-webkit-scrollbar { width: 8px; }
#latestUpdates::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 6px; }
#latestUpdates::-webkit-scrollbar-track { background: transparent; }

/* reveal animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: reduce meta width on small screens */
@media (max-width: 600px) {
  #latestUpdates { max-height: 260px; }
  #latestUpdates > div > small { flex: 0 0 64px; font-size: 0.78rem; }
  #latestUpdates > div > a { max-width: calc(100% - 72px); font-size: 0.92rem; }
}