/* 首页：练听力 / 练口语 满幅分屏（方案 7a 奶油色系 · 去卡片壳）
 *
 * 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;
}

/* 绑定手机号提示条：非阻塞、可关闭 */
.phone-bind-tip {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1rem;
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    font-size: .875rem;
    color: #6d4c00;
}

.phone-bind-tip-text { flex: 1; }

.phone-bind-tip-action {
    color: #007bff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.phone-bind-tip-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: #6d4c00;
    cursor: pointer;
    padding: 0 .25rem;
}

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

.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: start;
    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);
}

/* 响应式：移动端上下堆叠 */
@media (max-width: 767px) {
    .home-page {
        min-height: calc(100vh - 48px - 62px); /* 移动端顶栏 48px */
    }
    .home-split {
        grid-template-columns: 1fr;
        align-content: start; /* 堆叠后总高常超视口，居中会让首屏顶部内容滚不到 */
    }
    .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;
    }
}