/* The Immersive Suite app showcase: large app slides on the site's native scroll
   rail, pinned and driven by page scrolling (js/suite-showcase-scroll.js).
   Used on the homepage and /apps/, on a <section id="suite" class="suite-showcase">. */

/* Large app showcases share the site's native scroll rail and paddle controls. */
#suite.suite-showcase .suite-app-carousel {
    margin: 0;
    --suite-slide-width: min(1120px, 78vw);
}

#suite.suite-showcase .suite-app-rail {
    --immersive-studio-rail-gutter: calc((100vw - var(--suite-slide-width)) / 2);
    width: 100%;
    max-width: 100%;
    margin: 0;
    grid-auto-flow: column;
    grid-auto-columns: var(--suite-slide-width);
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--immersive-studio-rail-gutter);
    padding: .25rem var(--immersive-studio-rail-gutter) 1rem;
}

#suite.suite-showcase .suite-app-slide {
    width: 100%;
    scroll-snap-align: center;
    border-radius: 30px;
    overflow: hidden;
    background: var(--surface-strong);
    opacity: 1;
    transform: none;
}

.suite-app-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(24px, 3vw, 44px);
    text-decoration: none;
    color: var(--ink);
}

.suite-app-link:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -5px;
    border-radius: 30px;
}

.suite-app-icon {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.suite-app-copy {
    max-width: 42ch;
    min-height: 3.8em;
    margin: 0 0 1.5rem;
    font-size: clamp(1.2rem, 1.8vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -.02em;
    font-weight: 600;
    color: var(--immersive-studio-muted);
    text-wrap: pretty;
}

.suite-app-slide--maps { --app-accent: #008c83; }
.suite-app-slide--reviewer { --app-accent: #a254ec; }
.suite-app-slide--training { --app-accent: #d87900; }
.suite-app-slide--interior { --app-accent: #008ee6; }
.suite-app-copy span { color: var(--app-accent); }

.suite-app-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(240px, 30vw, 440px);
    margin: auto 0 0;
}

.suite-app-visual img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
}

.suite-app-visual--device img {
    border-radius: 0;
}

.suite-app-more {
    display: block;
    margin-top: 1.5rem;
    font-size: .95rem;
    color: var(--ink);
}

#suite.suite-showcase .immersive-studio-creation-rail-paddlenav {
    display: flex !important;
    justify-content: center;
}

@media (max-width: 760px) {
    #suite.suite-showcase .suite-app-carousel { --suite-slide-width: 86vw; }
    #suite.suite-showcase .suite-app-rail { gap: 16px; }
    .suite-app-copy { min-height: 6.25em; }
    .suite-app-visual { height: 230px; }
    .suite-app-link { padding: 24px 20px; }
    #suite.suite-showcase .suite-app-slide { border-radius: 24px; }
}

/* The extra section height is the native vertical scroll distance for all four apps. */
#suite.suite-showcase.suite-scroll-enabled {
    height: var(--suite-scroll-height);
    padding: 0;
    overflow: visible;
}

#suite.suite-showcase.suite-scroll-enabled .suite-app-carousel {
    position: sticky;
    top: var(--suite-sticky-top, 64px);
}

#suite.suite-showcase.suite-scroll-enabled .suite-app-rail {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

#suite.suite-showcase.suite-scroll-enabled .suite-app-visual {
    height: var(--suite-media-height);
}

/* /apps/: the heading sits in its own section above, so the pinned range starts at the carousel. */
.apps-page .apps-suite-intro {
    padding-bottom: 1.5rem;
}

.apps-page #suite.suite-showcase {
    margin: 0 0 clamp(3rem, 6vw, 5rem);
    padding: 0;
}