/*
 * 首页标题响应式控制。
 *
 * 宽屏电脑：
 * 两个语义段处于同一行。
 *
 * 笔记本、平板和手机：
 * 两个语义段稳定显示为两行。
 *
 * 每个语义段内部不自动换行。
 */

.hero-title {
    max-width: none;
    margin: 16px 0 10px;

    font-size: 36px;
    line-height: 1.25;
    letter-spacing: 0;

    white-space: nowrap;
}

.hero-title-line {
    display: inline;
    white-space: nowrap;
}

.hero-title-line + .hero-title-line {
    margin-left: 8px;
}

/*
 * 中等电脑和横屏平板。
 *
 * Hero 右侧统计区开始压缩标题时，
 * 主动切换成两行，避免浏览器任意拆词。
 */
@media (max-width: 1050px) {
    .hero-title {
        white-space: normal;
    }

    .hero-title-line {
        display: block;
    }

    .hero-title-line + .hero-title-line {
        margin-top: 4px;
        margin-left: 0;
    }
}

/*
 * 平板竖屏及常规手机。
 */
@media (max-width: 760px) {
    .hero-title {
        margin-top: 14px;

        font-size: 30px;
        line-height: 1.3;
    }

    .hero-title-line + .hero-title-line {
        margin-top: 2px;
    }
}

/*
 * 常规小屏手机。
 */
@media (max-width: 520px) {
    .hero-title {
        font-size: 27px;
        line-height: 1.35;
    }
}

/*
 * 390px 左右的小屏手机。
 */
@media (max-width: 390px) {
    .hero-title {
        font-size: 24px;
    }
}

/*
 * 320px 左右的窄屏设备。
 */
@media (max-width: 340px) {
    .hero-title {
        font-size: 21px;
    }
}