/**
 * Best Online Sportsbooks — Shortcode Responsive Overrides
 * /assets/css/shortcode-responsive.css
 *
 * Fixes inline-style-based shortcode widgets (ShortcodeParser.php)
 * that cannot respond to viewport changes without !important overrides.
 *
 * Covers: [sportsbook], [sportsbook_list], [compare], [pros_cons],
 *         [quick_facts], [info], [expert_tip], [bonus]
 */

/* ═══════════════════════════════════════════════════════════════
   TABLET (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Ranking Table Rows ─────────────────────────────────── */
    .sb-rank-row {
        grid-template-columns: 36px 48px 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .sb-rank-actions {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        min-width: 0 !important;
        gap: 8px !important;
    }
    .sb-rank-actions a {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* ── Single Sportsbook Card ─────────────────────────────── */
    .sc-single-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
        padding: 18px !important;
    }
    .sc-single-card-logo {
        width: 72px !important;
        height: 72px !important;
        margin: 0 auto !important;
    }
    .sc-single-card-actions {
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .sc-single-card-actions a {
        flex: 1 !important;
        white-space: normal !important;
        padding: 10px 14px !important;
    }

    /* ── Comparison Table ────────────────────────────────────── */
    .sc-compare-wrap {
        border-radius: 10px !important;
    }
    .sc-compare-wrap table {
        min-width: 440px !important;
        font-size: 0.82rem !important;
    }
    .sc-compare-wrap th,
    .sc-compare-wrap td {
        padding: 10px 12px !important;
    }

    /* ── Pros & Cons ────────────────────────────────────────── */
    .sc-pros-cons {
        grid-template-columns: 1fr !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Ranking Table — tighten further ────────────────────── */
    .sb-rank-row {
        grid-template-columns: 30px 40px 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }
    /* Shrink rank badge */
    .sb-rank-row > div:first-child {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }
    /* Shrink logo */
    .sb-rank-row > div:nth-child(2) {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
        padding: 4px !important;
    }
    /* Shrink name + stars row */
    .sb-rank-row > div:nth-child(3) > div:first-child {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .sb-rank-row > div:nth-child(3) > div:first-child span:first-child {
        font-size: 0.9rem !important;
    }
    /* Bonus pill */
    .sb-rank-row > div:nth-child(3) > div:last-child {
        padding: 3px 8px !important;
    }
    .sb-rank-row > div:nth-child(3) > div:last-child span {
        font-size: 0.72rem !important;
    }
    /* CTA row */
    .sb-rank-actions {
        gap: 6px !important;
    }
    .sb-rank-actions a:first-child {
        padding: 9px 12px !important;
        font-size: 0.82rem !important;
    }

    /* ── Single Card ────────────────────────────────────────── */
    .sc-single-card {
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }
    .sc-single-card-logo {
        width: 60px !important;
        height: 60px !important;
    }

    /* ── Card Grid (from [sportsbook_list style="cards"]) ──── */
    .sc-ranking-table + div,
    div[style*="grid-template-columns:repeat(auto-fit,minmax(240px"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Top 3 ──────────────────────────────────────────────── */
    div[style*="grid-template-columns:repeat(auto-fit,minmax(260px"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Quick Facts strip ──────────────────────────────────── */
    div[style*="grid-template-columns:repeat(auto-fit,minmax(130px"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Info / Expert Tip boxes ─────────────────────────────── */
    div[style*="display:flex;gap:14px;align-items:flex-start"] {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* ── Bonus callout ──────────────────────────────────────── */
    div[style*="background:linear-gradient(135deg,#fffbeb"] {
        padding: 20px !important;
    }
    div[style*="background:linear-gradient(135deg,#fffbeb"] div[style*="font-size:1.7rem"] {
        font-size: 1.3rem !important;
    }
    div[style*="background:linear-gradient(135deg,#fffbeb"] a[style*="padding:14px 40px"] {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }
}