/* Homepage responsive tuning. Loaded after the portal theme to keep the
   desktop composition intact while making the mobile journey shorter. */

.lab-home-page .resource-link-card.is-placeholder {
    cursor: default;
}

.lab-home-page .resource-link-card.is-placeholder:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--theme-border) 78%, #ffffff 22%);
    box-shadow: none;
}

.lab-home-page :is(
    .home-intro-grid,
    .home-mode-mosaic,
    .showcase-mode-pills,
    .showcase-rail-steps,
    .showcase-action-list,
    .showcase-grid,
    .home-capability-status,
    .home-capability-grid,
    .resource-capability-grid,
    .resource-shelf-grid
):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--theme-accent) 68%, #ffffff 32%);
    outline-offset: 4px;
}

@media (max-width: 760px) {
    body.lab-home-page {
        --ws-shell-top-height: 54px;
    }

    .lab-home-page .ws-shell-menu-button {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .lab-home-page .ws-shell-link,
    .lab-home-page .ws-shell-theme-select,
    .lab-home-page .ws-shell-locale-select,
    .lab-home-page .ws-shell-connectivity {
        min-height: 44px;
    }

    .lab-home-page .lab-home-main {
        gap: 16px;
        padding: 14px 12px 82px;
    }

    .lab-home-page :is(.lab-home-intro, .lab-home-hero, .lab-home-section) {
        scroll-margin-top: calc(var(--ws-shell-top-height) + 12px);
    }

    .lab-home-page .lab-home-intro {
        gap: 14px;
        padding: 20px 16px 12px;
    }

    .lab-home-page .home-intro-copy {
        gap: 8px;
        padding-top: 8px;
    }

    .lab-home-page .home-intro-title {
        font-size: clamp(2rem, 9.6vw, 2.72rem);
        line-height: 1.02;
    }

    .lab-home-page .home-intro-subtitle {
        font-size: 0.9rem;
    }

    .lab-home-page .home-experiment-launcher,
    .lab-home-page .home-tools-launcher {
        gap: 10px;
        padding: 14px;
        border-radius: 22px;
    }

    .lab-home-page .home-experiment-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 8px;
    }

    .lab-home-page .home-experiment-btn {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        place-items: center;
        gap: 7px;
        min-height: 88px;
        height: auto;
        padding: 10px 6px;
        text-align: center;
    }

    .lab-home-page .home-experiment-label {
        white-space: normal;
        font-size: 0.72rem;
        line-height: 1.24;
    }

    .lab-home-page .home-experiment-demo,
    .lab-home-page .home-tool-demo {
        display: none;
    }

    .lab-home-page .home-tool-card {
        grid-template-rows: auto auto auto auto;
        min-height: 0;
        gap: 8px;
    }

    .lab-home-page .home-tool-route-menu summary {
        min-height: 44px;
    }

    .lab-home-page :is(
        .home-intro-grid,
        .home-mode-mosaic,
        .showcase-mode-pills,
        .showcase-rail-steps,
        .showcase-action-list,
        .showcase-grid,
        .home-capability-status,
        .home-capability-grid,
        .resource-capability-grid,
        .resource-shelf-grid
    ) {
        overscroll-behavior-inline: contain;
        scrollbar-color: color-mix(in srgb, var(--theme-accent) 52%, transparent) transparent;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .lab-home-page :is(
        .home-intro-grid,
        .home-mode-mosaic,
        .showcase-grid,
        .home-capability-grid,
        .resource-capability-grid,
        .resource-shelf-grid
    ) {
        scroll-snap-type: inline mandatory;
    }

    .lab-home-page :is(
        .home-intro-grid,
        .home-mode-mosaic,
        .showcase-mode-pills,
        .showcase-rail-steps,
        .showcase-action-list,
        .showcase-grid,
        .home-capability-status,
        .home-capability-grid,
        .resource-capability-grid,
        .resource-shelf-grid
    )::-webkit-scrollbar {
        height: 6px;
    }

    .lab-home-page :is(
        .home-intro-grid,
        .home-mode-mosaic,
        .showcase-mode-pills,
        .showcase-rail-steps,
        .showcase-action-list,
        .showcase-grid,
        .home-capability-status,
        .home-capability-grid,
        .resource-capability-grid,
        .resource-shelf-grid
    )::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: color-mix(in srgb, var(--theme-accent) 48%, transparent);
    }

    .lab-home-page .home-intro-grid {
        grid-template-columns: none;
        grid-template-rows: 164px;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: 10px;
        margin-inline: -2px;
        padding: 2px 2px 8px;
        overflow-x: auto;
    }

    .lab-home-page .home-intro-tile {
        min-height: 164px;
        height: 164px;
        scroll-snap-align: start;
    }

    .lab-home-page .lab-home-intro .home-scroll-cue {
        min-height: 48px;
        margin-top: 0;
    }

    .lab-home-page .lab-home-hero {
        min-height: 0;
        padding: 12px;
    }

    .lab-home-page .lab-home-hero .home-mode-mosaic {
        width: 100%;
        min-height: 0;
        grid-template-columns: none;
        grid-template-rows: minmax(360px, 52vh);
        grid-auto-flow: column;
        grid-auto-columns: calc(100% - 24px);
        gap: 12px;
        padding-bottom: 8px;
        overflow-x: auto;
    }

    .lab-home-page .home-mode-panel,
    .lab-home-page .home-mode-panel.is-3d {
        grid-column: auto;
        grid-row: 1;
        min-height: 0;
        height: 100%;
        scroll-snap-align: start;
    }

    .lab-home-page .home-mode-panel :is(.home-preview-shell, .mode-surface-host) {
        min-height: 0;
        height: 100%;
    }

    .lab-home-page .home-mode-panel .surface-workspace-navbar {
        left: 10px;
        right: 10px;
        top: 9px;
        min-height: 30px;
    }

    .lab-home-page .home-mode-panel .surface-workspace-nav-left {
        flex-wrap: nowrap;
        gap: 5px;
        overflow: hidden;
    }

    .lab-home-page .home-mode-panel .surface-workspace-nav-item {
        min-height: 28px;
        padding-inline: 8px;
    }

    .lab-home-page .home-mode-panel .surface-workspace-nav-item:nth-child(n + 4),
    .lab-home-page .home-mode-panel .surface-workspace-nav-right {
        display: none;
    }

    .lab-home-page .home-mode-panel .surface-workspace-nav-item em {
        font-size: 9px;
    }

    .lab-home-page .home-mode-panel .surface-workspace-tabs {
        top: 47px;
        left: 10px;
        right: 10px;
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
    }

    .lab-home-page .home-mode-panel .surface-workspace-tabs > :nth-child(n + 4),
    .lab-home-page .home-mode-panel .surface-workspace-explorer .surface-tree-row:nth-child(n + 4) {
        display: none;
    }

    .lab-home-page .home-mode-panel .surface-workspace-shell {
        inset: 82px 10px 48px;
        grid-template-columns: minmax(88px, 0.74fr) minmax(0, 1.26fr);
        grid-template-rows: 1fr;
        gap: 7px;
    }

    .lab-home-page .home-mode-panel .surface-workspace-editor-stack {
        grid-template-rows: 1fr;
        gap: 0;
    }

    .lab-home-page .home-mode-panel :is(.surface-workspace-terminal, .surface-workspace-dock) {
        display: none;
    }

    .lab-home-page .home-mode-panel :is(
        .surface-route-line.is-workspace,
        .surface-focus-cursor.is-workspace,
        .surface-runtime-beacon.is-workspace
    ) {
        display: none;
    }

    .lab-home-page .home-mode-panel :is(.surface-workspace-explorer, .surface-workspace-editor) {
        border-radius: 12px;
    }

    .lab-home-page .home-mode-panel .surface-workspace-status-meta {
        display: none;
    }

    .lab-home-page .lab-showcase {
        gap: 14px;
        padding: 16px 14px;
    }

    .lab-home-page .showcase-head {
        gap: 12px;
    }

    .lab-home-page .showcase-mode-pills,
    .lab-home-page .showcase-rail-steps,
    .lab-home-page .showcase-action-list,
    .lab-home-page .home-capability-status {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 6px;
        overflow-x: auto;
    }

    .lab-home-page .showcase-mode-btn,
    .lab-home-page .showcase-rail-steps span,
    .lab-home-page .showcase-action-list span,
    .lab-home-page .home-capability-status span {
        flex: 0 0 auto;
    }

    .lab-home-page .showcase-mode-btn {
        min-height: 44px;
    }

    .lab-home-page .showcase-rail {
        gap: 10px;
        padding: 14px;
    }

    .lab-home-page .showcase-grid {
        grid-template-columns: none;
        grid-template-rows: 390px;
        grid-auto-flow: column;
        grid-auto-columns: calc(100% - 28px);
        gap: 12px;
        padding: 2px 2px 8px;
        overflow-x: auto;
    }

    .lab-home-page .showcase-card {
        box-sizing: border-box;
        grid-column: auto;
        grid-row: 1;
        min-height: 390px;
        height: 390px;
        padding: 14px;
        scroll-snap-align: start;
    }

    .lab-home-page .showcase-card-head {
        gap: 8px;
    }

    .lab-home-page .workbench-preview {
        grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.28fr);
    }

    .lab-home-page .docker-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lab-home-page .home-capability-deck {
        gap: 14px;
        padding: 18px 14px;
    }

    .lab-home-page .home-capability-grid {
        grid-template-columns: none;
        grid-template-rows: 246px;
        grid-auto-flow: column;
        grid-auto-columns: calc(100% - 32px);
        gap: 10px;
        padding: 2px 2px 8px;
        overflow-x: auto;
    }

    .lab-home-page .home-capability-card {
        box-sizing: border-box;
        grid-column: auto;
        grid-row: 1;
        min-height: 246px;
        height: 246px;
        scroll-snap-align: start;
    }

    .lab-home-page .resources-strip {
        gap: 14px;
    }

    .lab-home-page .resource-story,
    .lab-home-page .resource-links {
        gap: 12px;
        padding: 16px 14px;
    }

    .lab-home-page .resource-capability-grid,
    .lab-home-page .resource-shelf-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        gap: 10px;
        padding: 2px 2px 8px;
        overflow-x: auto;
    }

    .lab-home-page .resource-capability-grid {
        grid-auto-columns: calc(100% - 32px);
    }

    .lab-home-page .resource-shelf-grid {
        grid-auto-columns: 72%;
    }

    .lab-home-page .resource-capability-grid article,
    .lab-home-page .resource-link-card {
        scroll-snap-align: start;
    }

    .lab-home-page .resource-capability-grid article {
        min-height: 96px;
    }

    .lab-home-page .resource-link-card {
        min-height: 124px;
    }
}

@supports (content-visibility: auto) {
    @media (max-width: 760px) {
        .lab-home-page .lab-home-hero {
            contain-intrinsic-size: auto 400px;
        }

        .lab-home-page .lab-home-section {
            contain-intrinsic-size: auto 680px;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .lab-home-page :is(
        .home-intro-grid,
        .home-mode-mosaic,
        .showcase-grid,
        .home-capability-grid,
        .resource-capability-grid,
        .resource-shelf-grid
    ) {
        scroll-behavior: auto;
    }
}