/* ============================================================
   Booking Melbourne Taxi — service-pages.css
   Responsive overrides for inline-styled service page grids.
   Uses data-g attribute selectors + inline style substring
   selectors with !important to override at mobile breakpoints.
   ============================================================ */

/* ─── 768px: tablet/mobile ──────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Hero section: reduce oversized top padding ─────────── */
    section[style*="120px"] {
        padding-top: 88px !important;
        padding-bottom: 56px !important;
    }

    /* ── All inline 80px 0 sections → 48px ─────────────────── */
    section[style*="padding:80px 0"],
    section[style*="padding: 80px 0"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* ── 64px CTA sections → 40px ───────────────────────────── */
    section[style*="padding:64px 0"],
    section[style*="padding: 64px 0"] {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Trust bar: fix overflow from gap:48px ───────────────── */
    [style*="gap:48px"] {
        gap: 16px !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    /* ── Hero CTA button row: allow stacking ─────────────────── */
    section[style*="120px"] [style*="display:flex"][style*="gap:16px"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    section[style*="120px"] [style*="display:flex"][style*="gap:16px"] > a {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* ── Grid: 3-col → 1-col ────────────────────────────────── */
    [data-g="3"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── Grid: 2-col → 1-col ────────────────────────────────── */
    [data-g="2"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── Grid: side-by-side 2-col → 1-col ───────────────────── */
    [data-g="2col"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* ── Grid: 3-step → 1-col ───────────────────────────────── */
    [data-g="3step"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    [data-g="3step"]::before,
    [data-g="3step"] > div:not(:last-child)::after {
        display: none !important;
    }

    /* ── Grid: 4-col → 2-col ────────────────────────────────── */
    [data-g="4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* ── Pricing grid → 1-col ───────────────────────────────── */
    [data-g="3pricing"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ── Hero 2-col (service pages with data-sp) ─────────────── */
    [data-sp="hero"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* ── CTA footer button rows in service pages ─────────────── */
    section[style*="padding:64px"] [style*="display:flex"][style*="gap:16px"],
    section[style*="padding: 64px"] [style*="display:flex"][style*="gap:16px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    section[style*="padding:64px"] [style*="display:flex"][style*="gap:16px"] > a,
    section[style*="padding: 64px"] [style*="display:flex"][style*="gap:16px"] > a {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    /* ── Reduce inline padding on inner containers ───────────── */
    .container[style*="padding:0 24px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ── Section general padding (sp-section class) ──────────── */
    .sp-section {
        padding: 48px 0 !important;
    }

    /* ── About / contact grids ───────────────────────────────── */
    [data-g="contact"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* ── Venue/tag pill grids: 4-col → 2-col ────────────────── */
    [data-g="4"][style*="gap:16px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Trust bar items: wrap and shrink text ───────────────── */
    .sp-trust-bar {
        justify-content: flex-start !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
}

/* ─── 480px: small mobile ────────────────────────────────────── */
@media (max-width: 480px) {

    /* ── Hero: tighten further ───────────────────────────────── */
    section[style*="120px"] {
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    /* ── All section heading sizes in service pages ──────────── */
    section h1[style] {
        font-size: clamp(26px, 8vw, 42px) !important;
    }
    section h2[style] {
        font-size: clamp(20px, 6vw, 34px) !important;
    }

    /* ── 4-col → 1-col on very small screens ────────────────── */
    [data-g="4"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── Feature/use-case cards: reduce padding ──────────────── */
    [data-g="3"] > div[style*="padding:32px"],
    [data-g="3"] > div[style*="padding: 32px"] {
        padding: 20px !important;
    }
    [data-g="2"] > div[style*="padding:28px"],
    [data-g="2"] > div[style*="padding: 28px"] {
        padding: 18px !important;
    }

    /* ── Step items: horizontal layout ──────────────────────── */
    [data-g="4"] > div {
        text-align: left !important;
        display: flex !important;
        gap: 14px !important;
        align-items: flex-start !important;
    }
    [data-g="4"] > div > div:first-child {
        flex-shrink: 0 !important;
    }

    /* ── 80px sections → 36px ───────────────────────────────── */
    section[style*="padding:80px 0"],
    section[style*="padding: 80px 0"] {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    /* ── Inline max-width containers: full width ─────────────── */
    [style*="max-width:700px"],
    [style*="max-width: 700px"],
    [style*="max-width:600px"],
    [style*="max-width: 600px"] {
        max-width: 100% !important;
    }
}

/* ─── NDIS / TAC / WorkSafe specialty page additions ────────────── */

/* ── 2-col info sections (What is X) ────────────────────────────── */
@media (max-width: 768px) {
    [data-g="2col"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* ── 2-col billing checklist ─────────────────────────────────── */
    [data-g="2billing"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* ── Step connector line (real div, not pseudo-element) ─────── */
    .sp-step-line {
        display: none !important;
    }

    /* ── Vehicles 2-col: reduce card padding on mobile ───────────── */
    [data-g="2"] > div[style*="padding:32px"] {
        padding: 22px !important;
    }

    /* ── Qualifiers checklist card: reduce padding ───────────────── */
    [style*="border-radius:20px"][style*="padding:36px"] {
        padding: 24px 20px !important;
    }

    /* ── Billing dark section: centre buttons ────────────────────── */
    [style*="max-width:820px"] [style*="display:flex"][style*="gap:16px"][style*="justify-content:center"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    [style*="max-width:820px"] [style*="display:flex"][style*="gap:16px"][style*="justify-content:center"] > a {
        text-align: center !important;
    }

    /* ── Billing info box (gold/orange tinted) ───────────────────── */
    [style*="border-radius:16px"][style*="padding:28px"] {
        padding: 20px 16px !important;
    }

    /* ── Hero: info card moves below text ────────────────────────── */
    [data-sp="hero"] > div:nth-child(2) {
        order: -1;
    }
}

/* ─── 480px: small mobile ─────────────────────────────────────────── */
@media (max-width: 480px) {
    /* ── Coverage 4-col → 1-col on tiny screens ─────────────────── */
    [data-g="4"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* ── Qualifiers list item text ───────────────────────────────── */
    [data-g="2col"] > div[style*="border-radius:20px"] {
        padding: 20px 16px !important;
    }

    /* ── Service cards: reduce emoji size ───────────────────────── */
    [data-g="3"] > div > div[style*="font-size:32px"],
    [data-g="2"] > div > div[style*="font-size:48px"] {
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }

    /* ── Step numbers: slightly smaller ─────────────────────────── */
    [data-g="3step"] > div > div[style*="width:56px"] {
        width: 48px !important;
        height: 48px !important;
        font-size: 16px !important;
    }
}