/* 现代化卡片弹性布局系统 - 彻底解决卡片尺寸问题 */

/* 使用更高优先级重写原始CSS规则 */
body .grids,
html .grids {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin: 0 -10px 20px !important;
    gap: 0 !important;
}

/* 单页面特殊处理 - 确保不影响文章页面布局 */
body.single .grids,
body.page .grids,
html.single .grids,
html.page .grids {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    margin: 0 -10px 20px !important;
    gap: 0 !important;
}

/* 确保下载框不受影响 */
body.single .erphpdown-box,
body.page .erphpdown-box,
body.single .erphpdown,
body.page .erphpdown {
    display: block !important;
    position: relative !important;
    z-index: 999 !important;
    width: auto !important;
    margin: 20px 0 !important;
    float: none !important;
    flex: none !important;
}

/* 重写网格卡片布局 */
body .grids .grid,
html .grids .grid,
body .grids .list,
html .grids .list {
    flex: 0 0 auto !important;
    width: calc(25% - 20px) !important;
    min-width: 260px !important;
    max-width: 320px !important;
    margin: 0 10px 20px !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--card-bg) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    height: auto !important;
}

/* 卡片扫光效果 */
body .grids .grid::before,
html .grids .grid::before,
body .grids .list::before,
html .grids .list::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: var(--border-radius) !important;
}

/* 触发扫光动画 */
body .grids .grid:hover::before,
html .grids .grid:hover::before,
body .grids .list:hover::before,
html .grids .list:hover::before {
    left: 100% !important;
}

/* 卡片悬浮效果 */
body .grids .grid:hover,
html .grids .grid:hover,
body .grids .list:hover,
html .grids .list:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* 图片容器 */
body .grids .grid .img,
html .grids .grid .img,
body .grids .list .img,
html .grids .list .img {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    position: relative !important;
    margin: 0 !important;
    float: none !important;
    z-index: 2 !important;
}

/* 图片样式 */
body .grids .grid .img img,
html .grids .grid .img img,
body .grids .list .img img,
html .grids .list .img img,
body .grids .grid .thumb,
html .grids .grid .thumb,
body .grids .list .thumb,
html .grids .list .thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
}

/* 图片悬浮缩放效果 */
body .grids .grid:hover .img img,
html .grids .grid:hover .img img,
body .grids .list:hover .img img,
html .grids .list:hover .img img,
body .grids .grid:hover .thumb,
html .grids .grid:hover .thumb,
body .grids .list:hover .thumb,
html .grids .list:hover .thumb {
    transform: scale(1.05) !important;
}

/* 内容区域 */
body .grids .grid .con,
html .grids .grid .con,
body .grids .list .con,
html .grids .list .con {
    flex: 1 1 auto !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 标题样式 */
body .grids .grid h3,
html .grids .grid h3,
body .grids .list h3,
html .grids .list h3 {
    margin: 0 0 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    flex: 0 0 auto !important;
    color: var(--text-primary) !important;
    position: relative !important;
    z-index: 2 !important;
}

body .grids .grid h3 a,
html .grids .grid h3 a,
body .grids .list h3 a,
html .grids .list h3 a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
}

body .grids .grid h3 a:hover,
html .grids .grid h3 a:hover,
body .grids .list h3 a:hover,
html .grids .list h3 a:hover {
    color: var(--primary-color) !important;
}

/* 描述文字 */
body .grids .grid .desc,
html .grids .grid .desc,
body .grids .list .desc,
html .grids .list .desc {
    flex: 1 1 auto !important;
    margin: 0 0 15px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    position: relative !important;
    z-index: 2 !important;
}

/* 元信息区域 */
body .grids .grid .grid-meta,
html .grids .grid .grid-meta,
body .grids .list .list-meta,
html .grids .list .list-meta {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--text-tertiary) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    height: auto !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 2 !important;
}

