/* ===== 最新真题「场次行 + 等级胶囊」共享样式 =====
   由 home_page.html 与 lemon_oj/question_bank_page.html 共同引用
   （原先只写在 home_page.css 里，题库页要用就得复制一份、日后必然漂移）。

   注意：CSS 变量一律带兜底值。首页加载 home_page.css 时用 :root 里的
   实际值；其他页面（如在线题库页）不加载 home_page.css，自动落到兜底值，
   两边视觉一致。 */

/* 一场考试含 1~8 级多套试卷。若按试卷逐个出卡，页面会出现一排
   「除等级外完全一样」的卡片（同一场考试被拆成 5 张），所以改为
   一场一行：左侧日期块 + 右侧等级胶囊，信息密度更高、层次更清楚。 */
.exam-session-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.exam-session {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1.5rem);
    /* 纵向只留 1rem：行高本就由内容（日期块 / 等级胶囊）决定，
       再大的上下留白只是把区块拉长 */
    padding: var(--spacing-sm, 1rem) var(--spacing-md, 1.5rem);
    background: white;
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.12);
    transition: var(--transition-base, all 0.3s);
}

.exam-session:hover {
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.2);
}

/* 左侧日期块 */
.exam-session-date {
    flex-shrink: 0;
    width: 5.5rem;
    padding: 0.6rem 0;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #3298dc 0%, #3273dc 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.exam-session-month {
    font-size: 1.3rem;
    font-weight: 700;
}

.exam-session-year {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

/* 右侧场次信息 */
.exam-session-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.exam-session-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.exam-session-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.exam-session-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted, #7a7a7a);
}

/* ---- 等级胶囊：每个等级一个色，白底彩字，点击进对应试卷 ----
   一行只有 8 个固定宽度的小胶囊时，行尾会剩下近一半空白；让胶囊
   flex-grow 等分剩余宽度后，整行正好铺满到「共 N 套试卷」的右边缘，
   等级也更好点。上限 9.5rem：场次纸数很少时不会把胶囊拉成巨块 */
.exam-level-chips {
    display: flex;
    flex-wrap: wrap;
    /* 间距 0.5rem：八颗连成一排时，靠间距把"一条带子"拆成
       一颗颗独立胶囊，避免"密集"感（胶囊 flex-grow，间距变宽后
       整行依旧铺满，只是每颗略短） */
    gap: 0.5rem;
}

.exam-level-chip {
    flex: 1 1 auto;
    min-width: 3.2rem;
    max-width: 9.5rem;
    padding: 0.25rem 0.6rem;
    /* 无边框：靠极淡的等级色底 + 彩字区分，一排八颗不会连成厚重的色带，
       也比虚线边框更干净；hover 时整颗填满等级色（用阴影表达可点击） */
    border: none;
    border-radius: 20px;
    /* 等级色底：一行八颗连起来读作"绿→红"的难度等级条 */
    background: color-mix(in srgb, var(--chip-color, var(--primary-color, #3273dc)) 12%, white);
    color: var(--chip-color, var(--primary-color, #3273dc));
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-base, all 0.3s);
}

.exam-level-chip:hover {
    background: var(--chip-color, var(--primary-color, #3273dc));
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

/* 等级 1→8 由绿到红，直观对应难度递进 */
.exam-level-chip.level-1 { --chip-color: #2e7d32; }
.exam-level-chip.level-2 { --chip-color: #00897b; }
.exam-level-chip.level-3 { --chip-color: #0277bd; }
.exam-level-chip.level-4 { --chip-color: #3949ab; }
.exam-level-chip.level-5 { --chip-color: #5e35b1; }
.exam-level-chip.level-6 { --chip-color: #8e24aa; }
.exam-level-chip.level-7 { --chip-color: #ef6c00; }
.exam-level-chip.level-8 { --chip-color: #c62828; }

/* ===== 响应式：窄屏日期块横排、胶囊换行 ===== */
@media (max-width: 768px) {
    .exam-session {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm, 1rem);
        padding: var(--spacing-sm, 1rem);
    }

    .exam-session-date {
        width: auto;
        flex-direction: row;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.35rem 0;
    }

    .exam-session-month {
        font-size: 1.05rem;
    }

    .exam-session-count {
        margin-left: 0;
    }

    /* 窄屏胶囊仍伸展但上限收到 5rem：换行成两行时，
       两行的胶囊宽度不会差太多 */
    .exam-level-chip {
        min-width: 2.9rem;
        max-width: 5rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
}