/* =============================================
   MOBILE CSS - NeuralGuideHub
   Mobile-first responsive design
   ============================================= */

/* =============================================
   TABLET (max 1024px)
   ============================================= */
@media (max-width: 1024px) {
    .hero-section { grid-template-columns: 1fr; gap: 32px; }
    .hero-stats { grid-template-columns: repeat(4, 1fr); }
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .tool-content-wrap { grid-template-columns: 1fr; }
    .tool-sidebar { grid-template-columns: repeat(2, 1fr); display: grid; }
    .compare-selectors { grid-template-columns: 1fr; }
}

/* =============================================
   MOBILE (max 768px)
   ============================================= */
@media (max-width: 768px) {

    /* Header */
    .main-nav { display: none; }
    .main-nav.open { display: flex; flex-direction: column; position: fixed; top: 60px; left: 0; right: 0; background: var(--bg-primary); border-bottom: 0.5px solid var(--border-color); padding: 16px; z-index: 999; gap: 4px; }
    .main-nav.open a { padding: 10px 16px; border-radius: var(--border-radius-md); font-size: 14px; }
    .menu-toggle { display: flex; align-items: center; justify-content: center; }
    .header-actions .btn-signin { display: none; }

    /* Hero */
    .hero-section { padding: 32px 16px 28px; }
    .hero-title { font-size: 24px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-buttons { flex-direction: column; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }

    /* Compare Bar */
    .compare-bar { padding: 16px; }
    .compare-bar-row { flex-direction: column; }
    .compare-select { width: 100%; }
    .btn-compare { width: 100%; justify-content: center; }

    /* Grids */
    .guides-grid { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .tools-grid { grid-template-columns: 1fr; }
    .similar-tools-grid { grid-template-columns: 1fr; }
    .pros-cons-grid { grid-template-columns: 1fr; }

    /* Newsletter */
    .newsletter-section { flex-direction: column; padding: 24px 20px; margin: 0 16px 24px; }
    .newsletter-form { flex-direction: column; width: 100%; }
    .newsletter-input { width: 100%; }
    .btn-newsletter { width: 100%; justify-content: center; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    /* Tool Detail */
    .tool-hero-top { flex-direction: column; gap: 16px; }
    .btn-visit-tool { width: 100%; justify-content: center; }
    .tool-quick-stats { gap: 16px; }
    .tool-sidebar { grid-template-columns: 1fr; }

    /* Sections */
    .section-wrap { padding: 20px 16px; }
    .section-divider { margin: 0 16px; }

    /* Single Post */
    .single-wrap { padding: 20px 16px; }
    .single-title { font-size: 22px; }
    .single-meta { gap: 12px; }

    /* Submit Form */
    .submit-wrap { padding: 20px 16px; }

    /* Breadcrumbs */
    .breadcrumbs { padding: 10px 16px; font-size: 12px; }

    /* Compare Page */
    .compare-page-wrap { padding: 20px 16px; overflow-x: auto; }
}

/* =============================================
   SMALL MOBILE (max 480px)
   ============================================= */
@media (max-width: 480px) {
    .hero-title { font-size: 20px; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .stat-num { font-size: 18px; }
    .newsletter-title { font-size: 17px; }
    .tool-name { font-size: 22px; }
    .single-title { font-size: 20px; }
    .page-404-title { font-size: 60px; }
    .header-inner { padding: 12px 16px; }
    .logo-text { font-size: 14px; }
}