/* ========================================
    响应式设计修复 - 解决不同显示器尺寸显示问题
    ======================================== */

/* 现代化设备检测方法说明：
 * 1. (hover: none) and (pointer: coarse) - 触摸设备检测（最准确）
 * 2. (orientation: portrait) - 竖屏设备检测
 * 3. (max-aspect-ratio: 1/1) - 宽高比检测
 * 4. (max-width: 768px) - 传统px检测（兼容性备用）
 * 
 * 优先级：触摸设备检测 > 宽高比检测 > 传统px检测
 */

/* 智能设备检测 - 触摸设备优先 */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {

    /* 触摸设备通用样式 */
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* 触摸设备网格优化 */
    .annotation-grid,
    .areas-grid,
    .advantages-grid,
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 触摸设备卡片优化 */
    .annotation-card,
    .area-card,
    .advantage-card,
    .service-card {
        padding: 20px;
        min-height: auto;
        /* 触摸设备禁用hover效果 */
        transform: none !important;
    }

    /* 触摸设备字体优化 */
    .section-title h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    h1 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* 触摸设备图标优化 */
    .annotation-icon-img,
    .area-icon-img,
    .advantage-icon-img {
        width: 50px;
        height: 50px;
    }

    /* 触摸设备按钮优化 */
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
        min-height: 44px;
        /* 触摸目标最小尺寸 */
        min-width: 16px;
    }
}

/* 竖屏设备检测 */
@media (orientation: portrait) and (max-aspect-ratio: 1/1) {

    /* 竖屏设备特殊优化 */
    .page-hero {
        min-height: 70vh;
    }

    .section-title {
        margin-bottom: 25px;
    }
}

/* 横屏设备检测 */
@media (orientation: landscape) and (min-aspect-ratio: 1/1) {

    /* 横屏设备优化 */
    .page-hero {
        min-height: 60vh;
    }

    .annotation-grid,
    .areas-grid,
    .advantages-grid {
        gap: 25px;
    }
}

/* 1. 统一视口设置 */
@media screen and (max-width: 1400px) {
    .container {
        max-width: 1200px;
        padding: 0 20px;
    }

    /* 大屏幕下的网格优化 */
    .annotation-grid,
    .areas-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    .advantages-grid {
        gap: 30px;
    }
}

@media screen and (max-width: 1200px) {
    .container {
        max-width: 960px;
        padding: 0 25px;
    }

    /* 中等屏幕网格调整 */
    .annotation-grid,
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .advantages-grid {
        gap: 25px;
    }

    /* 标题字体大小调整 */
    .section-title h2 {
        font-size: 1.8rem;
    }

    h1 {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 992px) {
    .container {
        max-width: 720px;
        padding: 0 20px;
    }

    /* 平板端网格调整 */
    .annotation-grid,
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .advantages-grid {
        gap: 20px;
    }

    /* 服务网格调整 */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 字体大小调整 */
    .section-title h2 {
        font-size: 1.6rem;
    }

    h1 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 540px;
        padding: 0 15px;
    }

    /* 手机端单列布局 */
    .annotation-grid,
    .areas-grid,
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .advantages-grid {
        gap: 15px;
        overflow-x: auto;
    }
}

/* 卡片内边距调整 */
.annotation-card,
.area-card,
.advantage-card,
.service-card {
    padding: 20px;
    min-height: auto;
}

/* 字体大小调整 */
.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

h1 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.2rem;
}

/* 图标大小调整 */
.annotation-icon-img,
.area-icon-img,
.advantage-icon-img {
    width: 50px;
    height: 50px;
}

/* 按钮调整 */
.btn {
    padding: 12px 24px;
    font-size: 0.9rem;
}


@media screen and (max-width: 576px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* 小屏手机优化 */
    .annotation-card,
    .area-card,
    .advantage-card,
    .service-card {
        padding: 15px;
    }

    /* 字体大小进一步调整 */
    .section-title h2 {
        font-size: 1.4rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    /* 图标进一步缩小 */
    .annotation-icon-img,
    .area-icon-img,
    .advantage-icon-img {
        width: 40px;
        height: 40px;
    }

    /* 按钮进一步调整 */
    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}

/* 2. 高分辨率屏幕优化 */
@media screen and (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }

    /* 大屏幕下的间距调整 */
    .annotation-grid,
    .areas-grid,
    .advantages-grid {
        gap: 40px;
    }

    /* 字体大小适当增大 */
    .section-title h2 {
        font-size: 2.2rem;
    }

    h1 {
        font-size: 2.8rem;
    }
}

/* 3. 超宽屏优化 */
@media screen and (min-width: 2560px) {
    .container {
        max-width: 2000px;
    }

    /* 超宽屏下的网格调整 */
    .annotation-grid,
    .areas-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .advantages-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 15. 隐藏滚动条但保留滚动能力（通用工具类） */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE/旧 Edge */
    scrollbar-width: none;
    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    /* Chrome/Safari/新 Edge */
    width: 0;
    height: 0;
}

