* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f6f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-top: 15px;
    padding-bottom: 50px;
}

/* 🛠️ 完美恢复：电脑端一行 3 个，手机端根据宽度灵活变成 1 个或 2 个 */
#card-container {
    display: grid;
    /* 允许格子自适应：最小 300px，最大均分剩余空间。
       在大屏（>960px）限制 1200px 下刚好是一行 3 个；在手机窄屏上自动变成一行 1 个，图片清晰大气！ */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    padding: 16px;
    overflow: hidden;          
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* 核心：所有内容向上紧密靠拢，消除中间大间隙 */
}

.card-link {
    cursor: pointer;
    display: block;
    text-decoration: none; 
}

/* 严格锁定 1024x580 纵横比：
   无论卡片在电脑上变宽，还是在手机上变窄，图片都完美严丝合缝，下方绝不留空隙！ */
.card-image-wrapper {
    margin: -16px -16px 16px -16px;
    background-color: #eaeaea;
    overflow: hidden;               
    display: block !important;
    height: auto !important;
    aspect-ratio: 1024 / 580 !important; 
}

.card img {
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: cover;
}

.card p {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px 0 !important; /* 紧凑间距 */
    flex-grow: 0 !important;
    text-align: left !important;
}

.card-footer {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed #edf2f7;
    text-align: left !important;
}

.card-footer span:first-child {
    font-size: 11px;
    color: #718096;
    font-weight: bold;
    background: #edf2f7;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
}

.card-footer span:last-child {
    font-size: 13px;
    color: #1a202c;
    font-weight: 600;
}

#loading {
    text-align: center;
    padding: 30px 0;
    width: 100%;
    grid-column: 1 / -1;
    color: #a0aec0;
    font-size: 14px;
}