/* 响应式设计 */

/* 平板设备 (768px - 1199px) */
@media (max-width: 1199px) {
    .container {
        padding: 0 16px;
    }
    
    .hero-wrapper,
    .robot-intro-wrapper,
    .protocol-wrapper,
    .support-wrapper,
    .agency-header,
    .agency-wrapper,
    .exchange-wrapper,
    .cloud-wrapper,
    .product-hero-wrapper,
    .product-wrapper {
        gap: 40px;
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .downloads-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .contact-methods {
        gap: 24px;
    }
}

/* 小平板设备 (768px - 991px) */
@media (max-width: 991px) {
    .hero-wrapper,
    .robot-intro-wrapper,
    .protocol-wrapper,
    .support-wrapper,
    .agency-header,
    .agency-wrapper,
    .exchange-wrapper,
    .cloud-wrapper,
    .product-hero-wrapper,
    .product-wrapper,
    .product-detail-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .product-detail-wrapper.reverse {
        grid-template-columns: 1fr;
    }
    
    .product-detail-wrapper.reverse .product-detail-content,
    .product-detail-wrapper.reverse .product-detail-media {
        order: unset;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .protocol-screenshots {
        flex-direction: column;
        gap: 16px;
    }
    
    .product-screenshots {
        flex-direction: column;
        gap: 16px;
    }
    
    .main-nav ul {
        gap: 20px;
    }
    
    .action-buttons,
    .download-actions,
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .action-buttons button,
    .download-actions button,
    .cta-buttons button {
        width: 200px;
    }
}

/* 手机设备 (小于768px) */
@media (max-width: 767px) {
    .container {
        padding: 0 12px;
    }
    
    /* 导航样式调整 */
    .nav-wrapper {
        flex-direction: column;
        gap: 16px;
        padding: 12px 0;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    
    .main-nav a {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    /* 页面标题调整 */
    .page-header {
        padding: 40px 0;
    }
    
    .page-header h1 {
        font-size: 28px;
    }
    
    .product-content h1,
    .agency-info h1 {
        font-size: 24px;
    }
    
    .robot-info h2,
    .protocol-info h2,
    .agency-content h2,
    .exchange-content h2,
    .cloud-content h2,
    .contact-info h2,
    .section-title {
        font-size: 22px;
    }
    
    /* 产品网格调整 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    /* 产品详情调整 */
    .product-details-container {
        padding: 60px 0;
    }
    
    .product-detail-wrapper {
        gap: 40px;
        margin-bottom: 40px;
    }
    
    .product-detail-content h2 {
        font-size: 24px;
    }
    
    .feature-list li {
        font-size: 14px;
        padding: 6px 0;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* 产品网格小屏幕优化 */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .product-item {
        padding: 20px 16px;
    }
    
    .product-item.selected {
        transform: translateY(-2px);
    }
    
    /* 区域内边距调整 */
    .hero-section,
    .products-grid-section,
    .robot-intro-section,
    .wechat-protocol-section,
    .support-section,
    .downloads-section,
    .agency-hero,
    .product-agency-section,
    .exchange-section,
    .cloud-service-section,
    .contact-section,
    .product-hero,
    .wechat-order-section,
    .wechat-private-section,
    .flower-robot-section,
    .features-section,
    .product-details-container {
        padding: 40px 0;
    }
    
    /* 新闻列表调整 */
    .news-item {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .news-image {
        width: 100%;
    }
    
    .news-image img {
        height: 160px;
    }
    
    .news-meta {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .news-meta span:not(:last-child)::after {
        display: none;
    }
    
    /* 文章详情调整 */
    .article-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .article-header h1 {
        font-size: 22px;
    }
    
    /* 联系方式调整 */
    .contact-methods {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* 分页调整 */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .page-link {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* 下载项目调整 */
    .download-item {
        padding: 20px;
    }
    
    .download-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .download-actions button {
        width: 100%;
    }
    
    /* 按钮调整 */
    .download-btn,
    .trial-btn,
    .contact-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    /* 面包屑导航调整 */
    .breadcrumb {
        padding: 12px 0;
    }
    
    .breadcrumb-nav {
        font-size: 12px;
    }
    
    /* 产品图标调整 */
    .product-icon,
    .download-icon,
    .feature-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
    }
    
    .product-icon img,
    .download-icon img,
    .feature-icon img {
        width: 36px;
        height: 36px;
    }
    
    /* 轮播图点调整 */
    .carousel-dots {
        gap: 6px;
        margin-top: 16px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}

/* 超小屏幕设备 (小于480px) */
@media (max-width: 479px) {
    .container {
        padding: 0 8px;
    }
    
    .logo span {
        font-size: 16px;
    }
    
    .page-header h1 {
        font-size: 24px;
    }
    
    .product-content h1,
    .agency-info h1 {
        font-size: 20px;
    }
    
    .robot-info h2,
    .protocol-info h2,
    .agency-content h2,
    .exchange-content h2,
    .cloud-content h2,
    .contact-info h2,
    .section-title {
        font-size: 18px;
    }
    
    .hero-section,
    .products-grid-section,
    .robot-intro-section,
    .wechat-protocol-section,
    .support-section,
    .downloads-section,
    .agency-hero,
    .product-agency-section,
    .exchange-section,
    .cloud-service-section,
    .contact-section,
    .product-hero,
    .wechat-order-section,
    .wechat-private-section,
    .flower-robot-section,
    .features-section {
        padding: 24px 0;
    }
    
    .news-item,
    .download-item,
    .contact-item {
        padding: 12px;
    }
    
    .product-desc,
    .agency-info .subtitle {
        font-size: 14px;
    }
    
    .news-content h2 {
        font-size: 16px;
    }
    
    .article-header h1 {
        font-size: 20px;
    }
    
    .article-content {
        font-size: 14px;
    }
    
    .article-content .lead {
        font-size: 16px;
    }
}

/* 横屏手机优化 */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section,
    .agency-hero,
    .product-hero {
        padding: 30px 0;
    }
    
    .nav-wrapper {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .main-nav ul {
        flex-wrap: nowrap;
        gap: 12px;
    }
    
    .main-nav a {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* 高分辨率屏幕优化 */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-wrapper,
    .robot-intro-wrapper,
    .protocol-wrapper,
    .support-wrapper,
    .agency-header,
    .agency-wrapper,
    .exchange-wrapper,
    .cloud-wrapper,
    .product-hero-wrapper,
    .product-wrapper {
        gap: 80px;
    }
    
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }
    
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }
}

/* 打印样式 */
@media print {
    .header,
    .footer,
    .breadcrumb,
    .pagination,
    .action-buttons,
    .download-actions,
    .cta-buttons,
    .contact-btn {
        display: none;
    }
    
    .main-content {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .hero-wrapper,
    .robot-intro-wrapper,
    .protocol-wrapper,
    .support-wrapper,
    .agency-wrapper,
    .exchange-wrapper,
    .cloud-wrapper,
    .product-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}