/* AfghanZone Experience Mobile Viewport Lock v1.0.0
   Scope: experience.html mobile presentation / containment only.

   Root causes corrected from the fresh current experience.css:
   1) closed drawer translated 105% outside the viewport,
   2) mobile journey children forced to min-width:900px,
   3) <=420px app-phone scene forced to width:570px + translate transform,
   4) several grid/flex children had no mobile min-width containment.

   Business logic, animations, language, theme, platform identity and desktop UI stay untouched. */

@media screen and (max-width: 980px) {
    /* Root viewport contract. `clip` is the safety boundary; the selectors below
       also remove the actual width/min-width causes rather than merely masking them. */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overscroll-behavior-x: none;
        overflow-x: clip !important;
    }

    .experience-shell,
    .experience-shell > main,
    .experience-header,
    .experience-footer,
    .experience-hero,
    .experience-shell section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .experience-shell,
    .experience-shell > main {
        position: relative;
    }

    .experience-container,
    .header-inner,
    .experience-hero-grid,
    .intro-grid,
    .quality-grid,
    .delivery-grid,
    .app-grid,
    .faq-grid,
    .footer-main {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .experience-container > *,
    .experience-hero-grid > *,
    .quality-grid > *,
    .delivery-grid > *,
    .app-grid > *,
    .faq-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Closed mobile drawer is physically contained inside its fixed viewport.
       Its own 105% transition can no longer enlarge the document scroll area. */
    .experience-drawer {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        contain: layout paint;
    }

    .drawer-body {
        width: min(390px, 92vw) !important;
        max-width: 92vw !important;
    }

    /* Header must fit even on 320px screens. */
    .header-inner {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    .experience-brand {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .experience-brand > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .experience-brand strong,
    .experience-brand small {
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-actions {
        min-width: 0 !important;
        flex: 0 0 auto;
    }

    /* Hero stays inside its card/container at every phone width. */
    .experience-hero-copy,
    .experience-hero-copy h1,
    .experience-hero-copy > p,
    .experience-hero-actions,
    .experience-live-pills,
    .hero-trade-stage,
    .trade-map {
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .experience-hero-copy h1,
    .experience-hero-copy > p {
        overflow-wrap: anywhere;
    }

    .experience-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .experience-hero-actions > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .hero-trade-stage {
        overflow: hidden !important;
    }

    /* Replace the 900px mobile journey scroller with a real responsive grid.
       No nested horizontal drag and no document expansion. */
    .journey-workspace {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible !important;
    }

    .journey-track {
        display: none !important;
        min-width: 0 !important;
    }

    .journey-steps {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .journey-step {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-inline: 3px !important;
        overflow: hidden;
    }

    .journey-step > span {
        width: 46px !important;
        height: 46px !important;
        max-width: 100% !important;
    }

    .journey-step b,
    .journey-step small {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .journey-detail {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 11px !important;
    }

    .journey-detail > span {
        width: 54px !important;
        height: 54px !important;
    }

    .journey-detail > div,
    .journey-detail > p,
    .journey-detail > h3 {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .journey-detail > em {
        grid-column: 1 / -1;
        justify-self: start;
        max-width: 100%;
    }

    /* Product / visual / contact blocks cannot contribute min-content overflow. */
    .why-grid,
    .experience-product-grid,
    .contact-cards,
    .investor-panel,
    .investor-points,
    .quick-product,
    .quick-product-copy dl,
    .quick-actions {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .experience-product-card,
    .why-grid article,
    .contact-cards > *,
    .investor-panel > *,
    .quick-view-panel,
    .quick-product > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

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

@media screen and (max-width: 700px) {
    .experience-container {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin-inline: auto !important;
    }

    /* Pull mobile map labels inside the visual instead of negative side offsets. */
    .china-location {
        right: 4px !important;
    }

    .afghanistan-location {
        left: 4px !important;
    }

    .journey-workspace {
        padding: 18px 12px !important;
        border-radius: 20px !important;
    }

    .journey-step > span {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 7px !important;
        border-width: 3px !important;
    }

    .journey-step b {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    .journey-step small {
        min-height: 0 !important;
        font-size: 7px !important;
        line-height: 1.45 !important;
    }

    .journey-detail {
        min-height: 0 !important;
        margin-top: 14px !important;
        padding: 14px !important;
        border-radius: 16px !important;
    }

    .journey-detail h3 {
        font-size: 16px !important;
    }

    .journey-detail p {
        line-height: 1.65 !important;
    }

    /* Real responsive phone scene:
       override the old scaled/off-canvas geometry instead of hiding it. */
    .app-phones {
        right: auto !important;
        left: auto !important;
        width: min(100%, 340px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 390px !important;
        margin-inline: auto !important;
        overflow: hidden !important;
        transform: none !important;
        transform-origin: center !important;
    }

    .experience-phone {
        width: 205px !important;
        max-width: 62% !important;
        height: 385px !important;
        padding: 10px !important;
        border-radius: 32px !important;
    }

    .phone-front {
        top: 0 !important;
        right: 5% !important;
        left: auto !important;
        padding: 38px 13px 13px !important;
        transform: rotate(3deg) !important;
    }

    .phone-back {
        top: 18px !important;
        right: auto !important;
        left: 5% !important;
        padding: 24px 13px 42px !important;
        transform: rotate(-5deg) !important;
    }

    .phone-back > div {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        min-width: 0 !important;
        padding: 9px !important;
    }

    .phone-route {
        min-width: 0 !important;
        gap: 4px !important;
    }

    .app-copy,
    .app-copy > div {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .app-copy > div {
        flex-wrap: wrap !important;
    }

    .footer-main,
    .footer-bottom {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .footer-main a,
    .footer-main p,
    .footer-bottom {
        overflow-wrap: anywhere;
    }

    .quick-view {
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 12px !important;
    }

    .quick-view-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 420px) {
    /* Explicitly defeat the old width:570px + translateX(50%) rule. */
    .app-phones {
        right: auto !important;
        left: auto !important;
        width: min(100%, 330px) !important;
        max-width: 100% !important;
        transform: none !important;
    }

    .experience-phone {
        width: 190px !important;
        max-width: 63% !important;
        height: 360px !important;
    }

    .journey-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .experience-hero-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Fallback for engines that do not support overflow:clip. */
@supports not (overflow: clip) {
    @media screen and (max-width: 980px) {
        html,
        body {
            overflow-x: hidden !important;
        }
    }
}