/* MPM desktop homepage is a scroll-pinned JS animation; lay its sections out statically. */

/* Hero: first image only, title over it */
.JindexContainer, .JindexContainerInner { height: auto !important; overflow: visible !important; }
.JindexContainer01b, .JindexContainer05b { display: none !important; } /* scroll spacers */
.JindexImg01 { height: 900px; }
.JindexImg01Inner { clip-path: none !important; }
.JindexImg02, .JindexImg03 { display: none !important; }
.JindexImgContent { position: absolute !important; top: 600px !important; }
.JindexImgContent p, .JindexImgContent h1 { opacity: 1 !important; }
.JindexContainer02 { padding: 100px 0; }

/* Sliders: Splide sizes slides in JS */
.splide { visibility: visible !important; }
.splide__list { display: flex; }
.splide__slide, .splide__slide__container { width: 100% !important; flex-shrink: 0; }

/* News rotator */
.JindexContainer03 { position: relative !important; width: 100% !important; height: 900px !important; }
.JindexContainer03Inner, .JindexImg04, .JindexImg04Outer, .JindexImg04Inner { width: 100% !important; height: 100% !important; }
.JindexImg04Outer, .JindexImg04Inner { position: absolute !important; top: 0 !important; left: 0 !important; transform: none !important; }
.JindexImg04InnerW { display: none !important; }
.JindexHomeRotatorList, .JindexHomeRotatorList .JindexImg01Inner { width: 100% !important; }
.JindexImg04Content { display: block !important; }

/* Video */
.JindexVideo img { width: 100%; }
.JindexRow4ContainerOuter, .JindexRow4ContainerInner { width: 100% !important; transform: none !important; }
.JindexRow4Content { width: 500px !important; right: auto !important; }

/* Activity Outlook */
.JindexRow5TempImgContainer { display: none !important; }

/* Investment / Technology: image right, gradient text panel left */
.JindexRow6SlideBG { transform: none !important; top: 0 !important; left: 0 !important; }
.JindexRow6Slide { left: 50% !important; width: 50% !important; }

/* Readability / alignment tweaks */
.JindexContainer02Inner { margin: 0 auto; }
.JindexHomeRotatorList .JindexImg01Inner { filter: brightness(0.55); }
.JindexImg04Content { max-width: 760px; }
.JindexRow4ContainerOuter { left: 0 !important; right: auto !important; }
.JindexContainer02Inner { max-width: 1190px; }
.JindexRow4ContainerInner { left: 0 !important; }
.JindexRow4Content { left: 125px !important; }
.JindexRow4Content { top: 80px !important; bottom: auto !important; }

/* Mobile: next section is pulled up over the rotator for a scroll effect */
.JindexHomeMobile .JindexHomeRotator + * { margin-top: 0 !important; }

/* iG@P portal popup (Login / Submit / Participate) on Technology Marketplace and Technology Challenge: CSS :target, no JS */
.igap-popup { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.6); align-items: center; justify-content: center; padding: 16px; }
.igap-popup:target { display: flex; }
.igap-popup-box { position: relative; background: #fff; max-width: 520px; width: 100%; padding: 40px 32px 32px; border-radius: 8px; text-align: center; font-family: 'Museo Sans', sans-serif; font-size: 16px; line-height: 1.5; color: #333; }
.igap-popup-box p { margin: 0; }
.igap-popup-close { position: absolute; top: 8px; right: 16px; font-size: 28px; line-height: 1; color: #333; text-decoration: none; }
@media (max-width: 767.98px) { .JindexImgContent { width: auto !important; right: 20px; } }
.JindexImgContent h1, .JindexImgContent p { left: 0 !important; opacity: 1 !important; } /* JS slide-in end state */

/* "Pitch your solutions": live is a scroll-zoom; static = image + teal panel side by side (desktop) */
.JindexHomeDesktop .JmasterRow7Container { padding: 100px 0 !important; }
.JindexHomeDesktop .JmasterRow7BGouter, .JindexHomeDesktop .JmasterRow7Right { display: none !important; }
.JindexHomeDesktop .JmasterRow7Content { display: flex; max-width: 1280px; margin: 0 auto; }
.JindexHomeDesktop .JmasterRow7ContentBanner { flex: 0 0 55%; height: 480px !important; margin: 0 !important; padding: 0 !important; border-radius: 24px 0 0 24px; background-size: cover; background-position: center; }
.JindexHomeDesktop .JmasterRow7ContentInner { flex: 1; display: flex; align-items: center; margin: 0 !important; padding: 0 !important; background: #00a19c; border-radius: 0 24px 24px 0; }
.JindexHomeDesktop .JmasterRow7Left { width: auto !important; padding: 48px !important; }
/* Image-only, like the PIC homepage popup */
.igap-popup-box:has(img) { max-width: 800px; padding: 0; background: none; border-radius: 0; }
.igap-popup-box:has(img) .igap-popup-close { top: -36px; right: 0; color: #fff; }
.igap-popup-box img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Login modal on the homepage, based on the centred PIC homepage popup treatment. Independent of the .igap-popup rules above, which stay for Technology Marketplace/Challenge. */
body.igap-modal-open { overflow: hidden; }
.igapLoginModal[hidden] { display: none !important; }
.igapLoginModal {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 32px;
    position: fixed;
    z-index: 10000;
}
.igapLoginModal__backdrop {
    background: rgba(0, 0, 0, 0.72);
    inset: 0;
    position: absolute;
}
.igapLoginModal__panel {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    max-width: 900px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
}
.igapLoginModal__close {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 50%;
    color: #343a40;
    display: flex;
    font-size: 30px;
    height: 42px;
    justify-content: center;
    line-height: 1;
    padding: 0 0 4px;
    position: absolute;
    right: 16px;
    top: 16px;
    width: 42px;
    z-index: 2;
}
.igapLoginModal__close:hover,
.igapLoginModal__close:focus { color: #00a19c; }
.igapLoginModal__imageLink { display: block; }
.igapLoginModal__image {
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* Mobile hamburger menu open state, matching https://www.petronas.com/innovation-petronas/. */
.JindexNaviContainer.active .JindexNaviLeft p { display: none !important; }

@media only screen and (max-width: 600px) {
    .JindexNaviLeft p {
        font-size: 11px !important;
        line-height: 1.15 !important;
        max-width: 100px;
        white-space: normal;
    }
    .igapLoginModal { padding: 20px; }
    .igapLoginModal__panel {
        border-radius: 24px;
    }
    .igapLoginModal__close {
        height: 36px;
        right: 12px;
        top: 12px;
        width: 36px;
    }
}