/* Shared mobile hardening for the current FSsoft pages. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-wrap: break-word;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 1023px) {
    /* Keep both mobile navigation panels reachable on short screens. */
    .mobile-menu-panel,
    .mobile-site-panel {
        max-height: calc(100dvh - 92px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #navbar > div,
    #navbar.scrolled > div {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-inline: 0 !important;
        box-sizing: border-box;
    }

    .nav-shell,
    .site-nav-shell,
    .solution-screen > *,
    .solution-os-body > *,
    .global-infra-layout > *,
    .function-row > *,
    .footer-main > * {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    /* Home page: retain secondary solution information instead of dropping it. */
    #navbar > div {
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    #navbar.scrolled > div {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }

    .mobile-menu-panel {
        left: max(14px, env(safe-area-inset-left));
        right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .solution-os-topbar-right {
        display: block !important;
        max-width: 100%;
        white-space: normal;
    }

    .solution-screen,
    .solution-os-shell,
    .solution-visual-card,
    .glass,
    .glass-card {
        max-width: 100%;
    }

    .solution-visual-card img,
    .solution-feature-thumb img,
    .product-card img,
    #about img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Mobile case studies are fully expanded so no copy or tags are concealed. */
    .customer-case-grid {
        gap: 16px;
    }

    .customer-case-card,
    .customer-case-card.is-active {
        min-height: 0 !important;
        height: auto;
        padding: 20px;
        overflow: visible;
        cursor: default;
    }

    .customer-case-card:not(.is-active) .customer-case-head,
    .customer-case-head {
        position: relative;
        inset: auto;
        justify-content: space-between;
    }

    .customer-case-card:not(.is-active) .customer-case-arrow,
    .customer-case-arrow {
        display: grid;
        transform: rotate(45deg);
    }

    .customer-case-card:not(.is-active) h3,
    .customer-case-card h3 {
        position: relative;
        inset: auto;
        margin-top: 14px;
        white-space: normal;
        writing-mode: horizontal-tb;
        letter-spacing: normal;
        transform: none;
    }

    .customer-case-title-short {
        display: none !important;
    }

    .customer-case-title-full {
        display: inline !important;
    }

    .customer-case-card:not(.is-active) .customer-case-teaser,
    .customer-case-teaser {
        display: block !important;
        max-width: 100%;
        margin-top: 12px;
        overflow: visible;
        font-size: 0.82rem;
        line-height: 1.7;
        letter-spacing: 0;
        white-space: normal;
        text-overflow: clip;
    }

    .customer-case-detail,
    .customer-case-card.is-active .customer-case-detail {
        max-width: 100%;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        transform: none;
    }

    body.theme-light .customer-case-detail {
        border-top-color: rgba(49, 93, 206, 0.18);
    }

    .customer-case-detail p,
    html[lang="en"] .customer-case-detail p {
        display: block;
        max-height: none;
        margin-top: 0;
        overflow: visible;
        font-size: 0.88rem;
        line-height: 1.75;
        -webkit-box-orient: initial;
        -webkit-line-clamp: initial;
    }

    .customer-case-footer,
    .customer-case-card.is-active .customer-case-footer {
        position: relative;
        inset: auto;
        display: block;
        margin-top: 18px;
    }

    .customer-case-tag-list,
    html[lang="en"] .customer-case-tag-list {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 7px;
        overflow: visible;
    }

    .customer-case-product-tag,
    html[lang="en"] .customer-case-product-tag {
        flex: 0 1 auto;
        max-width: 100%;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .customer-case-logo,
    .customer-case-card.is-active .customer-case-logo {
        right: 18px;
        bottom: 18px;
        width: min(24%, 72px);
        opacity: 0.08;
        transform: none;
    }

    .customer-case-symbol,
    .customer-case-card.is-active .customer-case-symbol {
        right: 18px;
        bottom: 18px;
        width: min(34%, 112px);
        opacity: 0.08;
        transform: none;
    }

    .global-map-tooltip {
        width: min(260px, calc(100vw - 40px));
        max-width: calc(100vw - 40px) !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #demo-modal input,
    #demo-modal select,
    #demo-modal textarea,
    .demo-field input,
    .demo-field select,
    .demo-field textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    .floating-tools,
    .fixed.right-6.bottom-24 {
        bottom: max(18px, env(safe-area-inset-bottom)) !important;
    }

    /* Product detail page: preserve navigation and footer content on narrow screens. */
    .site-nav-shell {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    .mobile-site-panel {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .project-links {
        max-width: 100%;
        scroll-padding-inline: 12px;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .project-links a {
        white-space: nowrap;
    }

    .function-image,
    .function-image img,
    .value-card,
    .value-card img,
    .pain-card,
    .advantage-item {
        max-width: 100%;
    }

    .function-image img,
    .value-card img,
    .pain-card img {
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 420px) {
    .customer-case-card,
    .customer-case-card.is-active,
    .pain-card,
    .advantage-item,
    .value-card,
    .demo-dialog {
        padding-left: 16px;
        padding-right: 16px;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }

    .footer-links a,
    .footer-links span,
    .footer-copy,
    .footer-note {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    .mobile-menu-panel,
    .mobile-site-panel {
        max-height: calc(100dvh - 72px);
    }

    #demo-modal,
    .demo-modal {
        align-items: flex-start;
        overflow-y: auto;
    }
}


/* Mobile viewport containment */
@media (max-width: 1023px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }
}

@media (max-width: 720px) {
    .global-map-tooltip {
        margin-left: -16px;
    }
}


/* Solution previews paired with their mobile copy */
.solution-mobile-preview {
    display: none;
}

@media (max-width: 1024px) {
    #solutions .solution-story-left {
        display: none;
    }

    #solutions .solution-story-stage .solution-story-panel {
        scroll-margin-top: 82px;
    }

    #solutions .solution-mobile-preview {
        display: block;
        width: 100%;
        margin-bottom: 24px;
    }

    #solutions .solution-mobile-heading {
        margin-bottom: 18px;
    }

    #solutions .solution-mobile-heading .solution-os-kicker {
        margin-bottom: 8px;
    }

    #solutions .solution-mobile-heading .solution-detail-heading {
        width: auto;
        max-width: 12em;
        margin: 0;
        white-space: normal;
        font-size: clamp(30px, 6vw, 40px);
        line-height: 1.18;
    }

    #solutions .solution-mobile-visual-card {
        width: 100%;
        max-width: none;
        height: clamp(290px, 56vw, 430px);
        min-height: clamp(290px, 56vw, 430px);
        margin: 0;
        overflow: hidden;
    }

    #solutions .solution-mobile-visual-card .solution-visual-shared-stage {
        height: calc(clamp(290px, 56vw, 430px) - 56px);
    }

    #solutions .solution-mobile-visual-card .solution-visual-pane {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    #solutions .solution-mobile-visual-card::after {
        opacity: 0.58;
    }
}

