/* DLRES 2.4.18 - Unified mobile homepage presentation
 * Goals:
 * 1) Keep the first-screen content safely below the sticky mobile header.
 * 2) Use a browser-independent CSS ambient-light background on phones.
 * 3) Keep featured topics in a consistent 2-column grid on mainstream phones.
 */
@media (max-width: 768px) {
    body.home .pcgh-home-ai-search-section,
    body.front-page .pcgh-home-ai-search-section {
        margin-top: 0 !important;
        min-height: auto !important;
        overflow: hidden;
    }

    body.home .pcgh-home-ai-search-section .pcgh-home-ai-search,
    body.front-page .pcgh-home-ai-search-section .pcgh-home-ai-search {
        padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 44px !important;
        min-height: auto !important;
        box-sizing: border-box;
        align-items: stretch;
    }

    body.home .pcgh-home-ai-search-section .pcgh-home-ai-search__content,
    body.front-page .pcgh-home-ai-search-section .pcgh-home-ai-search__content {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 100%;
    }

    body.home .pcgh-home-ai-search-section .pcgh-home-ai-search__content > h1,
    body.front-page .pcgh-home-ai-search-section .pcgh-home-ai-search__content > h1 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
    }

    /*
     * Mobile ambient-light replacement.
     * Do not stretch a low-resolution WebGL canvas on Android. The phone
     * background is rendered entirely by CSS gradients, so Chrome/WebView,
     * Safari and other mobile browsers get the same sharp result.
     */
    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg {
        display: block !important;
        position: absolute;
        inset: 0;
        overflow: hidden;
        background:
            radial-gradient(110% 78% at 74% 20%, rgba(0, 112, 255, .98) 0%, rgba(0, 89, 238, .72) 27%, rgba(0, 38, 150, .18) 56%, rgba(0, 0, 0, 0) 72%),
            radial-gradient(90% 72% at 18% 84%, rgba(196, 247, 255, .98) 0%, rgba(102, 214, 255, .82) 28%, rgba(38, 148, 255, .28) 55%, rgba(0, 0, 0, 0) 73%),
            radial-gradient(90% 70% at 100% 62%, rgba(0, 14, 91, .96) 0%, rgba(0, 17, 92, .68) 37%, rgba(0, 0, 0, 0) 70%),
            linear-gradient(145deg, #03050b 0%, #061633 26%, #0875ee 61%, #b8f3ff 100%);
        background-size: 115% 115%, 125% 125%, 120% 120%, 100% 100%;
        background-position: 55% 0%, 0% 100%, 100% 58%, center;
        animation: dlres-mobile-ambient-shift 16s ease-in-out infinite alternate;
        transform: translateZ(0);
        will-change: background-position;
    }

    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg::before {
        content: "";
        position: absolute;
        inset: -12%;
        background:
            radial-gradient(48% 42% at 58% 32%, rgba(45, 155, 255, .38), transparent 72%),
            radial-gradient(42% 38% at 30% 72%, rgba(188, 243, 255, .34), transparent 74%);
        transform: translate3d(-2%, 0, 0) scale(1.04);
        animation: dlres-mobile-ambient-float 12s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.02) 48%, rgba(255,255,255,.08) 100%);
        pointer-events: none;
    }

    /* If a cached page still contains a Color4Bg canvas, never show it on phones. */
    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg > canvas,
    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg > svg {
        display: none !important;
    }

    /* Unify Android/iPhone topic cards: 2 columns on normal phones. */
    .pcgh-home-specials {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .pcgh-home-specials .pcgh-special {
        min-width: 0;
        height: 116px;
    }

    .pcgh-home-specials .pcgh-special__content {
        min-width: 0;
        padding: 12px 10px 10px;
    }

    .pcgh-home-specials .pcgh-special__content h3 {
        max-width: 100%;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@keyframes dlres-mobile-ambient-shift {
    0%   { background-position: 48% 0%, 0% 100%, 100% 58%, center; }
    50%  { background-position: 62% 8%, 8% 92%, 94% 52%, center; }
    100% { background-position: 54% 4%, 2% 96%, 100% 62%, center; }
}

@keyframes dlres-mobile-ambient-float {
    0%   { transform: translate3d(-3%, -1%, 0) scale(1.04); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.09); }
}

@media (max-width: 359px) {
    body.home .pcgh-home-ai-search-section .pcgh-home-ai-search,
    body.front-page .pcgh-home-ai-search-section .pcgh-home-ai-search {
        padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    }

    .pcgh-home-specials {
        gap: 8px !important;
    }

    .pcgh-home-specials .pcgh-special__content {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg,
    .pcgh-home-ai-search-section.has-custom-js-bg .pcgh-home-ai-search__custom-js-bg::before {
        animation: none !important;
    }
}