/**
 * v3 careerweb — mobile-only bottom CTA bar (Call · Apply · Chat).
 *
 * Mobile-only surface. On desktop / tablet (>860px) the chat FAB
 * stays at the bottom-right corner and the .apply-bar carries the
 * external apply CTA for apply-start jobs — there is intentionally no
 * sticky bar in that view.
 *
 * On mobile (≤860px) the bar appears only when the user is in the
 * Job Details view (body.mobile-detail-open). The joblist view keeps
 * its own scroll-affordance and doesn't need a job-specific CTA bar.
 *
 * Slot composition is driven by [data-slot-count] which mobile-cta.js
 * sets each paint:
 *   - Call:  rendered when active.company_phone / job_phone_number
 *            is present. Rebinds per job so multi-tenant pages never
 *            dial a stale tenant's number.
 *   - Apply: rendered only in detail-open view. Branches on
 *            active.redirection_type:
 *              'apply-start' → href to active.redirection_url (external)
 *              anything else → scroll to inline form
 *   - Chat:  always rendered. Universal apply-by-chat entry.
 *
 * Order in markup: Call · Apply · Chat (left to right).
 */

.cwv3-mcta { display: none; }

@media (max-width: 860px) {
    /* Show on mobile whenever paint() has set an active job's slots.
       The bar appears on both the joblist view and the detail view —
       only the Apply slot inside is gated to detail-open (see
       js/v3/mobile-cta.js). :not([hidden]) respects paint()'s
       decision to suppress the bar on the initial empty state. */
    .cwv3-mcta:not([hidden]) {
        display: grid;
        position: fixed;
        z-index: 60;
        bottom: 0;
        right: 0;
        left: 0;
        grid-template-columns: repeat(var(--cwv3-mcta-cols, 2), 1fr);
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 24px rgba(14, 14, 14, 0.08);
    }
    .cwv3-mcta[data-slot-count="1"] { --cwv3-mcta-cols: 1; }
    .cwv3-mcta[data-slot-count="2"] { --cwv3-mcta-cols: 2; }
    .cwv3-mcta[data-slot-count="3"] { --cwv3-mcta-cols: 3; }

    /* ─── Slot base ─── */
    .cwv3-mcta-slot {
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 50px;
        border-radius: 12px;
        font-family: 'Geist', sans-serif;
        font-weight: 700;
        font-size: 13.5px;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        padding: 10px;
        transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
    }
    .cwv3-mcta-slot:active { transform: scale(0.98); }
    .cwv3-mcta-slot:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }
    .cwv3-mcta-slot i { font-size: 17px; }

    /* Call — neutral white with ink label */
    .cwv3-mcta-slot--call {
        background: var(--surface);
        color: var(--ink);
        border: 1px solid var(--border);
    }
    .cwv3-mcta-slot--call:hover {
        background: var(--surface-2);
    }
    .cwv3-mcta-slot--call i {
        color: var(--ink);
    }

    /* Apply + Chat — brand-coloured primary actions */
    .cwv3-mcta-slot--apply,
    .cwv3-mcta-slot--chat {
        background: var(--brand);
        color: var(--brand-on);
        border: 1px solid transparent;
        box-shadow: 0 4px 12px var(--brand-tint-strong);
    }

    /* Reserve viewport space below the detail body so the form /
       disclosure isn't covered by the fixed bar (≈ 70px + safe-area). */
    body.mobile-detail-open .detail-body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}