/* ===========================================
   文件：style.css
   WC Category Grid Presets 样式
   =========================================== */

/* 默认变量定义，如果后台没设置会用到这些 */
:root {
    --cg-box-bg: #fff;
    --cg-title-color: #333;
    --cg-count-color: #999;
    --cg-title-hover: #ff4b4b;
    --cg-title-size: 14px;
    --cg-count-size: 12px;
    --cg-img-size: 160px; /* 默认图片容器大小 */
    --cg-hover-translate: 8px;
}

.cg-container {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0; /* 调整为左右0，让全宽更彻底，或者根据主题容器调整 */
}

/* 网格布局：PC 8列 */
.cg-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 24px 0; /* 纵向间距24px，横向0 */
    align-items: start;
}

/* 卡片样式 */
.cg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px; /* 减小内边距，因为图片变大了 */
    text-decoration: none !important; /* 强制去掉下划线 */
    background: var(--cg-box-bg);
    border: none; 
    border-radius: 0; 
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的动效 */
    box-shadow: none; 
    height: auto; /* 高度自适应内容 */
    min-height: 280px; /* 最小高度 */
    box-sizing: border-box;
    justify-content: flex-start;
}

/* 图片容器 */
.cg-thumb-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.cg-thumb {
    width: var(--cg-img-size); 
    height: var(--cg-img-size); 
    border: none;
    border-radius: 0;
    padding: 0; /* 去掉内边距，让图片撑满 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

.cg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例显示完整图片 */
    display: block;
    transition: transform 0.3s ease;
}

/* 内容区域 */
.cg-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5px;
}

/* 标题 */
.cg-title {
    color: var(--cg-title-color);
    font-size: var(--cg-title-size);
    margin: 0 0 4px 0 !important; /* 强制覆盖主题样式 */
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    padding: 0 5px; /* 防止文字贴边 */
}

/* 数量 */
.cg-count {
    color: var(--cg-count-color);
    font-size: var(--cg-count-size);
    transition: color 0.2s ease;
    display: block;
    line-height: 1;
}

/* 悬停效果 */
.cg-card:hover {
    transform: translateY(calc(-1 * var(--cg-hover-translate)));
}

/* 悬停时标题和数量变色 */
.cg-card:hover .cg-title,
.cg-card:hover .cg-count {
    color: var(--cg-title-hover);
}

/* 悬停时图片微缩放（可选增强效果） */
.cg-card:hover .cg-thumb img {
    transform: scale(1.05);
}

/* ===========================================
   响应式设计
   =========================================== */

/* 平板/小笔记本：4列 (防止8列太挤) */
@media (max-width: 1024px) {
    .cg-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===========================================
   响应式设计：手机端调整
   =========================================== */

@media (max-width: 768px) {
    /* 1. 控制整个模块与手机屏幕边缘的距离 */
    .cg-container {
        /* 上下保持20px，左右增加15px的间距，防止贴边 */
        padding: 20px 5px; 
        box-sizing: border-box; /* 确保内边距不撑大宽度 */
    }

    /* 2. 控制网格布局 */
    .cg-grid {
        /* 强制保持两列 */
        grid-template-columns: repeat(2, 1fr);
        
        /* 关键修改：调整间距 */
        /* gap: [行间距] [列间距]; */
        /* 这里改为：上下行距 20px，左右列距 15px */
        gap: 20px 5px; 
    }
    
    /* 3. 卡片微调 */
    .cg-card {
        min-height: auto;
        padding: 10px; /* 卡片内部的留白 */
        
        /* 可选：给手机端卡片加个浅边框，方便看清边界调试（不需要可删除） */
        /* border: 1px solid #f0f0f0; */
    }

        
    /* 5. 字体大小适配 */
    .cg-title {
        font-size: 13px; /* 手机端字体稍小 */
    }
}