/* 资源下载页面样式：简体中文, 移动端 */

/* 移动端样式 (宽度小于等于768px) */
@media (max-width: 768px) {
    /* 主容器布局 - 使用 Flexbox 垂直排列 */
    .downloads-section {
        display: flex;
        flex-direction: column;
        padding: 0;
        min-height: calc(100vh - 60px);
    }

    .downloads-container {
        max-width: 768px;
        margin: 0 auto;
        width: 100%;
    }

    /* 第一部分：标题和文字区域 */
    .main-content-header {
        display: flex;
        flex-direction: column;
        margin: 1rem 1rem 0 1rem;
        padding: 1rem;
    }

    .main-content-header h1 {
        font-size: 1.75rem; /* 28px */
        font-weight: 700;
        color: #000000;
        margin: 0 0 0.5rem 0;
        line-height: 1.4;
        word-wrap: break-word;
        text-align: center;
        font-family: var(--font-zh-cn);
    }

    .main-content-header p {
        font-size: 1.25rem; /* 20px */
        font-weight: 400;
        color: #666666;
        margin: 0;
        line-height: 1.5;
        text-align: center;
        font-family: var(--font-zh-cn);
    }

    /* 第二部分：下载卡片区域 - 使用 CSS Grid 单列布局 */
    .downloads-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.125rem; /* 18px */
        padding: 0 1.25rem 1.25rem 1.25rem; /* 0 20px 20px 20px */
    }

    /* 单个卡片内部布局 - 使用 Flexbox 垂直排列 */
    .download-card {
        display: flex;
        flex-direction: column; /* 改为垂直方向 */
        height: 400px; /* 400px */
        width: 400px;
        background-color: #ffffff;
        border-radius: 0.5rem; /* 8px */
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* 0 2px 8px */
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* 图片区域 - 占2/3高度 */
    .card-image {
        flex: 2;
        width: 150px;
        height: 150px;
        align-self: center;
        margin: auto;
    }

    /* 文本内容区域 - 占1/3高度 */
    .card-content {
        flex: 1; /* 占1份高度，即1/3 */
        padding: 0.9375rem; /* 15px */
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .card-content h3 {
        font-size: 1.5rem; /* 24px */
        font-weight: bold;
        color: #000000;
        margin: 0 0 0.9375rem 0; /* 0 0 15px 0 */
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
        font-family: var(--font-zh-cn);
    }

    .card-content p {
        font-size: 1.375rem; /* 22px */
        color: #000000;
        margin: 0;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-family: var(--font-zh-cn);
    }

    /* 交互设计 - 点击反馈效果 */
    .download-card:hover {
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); /* 0 4px 12px */
        transform: translateY(-0.0625rem); /* -1px */
    }

    .download-card:active {
        transform: translateY(0);
        box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); /* 0 2px 6px */
    }
}