/**
 * 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) {
    /* Hide the CTA bar while the detail's form is loading. The
       .detail--form-loading class is added by apply-form.js::wire()
       on every fresh detail render and dropped by unmaskDetail()
       once the form schema lands. During the gap the bar's Apply
       slot would target a half-rendered form, and Call / Chat would
       read as ready before the rest of the panel actually is. */
    body:has(.detail--form-loading) .cwv3-mcta:not([hidden]) {
        display: none;
    }

    /* 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));
    }
    /* Same reservation on the joblist view — the CTA bar covers the
       bottom of the list, hiding the last card and the "Load more
       jobs" button. Padding pushes both above the bar so they're
       reachable by scrolling. The padding wraps both .joblist and
       .load-more (which are siblings inside .joblist-wrap), so the
       button always lands above the gap. */
    .joblist-wrap {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}