/* 16. 子页面隐藏滚动条（仍可滚动） */
html:has(body.subpage),
body.subpage {
    -ms-overflow-style: none;
    /* IE/旧 Edge */
    scrollbar-width: none;
    /* Firefox */
}

html:has(body.subpage)::-webkit-scrollbar,
body.subpage::-webkit-scrollbar {
    /* Chrome/Safari/新 Edge */
    width: 0;
    height: 0;
}

/* 4. 横屏模式优化 */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .page-hero {
        min-height: 60vh;
    }

    .section-title {
        margin-bottom: 20px;
    }

    .annotation-grid,
    .areas-grid,
    .advantages-grid {
        gap: 15px;
    }
}

/* 5. 打印样式优化 */
@media print {
    .container {
        max-width: 100%;
        padding: 0;
    }

    .annotation-grid,
    .areas-grid,
    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 6. 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 7. 高对比度模式支持 */
@media (prefers-contrast: high) {

    .annotation-card,
    .area-card,
    .advantage-card,
    .service-card {
        border: 2px solid #00c6ff;
        background: rgba(0, 0, 0, 0.8);
    }

    .btn {
        border: 2px solid #00c6ff;
    }
}

/* 8. 深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 保持现有的深色主题 */
}

/* 9. 触摸设备优化 - 更精确的触摸设备检测 */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {

    .annotation-card:hover,
    .area-card:hover,
    .advantage-card:hover,
    .service-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }

    /* 增加触摸目标大小 */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* 10. 段落首行缩进样式 */
/* 为所有段落添加首行缩进2字符并左对齐 */
/* p {
    text-indent: 2em !important;
    text-align: left !important;
} */

/* 为特定容器内的段落添加首行缩进并左对齐 */
.content-area p,
.service-description p,
.card-content p,
.advantage-description p,
.service-card p,
.annotation-card p,
.area-card p,
.advantage-content p,
.about-text p,
.contact-text p,
.team-text p,
.case-card p,
.careers-text p,
.testimonial-content p,
.page-title p,
.process-step p,
.contact-action p {
    text-indent: 2em !important;
    text-align: left !important;
}

/* 联系我们区域：副标题与标题基准居中对齐，去除首行缩进 */
.contact .section-title {
    text-align: center !important;
}

