/* ═══════════════════════════════════════════
   Stoling — Discover Page Mobile Overrides
   ═══════════════════════════════════════════
   The Discover page is a compiled React bundle with mostly inline styles.
   These overrides ensure mobile responsiveness without modifying the bundle.
   All rules use !important to override inline styles. */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    body.page-discover #discover-root {
        padding-top: 72px !important;
    }

    /* Hero section: reduce flex gap, scale down */
    body.page-discover .hero-section {
        flex-direction: column !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem !important;
        min-height: auto !important;
    }

    body.page-discover .hero-left,
    body.page-discover .hero-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-discover .hero-right {
        display: none !important;
        /* Hide the preview cards on tablet to save space */
    }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
    body.page-discover #discover-root {
        padding-top: 72px !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Hero section stacks vertically */
    body.page-discover .hero-section {
        flex-direction: column !important;
        padding: 1.5rem 1rem !important;
        gap: 1rem !important;
        min-height: auto !important;
        text-align: center !important;
    }

    body.page-discover .hero-left {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    body.page-discover .hero-right {
        display: none !important;
    }

    body.page-discover .hero-content {
        padding: 0 0.5rem !important;
    }

    /* General container children: prevent horizontal overflow */
    body.page-discover #discover-root>div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* All direct children with flex-direction: row should wrap */
    body.page-discover #discover-root [style*="flex-direction: row"],
    body.page-discover #discover-root [style*="flex-direction:row"] {
        flex-wrap: wrap !important;
    }

    /* Cards: full width on mobile */
    body.page-discover .fs-card,
    body.page-discover .glass-card-border {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Product cards in grid: 2-column on mobile */
    body.page-discover .rpp-product-card {
        width: calc(50% - 0.5rem) !important;
        min-width: 140px !important;
        max-width: none !important;
    }

    body.page-discover .rpp-product-img {
        height: 160px !important;
    }

    /* Character/result cards */
    body.page-discover .rp-char-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Buttons: full width on mobile */
    body.page-discover .cta-gradient-btn,
    body.page-discover .feed-action-btn {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Tags: smaller on mobile */
    body.page-discover .rp-tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Any fixed-width elements: cap at viewport */
    body.page-discover #discover-root [style*="width: 400"],
    body.page-discover #discover-root [style*="width: 500"],
    body.page-discover #discover-root [style*="width: 600"],
    body.page-discover #discover-root [style*="width:400"],
    body.page-discover #discover-root [style*="width:500"],
    body.page-discover #discover-root [style*="width:600"],
    body.page-discover #discover-root [style*="max-width: 400"],
    body.page-discover #discover-root [style*="max-width: 500"],
    body.page-discover #discover-root [style*="max-width: 600"],
    body.page-discover #discover-root [style*="max-width:400"],
    body.page-discover #discover-root [style*="max-width:500"],
    body.page-discover #discover-root [style*="max-width:600"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Prevent horizontal scroll from padding/margins */
    body.page-discover #discover-root [style*="padding: 3"],
    body.page-discover #discover-root [style*="padding: 4"],
    body.page-discover #discover-root [style*="padding:3"],
    body.page-discover #discover-root [style*="padding:4"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Font sizes: scale down headings */
    body.page-discover #discover-root h1,
    body.page-discover #discover-root [style*="font-size: 2"],
    body.page-discover #discover-root [style*="font-size: 3"],
    body.page-discover #discover-root [style*="font-size:2"],
    body.page-discover #discover-root [style*="font-size:3"] {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    body.page-discover #discover-root h2,
    body.page-discover #discover-root [style*="font-size: 1.5"],
    body.page-discover #discover-root [style*="font-size:1.5"] {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    /* Gap overrides for grids/flex containers */
    body.page-discover #discover-root [style*="gap: 2"],
    body.page-discover #discover-root [style*="gap: 3"],
    body.page-discover #discover-root [style*="gap:2"],
    body.page-discover #discover-root [style*="gap:3"] {
        gap: 1rem !important;
    }

    /* Stars/decorative layers: hide on mobile */
    body.page-discover .stars-layer,
    body.page-discover .star {
        display: none !important;
    }
}

/* ── Small phones (≤400px) ── */
@media (max-width: 400px) {
    body.page-discover .rpp-product-card {
        width: 100% !important;
    }

    body.page-discover .rpp-product-img {
        height: 200px !important;
    }

    body.page-discover #discover-root h1,
    body.page-discover #discover-root [style*="font-size: 2"],
    body.page-discover #discover-root [style*="font-size:2"] {
        font-size: 1.25rem !important;
    }
}