/* jobs_hub.php — the Jobs front door laid out like a job board home (KVI #122). Shell (topbar/sidebar/footer)
   untouched; everything here is the central content. Tokens from kv_utils.css (--kv-primary etc.). */
.kv-jobs-hub .kv-jh-h2{ font-size:1.35rem; font-weight:800; color:var(--bs-gray-900,#1b1b29); }
.kv-jh-hero{ background:linear-gradient(180deg,#fff 0%,#f4f6ff 100%); border:1px solid var(--bs-border-color,#e6e8ee); }
.kv-jh-title{ font-size:2rem; color:var(--bs-gray-900,#1b1b29); }
@media (min-width:992px){ .kv-jh-title{ font-size:2.4rem; } }
.kv-jh-search{ display:flex; align-items:stretch; max-width:900px; background:#fff; border:1px solid var(--bs-border-color,#e6e8ee); border-radius:999px; box-shadow:0 10px 30px rgba(15,23,42,.08); padding:6px; gap:2px; }
.kv-jh-search__field{ display:flex; align-items:center; gap:8px; padding:0 14px; min-width:0; border-left:1px solid var(--bs-border-color,#e6e8ee); }
.kv-jh-search__field:first-child{ border-left:0; }
.kv-jh-search__field--grow{ flex:1 1 40%; }
.kv-jh-search__field input, .kv-jh-search__field select{ border:0; outline:0; background:transparent; width:100%; min-width:0; font-size:.95rem; padding:10px 0; color:var(--bs-gray-800,#252f4a); }
.kv-jh-search__field select{ cursor:pointer; }
.kv-jh-search__btn{ border-radius:999px !important; padding:.65rem 1.6rem !important; flex-shrink:0; }
@media (max-width:767.98px){
  .kv-jh-search{ flex-direction:column; border-radius:16px; }
  .kv-jh-search__field{ border-left:0; border-top:1px solid var(--bs-border-color,#e6e8ee); }
  .kv-jh-search__field:first-child{ border-top:0; }
  .kv-jh-search__btn{ margin-top:6px; border-radius:12px !important; }
}
.kv-jh-quick{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.kv-jh-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--bs-border-color,#e6e8ee); border-radius:12px; background:#fff; color:var(--bs-gray-800,#252f4a); font-weight:600; font-size:.9rem; text-decoration:none; box-shadow:0 2px 8px rgba(15,23,42,.04); transition:border-color .15s, box-shadow .15s; }
.kv-jh-chip:hover{ border-color:var(--kv-primary,#4338ca); color:var(--kv-primary,#4338ca); box-shadow:0 6px 16px rgba(67,56,202,.10); }
.kv-jh-chip.is-on{ background:var(--kv-primary,#4338ca); border-color:var(--kv-primary,#4338ca); color:#fff; }
.kv-jh-chip.is-on i{ color:#fff !important; }
.kv-jh-company{ border:1px solid var(--bs-border-color,#e6e8ee); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.kv-jh-company:hover, .kv-jh-job:hover, .kv-jh-role:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.08); }
.kv-jh-company__logo{ width:64px; height:64px; margin:0 auto; border-radius:14px; border:1px solid var(--bs-border-color,#e6e8ee); background:#f7f8fc; display:flex; align-items:center; justify-content:center; overflow:hidden; font-weight:800; font-size:1.4rem; color:var(--kv-primary,#4338ca); }
.kv-jh-company__logo img{ width:100%; height:100%; object-fit:contain; }
.kv-jh-company__logo--sm{ width:44px; height:44px; margin:0; border-radius:10px; font-size:1rem; }
.kv-jh-roles{ background:linear-gradient(135deg,#fff 0%,#fff7f0 100%); border:1px solid var(--bs-border-color,#e6e8ee); }
.kv-jh-role{ display:block; padding:14px 16px; border:1px solid var(--bs-border-color,#e6e8ee); border-radius:12px; background:#fff; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.kv-jh-job{ border:1px solid var(--bs-border-color,#e6e8ee); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.kv-jh-job__title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.kv-jh-band{ background:linear-gradient(120deg,#1b1b29 0%,var(--kv-primary,#4338ca) 100%); border:0; }
.kv-jh-band .text-white-75{ color:rgba(255,255,255,.78); }
.kv-jobs-hub .kv-pager{ border:1px solid rgba(15,23,42,.08); border-radius:8px; background:#fff; padding:.65rem; }
.kv-jobs-hub .kv-pager .btn{ min-width:74px; }
@media (max-width:767.98px){ .kv-jobs-hub .kv-pager .btn{ min-width:auto; flex:1; } }