/**
 * T-Doc responsive fixes — forces inline-styled 2-column grids to stack on
 * narrow screens, and tunes the admin Orders view for tablets. Inline styles
 * can't express @media rules, so we match the exact inline `style` patterns
 * we emit and override them from here.
 */

/* =========================================================
 * TABLET (<= 1024px): collapse oversized 2-column grids to
 * a single column so nothing gets visually squished.
 * ========================================================= */
@media (max-width: 1024px) {
    /* Checkout pages (auction + raffle) — "1.3fr 1fr" split to single column */
    div[style*="grid-template-columns:1.3fr 1fr"],
    div[style*="grid-template-columns: 1.3fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Admin orders single view — "2fr 1fr" split */
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Admin order billing/shipping side-by-side "1fr 1fr" */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
 * MOBILE (<= 640px): extra tightening for raffles/auctions
 * admin panels, ship drawer and fulfillment timeline pills.
 * ========================================================= */
@media (max-width: 640px) {
    /* Raffle number picker — step down to 5 columns (also in raffles.css, this
       is a belt + braces safety net in case that CSS didn't load yet). */
    .rf-numbers-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    /* Admin sidebar + content — ensure the main area doesn't overflow. */
    .admin-layout { display: block !important; }
    .admin-content { padding: var(--space-md) !important; }

    /* Progress pills/labels in fulfillment panels — allow wrapping and reduce
       padding so they fit comfortably. */
    [data-testid="au-fulfillment-badge"],
    [data-testid="rf-fulfillment-badge"] {
        font-size: 0.72rem !important;
    }

    /* Countdown on raffle page — shrink numbers and allow wrap. */
    .rf-countdown {
        gap: 6px !important;
    }
    .rf-countdown span { font-size: 0.88rem !important; }
    .rf-countdown b { font-size: 1.15rem !important; }

    /* My Bids / My Tickets — bundle card header flex stays readable. */
    [data-testid^="my-raffle-bundle-"],
    [data-testid^="my-bid-"] {
        padding: var(--space-md) !important;
    }

    /* Order complete — POP CTA boxes: ensure buttons full-width for tap ease. */
    [data-testid="upload-pop-cta"],
    [data-testid="upload-pop-cta-auction"] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Admin tables — let long rows wrap/scroll horizontally without breaking
       the page. */
    .admin-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* Auction/Raffle winner banner on public page — reduce big winning-number
       size so it doesn't overflow on narrow phones. */
    [data-testid="rf-winning-number"] {
        font-size: 1.8rem !important;
    }

    /* Admin orders filters — stack the filter dropdowns instead of side-by-side. */
    .admin-content form[method="GET"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .admin-content form[method="GET"] select,
    .admin-content form[method="GET"] button {
        width: 100% !important;
    }

    /* Fulfillment "ship" drawer grid — stack courier + tracking on mobile. */
    #au-ship-form div[style*="grid-template-columns:1fr 1fr"],
    #rf-ship-form div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
 * Small-phone safety (<= 380px) — bid/ticket pills stack
 * cleanly and forms never trigger horizontal scroll.
 * ========================================================= */
@media (max-width: 380px) {
    .btn { font-size: 0.82rem !important; }
    .btn-sm { font-size: 0.78rem !important; padding: 6px 10px !important; }
    h1 { font-size: 1.5rem !important; }
    h3 { font-size: 1.1rem !important; }
}

/* =========================================================
 * EVENT PAGE — sticky right-rail + main grid mobile collapse.
 * ========================================================= */
@media (max-width: 1024px) {
    /* Main 1.4fr 1fr (events) */
    div[style*="grid-template-columns:1.4fr 1fr"],
    div[style*="grid-template-columns: 1.4fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 768px) {
    /* On tablet/mobile, stop the RSVP/ticket card from sticking — when stacked
       it becomes weird floating behaviour. */
    .card[style*="position:sticky"],
    .card[style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }

    /* Wall form: media + Post button row stay readable side-by-side. */
    #ev-wall-form input[type="file"] { min-width: 0 !important; flex: 1 1 100% !important; }
    #ev-wall-form .btn { width: 100% !important; }

    /* Auction winner banner — let inner flex wrap & ensure typography scales. */
    [data-testid="au-winner-banner"] { padding: 12px 14px !important; }
    [data-testid="au-winner-banner"] > div:last-child { min-width: 0 !important; }

    /* Sitemap / status pages don't need this — but admin SEO toggle rows do. */
    .admin-content div[style*="display: flex; align-items: center; gap: 12px;"] {
        flex-wrap: wrap !important;
    }
    .admin-content div[style*="display: flex; align-items: center; gap: 12px;"] > div[style*="flex: 1"] {
        min-width: 0 !important;
        flex: 1 1 100% !important;
        order: 2;
    }
    .admin-content div[style*="display: flex; align-items: center; gap: 12px;"] > div[style*="flex-shrink: 0"] {
        order: 3;
        text-align: left !important;
        width: 100%;
    }

    /* Event/Auction/Raffle hero — reduce top/bottom padding for phones. */
    .ev-hero { padding: 50px 0 36px !important; }
    .ev-hero h1 { font-size: 1.6rem !important; }

    /* Calendar / RSVP buttons — full width on mobile. */
    .btn-block { display: block !important; width: 100% !important; }
}

/* Mobile (<=480px): tighten cards, gallery thumbnails, attendee register chips. */
@media (max-width: 480px) {
    .card { padding: var(--space-md) !important; }
    .ev-gallery img, .ev-gallery video { height: 100px !important; }
    .ev-wall-post .ev-wall-meta { flex-wrap: wrap !important; }
    /* Attendee register list rows wrap status pill below the name. */
    .card ul li[style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; }
}