/*
 * Responsive merge shell (index-d + index-m → index.html) at 565px / 564px.
 * Shared across jp/ pages with body.pep-unified-chrome.
 */

.pep-mobile-only {
    display: none;
}

@media (max-width: 564px) {
    .pep-layout-desktop {
        display: none !important;
    }
    .pep-layout-mobile {
        display: block !important;
    }
    .pep-desktop-only {
        display: none !important;
    }
    .pep-mobile-only {
        display: block;
    }

    /* Blueprint (local only) vs latest mobile: restore at-a-glance #page-title spacing */
    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #landing-generic #page-title {
        padding: 2px 20px 10px;
    }

    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #landing-generic #page-title h1,
    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #landing-generic #page-title p {
        font-size: 18px;
        line-height: 20px;
        font-weight: normal;
        color: #253b56;
    }

    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #landing-generic #page-title h1 {
        margin: 0.67em 0;
        padding: 0;
    }

    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #landing-generic #page-title p {
        margin: 1em 0;
    }

    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #landing-generic #page-title strong {
        font-weight: bold;
        color: #253b56;
    }

    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #feature-copy,
    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #feature-copy p {
        font-size: 14px;
        line-height: 18px;
        font-weight: 200;
        color: #253b56;
    }

    /* Blueprint strong { font-weight: bold } vs latest: section labels stay regular weight */
    body.jp.at-a-glance-details.interior-pep.pep-unified-chrome .pep-layout-mobile #feature-copy strong {
        font-weight: normal;
        color: #253b56;
    }

    .read-more-card img, #cards-stream-page .read-more-card img {
        margin: 0 20px 8px 0;
    }
}

@media (min-width: 565px) {
    .pep-layout-mobile {
        display: none !important;
    }
    .pep-layout-desktop {
        display: block !important;
    }
    .pep-desktop-only {
        display: block;
    }
    .pep-mobile-only {
        display: none !important;
    }

    #mobile-container {
        display: none;
    }

    body.pep-unified-chrome #mobile-container {
        display: block !important;
        overflow: visible !important;
    }

    body.pep-unified-chrome.interior-pep #content-container,
    body.home.pep-unified-chrome #content-container {
        width: 100%;
        display: block;
        height: auto !important;
        overflow: visible !important;
    }

    /* Home (index-d layout): full-width column — not the 1022px #burst-desktop interior shell */
    body.home.pep-unified-chrome #burst-desktop {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        min-height: 0;
        background: none;
    }

    body.home.pep-unified-chrome .pep-layout-desktop .container {
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.pep-unified-chrome #window-container {
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.pep-unified-chrome #footer_dol,
    body.pep-unified-chrome #footer_dol.functional {
        clear: both;
        margin: 0 auto;
        overflow: visible;
    }

    body:not(.detail-gift) #burst-desktop {
        padding: 0;
    }

    #burst-desktop {
        background: url("https://cdn1.parksmedia.wdprapps.disney.com/media/disneyparksjapan-prod/disneyparksjapan_v0001/1/0.2.0-208/static/css/global/images/background-main-center-stars.jpg") no-repeat scroll 0 1px transparent;
        height: auto;
        min-height: 686px;
        overflow: visible;
        width: 1022px;
        margin: 0 auto;
        padding: 8px 0 0;
    }

    .interior-pep #burst-desktop {
        padding: 0;
    }

    #feature-media-desktop {
        margin-bottom: 20px;
        position: relative;
    }

    /* Prod rules keyed on #feature-media (renamed in the merge): rounded corners, no inline-image line gap */
    #feature-media-desktop img {
        border-radius: 15px;
        display: block;
    }

    /* Desktop list-card images: prod renders 175px; mobile-r.js sets an inline 170px (same override as au/css/mirror-local.css) */
    body.jp.pep-unified-chrome .pep-layout-desktop #card-section .hover-card-content img {
        width: 175px !important;
    }

    #detail-panel-right-pep-desktop,
    #detail-pep-desktop {
        background-color: #fff;
        border-radius: 10px;
        margin: 0 0 20px;
        padding: 10px 20px 25px;
    }

    /* Hero "play" icon for the Media Engine player (desktop panel); same fix as au/css/mirror-local.css */
    body.jp.pep-unified-chrome .pep-layout-desktop #feature-media-desktop #mediaIcon {
        display: block;
        position: absolute;
        bottom: 26px;
        left: 25px;
        width: 67px;
        height: 67px;
        background: url("https://cdn1.parksmedia.wdprapps.disney.com/media/disneyparksjapan-prod/disneyparksjapan_v0001/1/0.2.0-208/static/images/play_button.png") no-repeat 0 0 transparent;
    }

    body.jp.pep-unified-chrome .pep-layout-desktop #feature-media-desktop #mediaIcon:hover,
    body.jp.pep-unified-chrome .pep-layout-desktop #feature-media-desktop #mediaIcon:focus,
    body.jp.pep-unified-chrome .pep-layout-desktop #feature-media-desktop #mediaIcon:active {
        background-image: url("https://cdn1.parksmedia.wdprapps.disney.com/media/disneyparksjapan-prod/disneyparksjapan_v0001/1/0.2.0-208/static/images/play_button_hover.png");
    }
}

