/* =========================================================
   SachBolo — Category Page CSS (FULL REWRITE)
   - Responsive (no overflow)
   - Clean: no duplicate/conflicting rules
   - Smooth Breaking ticker (track)
   - Sticky sidebar ads (sb-sticky-wrap)
========================================================= */

:root{
  --primary-color:#0ea5a4;
  --secondary-color:#0369a1;
  --accent-color:#e53935;

  --text-color:#222;
  --light-text:#666;

  --bg-color:#f6f7f9;
  --card-bg:#fff;
  --border-color:#e6e7ea;

  --shadow:0 2px 10px rgba(0,0,0,.08);
  --shadow-hover:0 8px 18px rgba(0,0,0,.12);

  --radius:12px;
  --radius-sm:10px;
  --transition:all .25s ease;
}

/* =========================
   Base / Reset
========================= */
*{ box-sizing:border-box; }
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text-color);
  background:var(--bg-color);
  line-height:1.6;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Container */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 14px;
}

/* Utility */
.muted{ color:var(--light-text); }

/* =========================
   Layout Grid
========================= */
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px; /* prevents overflow */
  gap:20px;
}
.main-column,.sidebar{ min-width:0; }

@media (max-width:1024px){
  .content-grid{ grid-template-columns:minmax(0,1fr); }
}

/* =========================
   STICKY ADS HARD FIX (LAST)
========================= */

/* kill scroll containers / clipping from global CSS */
html, body, .container, .content-grid, .sidebar {
  overflow: visible !important;
}

/* IMPORTANT: sticky breaks if any ancestor has transform/filter/perspective */
.container, .content-grid, .sidebar {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* sticky wrapper */
.sb-sticky-wrap{
  position: sticky !important;
  top: 16px !important;
  z-index: 999 !important;
  display: grid;
  gap: 14px;
}

/* ensure grid item can shrink (prevents overflow + sticky bugs) */
.sidebar { min-width: 0 !important; }
.sb-sticky-wrap { min-width: 0 !important; }

/* off on mobile */
@media (max-width:1024px){
  .sb-sticky-wrap{ position: static !important; }
}


/* =========================
   Breaking News Banner (Ticker)
   HTML must be:
   .breaking-news-ticker > .breaking-news-track > a...
========================= */
.breaking-news-banner{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--accent-color);
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  margin:16px 0 18px;
  overflow:hidden;
}

.breaking-news-label{
  background:rgba(0,0,0,.18);
  padding:4px 10px;
  border-radius:8px;
  font-weight:800;
  letter-spacing:.2px;
  white-space:nowrap;
}

.breaking-news-ticker{
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  min-width:0;
}

/* animated track */
.breaking-news-track{
  display:inline-flex;
  align-items:center;
  gap:28px;
  white-space:nowrap;
  will-change:transform;
  animation:ticker 60s linear infinite;
}

/* pause on hover */
.breaking-news-banner:hover .breaking-news-track{
  animation-play-state:paused;
}

@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); } /* if you duplicate items in PHP */
}

.breaking-news-item{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
}
.breaking-news-item:hover{ text-decoration:underline; }

.no-breaking-news{
  color:#fff;
  opacity:.9;
  font-weight:600;
}

.breaking-news-time{
  white-space:nowrap;
  font-weight:800;
  opacity:.95;
}

/* Mobile: banner wraps */
@media (max-width:600px){
  .breaking-news-banner{
    flex-wrap:wrap;
    gap:8px;
  }
  .breaking-news-time{ margin-left:auto; }
}

/* =========================
   Category Header
========================= */
.category-header{
  margin:18px 0;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-color);
}
.page-title{
  margin:0 0 6px;
  font-weight:900;
  line-height:1.15;
  font-size:clamp(1.55rem,2.6vw,2.35rem);
}
.category-description{
  margin:0 0 8px;
  color:var(--light-text);
}
.category-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  font-size:14px;
  color:var(--light-text);
}
.stat-item{
  background:#fff;
  border:1px solid var(--border-color);
  padding:6px 10px;
  border-radius:999px;
}

/* =========================
   Featured Article (GRID)
   Expected HTML:
   <article class="featured-article">
     <a><img class="featured-image"></a>
     <div class="featured-body">...</div>
   </article>
========================= */
.featured-article{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:16px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin:0 0 18px;
}
.featured-image{
  width:100%;
  height:170px;
  object-fit:cover;
  border-radius:10px;
}
.featured-article h2{
  margin:0 0 8px;
  line-height:1.2;
  font-size:clamp(1.05rem,1.9vw,1.45rem);
}
.featured-article h2 a{
  color:var(--text-color);
  text-decoration:none;
}
.featured-article h2 a:hover{ color:var(--primary-color); }

.featured-article p{
  margin:0 0 10px;
  color:var(--light-text);
}

.featured-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  font-size:13px;
  color:var(--light-text);
}

@media (max-width:768px){
  .featured-article{ grid-template-columns:1fr; }
  .featured-image{ height:220px; }
}

/* =========================
   Articles Grid + Cards
========================= */
.latest-articles{ margin-top:6px; }

.articles-grid{
  display:grid;
  gap:16px;
  margin-top:14px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1199px){
  .articles-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:767px){
  .articles-grid{ grid-template-columns:1fr; }
}

/* Whole card clickable option:
   If you wrap card with <a class="card-link"> ... </a> use styles below.
*/
.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.article-card{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.article-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

.article-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  transition:transform .25s ease;
}
.article-card:hover img{ transform:scale(1.04); }

@media (max-width:767px){
  .article-card img{ height:140px; }
}

.article-title{
  margin:10px 12px 6px;
  font-weight:900;
  line-height:1.25;
  font-size:clamp(14px,1.4vw,16px);
}
.article-title a{
  color:var(--text-color);
  text-decoration:none;
}
.article-title a:hover{ color:var(--primary-color); }

.article-card p{
  margin:0 12px 12px;
  color:var(--light-text);
  font-size:clamp(12px,1.2vw,13px);
  line-height:1.45;
}

.article-meta{
  margin:0 12px 12px;
  font-size:12px;
  color:#8a8a8a;
}

/* =========================
   Sidebar
========================= */
.sidebar{
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  overflow:visible; /* sticky must work */
}

/* =========================
   Pagination
========================= */
.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:22px 0 28px;
  flex-wrap:wrap;
}
.pagination-link{
  padding:8px 12px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:10px;
  color:var(--text-color);
  text-decoration:none;
  transition:var(--transition);
  font-weight:700;
}
.pagination-link:hover{
  background:var(--primary-color);
  color:#fff;
  border-color:var(--primary-color);
}
.pagination-link.current{
  background:var(--primary-color);
  color:#fff;
  border-color:var(--primary-color);
}

/* =========================
   Small devices tweaks
========================= */
@media (max-width:480px){
  .container{ padding:0 10px; }
  .sidebar{ padding:14px; }
  .featured-article{ padding:14px; }
}