/* ============================================
   案例列表模块（Case List）
   用途：category-anli.html 右侧内容区内的案例卡片列表
   布局：一行 3 列卡片网格，每张卡片包含案例图片 + 案例标题
   作用域：仅作用于 .about__content 内的 .anli__list，
           通过祖先选择器限定，避免影响页面其他区域
   ============================================ */
.about__content {
    padding-top: 0px;
}


/* --------------------------------------------
   列表容器 - .anli__list
   作用：定义 3 列网格布局与卡片间距
   -------------------------------------------- */
.about__content .anli__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}


/* --------------------------------------------
   案例卡片 - .anli__item
   作用：单条案例的容器，整体作为可点击链接
   -------------------------------------------- */
.about__content .anli__item {
    display: flex;
    flex-direction: column;
    background-color: var(--header-color-white);
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    transition: box-shadow 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}

/* 卡片悬停效果：上浮 + 加深阴影 + 边框变深 */
.about__content .anli__item:hover {
    border-color: #e0e0e0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}


/* --------------------------------------------
   案例图片容器 - .anli__item-media
   作用：固定 4:3 比例的图片展示区
   -------------------------------------------- */
.about__content .anli__item-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f5f5f5;
}


/* --------------------------------------------
   案例图片 - .anli__item-image
   作用：铺满容器，悬停时轻微放大
   -------------------------------------------- */
.about__content .anli__item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 卡片悬停时图片轻微放大，增强交互反馈 */
.about__content .anli__item:hover .anli__item-image {
    transform: scale(1.05);
}


/* --------------------------------------------
   文字信息区 - .anli__item-body
   作用：图片下方的案例标题容器
   -------------------------------------------- */
.about__content .anli__item-body {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 22px;
    flex: 1;
}


/* --------------------------------------------
   案例标题 - .anli__item-title
   作用：卡片底部案例标题，限制单行省略
   -------------------------------------------- */
.about__content .anli__item-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: color 0.3s ease;
}

/* 卡片悬停时标题强调色彩 */
.about__content .anli__item:hover .anli__item-title {
    color: var(--header-color-accent-2);
}


/* ============================================
   响应式适配（Responsive）
   ============================================ */

/* 平板端：≤1024px 降为 2 列布局，缩小间距 */
@media screen and (max-width: 1024px) {
    .about__content .anli__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* 移动端：≤600px 降为 1 列布局，压缩内边距与字号 */
@media screen and (max-width: 600px) {
    .about__content .anli__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about__content .anli__item-body {
        padding: 16px 18px 20px;
    }

    .about__content .anli__item-title {
        font-size: 15px;
    }
}