/* ═══════════════════════════════════════════════════════════════════
   Job Detail Page  ·  job-detail.css
   Prefix: jd-   Scoped to: .jd-page
   ═══════════════════════════════════════════════════════════════════ */

/* ── Custom properties ────────────────────────────────────────────── */
.jd-page {
    --jd-navy:      #050d1f;
    --jd-navy-2:    #091429;
    --jd-navy-3:    #0d1d3a;
    --jd-blue:      #2563eb;
    --jd-blue-lt:   #3b82f6;
    --jd-cyan:      #06b6d4;
    --jd-purple:    #8b5cf6;
    --jd-gold:      #f59e0b;
    --jd-text:      #e2e8f0;
    --jd-muted:     #94a3b8;
    --jd-border:    rgba(255,255,255,.08);
    --jd-card-bg:   rgba(255,255,255,.04);
    --jd-radius:    16px;
    --jd-radius-sm: 10px;
    --jd-shadow:    0 8px 40px rgba(0,0,0,.45);

    font-family: inherit;
    color: var(--jd-text);
    background: #f8faff;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.jd-hero {
    position: relative;
    background: var(--jd-navy);
    padding: 48px 0 72px;
    overflow: hidden;
}

/* Dot-grid mesh */
.jd-hero-mesh {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Aura blobs */
.jd-hero-aura {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.jd-hero-aura--1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(37,99,235,.35) 0%, transparent 70%);
    top: -160px; left: -120px;
}
.jd-hero-aura--2 {
    width: 440px; height: 440px;
    background: radial-gradient(circle, rgba(139,92,246,.3) 0%, transparent 70%);
    bottom: -140px; right: -80px;
}

/* Breadcrumb */
.jd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    font-size: 13px;
    color: var(--jd-muted);
    position: relative;
    z-index: 2;
}
.jd-breadcrumb a {
    color: var(--jd-muted);
    text-decoration: none;
    transition: color .2s;
}
.jd-breadcrumb a:hover { color: #fff; }
.jd-breadcrumb i { font-size: 15px; opacity: .6; }
.jd-breadcrumb [aria-current="page"] { color: #fff; font-weight: 500; }

/* Hero body: two columns */
.jd-hero-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Chips */
.jd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.jd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    border: 1px solid;
}
.jd-chip i { font-size: 13px; }

.jd-chip--dept   { background: rgba(37,99,235,.15);   border-color: rgba(37,99,235,.35);   color: #93c5fd; }
.jd-chip--type   { background: rgba(6,182,212,.12);   border-color: rgba(6,182,212,.35);   color: #67e8f9; }
.jd-chip--loc    { background: rgba(139,92,246,.12);  border-color: rgba(139,92,246,.35);  color: #c4b5fd; }
.jd-chip--exp    { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.35);  color: #fcd34d; }

/* Title */
.jd-hero-title {
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 16px;
    background: linear-gradient(135deg, #fff 0%, #94b4d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sub line */
.jd-hero-sub {
    font-size: 14px;
    color: var(--jd-muted);
    margin: 0 0 32px;
    line-height: 1.6;
}
.jd-hero-sub strong { color: #cbd5e1; }

/* CTA buttons */
.jd-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--jd-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all .25s ease;
    cursor: pointer;
    white-space: nowrap;
}

.jd-btn--primary {
    background: linear-gradient(135deg, var(--jd-blue) 0%, var(--jd-cyan) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(37,99,235,.4);
}
.jd-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(37,99,235,.55);
    color: #fff;
    text-decoration: none;
}

.jd-btn--ghost {
    background: rgba(255,255,255,.07);
    color: var(--jd-text);
    border-color: var(--jd-border);
    backdrop-filter: blur(8px);
}
.jd-btn--ghost:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.jd-btn--lg {
    padding: 16px 36px;
    font-size: 15px;
}

/* Hero info card */
.jd-hero-card {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--jd-border);
    border-radius: var(--jd-radius);
    backdrop-filter: blur(16px);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jd-hc-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--jd-blue) 0%, var(--jd-cyan) 100%);
    border-radius: 12px;
    font-size: 22px;
    color: #fff;
    margin-bottom: 4px;
}
.jd-hc-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--jd-cyan);
}
.jd-hc-divider {
    height: 1px;
    background: var(--jd-border);
    margin: 4px 0;
}
.jd-hc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--jd-text);
}
.jd-hc-row i {
    font-size: 15px;
    color: var(--jd-cyan);
    flex-shrink: 0;
}

