/* ==========================================================================
   Job detail (/job/<slug>/<id>) — mobile layout, matched to the new Browse
   aesthetic: soft tinted chips, one primary action, tight vertical rhythm,
   16px card radius.

   COLOURS: the site's existing set only —
     #017bfe / #0169d8   the shared primary blue
     #f8d7da / #842029 / #dc3545   Bootstrap's danger family, already used in
                                   post_common.css (.alert-danger1, .add_qus1)
     #f1f3f5 / #e3e7eb / #6c757d / #212529   the neutrals used on Browse
   No new hues. Light mode only.

   Scoped under .jd-page so no other page is touched.
   ========================================================================== */

.jd-page {
    --jd-ink: #212529;
    --jd-muted: #6c757d;
    --jd-line: #e3e7eb;
    --jd-line-soft: #f1f3f5;
    --jd-blue: #017bfe;
    --jd-blue-dark: #0169d8;
    --jd-tap: 46px;
}

/* ------------------------------------------------------- Header spacing -- */
.jd-page .title-header {
    margin-top: 1.15rem !important;
}

/* --------------------------------------- "Not a match" — soft red chips -- */
/* Was four solid red slabs stacked down the page, which read as an error
   state before you had even seen the job title. Same links, same order,
   now tinted chips that wrap. */
.jd-page .card-header {
    padding-left: 0;
    padding-right: 0;
}
.jd-page .card-header p {
    margin-bottom: 0.45rem;
}
/* Sentence case, not shouty caps — this is a secondary, optional action. */
.jd-page .card-header strong {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jd-muted);
}
/* Scroll affordance. The strip reads as a finished row otherwise, so nobody
   knows to swipe. The chevron gets its OWN gutter (padding-right) rather than
   floating over the last chip — overlapping it would mean a tap on the arrow
   lands on that chip's link and silently records a reason. */
.jd-page #dont_apply {
    position: relative;
    padding-right: 1.9rem;
    margin-bottom: 0.25rem;
}
.jd-page #dont_apply::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding-bottom: 2px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #f5c2c7;
    color: #dc3545;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    animation: jd-nudge 1.6s ease-in-out infinite;
}
@keyframes jd-nudge {
    0%, 60%, 100% { transform: translateY(-50%) translateX(0); }
    30%           { transform: translateY(-50%) translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .jd-page #dont_apply::after { animation: none; }
}
/* One swipeable strip instead of a four-row stack.

   This block is optional negative feedback, but stacked it ate five or six
   lines directly above the job title — the first thing on the page. Laid out
   as a single scrolling row it costs one line, and it reuses the exact
   pattern the Browse category chips already use, so the two pages behave the
   same way under the thumb. Nothing is hidden: all four reasons stay in the
   DOM, reachable by swiping. */
.jd-page #dont_apply > .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0.1rem 0 0.3rem;
    /* !important is required, not decorative: this page carries an inline
       <style> with `.container .row { overflow: visible !important }` (added so
       the "Click to view skill details" tab can escape the term cards). This
       row is a .container .row, so that rule was overriding overflow-x and the
       strip could not scroll at all — the chips just overflowed and got
       clipped by the viewport. Scoped to #dont_apply, so the term-card
       tooltips elsewhere keep their overflow: visible. */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* No edge mask here. A fade would wash the red out to a pale pink at the
       right edge; the chips stay fully saturated instead, and the partially
       visible next chip is affordance enough that the row scrolls. */
}
.jd-page #dont_apply > .row::-webkit-scrollbar {
    display: none;
}
.jd-page #dont_apply > .row > [class*="col-"] {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 13rem;
    scroll-snap-align: start;
    padding: 0;
    margin: 0 !important;
}
/* Solid red, as the original buttons were — just sized down to chips so a
   row of them fits the strip. #dc3545 is Bootstrap's danger red, already
   used in 17 other files here. */
.jd-page #dont_apply .btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    height: auto;
    max-width: 13rem;
    padding: 0.4rem 0.8rem;
    border-radius: 10px;
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
.jd-page #dont_apply .btn:hover,
.jd-page #dont_apply .btn:focus-visible {
    background: #842029;
    border-color: #842029;
    color: #ffffff;
}

/* ------------------------------------------------------------ Hero card -- */
/* Title, open date and the action row previously floated loose on the page
   background as three separate blocks. Grouped onto one white surface they
   read as a single unit — the same card language Browse uses. */
.jd-page .jd-hero {
    background: #ffffff;
    border: 1px solid var(--jd-line);
    border-radius: 16px;
    padding: 1.15rem 1rem 1.1rem;
    margin-bottom: 1rem;
}
/* The action row already lives in a .card-body; strip its padding so the
   hero card controls the spacing instead of nesting two boxes. */
