/* ==========================================================
   Usion Hardware Theme — Responsive CSS
   ========================================================== */

/* ≤1200px */
@media (max-width: 1200px) {
    .container { max-width: 100%; }
    .series-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ≤992px — tablet */
@media (max-width: 992px) {
    .hero { height: 460px; }
    .hero__title { font-size: 34px; }
    .hero__subtitle { font-size: 15px; }
    .hero__content { margin-left: 5%; }

    .section { padding: 60px 0; }
    .section-title { font-size: 26px; }

    .profile-block,
    .news-feature,
    .contact-cta {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .products-grid--2,
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .honor-grid { grid-template-columns: repeat(3, 1fr); }
    .series-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid  { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
    .stat-num { font-size: 42px; }

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

/* ≤768px — phone */
@media (max-width: 768px) {
    body { font-size: 14px; }

    .header-container {
        min-height: 60px;
        gap: 12px;
    }
    .site-logo__icon { width: 36px; height: 36px; }
    .logo-main { font-size: 17px; }
    .logo-sub { font-size: 10px; }

    .mobile-menu-toggle { display: block; }
    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
        z-index: 10;
    }
    .main-navigation.is-open { max-height: 500px; }
    .nav-menu { flex-direction: column; }
    .nav-menu > li { border-bottom: 1px solid #f5f5f5; }
    .nav-menu > li > a { padding: 14px 20px; font-size: 14px; }
    .nav-menu > li > a::after { display: none; }
    .nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: #fafafa;
        padding-left: 16px;
    }

    .hero { height: 360px; }
    .hero__title { font-size: 26px; }
    .hero__subtitle { font-size: 14px; margin-bottom: 20px; }
    .hero__content { margin: 0 20px; }
    .hero__arrow { display: none; }
    .hero__dots { bottom: 20px; }

    .section { padding: 48px 0; }
    .section-title { font-size: 22px; }
    .section-subtitle { font-size: 14px; }

    .products-grid,
    .products-grid--3,
    .products-grid--2,
    .news-grid { grid-template-columns: 1fr; }

    .honor-grid { grid-template-columns: repeat(2, 1fr); }
    .series-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid  { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .stat-num { font-size: 36px; }

    .news-item { grid-template-columns: 70px 1fr; }
    .news-item__more { display: none; }

    .footer-widgets { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { justify-content: center; text-align: center; gap: 8px; }

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

    .contact-cta__form { padding: 24px; }

    .page-banner { height: 240px; }
    .page-banner__title { font-size: 26px; }
}

/* ≤576px */
@media (max-width: 576px) {
    .container { padding: 0 16px; }
    .hero__title { font-size: 22px; }
    .hero__kicker { font-size: 10px; padding: 4px 10px; }
    .hero__cta { display: block; text-align: center; }

    .section-title { font-size: 20px; }
    .stat-num { font-size: 30px; }

    .news-item__title { font-size: 14px; }
    .product-card__title { font-size: 14px; }
}

/* Print */
@media print {
    .site-header, .site-footer, .back-to-top, .hero__dots, .hero__arrow,
    .mobile-menu-toggle, .lang-switcher { display: none !important; }
    body { color: #000; background: #fff; }
    .hero { height: auto; min-height: 0; }
    .section { padding: 24px 0; }
}