/* ═══ BRAVOS JOB PORTAL ═══ */

/* ── Jobs Home ── */
.jb-hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 60%, #1D4ED8 100%);
  padding: 72px 0 60px; text-align: center; color: #fff;
}
.jb-hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px; padding: 5px 14px; font-size: .78rem;
  color: rgba(255,255,255,.85); margin-bottom: 20px; backdrop-filter: blur(4px);
}
.jb-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.2;
  margin-bottom: 14px; color: #fff;
}
.jb-hero h1 span { color: #60A5FA; }
.jb-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.7); margin-bottom: 36px; }

/* Search bar */
.jb-search-bar {
  background: #fff; border-radius: 14px; padding: 6px 6px 6px 0;
  display: flex; align-items: center; max-width: 780px; margin: 0 auto 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.jb-search-field {
  display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 16px;
  border-right: 1.5px solid #E5E7EB;
}
.jb-search-field:last-of-type { border-right: none; }
.jb-search-field svg { color: #9CA3AF; flex-shrink: 0; }
.jb-search-field input {
  border: none; outline: none; font-size: .9rem; color: #111827;
  width: 100%; font-family: var(--font); background: transparent;
}
.jb-search-field input::placeholder { color: #9CA3AF; }
.jb-search-btn {
  background: #0052CC; color: #fff; border: none; border-radius: 10px;
  padding: 12px 24px; font-size: .9rem; font-weight: 700; cursor: pointer;
  font-family: var(--font); transition: background .15s; white-space: nowrap; flex-shrink: 0;
}
.jb-search-btn:hover { background: #0041A3; }
.jb-hero-stats {
  display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
  font-size: .8rem; color: rgba(255,255,255,.65);
}
.jb-hero-stat strong { color: #fff; font-size: .9rem; }

/* Categories */
.jb-cats-section { padding: 56px 0 40px; background: #F8F9FB; }
.jb-section-hd { text-align: center; margin-bottom: 32px; }
.jb-section-hd h2 { font-size: 1.65rem; font-weight: 800; color: #111827; margin-bottom: 6px; }
.jb-section-hd p  { font-size: .95rem; color: #6B7280; }
.jb-cats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.jb-cat-card {
  background: #fff; border-radius: 12px; padding: 22px 16px; text-align: center;
  border: 1.5px solid #E5E7EB; cursor: pointer; transition: all .18s;
  text-decoration: none; display: block;
}
.jb-cat-card:hover { border-color: #0052CC; background: #EFF6FF; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,82,204,.12); }
.jb-cat-icon { font-size: 2rem; margin-bottom: 8px; display: block; }
.jb-cat-name { font-size: .83rem; font-weight: 700; color: #111827; margin-bottom: 4px; }
.jb-cat-count { font-size: .72rem; color: #6B7280; }

/* Featured / Recent Jobs */
.jb-jobs-section { padding: 56px 0; }
.jb-jobs-section.alt { background: #F8F9FB; }
.jb-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }

/* Job Card */
.jb-job-card {
  background: #fff; border-radius: 14px; padding: 20px;
  border: 1.5px solid #E5E7EB; transition: all .18s;
  display: flex; flex-direction: column; gap: 12px;
}
.jb-job-card:hover { border-color: #93C5FD; box-shadow: 0 6px 24px rgba(0,82,204,.1); transform: translateY(-2px); }
.jb-job-card.featured { border-color: #FCD34D; background: linear-gradient(135deg, #FFFBEB, #fff); }
.jb-card-top { display: flex; align-items: flex-start; gap: 12px; }
.jb-company-logo {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: #EFF6FF; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: #1D4ED8; border: 1.5px solid #DBEAFE;
  overflow: hidden;
}
.jb-company-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.jb-card-info { flex: 1; min-width: 0; }
.jb-card-title {
  font-size: .95rem; font-weight: 700; color: #111827; line-height: 1.3;
  margin-bottom: 2px; display: block; text-decoration: none;
}
.jb-card-title:hover { color: #0052CC; }
.jb-card-company { font-size: .8rem; color: #6B7280; }
.jb-featured-badge {
  background: #FCD34D; color: #78350F; font-size: .63rem; font-weight: 700;
  padding: 2px 8px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.jb-card-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-meta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; color: #374151; background: #F3F4F6;
  padding: 3px 10px; border-radius: 100px;
}
.jb-meta-pill.salary { background: #DCFCE7; color: #166534; font-weight: 600; }
.jb-meta-pill.remote { background: #EDE9FE; color: #5B21B6; }
.jb-meta-pill.intern  { background: #FEF3C7; color: #92400E; }
.jb-card-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.jb-skill-tag {
  font-size: .7rem; color: #374151; background: #F9FAFB;
  border: 1px solid #E5E7EB; padding: 2px 9px; border-radius: 100px;
}
.jb-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.jb-card-date { font-size: .72rem; color: #9CA3AF; }
.jb-card-actions { display: flex; gap: 8px; }
.jb-save-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid #E5E7EB;
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #9CA3AF; transition: all .15s; font-size: 1rem;
}
.jb-save-btn:hover, .jb-save-btn.saved { border-color: #F59E0B; color: #F59E0B; background: #FFFBEB; }
.jb-apply-btn {
  padding: 7px 18px; border-radius: 8px; background: #0052CC; color: #fff;
  font-size: .78rem; font-weight: 700; border: none; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: background .15s; font-family: var(--font);
}
.jb-apply-btn:hover { background: #0041A3; color: #fff; }
.jb-apply-btn.applied { background: #DCFCE7; color: #166534; cursor: default; }

/* ── Search / Listing Page ── */
.jb-search-page { padding: 0; }
.jb-search-topbar {
  background: #fff; border-bottom: 1px solid #E5E7EB;
  padding: 16px 0; position: sticky; top: var(--nav-h,64px); z-index: 100;
}
.jb-search-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jb-search-form input, .jb-search-form select {
  padding: 9px 14px; border: 1.5px solid #E5E7EB; border-radius: 8px;
  font-size: .85rem; color: #111827; font-family: var(--font);
  background: #fff; outline: none; transition: border-color .15s;
}
.jb-search-form input:focus, .jb-search-form select:focus { border-color: #0052CC; }
.jb-search-form .jb-q { flex: 1; min-width: 200px; }
.jb-search-form .jb-loc { min-width: 160px; }
.jb-search-submit {
  padding: 9px 22px; background: #0052CC; color: #fff; border: none;
  border-radius: 8px; font-size: .85rem; font-weight: 700; cursor: pointer;
  font-family: var(--font); transition: background .15s;
}
.jb-search-submit:hover { background: #0041A3; }

.jb-listing-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 24px 0 48px; align-items: start; }

/* Sidebar filters */
.jb-filters {
  background: #fff; border-radius: 14px; border: 1.5px solid #E5E7EB;
  padding: 20px; position: sticky; top: calc(var(--nav-h,64px) + 70px);
}
.jb-filter-hd { font-size: .8rem; font-weight: 800; color: #374151; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.jb-filter-clear { font-size: .72rem; color: #0052CC; cursor: pointer; font-weight: 600; text-decoration: none; }
.jb-filter-group { margin-bottom: 18px; border-bottom: 1px solid #F3F4F6; padding-bottom: 18px; }
.jb-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.jb-filter-label { font-size: .75rem; font-weight: 700; color: #6B7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.jb-filter-option { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; }
.jb-filter-option input { accent-color: #0052CC; width: 15px; height: 15px; cursor: pointer; }
.jb-filter-option span { font-size: .82rem; color: #374151; }
.jb-filter-select {
  width: 100%; padding: 8px 10px; border: 1.5px solid #E5E7EB; border-radius: 8px;
  font-size: .83rem; color: #374151; font-family: var(--font); background: #fff;
}
.jb-filter-apply { width: 100%; padding: 10px; background: #0052CC; color: #fff; border: none; border-radius: 8px; font-size: .83rem; font-weight: 700; cursor: pointer; font-family: var(--font); margin-top: 14px; }

/* Results */
.jb-results-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.jb-results-count { font-size: .9rem; color: #374151; font-weight: 600; }
.jb-sort-select { padding: 7px 12px; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: .82rem; color: #374151; font-family: var(--font); background: #fff; }
.jb-results-list { display: flex; flex-direction: column; gap: 14px; }

/* List view job card */
.jb-list-card {
  background: #fff; border-radius: 12px; border: 1.5px solid #E5E7EB;
  padding: 18px 20px; display: flex; align-items: center; gap: 16px;
  transition: all .18s; text-decoration: none;
}
.jb-list-card:hover { border-color: #93C5FD; box-shadow: 0 4px 16px rgba(0,82,204,.08); }
.jb-list-logo {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  background: #EFF6FF; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800; color: #1D4ED8; border: 1.5px solid #DBEAFE;
}
.jb-list-body { flex: 1; min-width: 0; }
.jb-list-title { font-size: .93rem; font-weight: 700; color: #111827; margin-bottom: 3px; }
.jb-list-company { font-size: .8rem; color: #6B7280; margin-bottom: 6px; }
.jb-list-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.jb-list-salary { font-size: .82rem; font-weight: 700; color: #166534; white-space: nowrap; }
.jb-list-date { font-size: .7rem; color: #9CA3AF; }

/* Pagination */
.jb-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.jb-page-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB;
  background: #fff; color: #374151; font-size: .82rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all .15s;
}
.jb-page-btn:hover { border-color: #0052CC; color: #0052CC; }
.jb-page-btn.active { background: #0052CC; color: #fff; border-color: #0052CC; }
.jb-page-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Job Detail Page ── */
.jb-detail-page { padding: 32px 0 60px; }
.jb-detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.jb-detail-main { background: #fff; border-radius: 16px; border: 1.5px solid #E5E7EB; padding: 32px; }
.jb-detail-header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #F3F4F6; }
.jb-detail-logo { width: 64px; height: 64px; border-radius: 12px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #1D4ED8; border: 1.5px solid #DBEAFE; flex-shrink: 0; }
.jb-detail-title { font-size: 1.45rem; font-weight: 800; color: #111827; margin-bottom: 4px; }
.jb-detail-company { font-size: 1rem; color: #0052CC; font-weight: 600; margin-bottom: 10px; }
.jb-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.jb-big-apply {
  padding: 13px 32px; background: #0052CC; color: #fff; border: none; border-radius: 10px;
  font-size: .95rem; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  transition: background .15s;
}
.jb-big-apply:hover { background: #0041A3; color: #fff; }
.jb-big-apply.applied { background: #DCFCE7; color: #166534; cursor: default; }
.jb-big-save {
  padding: 13px 20px; background: #fff; color: #374151; border: 1.5px solid #D1D5DB;
  border-radius: 10px; font-size: .88rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font);
  transition: all .15s;
}
.jb-big-save:hover, .jb-big-save.saved { border-color: #F59E0B; color: #D97706; background: #FFFBEB; }
.jb-detail-section { margin-bottom: 28px; }
.jb-detail-section h3 { font-size: 1rem; font-weight: 800; color: #111827; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #EFF6FF; }
.jb-detail-section p, .jb-detail-section li { font-size: .9rem; color: #374151; line-height: 1.75; }
.jb-detail-section ul { padding-left: 18px; }
.jb-detail-section ul li { margin-bottom: 5px; }
.jb-skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-skill-badge { padding: 5px 14px; border-radius: 100px; background: #EFF6FF; color: #1D4ED8; font-size: .8rem; font-weight: 600; border: 1px solid #DBEAFE; }

/* Sidebar card */
.jb-detail-sidebar { display: flex; flex-direction: column; gap: 16px; }
.jb-sidebar-card { background: #fff; border-radius: 14px; border: 1.5px solid #E5E7EB; padding: 20px; }
.jb-sidebar-card h4 { font-size: .85rem; font-weight: 800; color: #374151; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .05em; }
.jb-info-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.jb-info-row:last-child { margin-bottom: 0; }
.jb-info-icon { width: 32px; height: 32px; border-radius: 8px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; }
.jb-info-label { font-size: .7rem; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.jb-info-value { font-size: .85rem; color: #111827; font-weight: 600; }
.jb-similar-job { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F3F4F6; text-decoration: none; }
.jb-similar-job:last-child { border-bottom: none; }
.jb-similar-logo { width: 34px; height: 34px; border-radius: 8px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; color: #1D4ED8; flex-shrink: 0; }
.jb-similar-title { font-size: .82rem; font-weight: 700; color: #111827; margin-bottom: 2px; }
.jb-similar-company { font-size: .72rem; color: #6B7280; }

/* ── Apply Page ── */
.jb-apply-page { max-width: 700px; margin: 40px auto; padding: 0 20px 60px; }
.jb-apply-card { background: #fff; border-radius: 16px; border: 1.5px solid #E5E7EB; padding: 32px; }
.jb-apply-job-hd { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; }
.jb-apply-logo { width: 52px; height: 52px; border-radius: 10px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: #1D4ED8; flex-shrink: 0; }
.jb-apply-job-title { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 2px; }
.jb-apply-company { font-size: .83rem; color: #6B7280; }
.jb-apply-field { margin-bottom: 18px; }
.jb-apply-field label { display: block; font-size: .75rem; font-weight: 700; color: #6B7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.jb-apply-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid #E5E7EB; border-radius: 10px;
  font-size: .88rem; color: #111827; font-family: var(--font); resize: vertical;
  min-height: 140px; outline: none; transition: border-color .15s; box-sizing: border-box;
}
.jb-apply-field textarea:focus { border-color: #0052CC; }
.jb-apply-submit { width: 100%; padding: 14px; background: #0052CC; color: #fff; border: none; border-radius: 10px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: var(--font); transition: background .15s; }
.jb-apply-submit:hover { background: #0041A3; }

/* ── My Applications ── */
.jb-dash-page { padding: 32px 0 60px; }
.jb-dash-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.jb-dash-hd h1 { font-size: 1.45rem; font-weight: 800; color: #111827; }
.jb-app-card {
  background: #fff; border-radius: 12px; border: 1.5px solid #E5E7EB;
  padding: 18px 20px; display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px; transition: box-shadow .15s;
}
.jb-app-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.jb-app-logo { width: 44px; height: 44px; border-radius: 10px; background: #EFF6FF; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; color: #1D4ED8; flex-shrink: 0; }
.jb-app-body { flex: 1; min-width: 0; }
.jb-app-title { font-size: .93rem; font-weight: 700; color: #111827; margin-bottom: 2px; }
.jb-app-company { font-size: .8rem; color: #6B7280; }
.jb-app-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.jb-status-badge {
  padding: 4px 12px; border-radius: 100px; font-size: .72rem; font-weight: 700;
}
.jb-status-applied    { background: #EFF6FF; color: #1D4ED8; }
.jb-status-viewed     { background: #FEF3C7; color: #92400E; }
.jb-status-shortlisted{ background: #DCFCE7; color: #166534; }
.jb-status-rejected   { background: #FEE2E2; color: #991B1B; }
.jb-status-hired      { background: #D1FAE5; color: #065F46; }
.jb-app-date { font-size: .7rem; color: #9CA3AF; }

/* ── Post a Job ── */
.jb-post-page { max-width: 800px; margin: 40px auto; padding: 0 20px 60px; }
.jb-post-card { background: #fff; border-radius: 16px; border: 1.5px solid #E5E7EB; padding: 32px; }
.jb-post-card h1 { font-size: 1.4rem; font-weight: 800; color: #111827; margin-bottom: 6px; }
.jb-post-card > p { font-size: .88rem; color: #6B7280; margin-bottom: 28px; }
.jb-post-field { margin-bottom: 18px; }
.jb-post-field label { display: block; font-size: .75rem; font-weight: 700; color: #6B7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.jb-post-input, .jb-post-select, .jb-post-textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid #E5E7EB; border-radius: 10px;
  font-size: .88rem; color: #111827; font-family: var(--font); background: #fff;
  outline: none; transition: border-color .15s; box-sizing: border-box;
}
.jb-post-input:focus, .jb-post-select:focus, .jb-post-textarea:focus { border-color: #0052CC; }
.jb-post-textarea { resize: vertical; min-height: 120px; }
.jb-post-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jb-post-section-title { font-size: .85rem; font-weight: 800; color: #374151; margin: 24px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #F3F4F6; }
.jb-post-submit { width: 100%; padding: 14px; background: #0052CC; color: #fff; border: none; border-radius: 10px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: var(--font); margin-top: 8px; transition: background .15s; }
.jb-post-submit:hover { background: #0041A3; }

/* Empty state */
.jb-empty { text-align: center; padding: 60px 20px; }
.jb-empty-icon { font-size: 3.5rem; margin-bottom: 16px; }
.jb-empty h3 { font-size: 1.15rem; font-weight: 700; color: #111827; margin-bottom: 8px; }
.jb-empty p { font-size: .88rem; color: #6B7280; margin-bottom: 20px; }
.jb-empty-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; background: #0052CC; color: #fff; border-radius: 8px; font-size: .85rem; font-weight: 700; text-decoration: none; }

/* Container util */
.jb-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Responsive */
@media (max-width: 900px) {
  .jb-listing-layout { grid-template-columns: 1fr; }
  .jb-filters { position: static; }
  .jb-detail-layout { grid-template-columns: 1fr; }
  .jb-detail-sidebar { order: -1; }
  .jb-search-bar { flex-direction: column; padding: 12px; gap: 10px; border-radius: 10px; }
  .jb-search-field { border-right: none; border-bottom: 1px solid #E5E7EB; width: 100%; padding: 8px 12px; }
  .jb-search-field:last-of-type { border-bottom: none; }
  .jb-search-btn { width: 100%; justify-content: center; padding: 13px; }
  .jb-search-topbar { position: static; }
  .jb-search-form { flex-direction: column; gap: 8px; }
  .jb-search-form .jb-q, .jb-search-form .jb-loc { min-width: 100%; }
  .jb-search-submit { width: 100%; }
  .jb-detail-actions { flex-wrap: wrap; }
  .jb-big-apply, .jb-big-save { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 768px) {
  .jb-hero { padding: 60px 0 48px; }
  .jb-hero h1 { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .jb-hero-sub { font-size: .92rem; }
  .jb-hero-stats { gap: 14px; font-size: .75rem; flex-wrap: wrap; justify-content: center; }
  .jb-container { padding: 0 16px; }
  .jb-cats-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .jb-cat-card { padding: 18px 12px; }
  .jb-jobs-grid { grid-template-columns: 1fr; }
  .jb-section-hd h2 { font-size: 1.35rem; }
  .jb-detail-main { padding: 20px 16px; }
  .jb-detail-title { font-size: 1.2rem; }
  .jb-detail-logo { width: 52px; height: 52px; font-size: 1.2rem; }
  .jb-dash-hd { flex-direction: column; align-items: flex-start; gap: 10px; }
  .jb-results-hd { flex-direction: column; align-items: flex-start; }
  .jb-post-card { padding: 24px 16px; }
  .jb-apply-card { padding: 24px 16px; }
  .jb-apply-page, .jb-post-page { margin: 20px auto; padding: 0 12px 48px; }
  .jb-cats-section { padding: 40px 0 28px; }
  .jb-jobs-section { padding: 40px 0; }
  .jb-listing-layout { padding: 16px 0 32px; }
  .jb-detail-page { padding: 20px 0 40px; }
}
@media (max-width: 600px) {
  .jb-jobs-grid { grid-template-columns: 1fr; }
  .jb-post-row2 { grid-template-columns: 1fr; }
  .jb-list-right { display: none; }
  .jb-cats-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .jb-pagination { gap: 4px; }
  .jb-page-btn { width: 32px; height: 32px; font-size: .75rem; }
}
@media (max-width: 480px) {
  .jb-hero { padding: 48px 0 36px; }
  .jb-container { padding: 0 12px; }
  .jb-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .jb-cat-card { padding: 16px 10px; }
  .jb-detail-header { flex-direction: column; }
  .jb-detail-logo { margin-bottom: 8px; }
  .jb-app-card { flex-wrap: wrap; }
  .jb-app-right { flex-direction: row; width: 100%; justify-content: space-between; min-width: 100%; }
  .jb-job-card { padding: 16px; }
  .jb-list-card { padding: 14px 16px; }
  .jb-apply-field textarea { min-height: 120px; }
}


/* ════════════════════════════════════════════════════════════
   BRAVOS UI 2.0 — jobs.css additions (category tiles, motion, CTA)
   ════════════════════════════════════════════════════════════ */
.jb-cat-card{ padding:24px 16px; transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans); }
.jb-cat-card:hover{ transform:translateY(-4px); }
.jb-cat-icon{
  width:56px; height:56px; border-radius:16px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:#1D4ED8;
  transition:transform var(--trans), background var(--trans);
}
.jb-cat-icon svg{ width:26px; height:26px; display:block; }
.jb-cat-card:hover .jb-cat-icon{ transform:scale(1.1) rotate(-4deg); background:linear-gradient(135deg,#DBEAFE,#BFDBFE); }

/* Job card hover refinement */
.jb-job-card{ transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans); }
.jb-job-card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,82,204,.12); }
.jb-list-card{ transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans); }
.jb-list-card:hover{ transform:translateY(-2px); }
.jb-apply-btn,.jb-save-btn,.jb-big-apply,.jb-big-save,.jb-search-btn{ transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans), border-color var(--trans); }
.jb-apply-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,82,204,.3); }
.jb-save-btn:hover{ transform:translateY(-1px); }

/* View-all button */
.jb-viewall-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 30px;
  background:#0052CC; color:#fff; border-radius:10px; font-weight:700; font-size:.9rem;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,82,204,.28);
  transition:transform var(--trans), box-shadow var(--trans), gap var(--trans);
}
.jb-viewall-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,82,204,.4); gap:13px; color:#fff; }

/* CTA banner */
.jb-cta-banner{ background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%); padding:72px 0; text-align:center; }
.jb-cta-banner h2{ font-size:clamp(1.5rem,3.5vw,1.9rem); font-weight:800; color:#fff; margin-bottom:12px; }
.jb-cta-banner p{ color:rgba(255,255,255,.7); margin-bottom:28px; font-size:1rem; }
.jb-cta-btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 34px;
  background:#0052CC; color:#fff; border-radius:11px; font-weight:700; font-size:.95rem;
  text-decoration:none; box-shadow:0 8px 24px rgba(0,82,204,.4);
  transition:transform var(--trans), box-shadow var(--trans);
}
.jb-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,82,204,.55); color:#fff; }


/* ════════════════════════════════════════════════════════════
   BRAVOS UI 3.0 — jobs page refinement
   Loaded via extra_css, so responsive.css still lands after this.

   Palette note: this sheet was built on #0052CC while the rest of the
   site uses --navy-light (#2563eb). Two blues one hue apart read as a
   mistake rather than a choice, so the accents below defer to the
   shared tokens.
   ════════════════════════════════════════════════════════════ */

.jb-cats-section, .jb-jobs-section { position:relative; }

/* ── Category grid ───────────────────────────────────────────
   Was `grid-template-columns: repeat(auto-fill, minmax(160px,1fr))`.
   auto-fill packs a whole number of tracks and left-aligns them, so ten
   categories became a row of six and a ragged row of four hanging off
   the left edge. Flex with a capped basis wraps the same way but
   centres every row, whatever the category count.
   ──────────────────────────────────────────────────────────── */
.jb-cats-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:16px;
}
.jb-cat-card{
  /* flex-grow deliberately 0: letting the tiles grow made the four in the
     last row wider than the six above them, which is the unevenness this
     was meant to fix. Fixed basis + centred rows keeps every tile
     identical whatever the category count. */
  flex:0 1 180px;
  min-width:0;
  /* Column layout so the count can be pinned to the bottom: a
     two-line name ("Information Technology") used to shove its count
     lower than every sibling's. */
  display:flex; flex-direction:column; align-items:center;
  padding:26px 16px 20px;
  border-radius:16px;
  border:1.5px solid var(--gray-200);
  background:#fff;
  position:relative; overflow:hidden;
}
.jb-cat-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--navy-light), var(--accent-lt));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-slow, .45s) var(--ease-out, ease);
}
.jb-cat-card:hover::before{ transform:scaleX(1); }
.jb-cat-card:hover{
  border-color:rgba(37,99,235,.35);
  background:#fff;
  box-shadow:0 14px 32px rgba(37,99,235,.14);
}
.jb-cat-icon{
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
  color:var(--navy-light);
  margin-bottom:14px;
}
.jb-cat-card:hover .jb-cat-icon{
  background:linear-gradient(135deg, var(--navy-light), var(--accent));
  color:#fff;
}
/* Reserve two lines so single-line names don't ride up and break the
   baseline across the row. */
.jb-cat-name{
  font-size:.88rem; font-weight:700; color:var(--gray-900);
  line-height:1.35; min-height:2.7em;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:2px;
}
.jb-cat-count{
  margin-top:auto;
  font-size:.75rem; font-weight:600; color:var(--gray-500);
}
.jb-cat-go{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-top:12px; border-radius:50%;
  background:var(--gray-100); color:var(--gray-500);
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--t-mid,.25s) var(--ease,ease),
             transform var(--t-mid,.25s) var(--ease-out,ease),
             background var(--t-mid,.25s) var(--ease,ease),
             color var(--t-mid,.25s) var(--ease,ease);
}
.jb-cat-go svg{ width:13px; height:13px; }
.jb-cat-card:hover .jb-cat-go{
  opacity:1; transform:translateY(0);
  background:var(--navy-light); color:#fff;
}

/* ── Featured badge ──────────────────────────────────────────
   The star and the word sat on the text baseline with no alignment
   rule, so the glyph rode high against the caps. ──────────── */
.jb-featured-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#FDE68A,#FCD34D);
  color:#78350F;
  font-size:.65rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px;
  line-height:1;
  box-shadow:0 2px 8px rgba(217,119,6,.28);
}
.jb-featured-badge svg{ width:10px; height:10px; flex-shrink:0; display:block; }

/* ── Job cards ── */
.jb-job-card{ border-radius:16px; padding:22px; }
.jb-job-card.featured{
  border-color:#FCD34D;
  background:linear-gradient(150deg,#FFFCF2 0%,#fff 55%);
}
.jb-card-top{ align-items:flex-start; gap:13px; }
.jb-company-logo{
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
  color:var(--navy-light); border-color:#DBEAFE;
  transition:transform var(--t-mid,.25s) var(--ease-out,ease);
}
.jb-job-card:hover .jb-company-logo{ transform:scale(1.05); }
.jb-card-title{ transition:color var(--t-fast,.15s) var(--ease,ease); }
.jb-card-title:hover{ color:var(--navy-light); }
.jb-meta-pill{ font-weight:600; }
.jb-skill-tag{ transition:background var(--t-fast,.15s) var(--ease,ease), color var(--t-fast,.15s) var(--ease,ease); }
.jb-job-card:hover .jb-skill-tag{ background:#EFF6FF; color:var(--navy-light); }

/* ── Save button: an SVG star now, not a ★ glyph ── */
.jb-save-btn{ font-size:0; }
.jb-save-btn svg{ width:15px; height:15px; display:block; transition:transform var(--t-mid,.25s) var(--ease-out,ease); }
.jb-save-btn:hover svg{ transform:scale(1.15); }
.jb-save-btn.saved{ border-color:#F59E0B; color:#F59E0B; background:#FFFBEB; }
.jb-save-btn.saved svg{ fill:currentColor; }

.jb-apply-btn{ background:var(--navy-light); gap:5px; }
.jb-apply-btn:hover{ background:var(--navy); }
.jb-apply-btn.applied{ background:#DCFCE7; color:#166534; }

/* ── Buttons / CTA unified to the shared palette ── */
.jb-viewall-btn, .jb-cta-btn, .jb-empty-btn, .jb-search-btn{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
}
.jb-viewall-btn:hover, .jb-cta-btn:hover{
  background:linear-gradient(135deg, var(--accent), var(--navy-light));
}
.jb-cta-banner{ background:linear-gradient(135deg,#0F172A 0%, var(--navy) 100%); }

/* ── Empty states: SVG, previously a 3.5rem emoji ── */
.jb-empty-icon{
  font-size:0;
  width:76px; height:76px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--gray-100); color:var(--gray-400);
}
.jb-empty-icon svg{ width:34px; height:34px; display:block; }

/* ── Section headings ── */
.jb-section-hd h2{ letter-spacing:-.02em; }

/* ── Responsive ──
   Visual sizing only; the layout breakpoints stay in responsive.css. */
@media (max-width:700px){
  .jb-cats-grid{ gap:12px; }
  .jb-cat-card{ flex:0 1 138px; padding:20px 12px 16px; }
  .jb-cat-icon{ width:48px; height:48px; border-radius:14px; margin-bottom:11px; }
  .jb-cat-icon svg{ width:22px; height:22px; }
  .jb-cat-name{ font-size:.82rem; min-height:2.6em; }
}
@media (max-width:420px){
  /* Two per row on a phone; grow is allowed here so the pair fills the
     width rather than leaving a stripe down each side. */
  .jb-cat-card{ flex:1 1 calc(50% - 6px); }
}

/* A tap leaves :hover latched, which would pin the arrow open and keep
   the icon inverted on the last-touched tile. */
@media (hover:none){
  .jb-cat-card:hover{ transform:none; box-shadow:none; }
  .jb-cat-card:hover .jb-cat-go{ opacity:0; }
  .jb-cat-card:hover .jb-cat-icon{ background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:var(--navy-light); transform:none; }
  .jb-job-card:hover{ transform:none; }
  .jb-job-card:hover .jb-company-logo{ transform:none; }
}