/*
 * /jobs — "Become a Live Psychic Chat Advisor" (resources/views/recruitment/jobs.blade.php).
 * Light by default; dark mode overrides at the bottom (site-dark.css tokens).
 */
.lpc-jobs {
    --jobs-brand: #5b2d8e;
    --jobs-ink: #1f1330;
    --jobs-text: #4b4458;
    --jobs-surface: #fff;
    --jobs-tint: #f7f1fd;
    --jobs-tint-2: #efe4fb;
    --jobs-border: #ece3f6;
    --jobs-icon-bg: #f1e7fb;
    --jobs-wash: 255, 255, 255;
    color: var(--jobs-text);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.lpc-jobs h1,
.lpc-jobs h2,
.lpc-jobs h3 {
    color: var(--jobs-ink);
    font-weight: 700;
}

.lpc-jobs h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.lpc-jobs h3 { font-size: 1rem; margin-bottom: .2rem; }
.lpc-jobs .jobs-strong { color: var(--jobs-ink); font-weight: 500; }

.jobs-card {
    background: var(--jobs-surface);
    border: 1px solid var(--jobs-border);
    border-radius: 14px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.jobs-tinted { background: linear-gradient(135deg, var(--jobs-tint), var(--jobs-tint-2)); }

.jobs-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--jobs-icon-bg);
    color: var(--jobs-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.jobs-icon-lg { width: 64px; height: 64px; font-size: 1.9rem; }

.jobs-section-head { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 3rem; }

.jobs-fee-note { font-size: .82rem; margin-top: .75rem; }

/* Hero: the photo on the right, washed to white under the text on the left. */
.jobs-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 340px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg,
            rgba(var(--jobs-wash), 1) 0%,
            rgba(var(--jobs-wash), .97) 30%,
            rgba(var(--jobs-wash), .85) 42%,
            rgba(var(--jobs-wash), .35) 52%,
            rgba(var(--jobs-wash), 0) 60%),
        var(--jobs-hero-image) right center / cover no-repeat;
}

.jobs-hero-text { position: relative; z-index: 1; width: 50%; padding: 4rem 4rem 4rem 5rem; }

.jobs-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--jobs-icon-bg);
    color: var(--jobs-brand);
    font-weight: 600;
    font-size: .85rem;
    border-radius: 8px;
    padding: .35rem .75rem;
    margin-bottom: 1rem;
}

.jobs-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; margin-bottom: 1rem; }
.jobs-hero-lead { color: var(--jobs-ink); font-weight: 500; font-size: 1.1rem; margin-bottom: .5rem; }
.jobs-hero-sub { margin-bottom: 1.5rem; }

.jobs-hero-badge {
    position: absolute;
    top: 14%;
    right: 2%;
    width: 150px;
    height: 150px;
    border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
    background: rgba(243, 232, 252, .85);
    color: var(--jobs-brand);
    font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
    font-size: 1.15rem;
    line-height: 1.25;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    transform: rotate(-8deg);
}

.jobs-hero-badge i { font-size: .9rem; color: #c59ae6; margin-top: .25rem; }

/* Intro + WhatsApp */
.jobs-intro { display: flex; gap: 3rem; }
.jobs-intro-main { display: flex; gap: 3rem; flex: 1 1 65%; }
.jobs-intro-contact { flex: 0 0 32%; border-left: 1px solid var(--jobs-border); padding-left: 3rem; }

.jobs-whatsapp {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex: 0 0 auto;
}

.jobs-whatsapp:hover { color: #fff; background: #1ebe5a; }
.jobs-phone { font-weight: 700; font-size: 1.1rem; text-decoration: none; }

/* Why join us */
.jobs-benefits { padding-left: 2rem; --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
.jobs-benefits .jobs-icon { width: 52px; height: 52px; }

/* Eligibility / Payments */
.lpc-jobs .jobs-pair { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
.jobs-checks { list-style: none; padding: 0 0 0 2rem; margin: 0; position: relative; z-index: 1; }
.jobs-checks li { display: flex; gap: 1.5rem; margin-bottom: 1.2rem; }
.jobs-checks i { color: var(--jobs-brand); flex: 0 0 auto; }

.jobs-watermark {
    position: absolute;
    right: -10px;
    top: 80px;
    font-size: 7rem;
    color: var(--jobs-brand);
    opacity: .07;
    transform: rotate(-10deg);
}

.jobs-fee-box {
    display: flex;
    gap: 1.8rem;
    background: var(--jobs-tint-2);
    color: var(--jobs-brand);
    border-radius: 10px;
    padding: 1.8rem 2rem;
    margin-top: 2rem;
}

.jobs-fee-box i { font-size: 1.4rem; line-height: 1; }

/* Closing call to action: the banner's crystal ball and tarot cards sit either side of the text. */
.jobs-final {
    text-align: center;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 22%;
    background: var(--jobs-final-image) center / cover no-repeat #efe4fb;
    border-color: #e4d4f5;
}
.jobs-final h2 { color: #5b2d8e; font-size: 1.25rem; }
.jobs-final p { font-size: .9rem; color: #4b4458; }

@media (max-width: 991.98px) {
    .jobs-intro { flex-direction: column; }
    .jobs-intro-contact { border-left: 0; border-top: 1px solid var(--jobs-border); padding: 2.5rem 0 0; }
    .jobs-hero-text { width: 62%; }
    .jobs-hero-badge { display: none; }
}

/* Phones: text on top over white, the photo showing underneath. */
@media (max-width: 767.98px) {
    .jobs-hero {
        align-items: flex-start;
        min-height: 0;
        padding-bottom: 180px;
        background:
            linear-gradient(180deg,
                rgba(var(--jobs-wash), 1) 0%,
                rgba(var(--jobs-wash), .96) 62%,
                rgba(var(--jobs-wash), 0) 85%),
            var(--jobs-hero-image) 72% bottom / auto 260px no-repeat;
    }
    .jobs-hero-text { width: 100%; padding: 3rem 2.5rem 0; }
    .jobs-card { padding: 2.5rem; }
    .jobs-intro-main,
    .jobs-section-head { gap: 2rem; }
    .jobs-icon-lg { width: 52px; height: 52px; font-size: 1.5rem; }
    .jobs-benefits { padding-left: 0; }
    .jobs-checks { padding-left: 0; }
    .jobs-final { padding-inline: 2rem; min-height: 0; }
}

[data-bs-theme="dark"] .lpc-jobs {
    --jobs-brand: #c9a7e8;
    --jobs-ink: #f1ecf6;
    --jobs-text: #c9c0d3;
    --jobs-surface: var(--lpc-surface);
    --jobs-tint: #261d30;
    --jobs-tint-2: #2e2339;
    --jobs-border: var(--lpc-border);
    --jobs-icon-bg: #3a2c4a;
    --jobs-wash: 21, 17, 26;
}

[data-bs-theme="dark"] .jobs-hero-badge { background: rgba(58, 44, 74, .85); }