@media (max-width: 720px) {
    #solutions .solution-mobile-preview {
        margin-bottom: 20px;
    }

    #solutions .solution-mobile-heading .solution-detail-heading {
        max-width: none;
        font-size: clamp(27px, 8.4vw, 36px);
    }

    #solutions .solution-mobile-visual-card {
        height: clamp(250px, 72vw, 320px);
        min-height: clamp(250px, 72vw, 320px);
        border-radius: 18px;
    }

    #solutions .solution-mobile-visual-card .solution-visual-shared-stage {
        height: calc(clamp(250px, 72vw, 320px) - 48px);
    }

    #solutions .solution-mobile-visual-card .solution-visual-bar {
        min-height: 48px;
        padding-right: 14px;
        padding-left: 14px;
        font-size: 13px;
    }
}


/* Mobile capability text-image row */
@media (max-width: 720px) {
    #solutions .solution-story-stage .solution-feature-item {
        grid-template-columns: 38px minmax(0, 1fr) minmax(92px, 28vw);
        column-gap: 12px;
        align-items: start;
    }

    #solutions .solution-story-stage .solution-feature-copy {
        min-width: 0;
    }

    #solutions .solution-story-stage .solution-feature-copy p {
        width: auto;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #solutions .solution-story-stage .solution-feature-visual,
    #solutions .solution-story-stage .solution-feature-visual.solution-feature-image,
    #solutions .solution-story-stage .solution-feature-visual.solution-list-photo {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        width: 100%;
        min-width: 0;
        max-width: 112px;
        height: clamp(64px, 19vw, 82px);
        min-height: 64px;
        border-radius: 10px;
        transform: none;
    }

    #solutions .solution-story-stage .solution-feature-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 360px) {
    #solutions .solution-story-stage .solution-feature-item {
        grid-template-columns: 34px minmax(0, 1fr) 84px;
        column-gap: 10px;
    }

    #solutions .solution-story-stage .solution-feature-visual,
    #solutions .solution-story-stage .solution-feature-visual.solution-feature-image,
    #solutions .solution-story-stage .solution-feature-visual.solution-list-photo {
        max-width: 84px;
        height: 62px;
        min-height: 62px;
    }
}