/* Job card (components/frontend/cards/job-one). Uses the site accent
   (--clr-primary-code) and the Customize panel's card radius. */
.jc {
    --jc-accent: rgb(var(--clr-primary-code, 200, 16, 46));
    --jc-ink: #101828;
    --jc-muted: #5b6475;
    --jc-line: #e7e9ef;
    --jc-soft: #f6f7f9;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: var(--appearance-card-border-radius, 12px);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    position: relative;
    text-align: start;
}
.jc:hover {
    border-color: color-mix(in srgb, var(--jc-accent) 40%, var(--jc-line));
    box-shadow: 0 12px 28px -14px rgb(16 24 40 / .25);
    transform: translateY(-2px);
}
.jc:focus-within { border-color: var(--jc-accent); }

.jc-head { display: flex; gap: 12px; align-items: flex-start; }
.jc-logo {
    flex: 0 0 48px; width: 48px; height: 48px;
    border: 1px solid var(--jc-line); border-radius: 12px;
    background: #fff; display: grid; place-items: center; overflow: hidden;
}
.jc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.jc-title { flex: 1; min-width: 0; }
.jc-title h3 {
    margin: 0 0 2px; font-size: 1.05rem !important; line-height: 1.35; font-weight: 600 !important; text-align: start; color: var(--jc-ink);
    font-family: var(--heading-font, inherit);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jc-title h3 a { color: var(--jc-ink); text-decoration: none; }
.jc-title h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card opens the job */
.jc-title h3 a:hover { color: var(--jc-accent); }
.jc-company {
    position: relative; z-index: 1;
    color: var(--jc-muted); font-size: .875rem; text-decoration: none;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jc-company:hover { color: var(--jc-accent); }

.jc-save {
    position: relative; z-index: 1;
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    border: 1px solid var(--jc-line); color: var(--jc-muted); background: #fff;
    transition: background .2s, color .2s, border-color .2s;
}
.jc-save:hover { color: var(--jc-accent); border-color: var(--jc-accent); }
.jc-save.active { background: var(--jc-accent); border-color: var(--jc-accent); color: #fff; }

.jc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jc-facts li { display: flex; gap: 8px; align-items: flex-start; color: var(--jc-muted); font-size: .875rem; line-height: 1.4; }
.jc-facts i { color: var(--jc-accent); font-size: .95rem; margin-top: 2px; flex: 0 0 auto; }
.jc-facts span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.jc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jc-tag {
    font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    background: var(--jc-soft); color: #344054; border: 1px solid var(--jc-line);
}
.jc-tag--full-time  { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.jc-tag--part-time  { background: #f4f3ff; color: #5925dc; border-color: #d9d6fe; }
.jc-tag--freelance  { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.jc-tag--internship { background: #fdf2fa; color: #c11574; border-color: #fcceee; }
.jc-tag--temporary  { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.jc-tag--contractual{ background: #fef3f2; color: #b42318; border-color: #fecdca; }
.jc-tag--remote     { background: #f0fdf9; color: #107569; border-color: #99f6e0; }

.jc-foot {
    margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--jc-line);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.jc-pay { display: grid; gap: 4px; min-width: 0; }
.jc-pay strong { color: var(--jc-ink); font-size: 1.05rem; font-weight: 800; }
.jc-deadline { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; }
.jc-deadline.is-open   { color: #067647; }
.jc-deadline.is-urgent { color: #b42318; }
.jc-deadline.is-closed { color: #98a2b3; }

.jc-apply {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 9px 14px; font-size: .875rem; font-weight: 700; text-decoration: none;
    color: var(--jc-accent); background: color-mix(in srgb, var(--jc-accent) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--jc-accent) 28%, #fff);
    border-radius: var(--appearance-button-border-radius, 10px);
    transition: background .2s, color .2s;
}
.jc-apply:hover, .jc:hover .jc-apply { background: var(--jc-accent); color: #fff; }

/* Dark mode from the Customize panel */
body.dark-mode .jc { --jc-ink: #f2f4f7; --jc-muted: #a6aebb; --jc-line: #2a3140; --jc-soft: #1b2230; background: #141a24; }
body.dark-mode .jc-save { background: #1b2230; }
/* Logos are mostly dark marks: keep them on a light chip. */
body.dark-mode .jc-logo { background: #f8fafc; border-color: #2a3140; }
body.dark-mode .jc-apply { background: color-mix(in srgb, var(--jc-accent) 18%, #141a24); border-color: color-mix(in srgb, var(--jc-accent) 40%, #141a24); color: #fff; }
body.dark-mode .jc-tag { background: color-mix(in srgb, currentColor 14%, transparent); border-color: color-mix(in srgb, currentColor 32%, transparent); color: #d0d5dd; }
body.dark-mode .jc-tag--full-time  { color: #75e0a7; }
body.dark-mode .jc-tag--part-time  { color: #bdb4fe; }
body.dark-mode .jc-tag--freelance  { color: #84caff; }
body.dark-mode .jc-tag--internship { color: #faa7e0; }
body.dark-mode .jc-tag--temporary  { color: #fec84b; }
body.dark-mode .jc-tag--contractual{ color: #fda29b; }
body.dark-mode .jc-tag--remote     { color: #5fe9d0; }
body.dark-mode .jc-deadline.is-open   { color: #75e0a7; }
body.dark-mode .jc-deadline.is-urgent { color: #fda29b; }

[dir="rtl"] .jc-facts li, [dir="rtl"] .jc-head { text-align: right; }

@media (prefers-reduced-motion: reduce) { .jc, .jc-save, .jc-apply { transition: none; } .jc:hover { transform: none; } }
@media (max-width: 575.98px) { .jc { padding: 16px; } .jc-foot { flex-wrap: wrap; } }