/**
 * responsive.css - 响应式补充样式
 * 对 main.css 的断点覆盖进行补充
 */

/* ============================================
   Tablet：768px 及以下
   ============================================ */
@media (max-width: 768px) {
    .hero-slider {
        min-height: 450px;
        height: 70vh;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 32px;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .cta-section h2 {
        font-size: 1.6rem;
    }
    
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .admin-sidebar.active {
        transform: translateX(0);
    }
    
    .admin-main {
        margin-left: 0 !important;
    }
}

/* ============================================
   Mobile Large：480px - 767px
   ============================================ */
@media (min-width: 481px) and (max-width: 767px) {
    .hero-slider {
        min-height: 400px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
}

/* ============================================
   Mobile Small：480px 及以下
   ============================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    .hero-slider {
        min-height: 350px;
        height: 60vh;
    }
    
    .hero-content h1 {
        font-size: 1.5rem;
    }
    
    .hero-content p {
        font-size: 0.9rem;
    }
    
    .hero-indicators {
        bottom: 20px;
        gap: 8px;
    }
    
    .hero-indicators button {
        width: 10px;
        height: 10px;
    }
    
    .section {
        padding: 48px 0;
    }
    
    .section-title {
        font-size: 1.4rem;
    }
    
    .brand-slogan h2 {
        font-size: 1.2rem;
    }
    
    .advantage-card {
        padding: 24px 16px;
    }
    
    
    .cta-section {
        padding: 48px 0;
    }
    
    .cta-section h2 {
        font-size: 1.4rem;
    }
    
    .about-hero h1,
    .products-hero h1,
    .contact-hero h1 {
        font-size: 1.8rem;
    }
    
    .admin-login-box {
        padding: 24px;
    }
}

/* ============================================
   Desktop Large：1200px 及以上
   ============================================ */
@media (min-width: 1200px) {
    .container {
        padding: 0 40px;
    }
}

/* ============================================
   打印样式
   ============================================ */
@media print {
    .header,
    .hero-slider,
    .footer,
    .nav-desktop,
    .menu-toggle,
    .nav-mobile {
        display: none !important;
    }
    
    .main-content {
        padding-top: 0 !important;
    }
    
    body {
        color: #000;
        background: #fff;
    }
}