/* ============================================================
   NEWS तक — responsive.css
   Mobile-first responsive breakpoints
   ============================================================ */

/* ============================================================
   LARGE DESKTOP (1400px+)
   ============================================================ */
@media (min-width: 1400px) {
  .container, .container-xl { max-width: 1360px; }
}

/* ============================================================
   DESKTOP (992px - 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .nav-link-item { padding: 0 10px; font-size: .85rem; }
  .mega-menu { min-width: 560px; }
  .hero-slide { height: 420px; }
  .hero-side { height: 420px; }
}

/* ============================================================
   TABLET (768px - 991px)
   ============================================================ */
@media (max-width: 991px) {
  /* Header */
  .nav-links { display: none; }
  .btn-hamburger { display: flex; }
  .topbar-date { display: none; }
  .topbar-social { display: none; }

  /* Hero */
  .hero-slide { height: 360px; }
  .hero-side { height: 180px; flex-direction: row; }
  .hero-side-item { flex: 1; }
  .hero-title { font-size: 1.1rem; }
  .hero-content { padding: 18px 20px; }

  /* Section */
  .page-section { padding: 32px 0; }

  /* Sidebar */
  .sidebar-sticky { position: relative; top: 0; margin-top: 32px; }

  /* Footer */
  .footer-col-title { font-size: .85rem; }
  .site-footer { padding: 36px 0 0; margin-top: 40px; }

  /* Photo grid */
  .photo-grid { grid-template-rows: repeat(2, 120px); }

  /* Shorts */
  .shorts-card { aspect-ratio: 3/4; }
}

/* ============================================================
   MOBILE (max 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Topbar hide */
  .topbar { display: none; }

  /* Header */
  .main-navbar { height: 54px; padding: 0; }
  .navbar-logo img { height: 40px; }
  .btn-hamburger { display: flex; }
  .nav-links { display: none; }
  .btn-search-top { display: flex; }

  /* Ticker */
  .breaking-label { padding: 0 10px; font-size: .7rem; }
  .ticker-item { font-size: .78rem; padding: 0 20px; }
  .ticker-controls { display: none; }

  /* Hero */
  .hero-slide { height: 260px; }
  .hero-side { height: auto; flex-direction: row; }
  .hero-side-item { height: 130px; }
  .hero-title { font-size: 1rem; }
  .hero-content { padding: 14px 16px; }
  .hero-meta { gap: 8px; font-size: .68rem; }
  .hero-controls { bottom: 14px; right: 14px; }
  .hero-dots { bottom: 18px; left: 14px; }
  .hero-btn { width: 30px; height: 30px; font-size: .72rem; }
  .hero-side-title { font-size: .75rem; }
  .hero-side-content { padding: 10px; }

  /* Trending */
  .trending-strip { padding: 8px 0; }
  .trending-label { font-size: .68rem; padding: 4px 10px; }
  .trending-tag { font-size: .72rem; padding: 4px 11px; }

  /* Cards */
  .news-card-title { font-size: .86rem; }
  .featured-card { min-height: 240px; }
  .featured-card-title { font-size: .95rem; }
  .list-card-img { width: 80px; height: 60px; }
  .list-card-title { font-size: .78rem; }

  /* Section heading */
  .section-title { font-size: 1rem; }

  /* Section padding */
  .page-section { padding: 24px 0; }

  /* Category banner */
  .cat-banner { padding: 20px 0; }
  .cat-banner-title { font-size: 1.3rem; }

  /* Photo grid */
  .photo-grid { grid-template-rows: repeat(2, 100px); gap: 4px; }

  /* Sidebar */
  .sidebar-sticky { position: relative; top: 0; margin-top: 24px; }

  /* Footer */
  .site-footer { padding: 28px 0 0; margin-top: 28px; }
  .footer-logo img { height: 40px; }
  .footer-tagline { font-size: .75rem; max-width: 100%; }
  .footer-bottom-links { gap: 12px; justify-content: flex-start; margin-top: 8px; }
  .newsletter-form { flex-direction: column; }
  .btn-newsletter { width: 100%; text-align: center; }
  .app-btns { flex-direction: column; }
  .footer-col-title { font-size: .82rem; }

  /* Mobile bottom nav */
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: 64px; }

  /* Scroll top position */
  .scroll-top-btn { bottom: 80px; right: 14px; }

  /* Pagination */
  .pagination-custom { gap: 4px; }
  .page-btn { width: 34px; height: 34px; font-size: .78rem; }

  /* Video page */
  .featured-video-play .featured-play-circle { width: 56px; height: 56px; font-size: 1.4rem; }
  .video-info-title { font-size: .95rem; }
  .video-info-meta { gap: 10px; font-size: .7rem; }
  .video-actions { flex-wrap: wrap; }

  /* Social follow */
  .social-follow-grid { grid-template-columns: 1fr 1fr; }

  /* Ad blocks */
  .ad-728x90 { height: 60px; }

  /* Filter tabs */
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap; }

  /* Shorts grid */
  .shorts-card { aspect-ratio: 9/12; }
}

/* ============================================================
   SMALL MOBILE (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  .hero-slide { height: 220px; }
  .hero-side-item { height: 110px; }
  .hero-content { padding: 12px; }
  .hero-title { font-size: .88rem; -webkit-line-clamp: 2; }
  .hero-cat-label { font-size: .62rem; padding: 2px 7px; margin-bottom: 6px; }
  .hero-side { height: auto; }

  .main-navbar { height: 50px; }
  .navbar-logo img { height: 36px; }

  .section-title { font-size: .95rem; gap: 8px; }
  .section-head-link { font-size: .72rem; }

  .photo-grid { grid-template-rows: repeat(2, 90px); }

  .news-card-title { font-size: .82rem; -webkit-line-clamp: 2; }
  .news-card-body { padding: 12px 14px; }

  .rank-num { font-size: 1.5rem; width: 28px; }
  .rank-card-img { width: 58px; height: 44px; }
  .rank-card-title { font-size: .75rem; }

  .cat-banner-title { font-size: 1.1rem; }

  .share-btn { width: 30px; height: 30px; font-size: .78rem; }

  .drawer-logo img { height: 32px; }
  .mobile-drawer { width: 280px; }

  .search-box { padding: 20px 20px; }
  .search-field { font-size: .85rem; padding: 10px 14px; }
  .btn-search-submit { padding: 10px 16px; }

  .editors-pick-num { font-size: 1.6rem; min-width: 36px; }
  .editors-pick-title { font-size: .82rem; }
}

/* ============================================================
   EXTRA SMALL (max 360px)
   ============================================================ */
@media (max-width: 360px) {
  .hero-slide { height: 200px; }
  .hero-side-item { height: 100px; }
  .mobile-drawer { width: 100vw; }
  .bottom-nav-item { font-size: .55rem; }
  .bottom-nav-item i { font-size: 1rem; }
  .breaking-label span { display: none; }
  .section-head { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .topbar, .site-header, .breaking-bar, .trending-strip,
  .mobile-bottom-nav, .scroll-top-btn, .site-footer,
  .ad-block, .search-overlay, .mobile-drawer, .drawer-overlay { display: none !important; }
  body { background: white; color: black; }
  .news-card { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track { animation: none; }
}