/**
 * Mobile Tools Grid — Rendering-Safe Replacement
 * Applies ONLY at 390px–450px viewport width.
 * No transforms, no transitions, no filters, no animations, no GPU compositing.
 *
 * @package Jeshuuupdf
 */

/* ============================================================
   HIDE ORIGINAL GRID + SEARCH SECTION at 390px–450px
   Use display:none to fully remove from layout + rendering pipeline.
   ============================================================ */
@media screen and (min-width: 390px) and (max-width: 450px) {

    /* Hide the original tools grid section entirely */
    #tools {
        display: none !important;
    }

    /* Show the mobile replacement grid */
    #mobile-tools-grid {
        display: block !important;
    }

    /* Disable blob animations in the hero section at this viewport */
    .blob {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 0 !important;
        display: none !important;
    }
}

/* ============================================================
   HIDE MOBILE GRID everywhere outside 390px–450px
   ============================================================ */
#mobile-tools-grid {
    display: none;
}

/* ============================================================
   MOBILE REPLACEMENT GRID STYLES
   Only visible at 390px–450px
   ============================================================ */
@media screen and (min-width: 390px) and (max-width: 450px) {

    #mobile-tools-grid {
        padding: 0 12px 48px;
        background: transparent;
    }

    /* Category section */
    .mtg-section {
        margin-bottom: 32px;
    }

    .mtg-section[style*="display: none"],
    .mtg-section[style*="display:none"] {
        display: none !important;
    }

    /* Section heading */
    .mtg-heading {
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #111827;
        margin: 0 0 12px;
        padding: 0;
        line-height: 1.2;
    }

    /* Dark mode heading */
    .dark .mtg-heading,
    [data-theme="dark"] .mtg-heading,
    body.dark-mode .mtg-heading {
        color: #ffffff;
    }

    /* Two-column grid */
    .mtg-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    /* Individual tool card — link element */
    .mtg-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 14px;
        text-decoration: none;
        color: inherit;
        /* NO transition, NO transform, NO filter, NO shadow — safe for Redmi GPU */
    }

    /* Dark mode card */
    .dark .mtg-card,
    [data-theme="dark"] .mtg-card,
    body.dark-mode .mtg-card {
        background: #1f2937;
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Icon wrapper */
    .mtg-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        /* No filter, no backdrop-filter, no animation */
    }

    /* Icon image (from <img> tag — safe rendering) */
    .mtg-icon img {
        width: 20px;
        height: 20px;
        display: block;
        flex-shrink: 0;
    }

    /* Emoji fallback icon */
    .mtg-icon-emoji {
        font-size: 18px;
        line-height: 1;
        display: block;
    }

    /* Text block */
    .mtg-text {
        flex: 1;
    }

    .mtg-name {
        font-size: 12px;
        font-weight: 700;
        color: #111827;
        line-height: 1.25;
        margin: 0;
    }

    .dark .mtg-name,
    [data-theme="dark"] .mtg-name,
    body.dark-mode .mtg-name {
        color: #ffffff;
    }

    .mtg-desc {
        font-size: 10px;
        color: #9ca3af;
        margin: 2px 0 0;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hidden cards (filtered out) — use display:none for stability */
    .mtg-card[data-hidden="1"] {
        display: none !important;
    }

    /* No-results message */
    #mtg-no-results {
        text-align: center;
        padding: 40px 16px;
        color: #9ca3af;
    }

    #mtg-no-results .mtg-no-results-icon {
        font-size: 40px;
        display: block;
        margin-bottom: 8px;
    }

    #mtg-no-results .mtg-no-results-title {
        font-size: 14px;
        font-weight: 700;
        color: #6b7280;
        display: block;
        margin-bottom: 4px;
    }

    #mtg-no-results .mtg-no-results-sub {
        font-size: 12px;
        display: block;
    }

    /* Focus states — keyboard accessible */
    .mtg-card:focus {
        outline: 2px solid #9333ea;
        outline-offset: 2px;
    }

    .mtg-card:focus-visible {
        outline: 2px solid #9333ea;
        outline-offset: 2px;
    }
}