/* 最终图片比例修复方案 - 最高优先级 */

/* 重置wallpaper-card的基础样式 */
.wallpaper-card {
    position: relative !important;
    display: block !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    text-decoration: none !important;
}

/* 为不同比例的卡片设置相应的宽高比 */
.wallpaper-card.card-ratio-16-9 {
    aspect-ratio: 16 / 9 !important;
}

.wallpaper-card.card-ratio-16-10 {
    aspect-ratio: 16 / 10 !important;
}

.wallpaper-card.card-ratio-21-9 {
    aspect-ratio: 21 / 9 !important;
}

.wallpaper-card.card-ratio-9-16 {
    aspect-ratio: 9 / 16 !important;
}

.wallpaper-card.card-ratio-1-1 {
    aspect-ratio: 1 / 1 !important;
}

.wallpaper-card.card-ratio-4-3 {
    aspect-ratio: 4 / 3 !important;
}

.wallpaper-card.card-ratio-3-2 {
    aspect-ratio: 3 / 2 !important;
}

.wallpaper-card.card-ratio-default {
    aspect-ratio: 16 / 9 !important;
}

.wallpaper-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* 图片容器基础样式 - 填充整个卡片 */
.wallpaper-card .image-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f8f8f8 !important;
    overflow: hidden !important;
}

/* 确保图片正确填充容器 */
.image-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 宽高比标签样式 */
.aspect-ratio-tag {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    z-index: 2 !important;
}

/* 卡片内容区域 - 绝对定位在底部 */
.wallpaper-card-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px !important;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
    color: white !important;
    z-index: 1 !important;
}

.wallpaper-card-content h3 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: white !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

/* 网格布局优化 */
.wallpaper-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

/* 针对竖屏比例的特殊处理 */
.wallpaper-grid .wallpaper-card.card-ratio-9-16 {
    grid-row: span 2;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .wallpaper-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .wallpaper-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .wallpaper-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* 特殊页面样式覆盖 */
.featured-wallpapers .wallpaper-grid,
.category-section .wallpaper-grid,
.tag-section .wallpaper-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
}

/* 测试页面特殊样式 */
.test-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.test-grid .wallpaper-card {
    position: relative !important;
}

/* 调试信息样式 - 绝对定位 */
.debug-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    font-size: 12px !important;
    color: white !important;
    padding: 10px !important;
    background: rgba(0,0,0,0.8) !important;
    z-index: 3 !important;
}

/* 比例标签样式 - 用于测试页面 */
.ratio-label {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    z-index: 2 !important;
}

/* 清除任何可能的padding-bottom设置 */
.image-container[class*="ratio-"] {
    padding-bottom: 0 !important;
}

/* 确保没有其他样式干扰 */
.wallpaper-card * {
    box-sizing: border-box !important;
}

/* 移除图片容器的单独比例设置，因为整个卡片已经有比例了 */
.image-container.ratio-16-9,
.image-container.ratio-16-10,
.image-container.ratio-21-9,
.image-container.ratio-9-16,
.image-container.ratio-1-1,
.image-container.ratio-4-3,
.image-container.ratio-3-2,
.image-container.ratio-default {
    aspect-ratio: unset !important;
}