/* 分类标签 */
body .grids .grid .cat,
html .grids .grid .cat,
body .grids .list .cat,
html .grids .list .cat {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 3 !important;
    padding: 4px 8px !important;
    border-radius: var(--border-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: white !important;
    text-decoration: none !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-block !important;
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
}

body .grids .grid .cat:after,
html .grids .grid .cat:after,
body .grids .list .cat:after,
html .grids .list .cat:after {
    display: none !important;
}

body .grids .grid .cat a,
html .grids .grid .cat a,
body .grids .list .cat a,
html .grids .list .cat a {
    color: white !important;
    text-decoration: none !important;
}

body .grids .grid .cat:hover,
html .grids .grid .cat:hover,
body .grids .list .cat:hover,
html .grids .list .cat:hover {
    transform: scale(1.05) !important;
    box-shadow: var(--shadow-md) !important;
}

/* 价格和标签 */
body .grids .grid .grid-meta .price,
html .grids .grid .grid-meta .price,
body .grids .list .list-meta .price,
html .grids .list .list-meta .price {
    margin: 0 !important;
    float: none !important;
    flex: 0 0 auto !important;
}

body .grids .grid .vip-tag,
html .grids .grid .vip-tag,
body .grids .grid .free-tag,
html .grids .grid .free-tag,
body .grids .grid .tuan-tag,
html .grids .grid .tuan-tag,
body .grids .list .vip-tag,
html .grids .list .vip-tag,
body .grids .list .free-tag,
html .grids .list .free-tag,
body .grids .list .tuan-tag,
html .grids .list .tuan-tag {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 3 !important;
    padding: 4px 8px !important;
    border-radius: var(--border-radius-sm) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: white !important;
    box-shadow: var(--shadow-sm) !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* 响应式布局 */
@media (max-width: 1200px) {
    body .grids .grid,
    html .grids .grid,
    body .grids .list,
    html .grids .list {
        width: calc(33.333% - 20px) !important;
        min-width: 240px !important;
    }
}

@media (max-width: 900px) {
    body .grids .grid,
    html .grids .grid,
    body .grids .list,
    html .grids .list {
        width: calc(50% - 20px) !important;
        min-width: 220px !important;
    }
}

@media (max-width: 600px) {
    body .grids,
    html .grids {
        margin: 0 -5px 15px !important;
    }
    
    body .grids .grid,
    html .grids .grid,
    body .grids .list,
    html .grids .list {
        width: calc(50% - 10px) !important;
        min-width: 160px !important;
        margin: 0 5px 15px !important;
    }
    
    body .grids .grid .img,
    html .grids .grid .img,
    body .grids .list .img,
    html .grids .list .img {
        height: 120px !important;
    }
    
    body .grids .grid .con,
    html .grids .grid .con,
    body .grids .list .con,
    html .grids .list .con {
        padding: 10px !important;
    }
    
    body .grids .grid h3,
    html .grids .grid h3,
    body .grids .list h3,
    html .grids .list h3 {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
}

@media (max-width: 400px) {
    body .grids .grid,
    html .grids .grid,
    body .grids .list,
    html .grids .list {
        width: calc(100% - 10px) !important;
        min-width: auto !important;
    }
}

/* 修复列表视图的特殊样式 */
body .lists .grid,
html .lists .grid {
    width: calc(50% - 20px) !important;
    min-width: 300px !important;
    flex-direction: row !important;
    height: 120px !important;
    padding: 0 !important;
}

body .lists .grid .img,
html .lists .grid .img {
    flex: 0 0 auto !important;
    width: 160px !important;
    height: 120px !important;
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

body .lists .grid .img img,
html .lists .grid .img img,
body .lists .grid .thumb,
html .lists .grid .thumb {
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

body .lists .grid .con,
html .lists .grid .con {
    flex: 1 1 auto !important;
    padding: 15px !important;
    height: 120px !important;
}

@media (max-width: 768px) {
    body .lists .grid,
    html .lists .grid {
        width: calc(100% - 20px) !important;
        min-width: auto !important;
        height: 100px !important;
    }
    
    body .lists .grid .img,
    html .lists .grid .img {
        width: 140px !important;
        height: 100px !important;
    }
    
    body .lists .grid .con,
    html .lists .grid .con {
        height: 100px !important;
        padding: 10px !important;
    }
}

/* 音频卡片特殊处理 */
body .grids .audio,
html .grids .audio {
    flex-direction: column !important;
    height: auto !important;
    min-height: 200px !important;
}

/* 瀑布流布局支持 */
body .grids.waterfall,
html .grids.waterfall {
    column-count: auto !important;
    column-width: 285px !important;
    column-gap: 20px !important;
    display: block !important;
}

body .grids.waterfall .grid,
html .grids.waterfall .grid {
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    break-inside: avoid !important;
    flex: none !important;
}