/* 电脑端：固定 4 列。先收边距和间距，收到下限后再裁切，不切手机布局。
   组合课程只有 3 张卡时，仍占 4 格（前 3 格有卡，第 4 格留空）。 */

html.desktop-clip {
    --desktop-gather-gap-min: 16px;
    --desktop-gather-gap-max: 22px;
    --desktop-gather-pad-min: 24px;
    --desktop-gather-pad-max: 40px;
    --desktop-grid-max-width: 1200px;
    --desktop-clip-min-width: calc(var(--desktop-grid-max-width) + var(--desktop-gather-pad-min));
    --desktop-clip-min-height: 720px;
    --shell-pad-x: clamp(var(--desktop-gather-pad-min), 2vw, var(--desktop-gather-pad-max));
    --path-gap: clamp(var(--desktop-gather-gap-min), 2.2vw, 28px);
    --path-row-gap: clamp(24px, 3vw, 40px);
}

html.desktop-clip,
html.desktop-clip body {
    min-width: var(--desktop-clip-min-width) !important;
    max-width: none !important;
    overflow-x: hidden !important;
}

html.desktop-clip.page-learning,
html.desktop-clip.page-learning body {
    min-height: var(--desktop-clip-min-height) !important;
    overflow: hidden !important;
}

html.desktop-clip.page-learning .content-container {
    min-width: calc(var(--desktop-clip-min-width) - 54px);
}

html.desktop-clip.page-learning .bottom-controls-outer,
html.desktop-clip.page-learning .bottom-controls-container {
    min-width: var(--desktop-clip-min-width);
    max-width: none !important;
}

html.desktop-clip .hub-grid,
html.desktop-clip .hub-grid.single-courses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(var(--desktop-gather-gap-min), 1.8vw, var(--desktop-gather-gap-max));
    width: 100%;
    max-width: var(--desktop-grid-max-width);
    margin: 0 auto;
}

html.desktop-clip .hub-grid > .course-card,
html.desktop-clip .hub-grid > .path-pack-card {
    width: 100%;
    max-width: none;
}

html.desktop-clip .path-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: var(--desktop-grid-max-width);
}

html.desktop-clip .history-grid {
    gap: clamp(var(--desktop-gather-gap-min), 1.8vw, 20px);
}

html.desktop-clip .course-topbar,
html.desktop-clip .course-topbar-inner,
html.desktop-clip .course-topbar-spacer {
    min-width: var(--desktop-clip-min-width);
}

html.desktop-clip .course-topbar {
    right: auto;
    width: max(100%, var(--desktop-clip-min-width));
}

html.desktop-clip .course-topbar-inner {
    flex-wrap: nowrap;
    height: var(--topbar-h);
    overflow: hidden;
}

html.desktop-clip .course-topbar-brand,
html.desktop-clip .course-auth-entry,
html.desktop-clip .course-hub-nav,
html.desktop-clip .course-hub-tab {
    flex-shrink: 0;
}

html.desktop-clip .course-hub-nav {
    max-width: none;
}

html.desktop-clip .course-hub-tab,
html.desktop-clip .course-topbar-brand .auth-brand,
html.desktop-clip .course-topbar-brand .auth-tagline {
    white-space: nowrap;
}