/* WMS2 MOBILE FOUNDATION
 * Mobile content/layout foundation.
 * Header, search and navigation are controlled by wms-site-header.css.
 */

@media (max-width:700px), (hover:none) and (pointer:coarse) and (orientation:landscape){

/* =========================================
       MAIN PAGE
       ========================================= */

    .page,
    .main,
    .content{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
    }

    .page{
        margin:0!important;
        padding:0!important;
    }

    .main{
        display:block!important;
        margin:0!important;
        padding:10px 10px 25px!important;
    }

    .sidebar{
        display:none!important;
    }

    /* =========================================
       HOMEPAGE FEED
       ========================================= */

    .feed{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        gap:8px!important;
    }

    .card{
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
    }

    .thumb{
        width:100%!important;
        max-width:100%!important;
        aspect-ratio:1.35/1!important;
        overflow:hidden!important;
    }

    .thumb img,
    .thumb video{
        display:block!important;
        max-width:100%!important;
    }

    .cardbody{
        width:100%!important;
        padding:7px!important;
    }

    .ctitle{
        font-size:12px!important;
        line-height:1.25!important;
        min-height:30px!important;
    }

    .meta{
        font-size:9px!important;
    }

    /* =========================================
       ITEM PAGES
       ========================================= */

    .wms-item-page,
    .wms-item-panel{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .wms-item-panel{
        overflow:hidden!important;
    }

    .wms-item-heading{
        padding:13px 12px 11px!important;
    }

    .wms-item-heading h1{
        font-size:18px!important;
        line-height:1.3!important;
        overflow-wrap:anywhere!important;
    }

    .wms-item-description{
        font-size:13px!important;
        line-height:1.5!important;
        overflow-wrap:anywhere!important;
    }

    .wms-item-media{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:8px!important;
        overflow:hidden!important;
    }

    .wms-item-media img{
        display:block!important;
        width:auto!important;
        height:auto!important;
        max-width:100%!important;
        margin:0 auto!important;
    }

    .wms-item-media video{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
    }

    .wms-item-meta{
        display:flex!important;
        flex-wrap:wrap!important;
        gap:7px 12px!important;
        padding:9px 11px!important;
        overflow-wrap:anywhere!important;
    }

    .wms-item-categories,
    .wms-item-tags{
        padding:9px 11px 0!important;
        overflow-wrap:anywhere!important;
    }

    .wms-item-actions{
        display:flex!important;
        flex-wrap:nowrap!important;
        gap:5px!important;
        padding:11px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .wms-action,
    .wms-engage{
        min-height:36px!important;
        flex:1 1 0!important;
        padding:0 9px!important;
        font-size:10px!important;
    }

    .wms-item-engagement{
        display:flex!important;
        flex-wrap:wrap!important;
        gap:7px!important;
        padding:0 11px 11px!important;
    }

    .wms-item-engagement .wms-engage{
        flex:1 1 0!important;
    }

    .wms-item-nav{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
        padding:11px!important;
    }

    .wms-nav-button{
        width:100%!important;
        min-width:0!important;
        min-height:38px!important;
        padding:0 7px!important;
        justify-content:center!important;
        text-align:center!important;
        font-size:10px!important;
        overflow-wrap:anywhere!important;
    }

    /* =========================================
       COMMENTS
       ========================================= */

    .wms-comments{
        width:100%!important;
        max-width:100%!important;
        margin-top:12px!important;
        padding:11px!important;
        overflow:hidden!important;
    }

    .wms-comment-form input,
    .wms-comment-form textarea{
        width:100%!important;
        max-width:100%!important;
    }

    .wms-comment{
        max-width:100%!important;
        overflow:hidden!important;
    }

    .wms-comment > div{
        overflow-wrap:anywhere!important;
        word-break:break-word!important;
    }

    /* =========================================
       RELATED SAMMICHES
       ========================================= */

    .wms-related-box{
        width:100%!important;
        max-width:100%!important;
        margin-top:14px!important;
        overflow:hidden!important;
    }

    .wms-related-grid{
        width:100%!important;
        min-width:0!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }

    .wms-related-grid .item-card{
        width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
    }

    .wms-related-grid .item-card-media{
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important;
    }

    .wms-related-grid .item-card h2{
        width:100%!important;
        height:36px!important;
        min-height:36px!important;
        max-height:36px!important;
        margin:6px 0 4px!important;
        padding:0 4px!important;
        font-size:12px!important;
        line-height:1.3!important;
        overflow:hidden!important;
        overflow-wrap:anywhere!important;
    }

    /* =========================================
       INLINE ADS
       ========================================= */

    .wms-inline-ad{
        width:100%!important;
        max-width:100%!important;
        margin:18px 0!important;
        overflow:hidden!important;
    }

    .wms-inline-ad-slot{
        width:100%!important;
        max-width:100%!important;
        min-height:90px!important;
    }


    .wms-related-grid .item-card-media{
        position:relative!important;
    }

    .wms-related-grid .item-card-badge{
        position:absolute!important;
        top:6px!important;
        right:6px!important;
        z-index:5!important;
        display:block!important;
        width:auto!important;
        max-width:calc(100% - 12px)!important;
        box-sizing:border-box!important;
        padding:3px 6px!important;
        margin:0!important;
        background:rgba(167,25,22,.95)!important;
        border:1px solid #f02a24!important;
        border-radius:2px!important;
        color:#fff!important;
        font:800 8px/1 Arial,Helvetica,sans-serif!important;
        letter-spacing:.5px!important;
        white-space:nowrap!important;
        overflow:hidden!important;
    }
}

/* WMS2: compact social sharing icons on mobile */
.wms-item-actions .wms-action{
    box-sizing:border-box!important;
    flex:0 0 52px!important;
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:52px!important;
    min-height:52px!important;
    padding:0!important;
    font-size:30px!important;
    line-height:1!important;
    border-radius:50%!important;
}

.wms-item-actions .wms-share-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    line-height:1!important;
}

.wms-item-actions .wms-share-icon img{
    display:block!important;
    width:30px!important;
    height:30px!important;
    object-fit:contain!important;
}