/*
 * V20 — Mobile browser Desktop-site mode hero layout
 * Goal: on touch devices using Desktop mode, keep the hero in one row
 * like laptop mode: left content, right author card.
 */

@media (pointer:coarse) and (min-width:768px) and (max-width:1100px){
    .container{
        width:min(940px, calc(100% - 34px)) !important;
    }

    .hero{
        padding-top:24px !important;
        padding-bottom:28px !important;
    }

    .hero-grid{
        grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr) !important;
        align-items:start !important;
        gap:26px !important;
    }

    .hero-copy{
        text-align:left !important;
        max-width:none !important;
        margin:0 !important;
        padding-top:0 !important;
    }

    .hero h1{
        font-size:28px !important;
        line-height:1.14 !important;
        max-width:430px !important;
        margin:0 0 11px !important;
        letter-spacing:-.03em !important;
    }

    .hero-break{
        display:block !important;
    }

    .hero-lead{
        font-size:13px !important;
        line-height:1.6 !important;
        max-width:420px !important;
        margin:0 0 16px !important;
    }

    .hero-actions{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:flex-start !important;
        gap:8px !important;
        margin-top:0 !important;
    }

    .hero-actions .button{
        width:auto !important;
        min-height:40px !important;
        padding:10px 14px !important;
        font-size:12px !important;
        border-radius:10px !important;
        white-space:nowrap;
    }

    .dashboard-shell{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        align-self:start !important;
    }

    .dashboard-card{
        padding:14px !important;
        border-radius:16px !important;
        width:100% !important;
        max-width:none !important;
    }

    .dashboard-topbar{
        margin-bottom:10px !important;
    }

    .avatar{
        width:38px !important;
        height:38px !important;
        flex-basis:38px !important;
    }

    .dashboard-user h2{
        font-size:13px !important;
    }

    .dashboard-user p{
        font-size:8px !important;
    }

    .verified-pill{
        font-size:8px !important;
        padding:5px 8px !important;
    }

    .dashboard-metrics{
        grid-template-columns:repeat(3, minmax(0,1fr)) !important;
        gap:6px !important;
    }

    .dashboard-metrics article{
        padding:8px 7px !important;
        border-radius:10px !important;
    }

    .dashboard-metrics span{
        font-size:7.5px !important;
        line-height:1.25 !important;
        margin-bottom:3px !important;
    }

    .dashboard-metrics strong{
        font-size:14px !important;
    }

    .chart-card{
        margin-top:8px !important;
        padding:10px !important;
        border-radius:12px !important;
    }

    .chart-head strong{
        font-size:10px !important;
    }

    .chart-head small{
        font-size:7px !important;
    }

    .performance-chart{
        margin-top:2px !important;
    }

    .chart-labels{
        font-size:7px !important;
    }

    .dashboard-bottom{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:end !important;
        gap:7px !important;
        margin-top:8px !important;
    }

    .dashboard-bottom span{
        font-size:7.5px !important;
    }

    .dashboard-bottom strong{
        font-size:10px !important;
        line-height:1.35 !important;
    }

    .rank-box{
        min-width:64px !important;
        padding:6px 7px !important;
        border-radius:10px !important;
    }

    .rank-box strong{
        font-size:16px !important;
    }

    .positioning-line{
        margin-top:18px !important;
        padding-top:11px !important;
        justify-content:center !important;
        gap:6px !important;
    }

    .positioning-line span,
    .positioning-line strong{
        font-size:11px !important;
        line-height:1.45 !important;
    }
}