/* ============================================================
   Pure News Info - 响应式样式
   ============================================================ */

@media (max-width: 1024px) {
  :root { --font-3xl: 28px; --font-2xl: 24px; --font-xl: 20px; --font-lg: 17px; }

  .main-nav { display: none; }
  .mobile-menu-toggle { display: flex; }

  .mobile-nav-overlay {
    display: block; position: fixed; top: var(--header-height); left: 0;
    width: 100%; height: calc(100vh - var(--header-height));
    background: rgba(0,0,0,0.5); z-index: 999;
    opacity: 0; visibility: hidden; transition: all var(--transition-normal);
  }
  .mobile-nav-overlay.active { opacity: 1; visibility: visible; }

  .mobile-nav-panel {
    position: fixed; top: var(--header-height); left: 0;
    width: 280px; height: calc(100vh - var(--header-height));
    background: var(--card-bg); z-index: 1000; overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--transition-normal);
    padding: var(--gap-md);
  }
  .mobile-nav-panel.active { transform: translateX(0); }
  .mobile-nav-panel ul li a { display: block; padding: 12px 16px; font-size: var(--font-base); border-radius: var(--radius-md); transition: background var(--transition-fast); }
  .mobile-nav-panel ul li a:hover,
  .mobile-nav-panel ul li a.active { background: var(--bg-color); color: var(--accent-color); }
  .mobile-nav-panel .sub-menu { padding-left: 16px; border-left: 2px solid var(--border-color); margin-left: 16px; }
  .mobile-nav-panel .sub-menu li a { font-size: var(--font-sm); padding: 8px 12px; }

  .headline-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .headline-main { min-height: 300px; }
  .headline-item.has-image .headline-item-img { width: 120px; min-width: 120px; height: 85px; }

  .page-layout { flex-direction: column; }
  .page-sidebar { width: 100%; }

  .cat-focus-article { flex-direction: column; }
  .cat-focus-article.has-image .cat-focus-img { width: 100%; min-width: 100%; height: 200px; }

  .related-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }

  .article-list-item { flex-direction: column; }
  .article-list-item .list-item-img { width: 100%; min-width: 100%; height: 180px; }
}

@media (max-width: 640px) {
  :root {
    --header-height: 56px; --font-3xl: 24px; --font-2xl: 22px;
    --font-xl: 18px; --font-lg: 16px; --gap-xl: 20px; --gap-2xl: 32px;
  }

  .container { padding-left: 12px; padding-right: 12px; }

  .site-logo img { height: 28px; }
  .site-logo .logo-text { font-size: var(--font-base); }

  .headline-main { min-height: 240px; }
  .headline-main .headline-title { font-size: var(--font-xl); }
  .headline-main .headline-overlay { padding: var(--gap-lg) var(--gap-md); }
  .headline-main.no-image { padding: var(--gap-lg) var(--gap-md); }

  .headline-item { flex-direction: column; }
  .headline-item.has-image .headline-item-img { width: 100%; min-width: 100%; height: 160px; }

  .article-grid { grid-template-columns: 1fr; gap: var(--gap-md); }

  .cat-focus-article.has-image .cat-focus-img { height: 180px; }
  .cat-focus-article .cat-focus-title { font-size: var(--font-base); }

  .section-title h2, .section-title h3 { font-size: var(--font-lg); }

  .article-detail .article-header { padding: var(--gap-lg) var(--gap-md); }
  .article-detail .article-title { font-size: var(--font-2xl); }
  .article-content { padding: var(--gap-md); font-size: var(--font-sm); }
  .article-content h2 { font-size: var(--font-xl); }
  .article-content h3 { font-size: var(--font-lg); }
  .article-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .article-tags { padding: var(--gap-md); }
  .article-nav { flex-direction: column; padding: var(--gap-md); }

  .related-grid { grid-template-columns: 1fr; }
  .sidebar-widget { padding: var(--gap-md); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .search-panel { padding-top: 80px; }
  .search-panel-inner { width: 95%; padding: var(--gap-md); }

  .pagination a, .pagination span { min-width: 36px; height: 36px; padding: 0 8px; font-size: var(--font-xs); }

  .error-page .error-code { font-size: 80px; }

  a, button, .main-nav > li > a { min-height: 44px; }
}

@media (min-width: 1400px) {
  :root { --content-max-width: 1320px; --sidebar-width: 340px; }
}