/* Shared responsive corrections. Enqueue after the service-specific styles. */

/* Keep fixed controls behind open navigation and the native inquiry dialog. */
html.support-open body .support-rail,
html.support-open body .zyie-back-top,
body:has(#inquiry[open]) .support-rail,
body:has(#inquiry[open]) .zyie-back-top,
body:has(.zg-menu-toggle[aria-expanded="true"]) .support-rail,
body:has(.zg-menu-toggle[aria-expanded="true"]) .zyie-back-top,
body:has(.zg-services-toggle[aria-expanded="true"]) .support-rail,
body:has(.zg-services-toggle[aria-expanded="true"]) .zyie-back-top {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 900px) {
    /* The repeated class intentionally supersedes existing page-scoped rails. */
    body .support-rail.support-rail {
        top: auto;
        right: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: min(360px, calc(100vw - 32px));
        min-height: 58px;
        margin: 0;
        padding: 0;
        border: 1px solid #ded4e8;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 5px 25px #30233b24;
        box-sizing: border-box;
    }

    body .support-rail.support-rail > button {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        min-height: 56px;
        padding: 12px 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 7px;
        border: 0;
        border-radius: 0;
        font-size: 13px;
        line-height: 1.5;
        white-space: nowrap;
    }

    body .support-rail.support-rail > button + button {
        border-top: 0;
        border-left: 1px solid #eee8f4;
    }

    body .support-rail.support-rail svg {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    body .zyie-back-top.zyie-back-top {
        right: 16px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* These five service layouts reserve 100px only above their 780px breakpoint.
   Release that reservation while the shared rail is at the bottom. */
@media (min-width: 781px) and (max-width: 900px) {
    body:is(.google-ads-service, .meta-ads-service, .linkedin-service,
        .alibaba-international-service, .overseas-integrated)
    #main > .wrap:is(.gad-hero, .mad-hero, .lnp-hero, .aip-hero,
        .igm-hero, .rich-service-body) {
        width: calc(100% - 48px);
        max-width: none;
        margin-left: 24px;
        margin-right: 24px;
    }
}

/* At tablet width, move the article contents list above the full-width copy.
   The existing <=760px article layout is otherwise left intact. */
@media (min-width: 761px) and (max-width: 900px) {
    .gi-insight-view #main > :is(.gi-page, .gi-index) {
        width: calc(100% - 48px);
        max-width: none;
        margin-left: 24px;
        margin-right: 24px;
    }

    .gi-insight-view .gi-layout {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .gi-insight-view .gi-prose {
        width: 100%;
        min-width: 0;
    }

    .gi-insight-view .gi-sidebar {
        position: static;
        order: -1;
        width: 100%;
        padding: 0;
    }

    .gi-insight-view .gi-toc {
        padding-bottom: 17px;
        border-bottom: 1px solid #e4dceb;
    }

    .gi-insight-view .gi-toc > p {
        margin-bottom: 11px;
    }

    .gi-insight-view .gi-toc ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gi-insight-view .gi-toc li {
        padding: 0;
    }

    .gi-insight-view .gi-toc a {
        font-size: 13px;
        line-height: 1.8;
    }

    .gi-insight-view .gi-side-action {
        display: none;
    }
}

/* Ordinary, direct main containers have no rail reservation. Do not touch
   nested wrappers, narrow reading pages, or the layouts already reserving it. */
@media (min-width: 901px) and (max-width: 1390px) {
    body:not(:where(.google-ads-service, .meta-ads-service, .linkedin-service,
        .alibaba-international-service, .overseas-integrated, .gi-insight-view))
    #main > .wrap:not(:where(.simple-page, .article-header)) {
        width: calc(100% - 132px);
        max-width: 1240px;
        margin-left: 32px;
        margin-right: 100px;
    }
}

@media (min-width: 1101px) and (max-width: 1390px) {
    body:not(:where(.google-ads-service, .meta-ads-service, .linkedin-service,
        .alibaba-international-service, .overseas-integrated, .gi-insight-view))
    #main > .wrap:not(:where(.simple-page, .article-header)) {
        width: calc(100% - 150px);
        margin-left: 50px;
    }
}