/* ==========================================================================
   Corporate Projukti — Redesign :: Job detail & application
   Page-specific layout only. Consumes tokens; never redefines one.
   ========================================================================== */

/* ---- Header ------------------------------------------------------------ */

.rd-job-head { padding-block: var(--sp-14) var(--sp-8); }

.rd-job-headline {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    letter-spacing: var(--track-head);
    line-height: 1.16;
    margin-top: var(--sp-4);
}

.rd-job-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

/* ---- Facts strip ------------------------------------------------------- */

.rd-slab-facts {
    grid-template-columns: repeat(4, 1fr);
    --glow-size: 120px;
    --corner-size: 26px;
}

.rd-slab-facts .rd-cell {
    padding: var(--sp-5) var(--sp-6);
    min-height: 104px;
    justify-content: center;
}

.rd-fact-label { color: var(--tx-3); }

.rd-fact-value {
    margin-top: var(--sp-2);
    color: var(--tx-1);
    font-weight: 600;
    line-height: 1.35;
}

.rd-fact-value.is-urgent { color: var(--accent-ink); }

@media (max-width: 860px) { .rd-slab-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rd-slab-facts { grid-template-columns: 1fr; } }

/* ---- Body + apply rail ------------------------------------------------- */

.rd-job-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-12);
    align-items: start;
}

.rd-job-body { min-width: 0; }

.rd-job-block { margin-top: var(--sp-10); }
.rd-job-block:first-child { margin-top: 0; }

.rd-job-block h2 {
    font-size: 1.32rem;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-5);
}

/* ---- Apply rail -------------------------------------------------------- */

.rd-apply-rail {
    position: sticky;
    top: 88px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: var(--sp-8);
    overflow: hidden;
}

.rd-apply-rail::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--brand-2-rgb), var(--glow-a-tl)) 0%, transparent 58%),
        radial-gradient(circle at 88% 100%, rgba(var(--brand-1-rgb), var(--glow-a-br)) 0%, transparent 58%);
    pointer-events: none;
}

.rd-apply-rail > * { position: relative; }

.rd-apply-rail .rd-btn { width: 100%; justify-content: center; margin-top: var(--sp-5); }

.rd-deadline-note { margin-top: var(--sp-4); }

@media (max-width: 980px) {
    .rd-job-layout { grid-template-columns: 1fr; gap: var(--sp-10); }
    .rd-apply-rail { position: static; }
}

/* ---- Other roles ------------------------------------------------------- */

.rd-slab-others {
    grid-template-columns: repeat(3, 1fr);
    --glow-size: 145px;
    --corner-size: 28px;
}

.rd-slab-others .rd-cell { padding: var(--sp-6); min-height: 136px; }

@media (max-width: 900px) { .rd-slab-others { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rd-slab-others { grid-template-columns: 1fr; } }

/* ---- Application form -------------------------------------------------- */

.rd-apply-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    border: 1px solid var(--border);
    padding: var(--sp-6);
    margin-bottom: var(--sp-8);
}

.rd-apply-summary-title { color: var(--tx-1); font-weight: 700; font-size: 1.15rem; }

/* ---- Applied confirmation ---------------------------------------------- */

.rd-done {
    position: relative;
    text-align: center;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: var(--sp-24) var(--sp-8);
    overflow: hidden;
}

.rd-done::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--brand-2-rgb), var(--glow-a-tl)) 0%, transparent 55%),
        radial-gradient(circle at 80% 100%, rgba(var(--brand-1-rgb), var(--glow-a-br)) 0%, transparent 55%);
    pointer-events: none;
}

.rd-done > * { position: relative; }

.rd-done-mark {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto var(--sp-6);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--tile-bg);
    color: var(--accent-ink);
}

.rd-done p { margin-inline: auto; max-width: 52ch; margin-top: var(--sp-4); }

@media (max-width: 620px) {
    .rd-done { padding: var(--sp-16) var(--sp-6); }
}