/*
|--------------------------------------------------------------------------
| Word Intelligence — Homepage mobile discovery widgets
|--------------------------------------------------------------------------
|
| The normal desktop sidebar is reused below the homepage content on
| tablet and mobile. This removes the need for separate mobile versions
| of Categories, Most Read and Gallery.
|
*/

@media (max-width: 1023px) {
    /*
    |--------------------------------------------------------------------------
    | Main homepage order
    |--------------------------------------------------------------------------
    |
    | Main posts first.
    | Shared sidebar widgets afterward.
    |
    */

    .blog-grid-container {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .blog-grid-container
    > .main-content {
        order: 1;
        min-width: 0;
    }

    .blog-grid-container
    > .sidebar.sidebar--home-discovery {
        display: flex !important;

        order: 2;

        width: 100%;
        min-width: 0;

        flex-direction: column;
        gap: 24px;

        margin-top:
            clamp(
                44px,
                7vw,
                72px
            );
    }

    /*
    |--------------------------------------------------------------------------
    | Widgets not repeated below the homepage
    |--------------------------------------------------------------------------
    |
    | Mobile already has its Explore/search control.
    |
    | The calendar is moved into the mobile navigation by the existing
    | mobile calendar script. This direct-child rule hides it only while
    | it remains inside the homepage sidebar.
    |
    */

    .sidebar.sidebar--home-discovery
    > .search-bar,

    .sidebar.sidebar--home-discovery
    > .word-calendar-widget {
        display: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Reused desktop widgets
    |--------------------------------------------------------------------------
    */

    .sidebar.sidebar--home-discovery
    .category-widget,

    .sidebar.sidebar--home-discovery
    .most-viewed-widget,

    .sidebar.sidebar--home-discovery
    .widget-gallery {
        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
    }

    /*
    |--------------------------------------------------------------------------
    | Category list
    |--------------------------------------------------------------------------
    */

    .sidebar.sidebar--home-discovery
    .category-list {
        width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | Most Read
    |--------------------------------------------------------------------------
    |
    | These are the exact same list items rendered on desktop.
    |
    */

    .sidebar.sidebar--home-discovery
    .most-viewed-list {
        width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | Gallery
    |--------------------------------------------------------------------------
    |
    | Preserve the web gallery's three-column structure.
    |
    */

    .sidebar.sidebar--home-discovery
    .gallery-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        width: 100%;
    }

    .sidebar.sidebar--home-discovery
    .gallery-grid img {
        width: 100%;

        object-fit: cover;
    }
}

/*
|--------------------------------------------------------------------------
| Smaller mobile screens
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    .blog-grid-container
    > .sidebar.sidebar--home-discovery {
        gap: 20px;

        margin-top: 0px;
        margin-bottom: 2rem;
        padding: 0 2rem;
    }

    .sidebar.sidebar--home-discovery
    .category-widget,

    .sidebar.sidebar--home-discovery
    .most-viewed-widget {
        padding: 20px;
    }

    .sidebar.sidebar--home-discovery
    .gallery-grid {
        gap: 7px;
    }
}