/* =========================================
   通用样式
========================================= */

.cwc-card-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
}

/* =========================================
   1. 数字计数器样式
========================================= */

.cwc-counter-wrapper {
    text-align: center;
}

.cwc-number-block {
    line-height: 1;
}

.cwc-label-block {
    margin-top: 5px;
}

/* =========================================
   2. 图片卡片样式
========================================= */

.cwc-card-container {
    position: relative;
    overflow: hidden;
    /* 开启硬件加速，防止动画抖动 */
    transform: translateZ(0);
    /* 定义过渡动画：针对变换、阴影和边框 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    /* 默认边框样式，可被内联样式覆盖 */
    box-sizing: border-box;
}

/* 背景图层 */
.cwc-card-bg {
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* 图片放大的过渡时间稍微长一点，更柔和 */
    transition: transform 0.5s ease;
}

/* 遮罩层 */
.cwc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none; /* 让鼠标事件穿透遮罩 */
}

/* 内容容器（图片上的文字） */
.cwc-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 3;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none; /* 让鼠标事件穿透内容层（链接层在最上面） */
}

/* 文字基础样式 */
.cwc-text {
    font-weight: 500;
    line-height: 1.2;
    /* 颜色变化的过渡 */
    transition: color 0.3s ease;
}

/* 图片下方文字样式 */
.cwc-text-below {
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 5px;
    transition: color 0.3s ease;
}

/* =========================================
   自然图片比例模式（按原图比例）
   .cwc-card-natural 使用 img 自然撑高
========================================= */
.cwc-card-natural {
    display: block;
    line-height: 0; /* 消除 img 底部空白 */
}

.cwc-card-natural .cwc-card-natural-img {
    display: block;
    width: 100%;
    height: auto;
}

/* natural 模式下遮罩和内容层复用绝对定位 */
.cwc-card-natural .cwc-card-overlay,
.cwc-card-natural .cwc-card-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* natural 模式下鼠标悬停背景放大 */
.cwc-card-natural:hover .cwc-card-natural-img {
    transform: scale(1.1);
}
.cwc-card-natural .cwc-card-natural-img {
    transition: transform 0.5s ease;
}

/* =========================================
   交互效果 (Hover Effects)
========================================= */

/* 1. 背景放大效果 (默认都有) */
.cwc-card-container:hover .cwc-card-bg {
    transform: scale(1.1);
}

/* 2. 阴影效果 (通过类名控制) */
.cwc-shadow-hover:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

/* 3. 上浮效果 (通过类名控制) */
.cwc-float-hover:hover {
    transform: translateY(-5px);
}

/* =========================================
   响应式优化
========================================= */

@media (max-width: 768px) {
    .cwc-card-content {
        padding: 15px;
    }
    
    .cwc-text-below {
        padding: 8px 3px;
        font-size: 90% !important;
    }
}

@media (max-width: 480px) {
    .cwc-card-content {
        padding: 10px;
    }
    
    .cwc-text {
        font-size: 85% !important;
    }
    
    .cwc-text-below {
        font-size: 85% !important;
    }
}