/* 
 * 上海育佳信息科技有限公司网站样式表
 * 响应式布局样式定义
 */

/* 大屏幕设备 (大于等于1200px) */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* 中等屏幕设备 (992px-1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .banner {
        height: 400px;
    }

    .banner-content h2 {
        font-size: 2.2rem;
    }

    .banner-content p {
        font-size: 1.1rem;
    }
}

/* 平板设备 (768px-991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }

    .banner {
        height: 350px;
    }

    .banner-content h2 {
        font-size: 2rem;
    }

    .banner-content p {
        font-size: 1rem;
    }

    .product-grid,
    .case-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .about-content,
    .product-content {
        flex-direction: column;
    }

    .about-text,
    .about-image,
    .product-details,
    .product-image {
        flex: none;
        width: 100%;
    }

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

/* 手机设备 (小于768px) */
@media (max-width: 767px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* 导航菜单响应式处理 */
    .mobile-menu-btn {
        display: block;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        display: block;
    }

    .nav-menu ul {
        flex-direction: column;
        padding: 10px 0;
    }

    .nav-menu ul li {
        margin: 0;
    }

    .nav-menu ul li a {
        display: block;
        padding: 10px 20px;
        border-radius: 0;
    }

    .logo h1 {
        font-size: 1.2rem;
    }

    .logo img {
        height: 40px;
    }

    /* Banner响应式调整 */
    .banner {
        height: 300px;
    }

    .banner-content {
        padding: 20px;
    }

    .banner-content h2 {
        font-size: 1.8rem;
    }

    .banner-content p {
        font-size: 0.9rem;
    }

    /* 产品和案例卡片响应式调整 */
    .product-grid,
    .case-grid {
        grid-template-columns: 1fr;
    }

    .product-card,
    .case-card {
        margin-bottom: 20px;
    }

    /* 页脚响应式调整 */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-section {
        text-align: center;
    }

    /* 表单响应式调整 */
    .contact-form {
        padding: 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    /* 其他页面特定的响应式调整 */
    .about-banner,
    .products-banner,
    .cases-banner,
    .contact-banner {
        height: 200px;
    }

    .about-banner h1,
    .products-banner h1,
    .cases-banner h1,
    .contact-banner h1 {
        font-size: 2rem;
        padding: 15px 30px;
    }

    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-left,
    .timeline-right {
        left: 0;
    }

    .timeline-content {
        text-align: left;
    }

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

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

    .map-container {
        height: 300px;
    }
}

/* 小型手机设备 (小于576px) */
@media (max-width: 575px) {
    .banner {
        height: 250px;
    }

    .banner-content h2 {
        font-size: 1.5rem;
    }

    .banner-content p {
        font-size: 0.85rem;
    }

    .page-title h2 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }

    .product-image,
    .case-image {
        height: 180px;
    }

    .about-banner h1,
    .products-banner h1,
    .cases-banner h1,
    .contact-banner h1 {
        font-size: 1.8rem;
        padding: 12px 25px;
    }
}

/* 打印样式 */
@media print {
    header,
    footer,
    .banner,
    .contact-form,
    .map-container {
        display: none;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    .container {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }

    img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 这里可以添加深色模式的样式 */
    /* 目前暂不启用深色模式 */
}