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

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

/* 全区域链接（包含文字区域） */
.cwc-card-link-full {
    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-wrapper {
    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-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: 11px;
    transition: color 0.3s ease, background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

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

/* 1. 背景放大效果 (默认都有) */
.cwc-card-container:hover .cwc-card-bg,
.cwc-card-wrapper: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);
}

/* 4. 链接悬停鼠标样式 */
.cwc-card-link,
.cwc-card-link-full {
    cursor: pointer;
}

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

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

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