/* ==========================================================================
   JOB OPENINGS PAGE STYLES
   ========================================================================== */

.ko-jobs-toolbar{ background:var(--paper); border-bottom:1px solid var(--line); padding:18px 0; position:sticky; top:78px; z-index:50; }
.ko-jobs-toolbar-inner{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ko-jobs-filter{ display:flex; align-items:center; gap:8px; }
.ko-jobs-filter label{ font-size:12.5px; font-weight:700; color:var(--navy); }
.ko-jobs-filter select{ padding:9px 12px; border:1.5px solid var(--line); border-radius:8px; background:#fff; font-size:13.5px; color:var(--ink); }
.ko-jobs-count{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); }
@media (max-width:700px){ .ko-jobs-toolbar{ position:static; } .ko-jobs-count{ margin-left:0; width:100%; } }

.ko-jobs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.ko-job-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, border-color .2s; }
.ko-job-card:hover{ box-shadow:var(--shadow-card); border-color:rgba(200,153,46,.35); }

.ko-job-card-media{ height:150px; background:var(--paper); }
.ko-job-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ko-job-card-media-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--gold-lt);
  background:
    radial-gradient(circle at 20% 20%, rgba(200,153,46,.25), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(43,179,172,.22), transparent 55%),
    linear-gradient(160deg,var(--navy),var(--navy-deep));
}

.ko-job-card-body{ padding:24px 28px 28px; display:flex; flex-direction:column; flex:1; }
.ko-job-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ko-job-posted{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }
.ko-job-card h2{ font-size:21px; margin-bottom:12px; }
.ko-job-meta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ko-job-meta span{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); }
.ko-job-meta svg{ color:var(--gold-dim); }

.ko-job-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; background:var(--paper); border-radius:14px; padding:14px; margin-bottom:20px; }
.ko-job-stats div{ text-align:center; }
.ko-job-stats span{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:4px; }
.ko-job-stats strong{ font-size:13px; color:var(--navy); font-family:'Inter',sans-serif; line-height:1.3; display:block; }

/* Salary text ("AED 1,800 – 2,200 / month") is the longest value here —
   on narrow phones, 3 cramped columns force it onto many tiny lines.
   Stack to a single labelled column instead. */
@media (max-width:420px){
  .ko-job-stats{ grid-template-columns:1fr; gap:8px; text-align:left; }
  .ko-job-stats div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-align:left; }
  .ko-job-stats span{ margin-bottom:0; white-space:nowrap; }
}

.ko-job-section{ margin-bottom:18px; }
.ko-job-section h3{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:10px; }
.ko-job-bullets{ display:flex; flex-direction:column; gap:7px; }
.ko-job-bullets li{ font-size:13px; color:var(--ink-soft); line-height:1.55; padding-left:16px; position:relative; }
.ko-job-bullets li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.ko-job-benefit-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ko-job-benefit-tags span{ font-size:11.5px; font-weight:600; color:#0d6e68; background:rgba(43,179,172,.1); border:1px solid rgba(43,179,172,.3); padding:5px 10px; border-radius:999px; }

.ko-job-card-body > .ko-btn{ margin-top:auto; }

.ko-jobs-empty{ text-align:center; padding:40px 20px; color:var(--ink-soft); font-size:14.5px; }
.ko-jobs-empty a{ color:var(--gold-dim); font-weight:700; text-decoration:underline; }

@media (max-width:860px){ .ko-jobs-grid{ grid-template-columns:1fr; } }

.ko-jobs-cta{ background:var(--paper); border-top:1px solid var(--line); padding:56px 0; }
.ko-jobs-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ko-jobs-cta-inner h2{ font-size:24px; margin-bottom:8px; }
.ko-jobs-cta-inner p{ font-size:14.5px; color:var(--ink-soft); max-width:52ch; }