/* 首页：练听力主区 | 右栏（未登录=登录卡，已登录=续学卡）
 *
 * token 与登录页 / 列表页 / 练听力主页同源（见 list-common.css 头部）：
 *   底色 #FFF9F1 / 分隔与描边 #F3E3C8 / 重点色 #FF9600
 *   标题 800 字重 #2A2318 / 正文灰 #6B5B44、#4A3E2C
 */

/* 视口高度减去顶栏 56px 与页脚占位 62px，让分屏正好铺满且不产生滚动条 */
.home-page {
    min-height: calc(100vh - 56px - 62px);
    display: flex;
    flex-direction: column;
    background: #FFF9F1;
}

.home-nav {
    border-bottom: 2px solid #F3E3C8;
}

/* 满幅分屏：左侧练听力与右栏直接铺满视口，中间只用 2px 分隔线，不再有卡片边框与间隙。
   负外边距抵消 container-fluid 的左右内边距 */
.home-split {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 2px 486px;
    margin: 0 -15px; /* 抵消 container-fluid 的左右内边距；底部留白由页脚占位负责 */
}

.home-split-divider {
    background: #F3E3C8;
}

/* 练听力主区：行轨为 bar / 标题块 / CTA，整块在左栏内垂直居中 */
.home-panel {
    position: relative;
    display: grid;
    grid-template-rows: repeat(3, auto);
    align-content: center;
    padding: 56px 64px;
    background: #FFF3E2;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s;
}
.home-panel:hover,
.home-panel:focus {
    text-decoration: none;
}
.home-panel:hover {
    background: #FFEFD6;
}
.home-panel:focus-visible {
    outline: 3px solid #4A7CF0;
    outline-offset: -3px;
}

.home-panel-bar {
    width: 52px;
    height: 5px;
    border-radius: 99px;
    margin-bottom: 22px;
    background: #FF9600;
}

.home-panel-title {
    font-size: 62px;
    font-weight: 800;
    color: #2A2318;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin-bottom: 14px;
}

.home-panel-desc {
    font-size: 16.5px;
    line-height: 1.6;
    color: #6B5B44;
    margin-bottom: 30px;
}

/* CTA：整卡是链接，这里只做文字样式 */
.home-panel-cta {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: #B36A00;
    transition: color .2s;
}
.home-panel:hover .home-panel-cta {
    color: #8A5200;
}
.home-panel-cta svg {
    transition: transform 0.25s;
}
.home-panel:hover .home-panel-cta svg {
    transform: translateX(4px);
}

/* ---------- 右栏 ---------- */

.home-aside {
    display: flex;
    align-items: center;
    padding: 40px 32px;
    background: #FFF9F1;
}

.home-aside-slot {
    width: 100%;
}

/* 登录卡在 /login 上是页面级居中的窄卡，嵌进右栏要去掉那套定位 */
.home-aside .login-card {
    max-width: none;
    margin: 0;
    padding: 28px 28px 24px;
}

/* ---------- 已登录：继续上次精听 ---------- */

.home-resume-card {
    padding: 28px 28px 24px;
    background: #fff;
    border: 2px solid #F3E3C8;
    border-radius: 24px;
}

.home-resume-label {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #7A6A52;
}

.home-resume-title {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    color: #3D3428;
}

.home-resume-meta {
    margin-bottom: 18px;
    font-size: 13px;
    color: #6B5B44;
}

.home-resume-progress {
    height: 8px;
    margin-bottom: 24px;
    border-radius: 99px;
    background: #FFF1D6;
    overflow: hidden;
}

.home-resume-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: #FF9600;
    transition: width .3s;
}
.home-resume-progress-fill.completed {
    background: #1F8A44;
}

/* 与登录卡主按钮同款（#FF9600 上用深棕字，白字只有 2.2:1 不过 AA） */
.home-resume-btn {
    display: block;
    padding: 13px 24px;
    background: #FF9600;
    border-bottom: 4px solid #D97E00;
    border-radius: 14px;
    color: #3D3428;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}
.home-resume-btn:hover,
.home-resume-btn:focus {
    background: #F08D00;
    color: #3D3428;
    text-decoration: none;
}

.home-resume-divider {
    display: flex;
    align-items: center;
    margin: 24px 0 16px;
    font-size: 13px;
    color: #7A6A52;
}
.home-resume-divider::before,
.home-resume-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #F3E3C8;
}
.home-resume-divider span {
    padding: 0 16px;
}

.home-resume-stats {
    display: flex;
    gap: 28px;
}

.home-resume-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #3D3428;
}

.home-resume-stat-unit {
    font-size: 13px;
    font-weight: 700;
    color: #7A6A52;
}

.home-resume-stat-label {
    margin-top: 2px;
    font-size: 12px;
    color: #8A7A60;
}

/* 响应式：移动端上下堆叠 */
@media (max-width: 767px) {
    .home-page {
        min-height: calc(100vh - 48px - 62px); /* 移动端顶栏 48px */
    }
    .home-split {
        grid-template-columns: 1fr;
        align-content: start; /* 堆叠后总高常超视口，居中会让首屏顶部内容滚不到 */
    }
    /* 堆叠顺序沿用文档顺序：练听力 → 卡片，
       未登录访客的首屏仍然是「练听力」而不是一张登录表单 */
    .home-aside {
        padding: 28px 20px 36px;
    }
    .home-split-divider {
        height: 2px;
    }
    .home-panel {
        padding: 40px 28px;
        min-height: 250px;
    }
    .home-panel-title {
        font-size: 40px;
    }
    .home-panel-desc {
        margin-bottom: 22px;
    }
}