/* ============================================================
   Homepage redesign (front-page.php only).
   Everything is prefixed .gj- so nothing leaks into other pages.
   Colors come from the theme variables in main.css, so the
   Appearance color themes and dark mode (html.dark) still work.
   ============================================================ */

.gj-home { font-family: var(--font); color: var(--text); }
.gj-home *, .gj-home *::before, .gj-home *::after { box-sizing: border-box; }
.gj-home a { text-decoration: none; }
.gj-home a:hover { text-decoration: none; }
.gj-home h1, .gj-home h2, .gj-home h3, .gj-home h4 { margin: 0; }

.gj-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px)  { .gj-wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .gj-wrap { padding: 0 32px; } }

.gj-eyebrow { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); }
html.dark .gj-eyebrow { color: var(--brand-400); }

.gj-section { padding: 64px 0; }
.gj-section--alt { background: var(--bg-subtle); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.gj-section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
@media (min-width: 640px) { .gj-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.gj-section-head h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; margin-top: 4px; }
@media (min-width: 640px) { .gj-section-head h2 { font-size: 2rem; } }
.gj-section-head--center { text-align: center; align-items: center; flex-direction: column; max-width: 640px; margin-left: auto; margin-right: auto; }
.gj-section-head--center p { margin: 8px 0 0; color: var(--text-soft); font-size: .92rem; }
.gj-link-more { font-size: .88rem; font-weight: 700; color: var(--brand-600); display: inline-flex; align-items: center; gap: 6px; }
html.dark .gj-link-more { color: var(--brand-400); }
.gj-link-more:hover { text-decoration: underline; }

/* ---------------- Hero ---------------- */
.gj-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 20% 20%, var(--brand-900) 0%, color-mix(in srgb, var(--brand-900) 45%, #0f172a) 50%, #0f172a 100%);
  padding: 56px 0 96px;
}
@media (min-width: 768px) { .gj-hero { padding: 88px 0 112px; } }
.gj-hero::before, .gj-hero::after { content: ''; position: absolute; width: 384px; height: 384px; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.gj-hero::before { top: -96px; right: -96px; background: color-mix(in srgb, var(--brand-500) 22%, transparent); }
.gj-hero::after  { bottom: -96px; left: -96px; background: color-mix(in srgb, var(--accent-500) 12%, transparent); }
.gj-hero .gj-wrap { position: relative; z-index: 1; }
.gj-hero-copy { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.gj-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
  font-size: .75rem; font-weight: 600; color: var(--brand-100); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
}
.gj-badge i { color: #fcd34d; }
.gj-hero h1 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
@media (min-width: 640px)  { .gj-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .gj-hero h1 { font-size: 3.75rem; } }
.gj-hero h1 span { background: linear-gradient(90deg, var(--brand-100), var(--brand-400), var(--brand-100)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gj-hero-copy p { margin: 16px auto 0; max-width: 640px; font-size: 1rem; color: rgba(224,231,255,.85); }
@media (min-width: 640px) { .gj-hero-copy p { font-size: 1.1rem; } }

/* Search */
.gj-search {
  max-width: 1024px; margin: 0 auto; background: #fff; color: #0f172a; border-radius: 18px; padding: 12px;
  display: grid; grid-template-columns: 1fr; gap: 8px; box-shadow: 0 25px 50px -12px rgba(2,6,23,.5);
}
html.dark .gj-search { background: #111827; color: #f3f4f6; }
@media (min-width: 768px) { .gj-search { grid-template-columns: 5fr 3fr 2fr 2fr; gap: 0; padding: 14px; } }
@media (min-width: 768px) { .gj-search.gj-search--scope { grid-template-columns: 4fr 2fr 3fr 2fr 2fr; } }
.gj-field { position: relative; display: flex; align-items: center; padding: 4px 0; border-bottom: 1px solid #e2e8f0; }
html.dark .gj-field { border-color: #1f2937; }
.gj-field:last-of-type { border-bottom: 0; }
@media (min-width: 768px) { .gj-field { border-bottom: 0; border-right: 1px solid #e2e8f0; padding: 0 12px 0 0; margin-right: 12px; } html.dark .gj-field { border-color: #1f2937; } .gj-field--last { border-right: 0; } }
.gj-field > i { color: #94a3b8; font-size: 1.05rem; margin: 0 12px; }
.gj-field input, .gj-field select {
  width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; font-size: .95rem;
  padding: 10px 0; min-width: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gj-field input { cursor: text; }
.gj-field input::placeholder { color: #94a3b8; }
.gj-field select option { color: #0f172a; background: #fff; }
.gj-field .gj-caret { position: absolute; right: 12px; margin: 0; font-size: .7rem; pointer-events: none; }
.gj-search button {
  min-height: 48px; border: 0; cursor: pointer; border-radius: 12px; font: inherit; font-weight: 700; font-size: .95rem; color: #fff;
  background: var(--brand-600); display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--brand-600) 60%, transparent); transition: background .15s ease, transform .1s ease;
}
.gj-search button:hover { background: var(--brand-700); }
.gj-search button:active { transform: scale(.98); }

.gj-tags { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: .85rem; }
.gj-tags > span { font-weight: 600; color: rgba(255,255,255,.7); }
.gj-tags a { padding: 4px 14px; border-radius: 999px; color: var(--brand-100); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); transition: background .15s ease; }
.gj-tags a:hover { background: rgba(255,255,255,.2); color: #fff; }

.gj-stats { margin: 44px auto 0; padding-top: 28px; max-width: 760px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 56px; text-align: center; }
.gj-stats strong { display: block; font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1.1; }
.gj-stats span { font-size: .82rem; font-weight: 500; color: var(--brand-100); }

/* ---------------- Portals ---------------- */
.gj-portals { margin-top: -48px; position: relative; z-index: 2; }
.gj-portals-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .gj-portals-grid { grid-template-columns: 1fr 1fr; } }
.gj-portal {
  display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 20px 40px -18px rgba(15,23,42,.25); transition: border-color .2s ease, transform .2s ease;
}
@media (min-width: 640px) { .gj-portal { flex-direction: row; align-items: center; } }
.gj-portal:hover { transform: translateY(-2px); }
.gj-portal--seeker:hover { border-color: var(--brand-500); }
.gj-portal--employer:hover { border-color: var(--accent-500); }
.gj-portal-icon { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all .2s ease; }
.gj-portal--seeker .gj-portal-icon   { background: var(--brand-50);  color: var(--brand-600); }
.gj-portal--employer .gj-portal-icon { background: var(--accent-50); color: var(--accent-600); }
.gj-portal--seeker:hover .gj-portal-icon   { background: var(--brand-600);  color: #fff; }
.gj-portal--employer:hover .gj-portal-icon { background: var(--accent-500); color: #fff; }
html.dark .gj-portal--seeker .gj-portal-icon   { background: rgba(99,102,241,.15); color: var(--brand-400); }
html.dark .gj-portal--employer .gj-portal-icon { background: rgba(244,63,94,.15);  color: var(--accent-400); }
.gj-portal small { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gj-portal--seeker small   { color: var(--brand-600); }
.gj-portal--employer small { color: var(--accent-600); }
html.dark .gj-portal--seeker small   { color: var(--brand-400); }
html.dark .gj-portal--employer small { color: var(--accent-400); }
.gj-portal h3 { font-size: 1.25rem; font-weight: 700; margin: 2px 0 4px; }
.gj-portal p { margin: 0; font-size: .88rem; color: var(--text-soft); }
.gj-portal-links { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .88rem; }
.gj-portal-links a { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.gj-portal--seeker .gj-portal-links a:first-child   { color: var(--brand-600); }
.gj-portal--employer .gj-portal-links a:first-child { color: var(--accent-600); }
html.dark .gj-portal--seeker .gj-portal-links a:first-child   { color: var(--brand-400); }
html.dark .gj-portal--employer .gj-portal-links a:first-child { color: var(--accent-400); }
.gj-portal-links a + a { color: var(--text-soft); font-weight: 600; }
.gj-portal-links a + a:hover { color: var(--text); }
.gj-portal-sep { color: var(--border); }

/* ---------------- Categories ---------------- */
.gj-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px)  { .gj-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gj-cat-grid { grid-template-columns: repeat(6, 1fr); } }
.gj-cat {
  display: block; padding: 20px 12px; text-align: center; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; transition: all .2s ease;
}
.gj-cat:hover { border-color: var(--brand-400); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand-600) 35%, transparent); }
.gj-cat-icon { width: 48px; height: 48px; margin: 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .2s ease; }
.gj-cat:hover .gj-cat-icon { transform: scale(1.1); }
.gj-cat h4 { margin-top: 12px; font-size: .88rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.gj-cat span { display: block; margin-top: 2px; font-size: .75rem; color: var(--text-soft); }
.gj-tone-blue    { background: #eff6ff; color: #2563eb; }
.gj-tone-emerald { background: #ecfdf5; color: #059669; }
.gj-tone-amber   { background: #fffbeb; color: #d97706; }
.gj-tone-rose    { background: #fff1f2; color: #e11d48; }
.gj-tone-purple  { background: #faf5ff; color: #9333ea; }
.gj-tone-indigo  { background: #eef2ff; color: #4f46e5; }
.gj-tone-teal    { background: #f0fdfa; color: #0d9488; }
.gj-tone-slate   { background: #f1f5f9; color: #475569; }
html.dark .gj-tone-blue    { background: rgba(37,99,235,.18);  color: #60a5fa; }
html.dark .gj-tone-emerald { background: rgba(5,150,105,.18);  color: #34d399; }
html.dark .gj-tone-amber   { background: rgba(217,119,6,.18);  color: #fbbf24; }
html.dark .gj-tone-rose    { background: rgba(225,29,72,.18);  color: #fb7185; }
html.dark .gj-tone-purple  { background: rgba(147,51,234,.18); color: #c084fc; }
html.dark .gj-tone-indigo  { background: rgba(79,70,229,.2);   color: #818cf8; }
html.dark .gj-tone-teal    { background: rgba(13,148,136,.2);  color: #2dd4bf; }
html.dark .gj-tone-slate   { background: rgba(148,163,184,.15); color: #cbd5e1; }

/* ---------------- Latest jobs ---------------- */
.gj-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 14px; background: var(--border); }
.gj-tab {
  border: 0; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; padding: 9px 18px; border-radius: 10px;
  background: transparent; color: var(--text-soft); transition: all .15s ease;
}
.gj-tab:hover { color: var(--text); }
.gj-tab.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.gj-panel[hidden] { display: none; }
.gj-job-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px)  { .gj-job-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gj-job-grid { grid-template-columns: repeat(4, 1fr); } }
.gj-job-grid .ad-slot-infeed { grid-column: 1 / -1; }

.gj-job {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 20px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), border-color .25s ease;
}
.gj-job:hover { transform: translateY(-4px); border-color: var(--brand-400); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--brand-600) 30%, transparent); }
.gj-job--featured { border-color: var(--accent-400); }
.gj-job-link::after { content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: 1; }
.gj-job-link { color: inherit; }
.gj-job-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gj-logo {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.gj-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.gj-grad-0 { background: linear-gradient(135deg, #3b82f6, #4f46e5); }
.gj-grad-1 { background: linear-gradient(135deg, #10b981, #0d9488); }
.gj-grad-2 { background: linear-gradient(135deg, #a855f7, #4f46e5); }
.gj-grad-3 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.gj-grad-4 { background: linear-gradient(135deg, #f43f5e, #dc2626); }
.gj-grad-5 { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.gj-grad-6 { background: linear-gradient(135deg, #14b8a6, #059669); }
.gj-grad-7 { background: linear-gradient(135deg, #6366f1, #7e22ce); }
.gj-job-title-wrap { min-width: 0; padding-right: 26px; }
.gj-job-company { display: block; font-size: .75rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj-job-title {
  font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text); transition: color .15s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gj-job:hover .gj-job-title { color: var(--brand-600); }
html.dark .gj-job:hover .gj-job-title { color: var(--brand-400); }
.gj-job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 12px; font-size: .75rem; font-weight: 500; color: var(--text-soft); }
.gj-job-meta .gj-dot { opacity: .5; }
.gj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.gj-chip { padding: 4px 10px; border-radius: 6px; font-size: .72rem; font-weight: 600; background: var(--bg-subtle); color: var(--text-soft); }
.gj-chip--type     { background: #ecfdf5; color: #047857; }
.gj-chip--remote   { background: #eff6ff; color: #1d4ed8; }
.gj-chip--hybrid   { background: #faf5ff; color: #7e22ce; }
.gj-chip--featured { background: var(--accent-50); color: var(--accent-600); }
.gj-chip--seeker   { background: var(--accent-50); color: var(--accent-600); }
html.dark .gj-chip--type     { background: rgba(5,150,105,.18);  color: #34d399; }
html.dark .gj-chip--remote   { background: rgba(37,99,235,.18);  color: #60a5fa; }
html.dark .gj-chip--hybrid   { background: rgba(147,51,234,.18); color: #c084fc; }
html.dark .gj-chip--featured, html.dark .gj-chip--seeker { background: rgba(244,63,94,.18); color: #fb7185; }
.gj-job-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: auto; border-top: 1px solid var(--border); }
.gj-job-foot span { font-size: .75rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gj-job-cta { flex-shrink: 0; padding: 6px 12px; border-radius: 8px; font-size: .75rem; font-weight: 700; color: var(--brand-600); background: var(--brand-50); transition: all .15s ease; }
html.dark .gj-job-cta { background: rgba(99,102,241,.15); color: var(--brand-400); }
.gj-job:hover .gj-job-cta { background: var(--brand-600); color: #fff; }
.gj-save {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-soft); opacity: .6; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.gj-save:hover { color: var(--accent-500); opacity: 1; }
.gj-save .fa-solid { display: none; }
.gj-save.saved { color: var(--accent-500); opacity: 1; }
.gj-save.saved .fa-solid { display: inline; }
.gj-save.saved .fa-regular { display: none; }
.gj-empty { padding: 48px 16px; text-align: center; border: 1px dashed var(--border); border-radius: 16px; color: var(--text-soft); background: var(--surface); }
.gj-more { margin-top: 32px; text-align: center; }
.gj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px; font-size: .9rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
}
.gj-btn--primary { background: var(--brand-600); color: #fff; }
.gj-btn--primary:hover { background: var(--brand-700); color: #fff; }
.gj-btn--light { background: #fff; color: var(--brand-900); }
.gj-btn--light:hover { background: #f1f5f9; color: var(--brand-900); }
.gj-btn--ghost { background: var(--brand-600); color: #fff; border-color: rgba(255,255,255,.2); }
.gj-btn--ghost:hover { background: var(--brand-700); color: #fff; }
.gj-btn--outline { background: var(--surface); color: var(--text); border-color: var(--border); }
.gj-btn--outline:hover { border-color: var(--brand-500); color: var(--brand-600); }

/* ---------------- Countries ---------------- */
.gj-country-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px)  { .gj-country-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gj-country-grid { grid-template-columns: repeat(3, 1fr); } }
.gj-country {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; transition: all .2s ease;
}
.gj-country:hover { border-color: var(--brand-400); box-shadow: 0 16px 32px -16px rgba(15,23,42,.25); }
.gj-country-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gj-flag { font-size: 2.25rem; line-height: 1; transition: transform .2s ease; }
.gj-country:hover .gj-flag { transform: scale(1.1); }
.gj-country h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); transition: color .15s ease; }
.gj-country:hover h3 { color: var(--brand-600); }
html.dark .gj-country:hover h3 { color: var(--brand-400); }
.gj-country-count { text-align: right; flex-shrink: 0; }
.gj-country-count strong { display: block; font-size: 1.1rem; font-weight: 800; color: var(--brand-600); }
html.dark .gj-country-count strong { color: var(--brand-400); }
.gj-country-count span { font-size: .75rem; color: var(--text-soft); }

/* ---------------- How it works ---------------- */
.gj-steps { display: grid; gap: 32px; }
@media (min-width: 768px) { .gj-steps { grid-template-columns: repeat(3, 1fr); } }
.gj-step { text-align: center; }
.gj-step-num {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 800; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); box-shadow: var(--shadow);
}
html.dark .gj-step-num { background: rgba(99,102,241,.15); color: var(--brand-400); border-color: rgba(99,102,241,.3); }
.gj-step h3 { font-size: 1.1rem; font-weight: 700; }
.gj-step p { margin: 8px auto 0; max-width: 320px; font-size: .88rem; line-height: 1.6; color: var(--text-soft); }
.gj-trust {
  margin-top: 56px; padding: 24px; border-radius: 16px; background: var(--bg-subtle); border: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; font-size: .88rem; font-weight: 600; color: var(--text);
}
.gj-trust div { display: flex; align-items: center; gap: 10px; }
.gj-trust i { font-size: 1.1rem; }

/* ---------------- CTA ---------------- */
.gj-cta {
  position: relative; overflow: hidden; color: #fff; border-radius: 24px; padding: 40px 28px;
  background: radial-gradient(circle at 20% 20%, var(--brand-900) 0%, color-mix(in srgb, var(--brand-900) 45%, #0f172a) 50%, #0f172a 100%); box-shadow: 0 25px 50px -12px rgba(2,6,23,.4);
  display: flex; flex-direction: column; gap: 28px; align-items: center; justify-content: space-between;
}
@media (min-width: 640px)  { .gj-cta { padding: 48px; } }
@media (min-width: 1024px) { .gj-cta { flex-direction: row; } }
.gj-cta h2 { color: #fff; font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; max-width: 640px; text-align: center; }
@media (min-width: 640px)  { .gj-cta h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .gj-cta h2 { text-align: left; } }
.gj-cta p { margin: 12px 0 0; color: rgba(224,231,255,.85); font-size: .95rem; text-align: center; }
@media (min-width: 1024px) { .gj-cta p { text-align: left; } }
.gj-cta-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; flex-shrink: 0; }
@media (min-width: 640px)  { .gj-cta-actions { flex-direction: row; width: auto; } }

/* ============================================================
   Job listing pages (archive, country / category / type, search)
   ============================================================ */
.gj-listing { padding-bottom: 56px; }

.gj-pagehead {
  position: relative; overflow: hidden; color: #fff; padding: 40px 0 88px;
  background: radial-gradient(circle at 20% 20%, var(--brand-900) 0%, color-mix(in srgb, var(--brand-900) 45%, #0f172a) 50%, #0f172a 100%);
}
@media (min-width: 768px) { .gj-pagehead { padding: 52px 0 96px; } }
.gj-pagehead::before { content: ''; position: absolute; top: -96px; right: -96px; width: 340px; height: 340px; border-radius: 50%; filter: blur(64px); pointer-events: none; background: color-mix(in srgb, var(--brand-500) 24%, transparent); }
.gj-pagehead .gj-wrap { position: relative; z-index: 1; }
.gj-pagehead h1 { color: #fff; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
@media (min-width: 768px) { .gj-pagehead h1 { font-size: 2.6rem; } }
.gj-pagehead h1 .gj-hl { color: var(--brand-400); }
.gj-pagehead p { margin: 10px 0 0; max-width: 680px; color: rgba(224,231,255,.85); font-size: .98rem; }
.gj-pagehead .gj-badge { margin-bottom: 14px; }

.gj-chips-row { display: flex; gap: 8px; margin-top: 22px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.gj-chips-row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .gj-chips-row { flex-wrap: wrap; overflow: visible; } }
.gj-countrychip {
  flex-shrink: 0; white-space: nowrap; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--brand-100); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); transition: background .15s ease;
}
.gj-countrychip:hover { background: rgba(255,255,255,.2); color: #fff; }
.gj-countrychip.is-active { background: #fff; color: var(--brand-900); border-color: #fff; }

/* Filter card (overlaps the banner) */
.gj-filters {
  margin-top: -48px; position: relative; z-index: 2; padding: 14px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 20px 40px -18px rgba(15,23,42,.25);
}
.gj-filters-main { display: flex; gap: 10px; }
.gj-input {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 14px; min-height: 48px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 12px; color: var(--text-soft);
}
.gj-input--grow { flex: 1; }
.gj-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .95rem; padding: 12px 0; }
.gj-input:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent); }
.gj-filters-main .gj-btn { min-height: 48px; border-radius: 12px; }
@media (max-width: 520px) { .gj-filters-main .gj-btn { padding: 12px 16px; } .gj-filters-main .gj-btn i { display: none; } }

.gj-filters-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
@media (min-width: 700px)  { .gj-filters-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gj-filters-row { grid-template-columns: repeat(6, 1fr); } }
.gj-select {
  width: 100%; min-height: 42px; min-width: 0; padding: 0 12px; font: inherit; font-size: .88rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.gj-select:focus { outline: 2px solid var(--brand-400); border-color: transparent; }
.gj-filters-actions { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }
.gj-btn--clear { background: transparent; color: var(--text-soft); border-color: transparent; padding-left: 12px; padding-right: 12px; }
.gj-btn--clear:hover { color: var(--accent-600); }
.gj-filters .gj-btn { padding: 10px 20px; }
.gj-filters .gj-btn--outline { background: var(--surface); }

/* Pills */
.gj-pillbar { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 8px; }
@media (min-width: 900px) { .gj-pillbar { flex-direction: row; align-items: center; justify-content: space-between; } }
.gj-pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.gj-pills::-webkit-scrollbar { display: none; }
.gj-pills .gj-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  white-space: nowrap; background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); box-shadow: none; transition: all .15s ease;
}
.gj-pills .gj-pill:hover { color: var(--text); border-color: var(--brand-400); }
.gj-pills .gj-pill.is-active, .gj-pills .gj-pill.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff !important; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand-600) 60%, transparent); }
.gj-pills--soft .gj-pill { font-weight: 500; padding: 6px 14px; }

.gj-count { margin: 16px 0 18px; font-size: .9rem; color: var(--text-soft); }
.gj-count strong { color: var(--text); font-weight: 800; }

/* In-feed ads inside the grid */
.gj-job-grid .ad-slot-infeed { padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }

/* Empty state */
.gj-empty { margin-top: 24px; padding: 56px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: 18px; }
.gj-empty-icon { font-size: 1.8rem; color: var(--text-soft); opacity: .6; margin-bottom: 12px; }
.gj-empty h3 { font-size: 1.2rem; font-weight: 700; }
.gj-empty p { margin: 6px 0 18px; color: var(--text-soft); font-size: .92rem; }
.gj-empty .gj-empty-sub { margin-top: -8px; font-size: .85rem; }

/* Load more / pagination */
.gj-listing .gj-more { margin: 32px 0 0; }
.gj-pagination { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gj-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: .88rem;
}
.gj-pagination a.page-numbers:hover { border-color: var(--brand-400); }
.gj-pagination .page-numbers.current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.gj-pagination .dots { border: 0; background: transparent; }

/* More-countries dropdown (jobs header chip row) */
.gj-morecountries{position:relative;display:inline-block}
.gj-morecountries>summary{list-style:none;cursor:pointer}
.gj-morecountries>summary::-webkit-details-marker{display:none}
.gj-morecountries-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(560px,92vw);max-height:60vh;overflow:auto;background:#fff;color:#1f2937;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.25);padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.gj-morecountries-group strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;margin-bottom:4px}
.gj-morecountries-group a{display:block;padding:3px 0;color:#1f2937;font-size:14px;text-decoration:none}
.gj-morecountries-group a:hover,.gj-morecountries-group a.is-active{color:var(--brand-600,#0d7a5f);font-weight:600}
.gj-morecountries-group a span{color:#9ca3af;font-size:12px}

/* Email job alert box */