.contact .section-title p {
    text-indent: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* 子页面标题区域：与数据标注页保持一致（标题区副文案居中、去首行缩进） */
.page-title {
    text-align: center !important;
}

.page-title p {
    text-indent: 0 !important;
    /* text-align: center !important; */
    text-indent: 2em !important;
}

/* 响应式首行缩进调整 */
@media screen and (max-width: 768px) {

    /* 手机端适当减少缩进 */
    p {
        text-indent: 1.5em;
    }

    .content-area p,
    .service-description p,
    .card-content p,
    .advantage-description p {
        text-indent: 1.5em;
    }
}

@media screen and (max-width: 480px) {

    /* 小屏手机端进一步减少缩进 */
    p {
        text-indent: 2em;
    }

    .content-area p,
    .service-description p,
    .card-content p,
    .advantage-description p {
        text-indent: 2em;
    }
}

/* 11. 移动端面包屑导航修复 - 使用现代媒体查询方法 */
/* 触摸设备检测 - 更准确地识别移动设备 */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {

    /* 面包屑容器样式 */
    .breadcrumb {
        padding: 10px 0;
        text-align: right !important;
        /* 移动端右对齐 */
        position: relative;
        z-index: 5;
        width: 100%;
        display: block;
    }

    .breadcrumb .container {
        justify-content: flex-end !important;
        /* 移动端容器右对齐 */
        align-items: flex-end !important;
        text-align: right !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .breadcrumb-content {
        justify-content: flex-end !important;
        /* 移动端右对齐 */
        flex-wrap: wrap;
        /* 允许换行 */
        gap: 8px;
        font-size: 0.85rem;
        width: 100%;
        text-align: right !important;
        /* 移动端右对齐 */
        margin: 0;
        padding: 0;
    }

    .breadcrumb-item {
        gap: 8px;
        display: flex;
        align-items: center;
        text-align: right !important;
        /* 移动端右对齐 */
        justify-content: flex-end !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-item:not(:last-child)::after {
        content: '>';
        color: rgba(255, 255, 255, 0.6);
        margin-left: 8px;
        font-size: 0.8rem;
    }

    .breadcrumb-link {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 超出显示省略号 */
        display: inline-block;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
        text-align: right !important;
        /* 移动端右对齐 */
        justify-self: flex-end !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-link:hover {
        color: white;
    }

    .breadcrumb-current {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        color: white;
        font-weight: 500;
        text-align: right !important;
        /* 移动端右对齐 */
        justify-self: flex-end !important;
        /* 移动端右对齐 */
    }

    /* 子页面面包屑样式 */
    body.subpage .breadcrumb {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
        backdrop-filter: blur(15px);
    }
}

/* 小屏幕触摸设备优化 */
@media (hover: none) and (pointer: coarse) and (max-width: 480px) {
    .breadcrumb {
        padding: 8px 0;
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb .container {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: flex-end !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-content {
        font-size: 0.8rem;
        gap: 6px;
        justify-content: flex-end !important;
        /* 移动端右对齐 */
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-item {
        gap: 6px;
        justify-content: flex-end !important;
        /* 移动端右对齐 */
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-item:not(:last-child)::after {
        margin-left: 6px;
        font-size: 0.75rem;
    }

    .breadcrumb-link {
        max-width: 100px;
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-current {
        max-width: 120px;
        text-align: right !important;
        /* 移动端右对齐 */
    }
}

/* 兼容性处理 - 为不支持现代媒体查询的浏览器提供备用方案 */
@media screen and (max-width: 768px) {

    /* 面包屑容器样式 */
    .breadcrumb {
        padding: 10px 0;
        text-align: right !important;
        /* 移动端右对齐 */
        position: relative;
        z-index: 5;
        width: 100%;
        display: block;
    }

    .breadcrumb .container {
        justify-content: flex-end !important;
        /* 移动端容器右对齐 */
        align-items: flex-end !important;
        text-align: right !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .breadcrumb-content {
        justify-content: flex-end !important;
        /* 移动端右对齐 */
        flex-wrap: wrap;
        /* 允许换行 */
        gap: 8px;
        font-size: 0.85rem;
        width: 100%;
        text-align: right !important;
        /* 移动端右对齐 */
        margin: 0;
        padding: 0;
    }

    .breadcrumb-item {
        gap: 8px;
        display: flex;
        align-items: center;
        text-align: right !important;
        /* 移动端右对齐 */
        justify-content: flex-end !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-item:not(:last-child)::after {
        content: '>';
        color: rgba(255, 255, 255, 0.6);
        margin-left: 8px;
        font-size: 0.8rem;
    }

    .breadcrumb-link {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 超出显示省略号 */
        display: inline-block;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
        text-align: right !important;
        /* 移动端右对齐 */
        justify-self: flex-end !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-link:hover {
        color: white;
    }

    .breadcrumb-current {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        color: white;
        font-weight: 500;
        text-align: right !important;
        /* 移动端右对齐 */
        justify-self: flex-end !important;
        /* 移动端右对齐 */
    }

    /* 子页面面包屑样式 */
    body.subpage .breadcrumb {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
        backdrop-filter: blur(15px);
    }
}

@media screen and (max-width: 480px) {
    .breadcrumb {
        padding: 8px 0;
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb .container {
        padding-left: 10px;
        padding-right: 10px;
        justify-content: flex-end !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-content {
        font-size: 0.8rem;
        gap: 6px;
        justify-content: flex-end !important;
        /* 移动端右对齐 */
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-item {
        gap: 6px;
        justify-content: flex-end !important;
        /* 移动端右对齐 */
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-item:not(:last-child)::after {
        margin-left: 6px;
        font-size: 0.75rem;
    }

    .breadcrumb-link {
        max-width: 100px;
        text-align: right !important;
        /* 移动端右对齐 */
    }

    .breadcrumb-current {
        max-width: 120px;
        text-align: right !important;
        /* 移动端右对齐 */
    }
}

/* 12. 确保面包屑在子页面正确显示 */
body.subpage .breadcrumb {
    position: relative;
    z-index: 10;
}

/* 13. 面包屑导航容器样式优化 */
.breadcrumb .container {
    display: flex;
    justify-content: flex-end !important;
    /* 改为右对齐 */
    align-items: center;
    text-align: right !important;
    /* 改为右对齐 */
}

/* 强制面包屑右对齐 */
.breadcrumb {
    text-align: right !important;
    /* 改为右对齐 */
}

.breadcrumb-content {
    justify-content: flex-end !important;
    /* 改为右对齐 */
    text-align: right !important;
    /* 改为右对齐 */
}

/* 14. 修复移动端面包屑可能被遮挡的问题 */
@media screen and (max-width: 768px) {
    body.subpage .breadcrumb {
        margin-top: 0;
        position: relative;
        z-index: 5;
    }

    /* 确保面包屑在header下方正确显示 */
    body.subpage .breadcrumb {
        order: 1;
    }

    /* 修复可能的布局问题 */
    .contact-page {
        padding-top: 100px;
        /* 减少顶部间距，为面包屑留出空间 */
    }
    
}