/* ── Content area ─────────────────────────────────────────────────── */
.jd-content-area {
    padding: 72px 0 96px;
    background: #f8faff;
}

/* Two-column layout */
.jd-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}

/* ── Main content ─────────────────────────────────────────────────── */
.jd-section {
    background: #fff;
    border-radius: var(--jd-radius);
    border: 1px solid #e8edf5;
    padding: 40px 40px 36px;
    margin-bottom: 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
    position: relative;
    overflow: hidden;
}
.jd-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--jd-blue) 0%, var(--jd-cyan) 100%);
    border-radius: 4px 0 0 4px;
}

.jd-section-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(37,99,235,.1) 0%, rgba(6,182,212,.1) 100%);
    border-radius: 12px;
    font-size: 20px;
    color: var(--jd-blue);
    margin-bottom: 16px;
    border: 1px solid rgba(37,99,235,.15);
}

.jd-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px;
    letter-spacing: -.02em;
}

/* Rich text content */
.jd-prose {
    color: #475569;
    font-size: 15px;
    line-height: 1.8;
}
.jd-prose p     { margin: 0 0 14px; }
.jd-prose ul,
.jd-prose ol    { padding-left: 22px; margin: 0 0 14px; }
.jd-prose li    { margin-bottom: 8px; }
.jd-prose h3,
.jd-prose h4    { color: #0f172a; font-weight: 600; margin: 20px 0 10px; font-size: 16px; }
.jd-prose strong { color: #1e293b; }

/* Bottom CTA box */
.jd-cta-box {
    background: linear-gradient(135deg, var(--jd-navy) 0%, var(--jd-navy-3) 100%);
    border-radius: var(--jd-radius);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.jd-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.jd-cta-text { position: relative; }
.jd-cta-text h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}
.jd-cta-text p {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.jd-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.jd-widget {
    background: #fff;
    border-radius: var(--jd-radius);
    border: 1px solid #e8edf5;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.jd-widget--muted {
    background: #f8faff;
    border-color: #dde4f0;
    box-shadow: none;
}

.jd-widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8edf5;
}
.jd-widget-title i {
    font-size: 17px;
    color: var(--jd-blue);
}

/* Info list */
.jd-info-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.jd-info-item {
    display: grid;
    grid-template-columns: 28px 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid #f1f5fb;
    font-size: 13.5px;
}
.jd-info-item:last-child { border-bottom: none; }

.jd-info-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(6,182,212,.08) 100%);
    border-radius: 8px;
    flex-shrink: 0;
}
.jd-info-icon i {
    font-size: 14px;
    color: var(--jd-blue);
}
.jd-info-key {
    color: #64748b;
    font-weight: 500;
}
.jd-info-val {
    color: #1e293b;
    font-weight: 600;
    text-align: right;
}
.jd-info-val--warn { color: #dc2626; }

/* Sidebar apply button */
.jd-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg, var(--jd-blue) 0%, var(--jd-cyan) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--jd-radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 18px rgba(37,99,235,.35);
}
.jd-apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,99,235,.5);
    color: #fff;
    text-decoration: none;
}
.jd-apply-btn i { font-size: 16px; }

/* Other openings widget */
.jd-widget-text {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 16px;
    line-height: 1.6;
}
.jd-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--jd-blue);
    text-decoration: none;
    border: 1.5px solid var(--jd-blue);
    padding: 9px 18px;
    border-radius: var(--jd-radius-sm);
    transition: all .2s ease;
}
.jd-outline-btn:hover {
    background: var(--jd-blue);
    color: #fff;
    text-decoration: none;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .jd-layout {
        grid-template-columns: 1fr 280px;
        gap: 32px;
    }
}

@media (max-width: 899px) {
    .jd-hero-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .jd-hero-card {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
    .jd-hc-divider { display: none; }

    .jd-layout {
        grid-template-columns: 1fr;
    }
    .jd-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .jd-hero { padding: 36px 0 56px; }

    .jd-hero-title { font-size: 30px; }

    .jd-section { padding: 28px 24px; }

    .jd-cta-box {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .jd-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .jd-hero-ctas { flex-direction: column; }
    .jd-btn { width: 100%; justify-content: center; }

    .jd-hero-card {
        grid-template-columns: 1fr;
    }

    .jd-info-item {
        grid-template-columns: 28px 1fr;
    }
    .jd-info-val { text-align: left; }
}