/* ==========================================
   移动端卡片交互增强 - 完美的触摸反馈
   ========================================== */

@media (max-width: 768px) {
    
    /* ========== 触摸反馈增强 ========== */
    
    /* 景点卡片触摸反馈 */
    .attraction-advanced-card {
        position: relative;
        will-change: transform;
    }
    
    .attraction-advanced-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        border-radius: inherit;
    }
    
    .attraction-advanced-card:active::after {
        opacity: 0.5;
    }
    
    /* 酒店卡片触摸反馈 */
    .hotel-card {
        position: relative;
        will-change: transform;
    }
    
    .hotel-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0) 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        border-radius: inherit;
    }
    
    .hotel-card:active::after {
        opacity: 0.4;
    }
    
    /* 美食卡片触摸反馈 */
    .food-card {
        position: relative;
        will-change: transform;
    }
    
    .food-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(245, 87, 108, 0.15) 0%, rgba(245, 87, 108, 0) 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        border-radius: inherit;
    }
    
    .food-card:active::after {
        opacity: 0.4;
    }
    
    /* 文化卡片触摸反馈 */
    .culture-item {
        position: relative;
        will-change: transform;
    }
    
    .culture-item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(79, 172, 254, 0) 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        border-radius: inherit;
    }
    
    .culture-item:active::after {
        opacity: 0.4;
    }
    
    /* 文章卡片触摸反馈 */
    .article-card {
        position: relative;
        will-change: transform;
    }
    
    .article-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 107, 107, 0.15) 0%, rgba(255, 107, 107, 0) 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        border-radius: inherit;
    }
    
    .article-card:active::after {
        opacity: 0.4;
    }
    
    /* ========== 按钮优化 ========== */
    
    .btn-action,
    .btn,
    button,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* 按钮涟漪效果 */
    .btn-action::before,
    button::before,
    a[role="button"]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
        pointer-events: none;
    }
    
    .btn-action:active::before,
    button:active::before,
    a[role="button"]:active::before {
        width: 300px;
        height: 300px;
    }
    
    /* ========== 文本选择优化 ========== */
    
    .attraction-title-enhanced,
    .hotel-title,
    .food-title,
    .culture-title,
    .article-title {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    /* ========== 阴影优化 ========== */
    
    .attraction-advanced-card,
    .hotel-card,
    .food-card,
    .culture-item,
    .article-card {
        box-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.08),
            0 4px 12px rgba(0, 0, 0, 0.06);
    }
    
    .attraction-advanced-card:active,
    .hotel-card:active,
    .food-card:active,
    .culture-item:active,
    .article-card:active {
        box-shadow: 
            0 2px 6px rgba(0, 0, 0, 0.12),
            0 8px 20px rgba(0, 0, 0, 0.1);
    }
    
    /* ========== 图片优化 ========== */
    
    .attraction-image-container img,
    .hotel-image-wrapper img,
    .food-image-container img,
    .culture-item img,
    .article-image {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        pointer-events: none;
    }
    
    /* ========== 长按菜单禁用 ========== */
    
    .attraction-advanced-card,
    .hotel-card,
    .food-card,
    .culture-item,
    .article-card {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    
    /* ========== 卡片加载动画 ========== */
    
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }
        100% {
            background-position: 1000px 0;
        }
    }
    
    .attraction-advanced-card.loading,
    .hotel-card.loading,
    .food-card.loading,
    .culture-item.loading,
    .article-card.loading {
        background: linear-gradient(
            90deg,
            #f0f0f0 25%,
            #f8f8f8 50%,
            #f0f0f0 75%
        );
        background-size: 1000px 100%;
        animation: shimmer 2s infinite;
    }
    
    /* ========== 无障碍性增强 ========== */
    
    .attraction-advanced-card:focus,
    .hotel-card:focus,
    .food-card:focus,
    .culture-item:focus,
    .article-card:focus {
        outline: 2px solid #FF6B6B;
        outline-offset: 2px;
    }
    
    .btn-action:focus,
    button:focus,
    a[role="button"]:focus {
        outline: 2px solid #FF6B6B;
        outline-offset: 2px;
    }
    
    /* ========== 滚动性能优化 ========== */
    
    .attraction-item,
    .hotel-item,
    .food-item,
    .culture-item,
    .article-card {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* ========== 标签样式增强 ========== */
    
    .attraction-meta-enhanced i,
    .food-category-badge,
    .culture-badge,
    .rating-badge {
        transform: translateZ(0);
    }
    
    /* ========== 文本截断优化 ========== */
    
    .attraction-title-enhanced,
    .hotel-title,
    .food-title,
    .culture-title,
    .article-title {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* ========== 图片加载占位符 ========== */
    
    .attraction-image-container,
    .hotel-image-wrapper,
    .food-image-container,
    .culture-item {
        background: linear-gradient(
            135deg,
            #f0f4f8 0%,
            #e0e7f1 100%
        );
        min-height: 140px;
    }
    

}

/* ========== 平板设备特殊处理 ========== */
@media (max-width: 1024px) and (min-width: 768px) {
    
    .attraction-advanced-card,
    .hotel-card,
    .food-card,
    .culture-item,
    .article-card {
        transition: all 0.2s ease;
    }
    
    .attraction-advanced-card:hover,
    .hotel-card:hover,
    .food-card:hover,
    .culture-item:hover,
    .article-card:hover {
        transform: translateY(-2px);
        box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.1),
            0 8px 24px rgba(0, 0, 0, 0.08);
    }
    
}

/* ========== 超小屏幕 (<= 480px) ========== */
@media (max-width: 480px) {
    
    /* 缩小最小触摸目标，但不能太小 */
    .btn-action,
    button,
    a[role="button"] {
        min-height: 40px;
        min-width: 40px;
    }
    
    /* 减少阴影以节省性能 */
    .attraction-advanced-card,
    .hotel-card,
    .food-card,
    .culture-item,
    .article-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    /* 更轻的过渡 */
    .attraction-advanced-card,
    .hotel-card,
    .food-card,
    .culture-item,
    .article-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
}

/* ========== 低端设备优化 ========== */
@media (prefers-reduced-motion: reduce) {
    
    .attraction-item,
    .hotel-item,
    .food-item,
    .culture-item,
    .article-card {
        animation: none !important;
    }
    
    .attraction-advanced-card,
    .hotel-card,
    .food-card,
    .culture-item,
    .article-card,
    .btn-action,
    button,
    a[role="button"] {
        transition: none !important;
    }
    
    .btn-action::before,
    button::before,
    a[role="button"]::before {
        display: none !important;
    }
    
    .shimmer {
        animation: none !important;
        background: none !important;
    }
    
}