/* Background-running guide only. The desktop layout (up to six screenshot columns) is untouched. */
@media (max-width: 767px) {
    .background-running-page { background: #f5f5f5; }
    /* 页头（导航/语言按钮）与页脚手机端样式已抽到 css/site-mobile.css，本页先加载该文件。 */

    /* The title block sits on the page background instead of a second white band. */
    .background-running-page .background-running-hero { padding: 20px 16px 0; background: #f5f5f5; }
    .background-running-page .background-running-hero > div { max-width: 640px; padding: 0; }
    .background-running-page .background-running-hero h1 { font-size: 24px; line-height: 34px; font-weight: 600; letter-spacing: 0; color: #333; }
    .background-running-page .background-running-hero p { margin-top: 12px; max-width: none; font-size: 14px; line-height: 24px; color: #666; }

    /* Six screenshots read as one 2 x 3 overview instead of a 4000px scroll. */
    .background-running-page .background-running-main { padding: 20px 0 40px; background: #f5f5f5; }
    .background-running-page .background-running-main > div { max-width: 640px; padding: 0 16px; }
    /* 截图自带深色边框，和桌面版一样不再套第二层白卡片：
       行距（32px）+ 标题上方留白负责分组，标题与自己的截图保持 8px 间距。 */
    .background-running-page .background-running-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    .background-running-page .background-running-steps > li {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        /* 标题轨可伸缩、截图轨自适应：多余空间全部留在标题上方，
           因此不论行内其它标题多长，标题总是贴着自己的截图。 */
        grid-template-rows: 1fr auto;
        /* 长单词（如德语 Hintergrundverhalten）不得撑宽本列，因此允许收缩。 */
        min-width: 0;
    }
    .background-running-page .background-running-steps > li > p {
        display: flex;
        gap: 4px;
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        color: #333;
        overflow-wrap: break-word;
    }
    .background-running-page .background-running-steps > li > p > span:first-child { flex: none; margin-right: 0; }
    .background-running-page .background-running-steps > li > p > span:last-child { min-width: 0; }
    .background-running-page .background-running-steps > li > img { border: 0; border-radius: 12px; }

    .background-running-page .background-running-note { margin-top: 16px; padding: 14px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; }
    .background-running-page .background-running-note p { font-size: 14px; line-height: 24px; color: #666; }
}

@media (max-width: 359px) {
    .background-running-page .background-running-steps { gap: 28px 10px; }
    .background-running-page .background-running-steps > li > p { font-size: 13px; line-height: 18px; }
}