/**
 * 推举人才页面响应式样式
 * 基于Figma设计稿 (375px) 实现全面响应式支持
 */

/* ========== 基础容器 ========== */
.talent-content {
    position: relative;
    min-height: 2322px;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

/* ========== 响应式断点 ========== */

/* 标准屏幕 (375px) - 保持原始设计 */
@media (min-width: 375px) and (max-width: 414px) {
    .talent-content {
        max-width: 375px;
    }
}

/* 大屏手机 (414px+) - 居中显示 */
@media (min-width: 415px) and (max-width: 767px) {
    .talent-content {
        max-width: 375px;
        margin: 0 auto;
    }
}

/* 平板 (768px+) - 居中 + 阴影 */
@media (min-width: 768px) and (max-width: 1023px) {
    .talent-content {
        max-width: 375px;
        margin: 0 auto;
        box-shadow: 0 0 30px rgba(0,0,0,0.15);
    }
}

/* 桌面 (1024px+) - 固定宽度居中 */
@media (min-width: 1024px) {
    .talent-content {
        max-width: 375px;
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0,0,0,0.2);
    }
}

/* 超小屏 (<375px) - 整体缩放 */
@media (max-width: 374px) {
    .talent-content {
        transform: scale(calc(100vw / 375));
        transform-origin: top center;
        width: 375px;
    }

    /* 调整最小高度避免截断 */
    .talent-content {
        min-height: calc(2322px * (100vw / 375));
    }
}

/* 极小屏 (<320px) - 进一步缩放 */
@media (max-width: 319px) {
    .talent-content {
        transform: scale(calc(100vw / 375));
        font-size: 0.9em;
    }
}

/* ========== 滚动优化 ========== */
html, body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
}

html {
    scroll-behavior: smooth;
}

/* 确保页面可以滚动 */
.container {
    overflow-y: visible !important;
    height: auto !important;
}

.page-wrapper {
    overflow-y: visible !important;
    min-height: 100vh;
}

/* ========== 交互效果 ========== */

/* 按钮悬停效果 */
.talent-content div[style*="cursor:pointer"],
.talent-content div[style*="background: #c8c6c6"] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.talent-content div[style*="cursor:pointer"]:hover,
.talent-content div[style*="background: #c8c6c6"]:hover {
    opacity: 0.9;
}

.talent-content div[style*="cursor:pointer"]:active,
.talent-content div[style*="background: #c8c6c6"]:active {
    opacity: 0.7;
}

/* ========== 图片优化 ========== */
.talent-content img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    max-width: 100%;
    height: auto;
}

/* ========== 字体渲染 ========== */
.talent-content p,
.talent-content div {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 白色文字阴影 (提升可读性) */
.talent-content p[style*="color: white"],
.talent-content p[style*="color:white"] {
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ========== 触摸设备优化 ========== */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备 */
    .talent-content div[style*="background: #c8c6c6"] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }
}

/* ========== 横屏模式优化 ========== */
@media (orientation: landscape) and (max-height: 500px) {
    .talent-content {
        min-height: auto;
    }
}

/* ========== 高分辨率屏幕优化 ========== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .talent-content img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========== 打印样式 ========== */
@media print {
    .talent-content {
        max-width: 100%;
        box-shadow: none;
        transform: none;
    }
}

/* ========== 减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ========== 暗黑模式支持 ========== */
@media (prefers-color-scheme: dark) {
    /* 保持原始设计，不应用暗黑模式 */
}

/* ========== 确保内容在导航栏上方 ========== */
.talent-content {
    z-index: 1;
    position: relative;
    padding-bottom: 100px; /* 为底部导航留出空间 */
}

/* ========== 性能优化 ========== */
.talent-content {
    will-change: transform;
    contain: layout style paint;
}

/* GPU加速 */
.talent-content div[style*="position: absolute"],
.talent-content p[style*="position: absolute"] {
    transform: translateZ(0);
    backface-visibility: hidden;
}