/*
|--------------------------------------------------------------------------
| Homepage Mobile Layout
|--------------------------------------------------------------------------
|
| Desktop stays on the existing app.css design.
|
*/

.mobile-home-layout {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Phone Homepage
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    /*
    |--------------------------------------------------------------------------
    | Switch Layout
    |--------------------------------------------------------------------------
    */

    .home-desktop-layout {
        display: none;
    }


    .mobile-home-layout {
        display: block;
        background: #ffffff;
    }


    /*
    |--------------------------------------------------------------------------
    | Sections
    |--------------------------------------------------------------------------
    */

    .mobile-home-section {
        padding: 28px 0 24px;
        border-bottom: 8px solid #f5f5f6;
        background: #ffffff;
    }


    .mobile-home-section:first-child {
        padding-top: 24px;
    }


    .mobile-latest-section {
        border-bottom: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Heading
    |--------------------------------------------------------------------------
    */

    .mobile-home-heading {
        margin-bottom: 14px;
    }


    .mobile-home-heading > span {
        display: block;
        margin-bottom: 4px;
        color: var(--primary);
        font-size: 9px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }


    .mobile-home-heading h1,
    .mobile-home-heading h2 {
        margin: 0;
        color: #111111;
        font-size: 21px;
        font-weight: 850;
        line-height: 1.2;
        letter-spacing: -.45px;
    }


    /*
    |--------------------------------------------------------------------------
    | List
    |--------------------------------------------------------------------------
    */

    .mobile-post-list {
        width: 100%;
        border-top: 1px solid #ececef;
    }


    /*
    |--------------------------------------------------------------------------
    | Row
    |--------------------------------------------------------------------------
    */

    .mobile-post-row {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        gap: 12px;
        padding: 11px 0;
        border-bottom: 1px solid #ececef;
        background: #ffffff;
    }


    /*
    |--------------------------------------------------------------------------
    | Sticky Row
    |--------------------------------------------------------------------------
    */

    .mobile-post-row.is-sticky {
        padding-left: 8px;
        border-left: 3px solid var(--primary);
    }


    /*
    |--------------------------------------------------------------------------
    | Thumbnail
    |--------------------------------------------------------------------------
    */

    .mobile-post-thumb {
        position: relative;
        display: block;
        overflow: hidden;
        width: 78px;
        height: 78px;
        flex: 0 0 78px;
        border-radius: 5px;
        background: #ededf0;
    }


    .mobile-post-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /*
    |--------------------------------------------------------------------------
    | Video Thumbnail
    |--------------------------------------------------------------------------
    */

    .mobile-video-thumb > span,
    .mobile-feed-play {
        position: absolute;
        top: 50%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding-left: 2px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .72);
        color: #ffffff;
        font-size: 10px;
        transform: translate(-50%, -50%);
    }


    /*
    |--------------------------------------------------------------------------
    | Content
    |--------------------------------------------------------------------------
    */

    .mobile-post-info {
        overflow: hidden;
        min-width: 0;
        flex: 1;
    }


    /*
    |--------------------------------------------------------------------------
    | Type
    |--------------------------------------------------------------------------
    */

    .mobile-post-type {
        display: block;
        overflow: hidden;
        margin-bottom: 4px;
        color: var(--primary);
        font-size: 8px;
        font-weight: 850;
        line-height: 1.2;
        letter-spacing: .8px;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }


    /*
    |--------------------------------------------------------------------------
    | Label Row
    |--------------------------------------------------------------------------
    */

    .mobile-post-label-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 4px;
    }


    .mobile-post-label-row
    .mobile-post-type {
        margin-bottom: 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Sticky Label
    |--------------------------------------------------------------------------
    */

    .mobile-sticky-label {
        display: inline-flex;
        align-items: center;
        min-height: 17px;
        padding: 2px 6px;
        border-radius: 3px;
        background: #111111;
        color: #ffffff;
        font-size: 7px;
        font-weight: 850;
        line-height: 1;
        letter-spacing: .7px;
    }


    /*
    |--------------------------------------------------------------------------
    | Title
    |--------------------------------------------------------------------------
    */

    .mobile-post-info h2 {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        color: #171717;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


    .mobile-post-info h2 a {
        color: inherit;
        text-decoration: none;
    }


    .mobile-post-info h2 a:active {
        color: var(--primary);
    }


    /*
    |--------------------------------------------------------------------------
    | Meta
    |--------------------------------------------------------------------------
    */

    .mobile-post-meta {
        display: flex;
        align-items: center;
        overflow: hidden;
        gap: 6px;
        margin-top: 6px;
        color: #898989;
        font-size: 10px;
        line-height: 1.25;
    }


    .mobile-post-meta a,
    .mobile-post-meta span {
        display: block;
        overflow: hidden;
        max-width: 100%;
        color: #898989;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .mobile-post-meta a {
        color: #666666;
        font-weight: 600;
    }


    .mobile-post-meta
    > * + *::before {
        content: "•";
        margin-right: 6px;
        color: #b0b0b0;
    }


    /*
    |--------------------------------------------------------------------------
    | View All
    |--------------------------------------------------------------------------
    */

    .mobile-view-all {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-width: 118px;
        min-height: 38px;
        margin: 16px auto 0;
        padding: 8px 17px;
        border: 1px solid #dedee2;
        border-radius: 5px;
        background: #ffffff;
        color: #1d1d1f;
        font-size: 11px;
        font-weight: 750;
        text-decoration: none;
    }


    .mobile-view-all:active {
        border-color: var(--primary);
        color: var(--primary);
    }


    /*
    |--------------------------------------------------------------------------
    | Latest Feed
    |--------------------------------------------------------------------------
    */

    .mobile-latest-section
    .mobile-post-row {
        min-height: 96px;
    }


    /*
    |--------------------------------------------------------------------------
    | Pagination
    |--------------------------------------------------------------------------
    */

    .mobile-latest-pagination {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 22px;
    }


    .mobile-latest-pagination a,
    .mobile-latest-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        border: 1px solid #dedee2;
        border-radius: 5px;
        background: #ffffff;
        color: #333333;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
    }


    .mobile-latest-pagination span {
        border-color: transparent;
        color: #999999;
    }


    .mobile-latest-pagination
    a.active {
        border-color: var(--primary);
        background: var(--primary);
        color: #ffffff;
    }


    .mobile-latest-pagination
    .pagination-next,
    .mobile-latest-pagination
    .pagination-last {
        width: auto;
        padding-right: 11px;
        padding-left: 11px;
    }

}


/*
|--------------------------------------------------------------------------
| Very Small Phones
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {

    .mobile-home-section {
        padding-top: 25px;
        padding-bottom: 21px;
    }


    .mobile-post-row {
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }


    .mobile-post-thumb {
        width: 70px;
        height: 70px;
        flex-basis: 70px;
    }


    .mobile-post-info h2 {
        font-size: 13px;
    }


    .mobile-post-meta {
        font-size: 9px;
    }


    .mobile-home-heading h1,
    .mobile-home-heading h2 {
        font-size: 20px;
    }

}


/*
|--------------------------------------------------------------------------
| Desktop Safety
|--------------------------------------------------------------------------
*/

@media (min-width: 601px) {

    .home-desktop-layout {
        display: block !important;
    }


    .mobile-home-layout {
        display: none !important;
    }

}