/* 浏览器兼容性修复 */

/* CSS Grid 后备方案 */
.city-grid,
#featuredCities {
    display: -webkit-grid;
    display: -ms-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    -ms-grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    -webkit-grid-gap: 30px;
    -ms-grid-gap: 30px;
    grid-gap: 30px;
}

/* Safari specific fixes */
@supports (-webkit-appearance: none) {
    .city-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    .city-image {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Chrome specific fixes */
@supports (-webkit-background-clip: text) {
    .hero h1 {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Flexbox 后备方案 */
.city-actions {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* CSS变量后备方案 */
.city-card {
    background: white;
    background: var(--background-color, white);
    border-radius: 16px;
    border-radius: var(--border-radius-lg, 16px);
}

.btn-primary {
    background-color: #e60012;
    background-color: var(--primary-color, #e60012);
}

.btn-primary:hover {
    background-color: #cc0010;
    background-color: var(--primary-dark, #cc0010);
}

/* Safari transform3d 修复 */
.city-card:hover {
    -webkit-transform: translateY(-8px) translateZ(0);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px) translateZ(0);
}

.city-image {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.city-card:hover .city-image {
    -webkit-transform: scale(1.05) translateZ(0);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05) translateZ(0);
}

/* Object-fit 后备方案 */
.city-image {
    -o-object-fit: cover;
    object-fit: cover;
    /* 对于不支持object-fit的浏览器 */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Box-shadow 统一处理 */
.city-card {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.city-card:hover {
    -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Transition 统一处理 */
.city-card {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.city-image {
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

/* Safari specific WebKit fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .search-input {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
    }
    
    .btn {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
    }
}

/* Font rendering 优化 */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 修复Safari中的Grid问题 */
@supports (display: grid) {
    .tips-container,
    .experiences-grid {
        display: -webkit-grid;
        display: grid;
    }
}

/* 针对不支持Grid的浏览器提供Flexbox后备 */
@supports not (display: grid) {
    #featuredCities {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
    }
    
    .city-card {
        -webkit-flex: 0 1 350px;
        flex: 0 1 350px;
        margin: 15px;
    }
}

/* 移动端Safari修复 */
@media (max-width: 768px) {
    /* 防止Safari中的橡皮筋效果 */
    body {
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    /* 修复Safari中的100vh问题 */
    .hero {
        height: 100vh;
        height: -webkit-fill-available;
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* 浏览器特定样式 */
.browser-safari .city-card {
    /* Safari需要明确的will-change */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.browser-safari .city-image {
    /* Safari中的图片优化 */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.browser-chrome .hero h1 {
    /* Chrome中的字体渲染优化 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 降级支持的样式 */
.fallback-flex {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}

.fallback-flex > * {
    -webkit-flex: 0 1 350px;
    flex: 0 1 350px;
    margin: 15px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .city-card {
        border: 2px solid currentColor;
    }
    
    .btn-primary {
        border: 2px solid currentColor;
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .city-card,
    .city-image,
    .btn {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }
    
    .city-card:hover {
        -webkit-transform: none !important;
        transform: none !important;
    }
}