/*
 * HYTwp Theme - Responsive Styles
 * HengYatong Environmental Protection Technology
 * Version: 1.0.0
 *
 * Breakpoints:
 * - 2xl: 1536px
 * - xl:  1280px
 * - lg:  1024px
 * - md:  768px
 * - sm:  640px
 * - xs:  480px
 */

/* ============================================================
   XL SCREENS (1280px - 1536px)
   ============================================================ */
@media (max-width: 1400px) {
    .container { max-width: 1140px; }
}

@media (max-width: 1280px) {
    .container { max-width: 1024px; padding-left: 1.5rem; padding-right: 1.5rem; }
    
    .hero-title { font-size: var(--font-size-4xl); }
    .hero-desc br { display: none; }
    
    .section-title { font-size: var(--font-size-3xl); }
}

/* ============================================================
   LAPTOP / LARGE TABLET (1024px - 1280px)
   ============================================================ */
@media (max-width: 1024px) {
    .container { max-width: 960px; padding-left: 1.25rem; padding-right: 1.25rem; }
    
    /* ---- Header ---- */
    .main-navigation { display: none; }
    .header-main .nav-menu { display: none; }
    .header-main .header-cta { display: none; }
    .hamburger-btn { display: flex; }
    
    /* ---- Hero ---- */
    .hero-section { min-height: auto; padding: 120px 0 80px; }
    .hero-content { text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-title { font-size: 2.25rem; }
    .hero-title br { display: none; }
    .hero-desc { font-size: var(--font-size-base); }
    .hero-badge { margin: 0 auto 1rem; }
    .hero-slide { padding: 80px 0 60px; }
    
    /* ---- Sections spacing ---- */
    .section-padding { padding: 4rem 0; }
    
    /* ---- Features Strip ---- */
    .features-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    
    /* ---- About Section ---- */
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-image { order: -1; }
    .about-image-wrapper { max-width: 500px; margin: 0 auto; }
    
    /* ---- Products Section ---- */
    .product-categories { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    
    /* ---- Why Choose Us ---- */
    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    
    /* ---- News / Blog ---- */
    .news-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    
    /* ---- Footer ---- */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    
    /* ---- About Page ---- */
    .about-page-overview-grid { grid-template-columns: 1fr; gap: 2rem; }
    .about-mission-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .timeline::before { left: 20px; }
    .timeline-item { padding-left: 50px; }
    .timeline-item::before { left: 14px; }
    .timeline-item:nth-child(even) { padding-left: 50px; }
    .timeline-item:nth-child(even)::before { left: 14px; }
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    
    /* ---- Contact Page ---- */
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .contact-info-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    
    /* ---- Product Archive ---- */
    .product-filter { flex-wrap: wrap; gap: 0.5rem; }
    .product-filter-btn { font-size: 0.875rem; padding: 0.5rem 1rem; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    
    /* ---- Single Product ---- */
    .single-product-grid { grid-template-columns: 1fr; gap: 2rem; }
    .product-gallery { max-width: 500px; margin: 0 auto; }
    
    /* ---- Support Page ---- */
    .support-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    
    /* ---- Partners ---- */
    .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    
    /* ---- Page Hero ---- */
    .page-hero { padding: 120px 0 60px; }
    .page-hero h1 { font-size: var(--font-size-3xl); }
    
    /* ---- Sidebar ---- */
    .content-area { flex-direction: column; }
    .content-main { width: 100%; }
    .content-sidebar { width: 100%; }
    
    /* ---- Certification ---- */
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TABLET (768px - 1024px)
   ============================================================ */
@media (max-width: 991px) {
    .container { max-width: 720px; padding-left: 1rem; padding-right: 1rem; }
    
    .hero-title { font-size: 2rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .hero-stat { padding: 0.75rem; }
    
    .section-title { font-size: 1.75rem; }
    .section-desc { font-size: var(--font-size-base); }
    
    .top-bar { display: none; }
    .header-main { padding: 0.75rem 0; }
    
    .about-features { grid-template-columns: 1fr; }
    
    .support-faq-layout { grid-template-columns: 1fr; gap: 2rem; }
    
    .single-post-header { flex-direction: column; gap: 1.5rem; }
    .single-post-thumb { width: 100%; max-height: 300px; }
    .post-navigation { flex-direction: column; gap: 1rem; }
    
    .contact-dealer-grid { grid-template-columns: 1fr; gap: 2rem; }
    
    .page-hero { padding: 100px 0 50px; }
    .page-hero h1 { font-size: 2rem; }
    .page-hero .breadcrumbs { font-size: 0.875rem; }
}

/* ============================================================
   SMALL TABLET / LARGE PHONE (640px - 768px)
   ============================================================ */
@media (max-width: 768px) {
    .container { max-width: 540px; }
    
    .section-padding { padding: 3rem 0; }
    .section-title { font-size: 1.5rem; }
    .section-subtitle { font-size: 0.875rem; }
    .section-header { margin-bottom: 2rem; }
    
    /* ---- Hero ---- */
    .hero-section { padding: 100px 0 60px; }
    .hero-title { font-size: 1.75rem; }
    .hero-desc { font-size: 0.875rem; padding: 0; }
    .hero-buttons { flex-direction: column; gap: 0.75rem; align-items: center; }
    .hero-buttons .btn { width: 100%; max-width: 280px; justify-content: center; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding-top: 1.5rem; }
    .hero-stat-num { font-size: 1.5rem; }
    .hero-stat-label { font-size: 0.75rem; }
    .hero-badge { font-size: 0.75rem; padding: 0.3rem 0.75rem; }
    
    /* ---- Features Strip ---- */
    .features-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .features-strip { padding: 2rem 0; }
    .feature-strip-item { padding: 0.75rem; }
    .feature-strip-icon { font-size: 1.5rem; width: 48px; height: 48px; }
    .feature-strip-text h4 { font-size: 0.875rem; }
    .feature-strip-text p { font-size: 0.75rem; }
    
    /* ---- About Section (Home) ---- */
    .about-grid { gap: 1.5rem; }
    .about-text h2 { font-size: 1.5rem; }
    .about-badge-wrap { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .about-image-main img { height: 300px; }
    
    /* ---- Products Section ---- */
    .product-categories { grid-template-columns: 1fr; gap: 1rem; }
    .products-section .section-actions { flex-direction: column; gap: 0.75rem; }
    
    /* ---- Why Choose Us ---- */
    .why-grid { grid-template-columns: 1fr; gap: 1rem; }
    
    /* ---- News ---- */
    .news-grid, .blog-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    
    /* ---- Solutions Preview ---- */
    .solutions-preview-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .solutions-preview-image { order: -1; }
    .solutions-preview-image img { max-width: 400px; margin: 0 auto; }
    .solutions-preview-list { align-items: center; }
    .solutions-preview-list li { justify-content: center; }
    
    /* ---- CTA Section ---- */
    .cta-section { padding: 3rem 0; }
    .cta-box { padding: 40px 24px; }
    .cta-content h2 { font-size: 1.5rem; }
    .cta-content p { font-size: 0.875rem; }
    .cta-buttons { flex-direction: column; gap: 0.75rem; align-items: center; }
    .cta-buttons .btn { width: 100%; max-width: 280px; justify-content: center; }
    
    /* ---- Footer ---- */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 0.75rem; }
    
    /* ---- About Page ---- */
    .team-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .cert-grid { grid-template-columns: 1fr; gap: 1rem; }
    .about-timeline-section { padding: 3rem 0; }
    
    /* ---- Contact Page ---- */
    .contact-info-wrap { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 1.5rem; }
    .contact-form-row { flex-direction: column; gap: 1rem; }
    .contact-form-row .form-group { flex: none; width: 100%; }
    
    /* ---- Products Archive ---- */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .product-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
    .product-filter::-webkit-scrollbar { height: 2px; }
    .product-filter::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
    
    /* ---- Single Product ---- */
    .single-product-info { padding: 1.5rem; }
    .product-actions { flex-direction: column; gap: 0.75rem; }
    .product-actions .btn { width: 100%; justify-content: center; }
    .related-products-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    
    /* ---- Support Page ---- */
    .support-cards-grid { grid-template-columns: 1fr; gap: 1rem; }
    .faq-item-title { font-size: 0.875rem; padding: 1rem; }
    .faq-item-content { padding: 0 1rem 1rem; font-size: 0.875rem; }
    
    /* ---- Partners ---- */
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    
    /* ---- Page Hero ---- */
    .page-hero { padding: 90px 0 40px; }
    .page-hero h1 { font-size: 1.75rem; }
    
    /* ---- Search ---- */
    .search-result-item { flex-direction: column; gap: 1rem; }
    .search-result-thumb { width: 100%; max-height: 200px; }
    
    /* ---- Single Post ---- */
    .single-post-content { padding: 1.5rem; }
    .single-post-meta { flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; }
    
    /* ---- Preloader ---- */
    .preloader { display: none; }
    
    /* ---- Buttons ---- */
    .btn { font-size: 0.875rem; padding: 0.65rem 1.25rem; }
    .btn-lg { font-size: 0.9375rem; padding: 0.75rem 1.5rem; }
}

/* ============================================================
   MOBILE (480px - 640px)
   ============================================================ */
@media (max-width: 640px) {
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    
    .hero-title { font-size: 1.5rem; }
    .hero-section { padding: 90px 0 50px; }
    
    .section-title { font-size: 1.375rem; }
    
    .about-text h2 { font-size: 1.375rem; }
    
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    
    .products-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 400px; margin: 0 auto; }
    
    .related-products-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    
    .about-content h1 { font-size: 1.75rem; }
    .about-content .lead { font-size: 1rem; }
    
    .team-member { max-width: 320px; margin: 0 auto; }
    
    .contact-item { flex-direction: column; text-align: center; }
    .contact-icon { margin: 0 auto 0.75rem; }
    
    .support-hero h1 { font-size: 1.75rem; }
    
    .page-hero h1 { font-size: 1.5rem; }
    
    .widget-area { padding: 1.5rem; }
    
    .archive-header h1 { font-size: 1.5rem; }
    
    .error-404 h1 { font-size: 5rem; }
    .error-404 h2 { font-size: 1.25rem; }
}

/* ============================================================
   SMALL MOBILE ( < 480px )
   ============================================================ */
@media (max-width: 480px) {
    .container { padding-left: 0.5rem; padding-right: 0.5rem; }
    
    .hero-title { font-size: 1.25rem; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .hero-stat-num { font-size: 1.25rem; }
    .hero-stat-label { font-size: 0.625rem; }
    
    .section-title { font-size: 1.25rem; }
    .section-padding { padding: 2.5rem 0; }
    
    .features-strip-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    
    .product-categories { grid-template-columns: 1fr; gap: 0.75rem; }
    .product-cat-card { padding: 24px 16px; }
    
    /* ---- About Section ---- */
    .about-image-main img { height: 250px; }
    .about-image-badge { width: 90px; height: 90px; bottom: -10px; right: -10px; }
    .about-badge-num { font-size: 22px; }
    .about-badge-text { font-size: 8px; }
    
    /* ---- Solutions Preview ---- */
    .solutions-preview-grid { gap: 1.5rem; }
    .solutions-preview-image img { max-width: 280px; }
    
    /* ---- CTA Section ---- */
    .cta-box { padding: 30px 16px; border-radius: var(--radius-xl); }
    .cta-title { font-size: 1.25rem; }
    .cta-desc { font-size: 0.875rem; }
    
    .why-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    
    .about-stats-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .about-mission-card { padding: 1.25rem; }
    
    .team-grid { grid-template-columns: 1fr; gap: 1rem; }
    
    .cert-grid { grid-template-columns: 1fr; }
    
    .contact-info-wrap { grid-template-columns: 1fr; }
    
    .support-cards-grid { grid-template-columns: 1fr; }
    
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .partner-item { padding: 1rem; }
    
    .btn { font-size: 0.8125rem; padding: 0.6rem 1.125rem; }
    .btn-lg { font-size: 0.875rem; padding: 0.7rem 1.375rem; }
    
    .page-hero { padding: 80px 0 30px; }
    .page-hero h1 { font-size: 1.375rem; }
    
    .single-post-header h1 { font-size: 1.375rem; }
    
    .product-card .product-info { padding: 1rem; }
    .product-card .product-title { font-size: 1rem; }
    
    .news-card .news-info { padding: 1rem; }
    .news-card .news-title { font-size: 1rem; }
    
    .footer-grid { gap: 1.25rem; }
    .footer-widget-title { font-size: 1rem; }
    
    .about-badge-img { width: 80px; height: 80px; }
    
    .error-404 h1 { font-size: 4rem; }
    .error-404 p { font-size: 0.875rem; }
    
    .header-main .header-logo img { max-height: 36px; }
    .header-main { padding: 0.5rem 0; }
    
    .whatsapp-float { width: 44px; height: 44px; font-size: 1.25rem; bottom: 1rem; right: 1rem; }
    .back-to-top { width: 36px; height: 36px; font-size: 0.875rem; bottom: 1rem; left: 1rem; }
}

/* ============================================================
   NEWS CENTER - RESPONSIVE
   ============================================================ */

/* 2xl: 1536px */
@media (max-width: 1536px) {
    .news-articles-grid { grid-template-columns: repeat(3, 1fr); }
}

/* xl: 1280px */
@media (max-width: 1280px) {
    .news-layout { grid-template-columns: 1fr 280px; gap: var(--spacing-2xl); }
    .news-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-news-card { grid-template-columns: 1fr 1fr; }
    .featured-news-content { padding: var(--spacing-2xl); }
    .featured-news-title { font-size: var(--font-size-2xl); }
}

/* lg: 1024px */
@media (max-width: 1024px) {
    .news-layout { grid-template-columns: 1fr; }
    .news-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
    
    .featured-news-card { grid-template-columns: 1fr; }
    .featured-news-image { min-height: 280px; }
    .featured-news-content { padding: var(--spacing-xl); }
    .featured-news-title { font-size: var(--font-size-xl); }
    
    .news-articles-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
    
    .cross-linked-grid { grid-template-columns: repeat(2, 1fr); }
    .cross-linked-news-grid { grid-template-columns: repeat(2, 1fr); }
    
    .solutions-showcase-grid { grid-template-columns: 1fr; }
}

/* md: 768px */
@media (max-width: 768px) {
    .news-sidebar { grid-template-columns: 1fr; }
    
    .news-toolbar { flex-direction: column; align-items: stretch; }
    .news-search-form { width: 100%; }
    .news-search-input { width: 100%; }
    
    .news-articles-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
    
    .featured-news-image { min-height: 220px; }
    .featured-news-footer { flex-direction: column; align-items: flex-start; }
    
    .cross-linked-grid { grid-template-columns: 1fr; }
    .cross-linked-news-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
    
    .news-pagination-nav a,
    .news-pagination-nav span { min-width: 36px; height: 36px; font-size: var(--font-size-xs); }
}

/* sm: 640px */
@media (max-width: 640px) {
    .news-category-filters { justify-content: center; }
    .news-filter-btn { font-size: var(--font-size-xs); padding: 6px 12px; }
    
    .news-widget { padding: var(--spacing-lg); }
    
    .featured-news-card { border-radius: var(--radius-lg); }
    .featured-news-content { padding: var(--spacing-lg); }
    
    .solution-showcase-card { padding: var(--spacing-lg); }
}

/* xs: 480px */
@media (max-width: 480px) {
    .news-article-body { padding: var(--spacing-md); }
    .news-article-title { font-size: var(--font-size-base); }
    
    .cross-linked-card { padding: var(--spacing-md); }
    .cross-linked-thumb { width: 56px; height: 56px; }
    
    .news-card-image { aspect-ratio: 16/9; }
    .news-card-body { padding: var(--spacing-sm); }
    .news-card-title { font-size: var(--font-size-sm); }
    
    .solution-showcase-icon { width: 40px; height: 40px; font-size: 1rem; }
    .solution-showcase-title { font-size: var(--font-size-lg); }
}