/* Shared responsive compatibility layer for desktop, laptop and tablet widths. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

.w1260 {
    max-width: 1260px;
    box-sizing: border-box;
}

.con_1000 {
    max-width: 100%;
    box-sizing: border-box;
}

/* Keep the desktop mega menu inside short laptop viewports. */
@media screen and (min-width: 1181px) {
    .header .btm .nav .nLi .productMegaMenu {
        width: min(1640px, calc(100vw - 32px));
        height: calc(100vh - 116px) !important;
        height: calc(100dvh - 116px) !important;
        max-height: 820px;
        min-height: 0;
        left: 50%;
        margin-left: 0;
        transform: translateX(-50%);
    }
}

/* Three columns are easier to scan and prevent the generic submenu rule
   from collapsing the mega menu to 120px on compact desktops. */
@media screen and (min-width: 1181px) and (max-width: 1280px) {
    .header .btm .nav .nLi .productMegaMenu {
        width: calc(100vw - 32px);
    }

    .productMegaModule {
        width: 240px;
    }

    .productMegaPanel {
        left: 240px;
        padding: 24px 26px;
    }

    .productMegaGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 24px;
    }
}

@media screen and (min-width: 1181px) and (max-height: 700px) {
    .header .btm .nav .nLi .navSub .productMegaName,
    .productMegaNameInner {
        min-height: 54px;
    }

    .productMegaPanel {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* Small laptops and scaled displays use the established compact header.
   The rest of the page remains fluid, with dense grids reduced to two columns. */
@media screen and (min-width: 1025px) and (max-width: 1180px) {
    .header > .w1260 {
        width: 100%;
        min-height: 106px;
        padding-right: 32px;
        padding-left: 32px;
    }

    .header .top,
    .header .btm {
        display: none;
    }

    .header .searchBtn,
    .header .menuIcon {
        display: block;
    }

    .header .logo {
        padding-top: 0;
    }

    .photonBusinessScene {
        right: 2%;
        width: 330px;
        height: 250px;
        opacity: 0.72;
        transform: translateY(-48%) scale(0.86);
        transform-origin: right center;
    }

    .photonHeroCopy {
        padding: 38px 30px 22px;
    }

    .photonHeroCopy h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .photonProductGrid,
    .photonExplorerProducts,
    .photonSolutionGrid,
    .photonTrustGrid,
    .solutionCategoryGrid,
    .solutionArticleGrid,
    .solutionProductGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solutionValuePanel,
    .solutionResourceList {
        grid-template-columns: 1fr;
    }

    .footer {
        padding: 30px 0;
    }

    .footer dl {
        display: none;
    }

    .footer dl.dl5 {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;
        border-right: 0;
        text-align: center;
        box-sizing: border-box;
    }

    .footer .qrcode {
        float: none;
        width: max-content;
        max-width: 100%;
        margin: 24px auto 0;
        padding-left: 0;
    }
}