/* ==========================================================
   B2B Professional - Responsive Styles
   Tablet & mobile breakpoints
   ========================================================== */

/* === Tablet: <= 1024px === */
@media (max-width: 1024px) {
    .wrapper { padding: 0 16px; }
    .header-inner { height: 64px; }

    /* Nav */
    .nav-list > li > a { padding: 20px 12px; font-size: 14px; }

    /* Grids */
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .card-grid .card { flex: 0 0 calc(50% - 12px); }

    /* Single product */
    .product-gallery { flex: 0 0 100%; }
    .product-info { flex: 0 0 100%; }

    /* Content */
    .site-sidebar { width: 260px; }

    /* Trust */
    .trust-number { font-size: 36px; }
}

/* === Mobile Nav Toggle: <= 992px === */
@media (max-width: 992px) {
    .mobile-toggle { display: flex; }

    .main-nav { display: none; position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background: #fff; z-index: 999; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.15); transition: right .3s; padding: 60px 0 20px; }
    .main-nav.open { display: block; right: 0; }

    .nav-list { flex-direction: column; gap: 0; }
    .nav-list > li > a { padding: 14px 20px; border-bottom: 1px solid #f0f2f5; }
    .nav-list > li > a::after { display: none; }

    .sub-menu { position: static; box-shadow: none; border: none; border-top: none; display: none; padding-left: 16px; }
    .nav-list > li.open > .sub-menu { display: block; }
    .sub-menu li a { padding: 10px 20px; }
    .sub-menu .sub-menu { left: 0; border-left: none; padding-left: 12px; }

    .header-inquiry-btn { display: none; }

    .top-bar { display: none; }

    .content-area { flex-direction: column; }
    .site-sidebar { width: 100%; position: static; }

    .hero-content h1 { font-size: 32px; }
    .hero-content p { font-size: 16px; }
    .hero-slide { min-height: 400px; }
}

/* === Small Tablet: <= 768px === */
@media (max-width: 768px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    .section { padding: 40px 0; }
    .section-title { margin-bottom: 28px; }
    .section-title h2 { font-size: 26px; }

    /* Hero */
    .hero-slide { min-height: 340px; }
    .hero-content h1 { font-size: 26px; }
    .hero-buttons .btn { padding: 10px 20px; font-size: 14px; }
    .hero-controls { bottom: 16px; }

    /* Category grid */
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .category-card-img { height: auto; }

    /* Why grid */
    .why-grid { grid-template-columns: 1fr; gap: 16px; }
    .why-item { display: flex; text-align: left; gap: 16px; padding: 16px; background: #f8f9fa; border-radius: 8px; }
    .why-icon { margin: 0; flex-shrink: 0; }

    /* Cards */
    .card-grid .card { flex: 0 0 100%; }

    /* News list */
    .news-list-item { flex-direction: column; }
    .news-list-thumb { flex: 0 0 auto; height: 200px; border-radius: 8px 8px 0 0; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-cta { padding: 30px 0; }
    .footer-cta-inner { flex-direction: column; text-align: center; }
    .footer-cta-text h2 { font-size: 22px; }

    /* Trust */
    .trust-grid { gap: 16px; }
    .trust-item { flex: 0 0 calc(50% - 8px); }
    .trust-number { font-size: 32px; }

    /* Copyright */
    .copyright-inner { flex-direction: column; gap: 8px; text-align: center; }

    /* Page header */
    .page-header { padding: 30px 0 24px; }
    .page-header h1 { font-size: 24px; }

    /* Filter bar */
    .product-filter-bar { flex-direction: column; align-items: stretch; }
    .filter-left { flex-direction: column; }
    .filter-select { width: 100%; }

    /* Search */
    .search-result-item { flex-direction: column; }
    .result-thumb { flex: 0 0 auto; height: 160px; border-radius: 6px; }

    /* Tabs */
    .tab-btn { padding: 10px 14px; font-size: 14px; }
    .news-tabs { gap: 4px; }
    .news-tab { padding: 8px 14px; font-size: 13px; }

    /* Single product */
    .gallery-main-img { height: 260px; }
    .product-title { font-size: 22px; }
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; }

    /* Forms */
    .form-row { flex-direction: column; gap: 0; }
    .inquiry-modal-content { width: 95%; padding: 20px; }

    /* Post navigation */
    .post-navigation { flex-direction: column; }

    /* Author box */
    .author-box { flex-direction: column; text-align: center; }
    .author-avatar { margin: 0 auto; }

    /* Share */
    .article-footer { flex-direction: column; align-items: flex-start; }

    /* Error page */
    .error-code { font-size: 80px; }
    .error-actions { flex-direction: column; align-items: center; }
    .suggestion-links { flex-direction: column; align-items: center; }

    /* News featured */
    .news-featured-thumb { height: 220px; }

    /* Breadcrumb */
    .breadcrumb-bar { font-size: 12px; }

    /* Tags */
    .tags-cloud { gap: 6px; }
    .tag-cloud-item { padding: 4px 10px; font-size: 13px !important; }
}

/* === Small Phone: <= 480px === */
@media (max-width: 480px) {
    .wrapper { padding: 0 12px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }

    .hero-slide { min-height: 280px; }
    .hero-content h1 { font-size: 22px; }
    .hero-content p { font-size: 14px; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }

    .category-grid { grid-template-columns: 1fr; }

    .trust-item { flex: 0 0 100%; }

    .site-logo-text { font-size: 20px; }

    .gallery-main-img { height: 220px; }
    .gallery-thumbs { gap: 6px; }
    .gallery-thumb { flex: 0 0 56px; height: 56px; }

    .btn { padding: 10px 20px; font-size: 14px; }
    .btn-lg { padding: 12px 24px; font-size: 15px; }

    .page-header { padding: 24px 0 20px; }
    .section-title h2 { font-size: 22px; }

    .article-title { font-size: 24px; }
    .article-meta { font-size: 12px; gap: 10px; }

    .back-to-top { bottom: 16px; right: 16px; width: 38px; height: 38px; }
}