/*
 * MY STREAMS PLAYER - mobile layout polish
 * 24 August 2026
 * Loaded after the shared shell and again after Home/Gallery page CSS.
 * Desktop changes are intentionally limited to the compact homepage QR panel.
 */

/* ---------- Desktop: simplify the homepage phone-download panel ---------- */
.download-by-phone .compact-download-panel{
    max-width:840px;
    margin:0 auto;
    padding:0;
}
.download-by-phone .compact-download-panel .phone-download-main{
    align-items:center;
    gap:22px;
    padding:22px 24px;
}
.download-by-phone .compact-download-panel .phone-download-copy h2{
    margin:7px 0 7px;
}
.download-by-phone .compact-download-panel .phone-download-copy p{
    max-width:600px;
    margin:0 0 14px;
}

@media (max-width:700px){
    /* ---------- Shared mobile rhythm ---------- */
    body{overflow-x:hidden;}

    .section{
        padding-top:34px !important;
        padding-bottom:34px !important;
    }
    .section-heading{
        margin-bottom:16px !important;
    }
    .section-heading h2{
        font-size:clamp(24px,7.5vw,31px) !important;
        line-height:1.12 !important;
        margin-bottom:7px !important;
    }
    .section-heading p{
        font-size:13px !important;
        line-height:1.5 !important;
    }

    /* ---------- Homepage: four hero information tiles ---------- */
    .price-badges{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
        margin-top:16px !important;
    }
    .price-badge{
        min-height:58px !important;
        padding:8px 6px !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;
        gap:3px !important;
        text-align:center !important;
        font-size:11px !important;
        line-height:1.18 !important;
    }
    .price-badge::before{
        margin:0 auto 2px !important;
    }

    /* Homepage buttons: keep good touch targets without oversized vertical space. */
    .hero .cta-row{
        gap:8px !important;
        margin-top:18px !important;
    }
    .hero .button{
        min-height:44px !important;
        padding:10px 14px !important;
        font-size:13px !important;
    }
    .hero-actions-note{
        margin-top:10px !important;
        font-size:11px !important;
        line-height:1.4 !important;
    }

    /* ---------- Homepage: numbered three-step cards ---------- */
    .steps-grid{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    .steps-grid .step{
        display:grid !important;
        grid-template-columns:44px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        column-gap:11px !important;
        row-gap:2px !important;
        align-items:start !important;
        padding:14px 15px !important;
        min-height:0 !important;
    }
    .steps-grid .step-number{
        grid-column:1 !important;
        grid-row:1 / span 2 !important;
        align-self:start !important;
        justify-self:start !important;
        margin:0 !important;
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        font-size:16px !important;
    }
    .steps-grid .step h3{
        grid-column:2 !important;
        grid-row:1 !important;
        margin:1px 0 3px !important;
        font-size:17px !important;
        line-height:1.2 !important;
    }
    .steps-grid .step p{
        grid-column:2 !important;
        grid-row:2 !important;
        margin:0 !important;
        font-size:13px !important;
        line-height:1.5 !important;
    }

    /* ---------- Homepage: feature cards, icon beside first line ---------- */
    .features{
        grid-template-columns:1fr !important;
        gap:9px !important;
    }
    .features .feature-card{
        display:grid !important;
        grid-template-columns:52px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        column-gap:11px !important;
        row-gap:2px !important;
        align-items:start !important;
        padding:13px 14px !important;
        min-height:0 !important;
    }
    .features .feature-card .icon{
        grid-column:1 !important;
        grid-row:1 / span 2 !important;
        align-self:start !important;
        justify-self:start !important;
        margin:0 !important;
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    .features .feature-card h3{
        grid-column:2 !important;
        grid-row:1 !important;
        margin:2px 0 3px !important;
        font-size:17px !important;
        line-height:1.2 !important;
    }
    .features .feature-card p{
        grid-column:2 !important;
        grid-row:2 !important;
        margin:0 !important;
        font-size:13px !important;
        line-height:1.48 !important;
    }

    /* ---------- Mobile: QR/download-by-phone is redundant ---------- */
    .download-by-phone,
    .quick-download{
        display:none !important;
    }

    /* ---------- Homepage pricing / reseller / FAQ compactness ---------- */
    .pricing-wrap{
        gap:12px !important;
    }
    .price-card,
    .legal-card{
        padding:18px !important;
    }
    .price-card h2,
    .legal-card h3{
        line-height:1.16 !important;
    }
    .reseller-pricing,
    .reseller-benefits{
        gap:8px !important;
    }
    .reseller-card,
    .reseller-benefit{
        padding:14px !important;
    }
    details{
        margin:8px 0 !important;
        padding:12px 13px !important;
    }

    /* ---------- Gallery compactness ---------- */
    .gallery-video-showcase{
        width:calc(100% - 24px) !important;
        margin:18px auto 6px !important;
    }
    .gallery-video-caption{
        padding:10px 12px 12px !important;
        font-size:12px !important;
        line-height:1.42 !important;
    }
    .gallery-video-caption strong{
        font-size:15px !important;
        margin-bottom:2px !important;
    }
    .gallery-grid{
        gap:10px !important;
    }
    .gallery-card figcaption{
        padding:11px 12px 12px !important;
    }
    .gallery-card figcaption h3{
        font-size:16px !important;
        line-height:1.2 !important;
        margin-bottom:4px !important;
    }
    .gallery-card figcaption p{
        font-size:12px !important;
        line-height:1.45 !important;
        margin:0 !important;
    }
    .portrait-section{
        margin-top:30px !important;
        padding-top:26px !important;
    }
    .portrait-grid{
        gap:8px !important;
    }
    .portrait-card div{
        padding:8px !important;
        font-size:11px !important;
        line-height:1.3 !important;
    }
    .licence-note,
    .cta{
        padding:17px !important;
        margin-top:22px !important;
    }
    .cta h2{
        font-size:24px !important;
        line-height:1.15 !important;
    }
    .cta p,
    .licence-note p{
        font-size:13px !important;
        line-height:1.48 !important;
    }

    /* ---------- Shared footer on every page using site-shell.php ---------- */
    .msp-site-footer{
        margin-top:28px !important;
    }
    .msp-footer-inner{
        padding:16px 14px 12px !important;
    }
    .msp-footer-main{
        display:block !important;
    }
    .msp-footer-company{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto 12px !important;
        padding:10px 8px 12px !important;
        text-align:center !important;
        font-size:12px !important;
        line-height:1.45 !important;
    }
    .msp-footer-company::before{
        display:block !important;
        margin:0 auto 7px !important;
    }
    .msp-footer-company strong{
        display:block !important;
        margin:0 auto 5px !important;
        font-size:13px !important;
        line-height:1.25 !important;
    }
    .msp-footer-company a{
        display:inline-block !important;
        margin-top:3px !important;
    }
    .msp-footer-nav{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:0 !important;
        margin-top:6px !important;
    }
    .msp-footer-nav a,
    .msp-footer-nav button{
        min-height:38px !important;
        padding:8px 8px !important;
        font-size:12px !important;
        line-height:1.2 !important;
    }
    .msp-footer-legal{
        margin-top:10px !important;
        padding:10px 8px !important;
        gap:3px !important;
        text-align:center !important;
        font-size:10px !important;
        line-height:1.35 !important;
    }

    /* ---------- General compact treatment for text-heavy shared pages ---------- */
    body main > .panel{
        padding:16px !important;
        border-radius:12px !important;
    }
    body main > .panel h1{
        font-size:clamp(26px,8vw,34px) !important;
        line-height:1.12 !important;
    }
    body main > .panel h2{
        font-size:21px !important;
        line-height:1.18 !important;
        margin-top:26px !important;
    }
    body main > .panel h3{
        font-size:17px !important;
        line-height:1.2 !important;
    }
    body main > .panel .intro{
        font-size:15px !important;
        line-height:1.5 !important;
    }
    body main > .panel .notice{
        padding:12px 13px !important;
        margin:13px 0 !important;
    }

    /* Downloads page uses a nested .panel and inline CSS after the shared assets. */
    .downloads-main{
        margin:14px auto !important;
        padding:0 12px 34px !important;
    }
    .downloads-main .panel{
        padding:16px !important;
        border-radius:12px !important;
    }
    .downloads-main h1{
        font-size:28px !important;
        line-height:1.12 !important;
    }
    .downloads-main h2{
        margin-top:27px !important;
        font-size:21px !important;
        line-height:1.18 !important;
    }
    .downloads-main h3{
        margin-top:19px !important;
        font-size:17px !important;
    }
    .downloads-main .intro{
        font-size:15px !important;
    }
    .downloads-main .grid{
        gap:10px !important;
        margin:14px 0 !important;
    }
    .downloads-main .card{
        padding:15px !important;
    }
    .downloads-main .notice{
        padding:12px 13px !important;
        margin:13px 0 !important;
    }
}

@media (max-width:390px){
    .price-badge{
        font-size:10.5px !important;
    }
    .steps-grid .step,
    .features .feature-card{
        padding-left:12px !important;
        padding-right:12px !important;
    }
    .msp-footer-inner{
        padding-left:10px !important;
        padding-right:10px !important;
    }
}