/* AI学习卡片样式表 */

/* 卡片容器 */
.ai-learning-grid-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 行容器 */
.ai-learning-row-1,
.ai-learning-row-3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    clear: both;
}

.ai-learning-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    clear: both;
}

/* 基础卡片样式 */
.ai-learning-card {
    padding: 0 50px;
    min-height: 140px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 第一行和第三行卡片背景 */
.ai-learning-row-1 .ai-learning-card,
.ai-learning-row-3 .ai-learning-card {
    background-image: url('/imagesx/index/c_bk.png');
}

/* 第二行卡片背景 */
.ai-learning-row-2 .ai-learning-card {
    background-image: url('/imagesx/index/d_bk.png');
}

/* 卡片悬停效果 */
.ai-learning-card:hover {
    transform: translateY(-5px);
}

/* 卡片标题样式 */
.ai-learning-card .title a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ai-learning-card .title a:hover {
    text-decoration: none;
    color: inherit;
}

.ai-learning-card .title h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 8px;
    font-weight: bold;
}

.ai-learning-card .title p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* 卡片图标样式 */
.ai-learning-card .con img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* 热门资源列表项悬停效果 - 使用正确的选择器 */
.modular6 .list .li {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

.modular6 .list .li:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.modular6 .list .li:hover .img img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.modular6 .list .li:hover .text p {
    color: #1976d2;
    transition: color 0.3s ease;
}

.modular6 .list .li .img {
    overflow: hidden;
    border-radius: 6px;
}

.modular6 .list .li .img img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
}

.modular6 .list .li .text p {
    transition: color 0.3s ease;
}