/*
 * mobile-home.css — native-app style home launcher.
 *
 * On phones/tablets (below the theme's xl breakpoint) the home screen shows every
 * navigation destination as a grid of colourful icon "thumbnails", the way a native
 * app home screen presents its apps. Hidden on desktop, where the sidebar is shown.
 */

.mh-launcher { display: none; }

@media (max-width: 1199.98px) {
    .mh-launcher {
        display: block;
        margin: 0 0 18px;
    }

    .mh-launcher-title {
        font-size: 15px;
        font-weight: 700;
        color: #1c2b46;
        margin: 4px 2px 12px;
    }

    .mh-section-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #8091a7;
        margin: 18px 2px 10px;
    }
    .mh-section:first-of-type .mh-section-title { margin-top: 4px; }

    .mh-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px 8px;
    }
    @media (max-width: 380px) {
        .mh-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .mh-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mh-tile-ico {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        box-shadow: 0 6px 14px rgba(16, 42, 78, 0.18);
        transition: transform .12s ease, box-shadow .12s ease;
    }

    /* Big glyph that nearly fills the squircle, native-launcher style. */
    .mh-tile-ico .icon {
        font-size: 40px;
        line-height: 1;
    }

    .mh-tile:active .mh-tile-ico {
        transform: scale(0.94);
        box-shadow: 0 3px 8px rgba(16, 42, 78, 0.22);
    }

    .mh-tile-label {
        font-size: 11px;
        line-height: 1.2;
        color: #364a63;
        text-align: center;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Colourful squircle backgrounds — native-launcher feel. */
    .mh-c-blue   { background: linear-gradient(135deg, #3f74d6, #2e56c0); }
    .mh-c-indigo { background: linear-gradient(135deg, #6979f8, #4a5cf0); }
    .mh-c-violet { background: linear-gradient(135deg, #8b5cf6, #6d3fe0); }
    .mh-c-purple { background: linear-gradient(135deg, #b06ab3, #8a4fb0); }
    .mh-c-pink   { background: linear-gradient(135deg, #f45b8b, #e23b6d); }
    .mh-c-red    { background: linear-gradient(135deg, #f2597f, #e11d48); }
    .mh-c-orange { background: linear-gradient(135deg, #ff9f43, #f4820e); }
    .mh-c-amber  { background: linear-gradient(135deg, #f7b731, #f0940a); }
    .mh-c-green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
    .mh-c-teal   { background: linear-gradient(135deg, #22c1c3, #14a3a5); }
    .mh-c-cyan   { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
    .mh-c-slate  { background: linear-gradient(135deg, #64748b, #47566b); }
}