/* Home hero (mobile panel): desktop global.css loads at all widths; undo .home .container absolute + min-width (same as kr/css/kr-pep-merge.css). */
@media screen and (max-width: 564px) {
    body.home.pep-unified-chrome #content-container {
        width: 100% !important;
        max-width: 100%;
        display: block !important;
        height: auto !important;
    }
    body.home.pep-unified-chrome .pep-layout-mobile .container {
        position: relative !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    body.home.pep-unified-chrome {
        min-width: 0 !important;
    }
}

/* Home hero (mobile panel): merge renamed the ids to ...Mobile, so prod's #noScriptImg / #pepHomePageMediaPlayer mobile rules
   (full-width image, player overlaid on it) no longer match. Same intent as kr/css/kr-pep-merge.css and Domestic global-mobile-r.css. */
@media screen and (max-width: 564px) {
    body.home.pep-unified-chrome .pep-layout-mobile .hero-media-container {
        height: 11em;
        overflow: hidden;
    }
    body.home.pep-unified-chrome .pep-layout-mobile #noScriptImgMobile {
        width: 100%;
        margin-top: -1px;
        z-index: 1;
    }
    body.home.pep-unified-chrome .pep-layout-mobile #pepHomePageMediaPlayerMobile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    body.home.pep-unified-chrome .pep-layout-mobile .hero-media-container:has(.mediaEngineContainer) #noScriptImgMobile {
        display: none !important;
    }
}

/* Home promos (mobile panel): desktop global.css .promos{width:940px} / .promo{float:left;width:33%;font-size:15px} load at all widths;
   Domestic scopes them to >=565px, so reset to the full-width stacked rows the mobile CSS expects. */
@media screen and (max-width: 564px) {
    body.home.pep-unified-chrome .pep-layout-mobile .promos {
        width: 100%;
        min-height: 0;
        margin: 0;
    }
    body.home.pep-unified-chrome .pep-layout-mobile .promos .promo {
        float: none;
        width: 100%;
        font-size: inherit;
    }
}

/* Home carousel caption (mobile panel): desktop global.css .slideTitle.top (top:50px, 30px font, !important) loads at all widths and the
   Media Engine theme adds a translucent white bar. Prod mobile: caption at the top of each slide, no background, slide's own light/dark colour. */
@media screen and (max-width: 564px) {
    body.home.pep-unified-chrome .pep-layout-mobile .me-theme-homepage .mediaEngineContainer .slideTitle.top {
        top: 15px !important;
        line-height: 30px !important;
        font-size: 15px !important;
        background: none !important;
        padding: 0;
        text-shadow: none;
    }
    body.home.pep-unified-chrome .pep-layout-mobile .me-theme-homepage .mediaEngineContainer .slide .slideTitle a {
        margin-left: 0;
    }
    body.home.pep-unified-chrome .pep-layout-mobile .me-theme-homepage .mediaEngineContainer .slideTitle a strong {
        font-size: 100%;
    }
}