/* ═══════════════════════════════════════════════════════════════════════════
 * JustBuyNow — Mobile Fix Layer (Phase 3)
 * Loaded after style.css. Fixes broken mobile inner-page rendering.
 * Created: 2026-05-20
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Article layout collapses to single column on phones ── */
@media (max-width: 900px) {
    .article-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .article-sidebar,
    .article-content > aside,
    aside.article-sidebar { position: static !important; max-width: 100% !important; }
    .article-hero__layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .article-hero__panel { order: 2; }
    .container { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 768px) {
    .article-content { padding: 20px !important; }
    .article-hero__title { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; line-height: 1.2 !important; }
    .article-hero__standfirst { font-size: 1rem !important; }
    .article-summary-band__grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .summary-card { padding: 16px 18px !important; }
    .article-body { padding: 28px 0 56px !important; }
}

/* ── 2. Responsive tables — horizontal scroll on small screens ── */
.article-prose table,
.entry-content table,
.article-content table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    margin: 24px 0;
    scrollbar-width: thin;
}
.article-prose table::-webkit-scrollbar { height: 6px; }
.article-prose table::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.article-prose table::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.4); border-radius: 3px; }

.article-prose table thead,
.article-prose table tbody { display: table; width: max-content; min-width: 100%; }

.article-prose table thead th {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.06)) !important;
    color: #fff !important;
    padding: 14px 16px !important;
    font-weight: 600;
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.article-prose table td {
    padding: 12px 16px !important;
    font-size: 14.5px;
    vertical-align: top;
    line-height: 1.55;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    min-width: 130px;
}
.article-prose table tbody tr:hover td {
    background: rgba(99, 102, 241, 0.05) !important;
}

@media (max-width: 560px) {
    .article-prose table td,
    .article-prose table th { font-size: 13px !important; padding: 10px 12px !important; min-width: 110px !important; }
}

/* ── 3. Featured image aspect ratio on phone ── */
@media (max-width: 560px) {
    .article-featured-img { aspect-ratio: 4 / 3 !important; }
    .article-featured-img img { padding: 6px !important; }
}

/* ── 4. Affiliate buttons on mobile — full-width, finger-friendly ── */
@media (max-width: 560px) {
    .sidebar-buy-btn,
    .article-prose a[href*="amazon.co.uk"][class*="btn"],
    .article-content .wp-block-button .wp-block-button__link {
        display: block !important;
        width: 100% !important;
        text-align: center;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

/* ── 5. Skip the no-op main.css enqueue — reduce a network round-trip ── */
/* (CSS-only; the enqueue stays for backward compat but file is empty stub) */

/* ── 6. Touch target safety — minimum 44px on all interactive elements ── */
@media (max-width: 768px) {
    button, .btn, [role="button"], a.button, .article-prose a[class*="btn"],
    .header-action, .nav-link {
        min-height: 44px;
    }
}