.jd-page .jd-hero > .card-body {
    padding: 0;
}
.jd-page .jd-hero > .row:first-child {
    margin-bottom: 0.35rem !important;
}
.jd-page .jd-hero .row:last-child {
    margin-bottom: 0 !important;
}

/* ----------------------------------------------------------- Job title -- */
.jd-page .title-header h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--jd-ink);
    margin-bottom: 0.4rem;
    overflow-wrap: anywhere;
}
/* Open date as a quiet chip rather than a full-width red sentence */
.jd-page .card-body > p.text-danger {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #f8d7da;
    color: #842029 !important;
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 0.85rem !important;
}

/* --------------------------------------------------------- Action row -- */
.jd-page .header-title-apply-btn.align-items-center .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--jd-tap);
    height: auto;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
/* Shared primary blue, same as Browse and the post flow */
.jd-page .header-title-apply-btn.align-items-center .btn-primary {
    background-color: var(--jd-blue);
    border-color: var(--jd-blue);
}
.jd-page .header-title-apply-btn.align-items-center .btn-primary:hover,
.jd-page .header-title-apply-btn.align-items-center .btn-primary:focus {
    background-color: var(--jd-blue-dark);
    border-color: var(--jd-blue-dark);
}

@media (max-width: 767.98px) {
    /* `display: grid` needs !important here: the container carries Bootstrap's
       .d-flex utility, which is itself `display: flex !important`. Without it
       the grid never applied and all four buttons stacked full-width. */
    .jd-page .header-title-apply-btn.align-items-center {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
    .jd-page .header-title-apply-btn.align-items-center .btn {
        width: 100%;
    }
    /* Primary action and the outbound link each take a full row */
    .jd-page .header-title-apply-btn.align-items-center .btn-success,
    .jd-page .header-title-apply-btn.align-items-center .btn-secondary {
        grid-column: 1 / -1;
    }
    /* The two mid-weight actions pair up */
    .jd-page .header-title-apply-btn.align-items-center .btn-info,
    .jd-page .header-title-apply-btn.align-items-center .btn-primary {
        font-size: 0.82rem;
        padding: 0.5rem 0.55rem;
    }
    /* Outbound link is the quietest thing in the group */
    .jd-page .header-title-apply-btn.align-items-center .btn-secondary {
        min-height: 40px;
        font-size: 0.84rem;
        font-weight: 600;
    }
}
.jd-page .header-title-apply-btn.align-items-center + .col-12 small,
.jd-page .jd-ctas small.text-muted {
    font-size: 0.76rem;
}

/* ------------------------------------------------------ Section cards -- */
.jd-page .card {
    border: 1px solid var(--jd-line);
    border-radius: 16px;
    box-shadow: none;
}
.jd-page .card > .card-body {
    padding: 1rem;
}
.jd-page .card.mb-5 {
    margin-bottom: 1rem !important;
}
.jd-page .card h5 {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--jd-muted);
    line-height: 1.35;
    margin-bottom: 0.3rem;
}
.jd-page .job_summary h5 {
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--jd-ink);
    margin-bottom: 0.5rem;
}
.jd-page .card .card-body > .row {
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--jd-line-soft);
}
.jd-page .card .card-body > .row:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border-bottom: 0;
}

/* -------------------------------------------------- Featured candidate -- */
/* Matches the Browse card feel: outline action instead of a solid red button
   sitting under a positive match score. */
.jd-page .featured-candidate-section .fc-why-toggle {
    min-height: 40px;
    height: auto;
    padding: 0.4rem 0.9rem;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--jd-blue);
    color: var(--jd-blue);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: normal;
    line-height: 1.3;
    box-shadow: none;
}
.jd-page .featured-candidate-section .fc-why-toggle:hover,
.jd-page .featured-candidate-section .fc-why-toggle:focus-visible {
    background: var(--jd-blue);
    color: #ffffff;
}
@media (max-width: 767.98px) {
    .jd-page .featured-candidate-section .fc-why-toggle { width: 100%; }
}

/* ----------------------------------------------------- Body / overflow -- */
.jd-page .job_desc {
    font-size: 0.95rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.jd-page .job_desc ul {
    padding-left: 1.1rem;
}
.jd-page .job_image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.jd-page .table-responsive,
.jd-page table,
.jd-page img {
    max-width: 100%;
}

/* ------------------------------------------------------------ ≥768px up -- */
@media (min-width: 768px) {
    .jd-page .title-header { margin-top: 2rem !important; }
    .jd-page .title-header h1 { font-size: 2rem; }
    .jd-page #dont_apply .btn { font-size: 0.78rem; }
    .jd-page .card > .card-body { padding: 1.25rem; }
    .jd-page .card.mb-5 { margin-bottom: 1.5rem !important; }
}