/* 分类选择 */
.category {
    display: flex;
    align-items: center;
    margin-bottom: 1.25em; /* 20px */
    flex-wrap: wrap;
}

.category-label {
    font-weight: 600;
    margin-right: 0.94em; /* 15px */
    color: #0d47a1;
}

.links, .difficulty {
    display: flex;
    flex-wrap: wrap;
}

.link {
    display: inline-block;
    margin-right: 0.63em; /* 10px */
    margin-bottom: 0.63em; /* 10px */
    padding: 0.5em 1em; /* 8px 16px */
    background-color: #e7f1ff;
    color: #0d47a1;
    border-radius: 1.25em; /* 20px */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    font-size: 0.875em; /* 14px */
    cursor: pointer;
}

.link:hover {
    background-color: #d0e4ff;
}

.link.active {
    background-color: #0d47a1;
    color: #fff;
}

/* 搜索容器 */
.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.25em; /* 20px */
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    padding: 0.63em 0.94em; /* 10px 15px */
    border: 0.06em solid #ccc; /* 1px */
    border-radius: 1.56em; /* 25px */
    font-size: 1em; /* 16px */
    outline: none;
    transition: border-color 0.3s;
}

.search-input:focus {
    border-color: #0d47a1;
}

.search-button {
    padding: 0.63em 1.25em; /* 10px 20px */
    margin-left: 0.63em; /* 10px */
    background-color: #0d47a1;
    color: #fff;
    border: none;
    border-radius: 1.56em; /* 25px */
    cursor: pointer;
    font-size: 1em; /* 16px */
    transition: background-color 0.3s, transform 0.3s;
}

.search-button:hover {
    background-color: #0056b3;
    transform: translateY(-0.31em); /* -5px */
}

.results-count {
    margin-left: 1.25em; /* 20px */
    font-size: 0.875em; /* 14px */
    color: #555;
}

/* 卡片容器 */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(31.25em, 1fr)); /* 500px */
    gap: 1.25em; /* 20px */
    width: 100%; /* 保持不变 */
    box-sizing: border-box;
}

/* 卡片样式 */
.card {
    background-color: #fff;
    border: 0.06em solid #ddd; /* 1px */
    border-radius: 0.5em; /* 8px */
    padding: 1.25em; /* 20px */
    box-shadow: 0 0.13em 0.25em rgba(0, 0, 0, 0.05); /* 0 2px 4px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s; /* 保持时间单位不变 */
    width: 100%; /* 保持不变 */
    box-sizing: border-box;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-0.31em); /* -5px */
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); /* 0 4px 8px */
}

.card-title {
    font-size: 1.13em; /* 18px */
    font-weight: 600;
    color: #0d47a1;
    margin-bottom: 0.63em; /* 10px */
    max-width: 100%;
    word-wrap: break-word;
}

.card-summary {
    font-size: 0.875em; /* 14px */
    color: #555;
    margin-bottom: 0.94em; /* 15px */
    max-width: 100%;
    word-wrap: break-word;
}

/* 限制所有子元素的最大宽度 */
.card * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

.card-info {
    font-size: 0.875em; /* 14px */
    color: #333;
    margin-bottom: 0.94em; /* 15px */
}

.card-info span {
    display: inline-block;
    margin-right: 0.63em; /* 10px */
    padding: 0.25em 0.5em; /* 4px 8px */
    background-color: #e7f1ff;
    color: #0d47a1;
    border-radius: 0.75em; /* 12px */
    font-size: 0.75em; /* 12px */
}

.card-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.card-actions a {
    text-decoration: underline;
    color: #0d47a1;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.3s;
}

.card-actions a:hover {
    color: #0056b3;
}

/* 响应式设计 */
@media (max-width: 48em) { /* 768px */
    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); /* 200px */
    }
    .category, .search-container {
        flex-direction: row; /* 修改为 row，使搜索按钮和输入框在同一行 */
        align-items: flex-start;
    }

    .search-input {
               width: auto; /* 去除全宽设置，使其和按钮保持同一行 */
        margin-bottom: 0; /* 去除 margin-bottom 保证同一行布局 */
        font-size: 0.9em; /* 调整字体大小 */
    }
       .search-button {
        padding: 0.5em 1em;
        font-size: 0.9em; /* 调整字体大小 */
    }


    .results-count {
        margin-left: 0;
        margin-top: 0.63em; /* 10px */
    }
}