/* =============================================================
   RESPONSIVE STYLES
   Desktop (>1200px) is default in style.css
   ============================================================= */

/* -------- Laptop / small desktop (992px - 1199px) -------- */
@media (max-width: 1199.98px) {
  .brand-logo .brand-name { font-size: 30px; }
  .hero-slider .swiper-slide { height: 400px; }
  .trending-side-list { height: 400px; }
  .featured-main, .featured-main img { min-height: 320px; }
}

/* -------- Tablet (768px - 991px) -------- */
@media (max-width: 991.98px) {
  .header-search-box { display: none; }
  .header-ad-banner { display: none; }

  .main-navbar .navbar-collapse {
    background: var(--color-secondary);
    padding: 10px 15px 16px;
  }

  .main-navbar .navbar-nav {
    flex-direction: column;
  }

  .main-navbar .nav-link {
    padding: 12px 6px !important;
    border-bottom: 1px solid #2a2a2a;
  }

  .mega-menu {
    position: static;
    box-shadow: none;
    border-top: none;
    padding: 10px 0 10px 14px;
    background: #1a1a1a;
  }

  .mega-menu-col h6 { color: #fff; margin-top: 12px; }
  .mega-menu-col ul li a { color: #ccc; }
  .mega-menu-feature { display: none; }

  .hero-slider .swiper-slide { height: 340px; }
  .hero-slide-caption h2 { font-size: 20px; }

  .trending-side-list {
    height: auto;
    margin-top: 20px;
  }

  .section-heading h2 { font-size: 20px; }

  .featured-main, .featured-main img { min-height: 260px; }

  .newsletter-section { text-align: center; }
  .newsletter-form { margin: 18px auto 0; }

  .article-header h1 { font-size: 24px; }
  .article-gallery { grid-template-columns: repeat(2, 1fr); }

  .prev-next-nav { flex-direction: column; }
  .prev-next-nav .next-article { text-align: left; flex-direction: row; }
}

/* -------- Mobile (576px - 767px) -------- */
@media (max-width: 767.98px) {
  .top-bar .top-links { display: none; }
  .top-bar .container { justify-content: space-between; display: flex; }

  .brand-logo { align-items: center; text-align: center; }
  .brand-logo .brand-name { font-size: 26px; }

  .breaking-label { font-size: 11px; padding: 8px 12px; }
  .ticker-track span { font-size: 12.5px; padding: 0 24px; }

  .hero-section { padding: 16px 0; }
  .hero-slider .swiper-slide { height: 280px; }
  .hero-slide-caption { padding: 18px; }
  .hero-slide-caption h2 { font-size: 17px; }

  .section-py { padding: 32px 0; }

  .section-heading { flex-direction: column; align-items: flex-start; gap: 8px; }

  .featured-main, .featured-main img { min-height: 220px; }
  .featured-main .overlay-caption h3 { font-size: 17px; }

  .newsletter-section { padding: 28px 20px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { border-radius: 30px; margin-bottom: 10px; }
  .newsletter-form button { border-radius: 30px; padding: 12px; }

  .article-content { font-size: 14.5px; }
  .article-header h1 { font-size: 20px; }
  .article-gallery { grid-template-columns: repeat(2, 1fr); }
  .social-share { flex-direction: row; margin-bottom: 20px; }

  .page-banner h1 { font-size: 22px; }

  .sticky-bottom-ad { flex-direction: column; padding: 10px; }
  .error-page .error-code { font-size: 90px; }
}

/* -------- Extra small mobile (<576px) -------- */
@media (max-width: 575.98px) {
  .news-card .card-body-custom { padding: 14px; }
  .news-list-item .thumb { width: 70px; height: 56px; }
  .article-gallery { grid-template-columns: repeat(1, 1fr); }
  .comment-form button { width: 100%; }
  .back-to-top { width: 40px; height: 40px; right: 16px; bottom: 20px; }
}