/* 首页：练听力主区 + 练口语横条 | 右栏（未登录=登录卡，已登录=续学卡）
 *
 * 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 的左右内边距；底部留白由页脚占位负责 */
}

/* 主区内部再分两行：练听力占 7 份、练口语横条占 3 份。
   主次拉开后练听力独占视觉重心，练口语退成一条入口 */
.home-main {
    display: grid;
    grid-template-rows: 7fr 2px 3fr;
}

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

/* 两栏共享同一套行轨：bar / 标题块 / 要点 / CTA。
   两栏行结构与内容量对称，整块垂直居中即可让标题落在同一基线、CTA 落在同一底线 */
.home-panel {
    position: relative;
    display: grid;
    grid-template-rows: repeat(4, 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: 22px;
}

/* 方法要点：描边对勾用 background-image 画，避免在模板里重复 6 段 SVG */
.home-panel-points {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4A3E2C;
}
.home-panel-points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 11px;
}
.home-panel-points li:last-child {
    margin-bottom: 0;
}
.home-panel-points li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D97E00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 9.5 17 19 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 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-speaking-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 32px 64px;
    background: #FFF6E9;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s;
}
.home-speaking-bar:hover,
.home-speaking-bar:focus {
    text-decoration: none;
}
.home-speaking-bar:hover {
    background: #FFF1DD;
}
.home-speaking-bar:focus-visible {
    outline: 3px solid #4A7CF0;
    outline-offset: -3px;
}

.home-speaking-bar-mark {
    flex: none;
    width: 5px;
    height: 44px;
    border-radius: 99px;
    background: #E3B15E;
}

.home-speaking-bar-title {
    font-size: 30px;
    font-weight: 800;
    color: #2A2318;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.home-speaking-bar-desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #6B5B44;
}

/* 横条里 CTA 靠右，覆盖 .home-panel-cta 的 grid 对齐（这里是 flex 容器） */
.home-speaking-bar-cta {
    justify-self: auto;
    margin-left: auto;
    font-size: 14.5px;
}
.home-speaking-bar:hover .home-speaking-bar-cta {
    color: #8A5200;
}
.home-speaking-bar:hover .home-speaking-bar-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-main {
        display: contents;
    }
    .home-panel-listening { order: 1; }
    .home-main > .home-split-divider { order: 2; }
    .home-speaking-bar { order: 3; }
    .home-split > .home-split-divider { order: 4; }
    .home-aside { order: 5; }

    .home-speaking-bar {
        flex-wrap: wrap;
        gap: 12px 16px;
        padding: 28px;
    }
    .home-speaking-bar-desc {
        width: 100%;
        order: 3;
    }
    .home-speaking-bar-cta {
        order: 2;
    }

    .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: 18px;
    }
    .home-panel-points {
        margin-bottom: 22px;
    }
}