/* =====================================================================
   JobCMS theme — design tokens + components
   Bootstrap 5 handles the grid; this file owns the visual language.
   ===================================================================== */

:root {
  --ink:        #0f172a;
  --ink-soft:   #475569;
  --ink-mute:   #94a3b8;
  --line:       #e2e8f0;
  --line-soft:  #f1f5f9;
  --surface:    #ffffff;
  --canvas:     #f6f7f9;

  --brand:      #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --money:      #16a34a;
  --money-soft: #f0fdf4;
  --warn:       #b45309;
  --warn-soft:  #fffbeb;
  --danger:     #dc2626;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 10px 32px rgba(15, 23, 42, .12);
}

body { background: var(--canvas); color: var(--ink); }

h1, h2, h3, h4, h5 { color: var(--ink); }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

.dot { color: var(--ink-mute); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- typography */

.section-title   { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.panel-title     { font-size: .95rem; font-weight: 700; }
.card-eyebrow    { font-size: .68rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--ink-mute); }
.facts-label     { font-size: .68rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--ink-mute); margin-bottom: .4rem; display: block; }

.post-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin-bottom: .5rem; }
@media (min-width: 768px) { .post-title { font-size: 2rem; } }

/* ------------------------------------------------------------ hero band */

.hero-band {
  background: linear-gradient(135deg, #f8fafc 0%, var(--brand-soft) 100%);
  border-bottom: 1px solid var(--line);
  padding: 2rem 0 1.75rem;
}
@media (min-width: 768px) { .hero-band { padding: 3rem 0 2.5rem; } }

.hero-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: .5rem 0 .35rem; }
@media (min-width: 768px) { .hero-title { font-size: 2.1rem; } }
.hero-sub   { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ------------------------------------------------------------ stats bar */

.stats-bar {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  justify-content: center; align-items: center;
  background: var(--brand-soft); border: 1px solid #dbeafe;
  border-radius: var(--r-lg); padding: .85rem 1.25rem;
}
.stats-bar .stat { display: flex; align-items: center; gap: .45rem; }
.stats-bar strong { font-size: 1rem; }
.stats-bar .lbl { font-size: .82rem; color: var(--ink-soft); }
.stats-bar .sep { width: 1px; height: 18px; background: #cbd5e1; }

/* ----------------------------------------------------------- post cards */

.post-card { border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.post-card-media { position: relative; min-height: 170px; }
.post-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 576px) { .post-card-media { min-height: 118px; } }

.post-card-country { font-size: .72rem; color: var(--ink-mute); margin-bottom: .15rem; }
.post-card-title   { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: .3rem; }
.post-card-excerpt { font-size: .84rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: .4rem; }
.post-card-meta    { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .72rem; align-items: center; }

/* ---------------------------------------------------------- chips/tags */

.city-chip, .tag-chip, .skill-chip, .badge-soft, .source-chip {
  display: inline-block; font-size: .72rem; line-height: 1.6;
  padding: .1rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); text-decoration: none;
  position: relative; z-index: 1;
}
.city-chip:hover, .tag-chip:hover, .source-chip:hover { border-color: var(--brand); color: var(--brand); }
.city-chip-muted { color: var(--ink-mute); }
.city-chip-on, .tag-chip-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.skill-chip { background: var(--line-soft); }
.badge-money { background: var(--money-soft); border-color: #bbf7d0; color: var(--money); font-weight: 600; }

.city-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .6rem 0; margin-bottom: .5rem;
}
.city-strip-label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--ink-mute); margin-right: .35rem; }

.tag-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
             margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ sidebars */

.side-link {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .85rem; font-size: .88rem; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line-soft);
  transition: background .15s;
}
.side-link:hover  { background: var(--line-soft); color: var(--ink); }
.side-link.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.side-count { font-size: .72rem; color: var(--ink-mute); }
.side-link-all { color: var(--brand); font-weight: 600; background: #f8fafc; border-bottom: 0; }

/* ------------------------------------------------------------ articles */

.post-cover { width: 100%; height: auto; border-radius: var(--r-md); margin: .75rem 0 1rem; }

.post-byline {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: .75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.byline-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
                 background: var(--line); flex-shrink: 0; display: block; }
.byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline-name { font-size: .88rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.byline-role { font-size: .72rem; color: var(--ink-mute); }
.byline-meta { font-size: .74rem; color: var(--ink-mute); display: flex; gap: .35rem; flex-wrap: wrap; }

.post-body { font-size: 1rem; line-height: 1.75; color: #1f2937; }
.post-body h2 { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 .6rem; }
.post-body h3 { font-size: 1.12rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.post-body h4 { font-size: 1rem;   font-weight: 700; margin: 1.25rem 0 .5rem; }
.post-body p  { margin-bottom: 1rem; }
.post-body ul, .post-body ol { margin-bottom: 1rem; padding-left: 1.35rem; }
.post-body li { margin-bottom: .35rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }

.post-figure { margin: 1.5rem 0; }
.post-figure img { width: 100%; height: auto; border-radius: var(--r-md); }
.post-figure figcaption { font-size: .8rem; color: var(--ink-mute); font-style: italic;
                          text-align: center; margin-top: .5rem; }

/* -------------------------------------------------------------- salary */

.salary-section { margin-top: 2.5rem; }
.salary-item { border: 1px solid var(--line); border-radius: var(--r-md) !important; margin-bottom: .5rem; }
.salary-item .accordion-button { border-radius: var(--r-md) !important; gap: .5rem; flex-wrap: wrap;
                                 font-size: .9rem; padding: .75rem 1rem; }
.salary-item .accordion-button:not(.collapsed) { background: var(--brand-soft); color: var(--ink); box-shadow: none; }
.salary-item .accordion-button:focus { box-shadow: none; }

.salary-name     { font-weight: 700; }
.salary-industry { font-size: .72rem; color: var(--ink-mute); }
.salary-figure   { font-weight: 800; margin-left: auto; }
.salary-trend    { font-size: .85rem; }
.salary-demand   { font-size: .7rem; font-weight: 700; color: var(--money);
                   background: var(--money-soft); border-radius: 999px; padding: .05rem .45rem; }

.salary-range { margin: 1rem 0; }
.salary-range-track {
  position: relative; height: 10px; background: var(--line-soft);
  border-radius: 999px; overflow: hidden;      /* fill can never spill out */
}
.salary-range-fill   { position: absolute; top: 0; height: 100%; background: var(--brand); border-radius: 999px; }
.salary-range-marker { position: absolute; top: -3px; width: 3px; height: 16px;
                       background: var(--ink); border-radius: 2px; transform: translateX(-50%); }
.salary-range-labels { display: flex; justify-content: space-between; align-items: baseline;
                       font-size: .74rem; color: var(--ink-mute); margin-top: .4rem; }
.salary-range-labels strong { color: var(--ink); font-size: .85rem; }
.salary-local { font-size: .78rem; color: var(--ink-soft); margin-top: .25rem; }

.salary-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1rem; margin: 0; }
@media (min-width: 576px) { .salary-facts { grid-template-columns: repeat(4, 1fr); } }
.salary-facts dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
                   color: var(--ink-mute); font-weight: 700; margin-bottom: .15rem; }
.salary-facts dd { font-size: .85rem; margin: 0; }

.visa { font-size: .74rem; font-weight: 600; border-radius: 999px; padding: .1rem .5rem; }
.visa-ok   { background: var(--money-soft); color: var(--money); }
.visa-warn { background: var(--warn-soft);  color: var(--warn); }
.visa-no   { background: #fef2f2;           color: var(--danger); }

/* ----------------------------------------------------------------- FAQ */

.faq-section { margin-top: 2.5rem; }
.faq-section .accordion-item { border: 1px solid var(--line); border-radius: var(--r-sm) !important; margin-bottom: .4rem; }
.faq-section .accordion-button { font-size: .92rem; font-weight: 600; padding: .7rem 1rem; }
.faq-section .accordion-button:not(.collapsed) { background: var(--line-soft); color: var(--ink); box-shadow: none; }
.faq-section .accordion-button:focus { box-shadow: none; }
.faq-section .accordion-body { font-size: .9rem; color: var(--ink-soft); line-height: 1.7; }
.faq-source { font-size: .76rem; color: var(--brand); text-decoration: none; }

/* ------------------------------------------------------------- job card */

.job-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
            padding: 1rem 1.1rem; transition: box-shadow .2s, border-color .2s; }
.job-card:hover { box-shadow: var(--shadow-md); border-color: #cbd5e1; }

.job-card-title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; line-height: 1.35; }
.job-card-title a { color: var(--ink); }
.job-card-title a:hover { color: var(--brand); }

.job-card-meta { font-size: .8rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .35rem; }
.job-card-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .5rem 0; }
.job-card-time { font-size: .72rem; color: var(--ink-mute); margin-left: auto; }
.job-card-desc { font-size: .85rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: .75rem; }
.job-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.job-detail-meta { font-size: .9rem; color: var(--ink-soft); display: flex;
                   flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }

.apply-box { background: var(--brand-soft); border: 1px solid #dbeafe;
             border-radius: var(--r-md); padding: 1rem 1.1rem; }
.apply-box-label { font-size: .68rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--brand-dark); margin-bottom: .5rem; }
.apply-note { font-size: .74rem; color: var(--ink-soft); margin: .6rem 0 0; }

/* ------------------------------------------------------- home: panels */

.panel { background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-lg); padding: 1.25rem 1.4rem; }

.highlight-card { display: flex; flex-direction: column; gap: .15rem;
                  border-radius: var(--r-lg); padding: 1rem 1.25rem;
                  text-decoration: none; height: 100%; transition: transform .18s, box-shadow .18s; }
.highlight-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.highlight-eyebrow { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.highlight-title   { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.highlight-value   { font-size: .85rem; font-weight: 700; }

.highlight-green  { background: var(--money-soft); border: 1px solid #bbf7d0; }
.highlight-green  .highlight-eyebrow, .highlight-green  .highlight-value { color: #15803d; }
.highlight-blue   { background: var(--brand-soft); border: 1px solid #bfdbfe; }
.highlight-blue   .highlight-eyebrow, .highlight-blue   .highlight-value { color: var(--brand-dark); }
.highlight-purple { background: #fdf4ff; border: 1px solid #e9d5ff; }
.highlight-purple .highlight-eyebrow, .highlight-purple .highlight-value { color: #7e22ce; }

.insight-row  { margin-bottom: .9rem; }
.insight-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .25rem; }
.insight-name { font-size: .82rem; font-weight: 600; color: #374151; }
.insight-value{ font-size: .82rem; font-weight: 800; white-space: nowrap; }
.insight-value small { font-weight: 400; color: var(--ink-mute); font-size: .65rem; }
.insight-track{ height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.insight-fill { height: 100%; background: linear-gradient(90deg, var(--brand), #06b6d4); border-radius: 999px; }
.insight-foot { display: flex; justify-content: space-between; font-size: .66rem; color: var(--money); margin-top: .2rem; }

.toprole { display: flex; justify-content: space-between; align-items: center; gap: .75rem;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
           padding: .7rem 1rem; text-decoration: none; transition: box-shadow .15s; }
.toprole:hover { box-shadow: var(--shadow-sm); }
.toprole-main   { min-width: 0; }
.toprole-title  { display: block; font-size: .84rem; font-weight: 700; color: var(--ink);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toprole-sub    { display: block; font-size: .68rem; color: var(--ink-mute); }
.toprole-pay    { text-align: right; flex-shrink: 0; }
.toprole-amount { display: block; font-size: .95rem; font-weight: 800; color: var(--ink); }
.toprole-amount small { font-weight: 400; font-size: .6rem; color: var(--ink-mute); }
.toprole-demand { font-size: .62rem; font-weight: 700; color: var(--money);
                  background: var(--money-soft); border-radius: 999px; padding: .05rem .45rem; }

.directory-heading { font-size: 1.05rem; font-weight: 500; padding-bottom: .35rem;
                     border-bottom: 1px solid var(--line); margin-bottom: .5rem; }
.directory-link { display: block; padding: .35rem 0; font-size: .95rem;
                  color: var(--ink); text-decoration: none; }
.directory-link:hover { color: var(--brand); }

/* ----------------------------------------------------- country cards */

.country-card {
  display: flex; align-items: center; gap: .65rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1rem 1.1rem; height: 100%; text-decoration: none; color: var(--ink);
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.country-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), #06b6d4);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.country-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--ink); }
.country-card:hover::before { transform: scaleX(1); }
.cc-flag { font-size: 1.55rem; line-height: 1; }
.cc-body { min-width: 0; }
.cc-name { display: block; font-size: .95rem; font-weight: 600; }
.cc-meta { display: block; font-size: .72rem; color: #64748b; }
.cc-arrow{ margin-left: auto; color: #cbd5e1; transition: color .2s, transform .2s; }
.country-card:hover .cc-arrow { color: var(--brand); transform: translateX(3px); }
.country-card-empty { opacity: .55; background: #f8fafc; cursor: not-allowed; }
.country-card-empty::before { display: none; }
.country-card-empty .cc-name { color: var(--ink-mute); }

/* -------------------------------------------------------------- author */

.author-hero { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
               border: 1px solid var(--line); border-radius: var(--r-lg);
               padding: 2.25rem 1.5rem; text-align: center; }
.author-avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
                 border: 4px solid #fff; box-shadow: var(--shadow-md); margin-bottom: 1rem; }
.author-name { font-size: 1.6rem; font-weight: 800; margin-bottom: .25rem; }
.author-role { color: var(--brand); font-weight: 600; font-size: .92rem; margin-bottom: .75rem; }
.author-bio  { color: var(--ink-soft); max-width: 560px; margin: 0 auto; line-height: 1.65; font-size: .92rem; }

.author-socials { display: flex; justify-content: center; gap: .6rem; margin-top: 1.15rem; }
.author-social { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
                 border-radius: 50%; background: #fff; color: #64748b; border: 1px solid var(--line);
                 text-decoration: none; transition: transform .2s, background .2s, color .2s; }
.author-social:hover { transform: translateY(-3px); color: #fff; border-color: transparent; }
.author-social.linkedin:hover  { background: #0a66c2; }
.author-social.twitter:hover   { background: #111827; }
.author-social.facebook:hover  { background: #1877f2; }
.author-social.instagram:hover { background: linear-gradient(135deg,#405de6,#833ab4,#e1306c,#f77737); }
.author-social.website:hover   { background: #475569; }

.author-email { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
                font-size: .85rem; color: var(--ink-soft); text-decoration: none;
                padding: .35rem .9rem; border-radius: 999px; background: var(--line-soft); border: 1px solid var(--line); }
.author-email:hover { background: var(--line); color: var(--ink); }

.author-stats { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1.25rem;
                padding-top: 1.25rem; border-top: 1px solid #cbd5e1; }
.author-stats .stat-val { display: block; font-size: 1.3rem; font-weight: 700; }
.author-stats .stat-lbl { display: block; font-size: .68rem; color: #64748b;
                          text-transform: uppercase; letter-spacing: .05em; }

.article-tile { display: block; background: var(--surface); border: 1px solid var(--line);
                border-radius: var(--r-sm); overflow: hidden; height: 100%;
                text-decoration: none; transition: transform .2s, box-shadow .2s; }
.article-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.article-tile img { width: 100%; height: 130px; object-fit: cover; display: block; }
.tile-body  { display: block; padding: .8rem 1rem; }
.tile-title { display: block; font-size: .88rem; font-weight: 600; color: #1e293b; line-height: 1.35;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta  { display: block; font-size: .7rem; color: #64748b; margin-top: .3rem; }

/* --------------------------------------------------------------- tools */

.tool-card { display: flex; align-items: center; gap: .85rem;
             background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
             padding: 1rem 1.1rem; height: 100%; text-decoration: none; color: var(--ink);
             transition: transform .2s, box-shadow .2s, border-color .2s; }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--tc, var(--brand)); color: var(--ink); }
.tool-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-sm);
             display: inline-flex; align-items: center; justify-content: center;
             background: color-mix(in srgb, var(--tc, #2563eb) 12%, white);
             color: var(--tc, var(--brand)); font-size: 1.15rem; }
.tool-name { display: block; font-size: .92rem; font-weight: 600; }
.tool-sub  { display: block; font-size: .76rem; color: var(--ink-mute); }

.tool-header { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; }
.tool-icon-lg { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--r-md);
                display: inline-flex; align-items: center; justify-content: center;
                background: color-mix(in srgb, var(--tc, #2563eb) 12%, white);
                color: var(--tc, var(--brand)); font-size: 1.5rem; }
.tool-title    { font-size: 1.5rem; font-weight: 800; margin: 0; }
.tool-subtitle { color: var(--ink-soft); font-size: .92rem; margin: .2rem 0 0; }
.tool-body-wrap { background: var(--surface); border: 1px solid var(--line);
                  border-radius: var(--r-lg); padding: 1.25rem 1.4rem; }

/* -------------------------------------------------------------- states */

.empty-state { background: var(--surface); border: 1px dashed var(--line);
               border-radius: var(--r-md); padding: 2rem 1.25rem; text-align: center; }

/* -------------------------------------------------------------- footer */

.site-footer { padding: 2.5rem 0 1.5rem; }
.footer-heading { font-size: .68rem; font-weight: 800; text-transform: uppercase;
                  letter-spacing: .07em; color: var(--ink-mute); margin-bottom: .75rem; }
.footer-link { font-size: .82rem; color: #6b7280; text-decoration: none;
               display: inline-flex; align-items: center; transition: color .15s; }
.footer-link:hover { color: #111827; }

/* --------------------------------------------------------------- print */

@media print {
  .site-footer, .navbar, .jc-ad, aside { display: none !important; }
  .post-body { font-size: 11pt; }
}

/* ---- reading column -------------------------------------------------
   The article body sits in a fixed 636px measure, centred inside its
   column. That is roughly 70-80 characters per line, which is the range
   that reads comfortably. Everything collapses to full width on mobile. */
.reading-col      { max-width: 636px; margin-inline: auto; width: 100%; }
.reading-col img  { max-width: 100%; height: auto; }

@media (max-width: 991.98px) {
  .reading-col { max-width: 100%; }
}

.related-section  { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* =====================================================================
   BATCH 2 — job cards, FAQ block, author box, team page
   ===================================================================== */

/* ---- job card ---- */
.job-card              { border-radius: var(--r-md); transition: box-shadow .2s, border-color .2s; }
.job-card:hover        { box-shadow: var(--shadow-md); border-color: #cbd5e1 !important; }
.job-card-title        { font-size: 1rem; line-height: 1.35; }
.job-card-title a:hover{ color: var(--brand) !important; }
.job-card-meta         { font-size: .8rem; line-height: 1.6; }
.job-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
.job-badge-type { font-size: .7rem; background: var(--brand-soft); font-weight: 600; }
.job-badge-pay  { font-size: .7rem; background: var(--money-soft); color: var(--money); font-weight: 600; }
.job-badge-time { font-size: .7rem; font-weight: 500; }
.job-src-btn    { font-size: .7rem; }

@media (max-width: 575.98px) {
  .job-card .d-flex.justify-content-between { flex-direction: column; }
  .job-card .btn-primary.flex-shrink-0      { width: 100%; margin-top: .5rem; }
}

/* ---- FAQ block ---- */
.faq-section        { margin-top: 3rem; }
.faq-section-header { margin-bottom: 1.5rem; }
.faq-section-header h2 {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem;
}
.faq-section-header h2 i { color: var(--brand); }
.faq-section-header p    { color: var(--ink-mute); font-size: .88rem; margin: 0; }

.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem 1.25rem; margin-bottom: .75rem;
  transition: border-color .2s, box-shadow .2s;
}
.faq-item:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm); }

.faq-question {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.5;
}
.faq-q-icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; margin-top: 1px;
}
.faq-answer {
  margin-top: .65rem; padding-left: calc(24px + .7rem);
  font-size: .92rem; line-height: 1.75; color: var(--ink-soft);
}
.faq-source {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem;
  font-size: .76rem; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid #dbeafe;
  padding: .28rem .7rem; border-radius: 999px; text-decoration: none;
  transition: background .18s;
}
.faq-source:hover { background: #dbeafe; color: var(--brand-dark); }

@media (max-width: 575.98px) {
  .faq-answer { padding-left: 0; }
}

/* ---- author box on the post page ---- */
.author-box {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem;
}
.author-box-inner   { display: flex; gap: 1.1rem; align-items: flex-start; }
.author-box-avatar  {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%;
  overflow: hidden; background: var(--line); border: 3px solid #fff;
  box-shadow: var(--shadow-sm); display: block;
}
.author-box-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-box-body    { min-width: 0; flex: 1; }
.author-box-eyebrow {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-mute); margin-bottom: .2rem;
}
.author-box-name    { font-size: 1.12rem; font-weight: 800; margin-bottom: .15rem; }
.author-box-name a  { color: var(--ink); text-decoration: none; }
.author-box-name a:hover { color: var(--brand); }
.author-box-verified { color: var(--brand); font-size: .85rem; vertical-align: middle; }
.author-box-role    { font-size: .8rem; font-weight: 600; color: var(--brand); margin-bottom: .5rem; }
.author-box-bio     { font-size: .88rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: .75rem; }
.author-box-footer  {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding-top: .7rem; border-top: 1px solid #d9e0e8; font-size: .76rem; color: var(--ink-soft);
}
.author-box-stat    { display: inline-flex; align-items: center; }
.author-box-socials { display: inline-flex; gap: .35rem; }
.author-box-social  {
  width: 28px; height: 28px; border-radius: 50%; background: #fff;
  border: 1px solid var(--line); color: #64748b; font-size: .82rem;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: transform .18s, background .18s, color .18s;
}
.author-box-social:hover      { transform: translateY(-2px); color: #fff; border-color: transparent; }
.author-box-social.linkedin:hover  { background: #0a66c2; }
.author-box-social.twitter:hover   { background: #111827; }
.author-box-social.facebook:hover  { background: #1877f2; }
.author-box-social.instagram:hover { background: linear-gradient(135deg,#405de6,#833ab4,#e1306c,#f77737); }
.author-box-social.website:hover   { background: #475569; }
.author-box-link { font-weight: 700; color: var(--brand); text-decoration: none; }
.author-box-link:hover { color: var(--brand-dark); }

@media (max-width: 575.98px) {
  .author-box-inner  { flex-direction: column; align-items: center; text-align: center; }
  .author-box-footer { justify-content: center; }
  .author-box-link   { margin-left: 0 !important; }
}

/* ---- author page extras ---- */
.author-social.email:hover     { background: #475569; }
.author-articles-heading       { font-size: 1.1rem; color: #0f172a; }

/* =====================================================================
   TEAM PAGE
   ===================================================================== */
.team-wrap { background: #fafafa; }

.tp-hero {
  position: relative; padding: 90px 20px 120px; text-align: center;
  background: #fff; color: #0a0a0f; overflow: hidden;
}
.tp-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 110%, rgba(236,72,153,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 110%, rgba(59,130,246,.10), transparent 60%);
}
.tp-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(139,92,246,.14) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  opacity: .5;
}
.tp-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }

.tp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 4px 14px rgba(139,92,246,.08), 0 1px 2px rgba(0,0,0,.04);
  padding: 8px 18px 8px 14px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: #7c3aed; margin-bottom: 28px;
}
.tp-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #8b5cf6;
  box-shadow: 0 0 10px #8b5cf6; animation: tpPulse 2s ease-in-out infinite;
}
@keyframes tpPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.45);} }

.tp-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800;
  letter-spacing: -1.5px; line-height: 1.05; margin: 0 0 22px; color: #0a0a0f;
}
.tp-hero h1 .gradient-word {
  background: linear-gradient(135deg,#7c3aed 0%,#ec4899 50%,#3b82f6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; display: inline-block;
}
.tp-hero p { font-size: 1.05rem; color: #6b7280; line-height: 1.65; max-width: 640px; margin: 0 auto 48px; }

.tp-stats {
  display: flex; max-width: 700px; margin: 0 auto;
  border: 1px solid #e5e7eb; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 40px -12px rgba(139,92,246,.12); overflow: hidden;
}
.tp-stat { flex: 1; padding: 22px 18px; text-align: center; position: relative; }
.tp-stat + .tp-stat::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: #e5e7eb;
}
.tp-stat-num {
  font-size: 2.3rem; font-weight: 800; letter-spacing: -1.2px; line-height: 1; margin-bottom: 8px;
  background: linear-gradient(135deg,#7c3aed 0%,#ec4899 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tp-stat-lbl { font-size: .68rem; color: #6b7280; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }

.tp-container { max-width: 1240px; margin: -50px auto 0; padding: 0 24px 90px; position: relative; z-index: 10; }
.tp-section-head { text-align: center; margin-bottom: 40px; padding-top: 40px; }
.tp-section-sub {
  display: inline-block; font-size: .72rem; color: #8b5cf6; letter-spacing: 3px;
  font-weight: 700; text-transform: uppercase; margin-bottom: 8px;
}
.tp-section-title { font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 800; color: #0a0a0f; letter-spacing: -.8px; margin: 0; }

.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; }

.tp-card {
  position: relative; background: #fff; border: 1px solid #ececf0; border-radius: 20px;
  padding: 30px 22px 24px; text-align: center; text-decoration: none; color: inherit;
  transition: all .4s cubic-bezier(.22,1,.36,1); overflow: hidden;
  opacity: 0; transform: translateY(24px);
  animation: tpFadeUp .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes tpFadeUp { to { opacity: 1; transform: none; } }
.tp-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg,#8b5cf6 0%,#ec4899 50%,#3b82f6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.tp-card:hover {
  transform: translateY(-8px); border-color: transparent; color: inherit;
  box-shadow: 0 24px 56px -20px rgba(139,92,246,.3), 0 12px 24px -12px rgba(0,0,0,.08);
}
.tp-card:hover::after { opacity: 1; }

.tp-avatar-wrap { position: relative; display: inline-block; margin-bottom: 18px; }
.tp-avatar-ring {
  position: absolute; inset: -8px; border-radius: 50%;
  background: conic-gradient(from 180deg,#8b5cf6,#ec4899,#3b82f6,#8b5cf6);
  opacity: 0; transition: opacity .4s; animation: tpSpin 4s linear infinite; animation-play-state: paused;
}
.tp-card:hover .tp-avatar-ring { opacity: .5; animation-play-state: running; }
@keyframes tpSpin { to { transform: rotate(360deg); } }
.tp-avatar {
  position: relative; width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  background: #f1f5f9; box-shadow: 0 4px 16px rgba(0,0,0,.08); border: 4px solid #fff;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  display: flex; align-items: center; justify-content: center;
}
.tp-card:hover .tp-avatar { transform: scale(1.04); }
.tp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-avatar-initials { font-size: 2rem; font-weight: 800; color: #94a3b8; }
.tp-flag-badge {
  position: absolute; bottom: 2px; right: 2px; width: 30px; height: 30px;
  background: #fff; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1;
}

.tp-card-name      { font-size: 1.08rem; font-weight: 700; color: #0a0a0f; margin-bottom: 4px; letter-spacing: -.3px; }
.tp-card-expertise { font-size: .74rem; color: #8b5cf6; font-weight: 600; text-transform: uppercase;
                     letter-spacing: 1px; margin-bottom: 14px; min-height: 14px; }
.tp-card-bio {
  font-size: .82rem; color: #6b7280; line-height: 1.6; margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 64px;
}
.tp-card-footer {
  padding-top: 16px; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tp-card-country { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; color: #64748b; font-weight: 600; }
.tp-card-country-iso {
  font-family: ui-monospace, SFMono-Regular, monospace; background: #f1f5f9;
  padding: 2px 7px; border-radius: 4px; font-size: .65rem; letter-spacing: .5px; color: #334155;
}
.tp-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: #8b5cf6; transition: gap .22s; }
.tp-card:hover .tp-card-link { gap: 10px; color: #7c3aed; }
.tp-card:hover .tp-card-link i { transform: translateX(3px); }
.tp-card-link i { transition: transform .3s; font-size: .9rem; }

.tp-empty { text-align: center; padding: 70px 20px; color: #94a3b8; }
.tp-empty i { font-size: 3rem; margin-bottom: 12px; opacity: .5; display: block; }

@media (max-width: 768px) {
  .tp-hero { padding: 60px 18px 90px; }
  .tp-stats { max-width: 520px; }
  .tp-stat { padding: 16px 10px; }
  .tp-stat-num { font-size: 1.55rem; }
  .tp-stat-lbl { font-size: .58rem; letter-spacing: 1.5px; }
  .tp-container { padding: 0 18px 64px; margin-top: -40px; }
  .tp-grid { grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 16px; }
  .tp-card { padding: 24px 18px 20px; border-radius: 18px; }
  .tp-avatar { width: 88px; height: 88px; }
}
@media (max-width: 420px) { .tp-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .tp-card { opacity: 1; transform: none; animation: none; }
  .tp-avatar-ring, .tp-eyebrow-dot { animation: none; }
}

/* ---- job list density -------------------------------------------------
   The card carries its own bottom margin, so the list must not add a gap
   on top of it — that was doubling the spacing on every screen. */
.job-list > .job-card { margin-bottom: .75rem !important; }
.job-list > .job-card:last-child { margin-bottom: 0 !important; }

.job-card .card-body { padding: .9rem 1.1rem !important; }
.job-card-meta  { margin-bottom: .4rem !important; }
.job-card-desc  { margin-bottom: .5rem !important; }

@media (max-width: 575.98px) {
  .job-list > .job-card { margin-bottom: .6rem !important; }
  .job-card .card-body  { padding: .8rem .9rem !important; }

  /* keep the Apply button beside the title, the way the listing reads on
     desktop, instead of stacking it full width under the description */
  .job-card .d-flex.justify-content-between { flex-direction: row !important; }
  .job-card .btn-primary.flex-shrink-0 {
    width: auto !important;
    margin-top: 0 !important;
    align-self: flex-start;
    padding: .3rem .7rem;
    font-size: .78rem;
  }
  .job-card-title { font-size: .95rem; }
  .job-card-meta  { font-size: .76rem; }
  .job-card-desc  { font-size: .8rem; -webkit-line-clamp: 2; }
  .job-badge-type, .job-badge-pay, .job-badge-time { font-size: .66rem; }
  .job-src-btn { font-size: .66rem; padding: .12rem .45rem; }
}

/* =====================================================================
   POST PAGE — three columns, article in its own panel
   ===================================================================== */

/* the reading measure applies to the article panel itself */
.post-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
/* The reading measure is fixed at 636px and centred, whether or not the
   sidebars are showing. Without this the article stretches to whatever
   width the column happens to be. */
.post-panel { max-width: calc(636px + 3rem); margin-inline: auto; }
.post-panel > .post-body,
.post-body { max-width: 636px; margin-inline: auto; }
.post-panel > .post-figure { max-width: 636px; margin-inline: auto; }

/* the blocks around the article line up with it */
.post-cover, .post-title, .author-strip,
.salary-section, .faq-section, .tag-cloud, .author-box,
.related-section, section[aria-labelledby="jobs-heading"] {
  max-width: calc(636px + 3rem);
  margin-inline: auto;
}

@media (max-width: 991.98px) {
  .post-panel { padding: 1.15rem; max-width: 100%; }
  .post-cover, .post-title, .author-strip,
  .salary-section, .faq-section, .tag-cloud, .author-box,
  .related-section, section[aria-labelledby="jobs-heading"] { max-width: 100%; }
}
@media (max-width: 575.98px) { .post-panel { padding: 1rem .9rem; border-radius: var(--r-md); } }

/* ---- author strip above the article ---- */
.author-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: .85rem 1.1rem; margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.as-avatar {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  background: var(--line); flex-shrink: 0; display: block;
}
.as-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-who  { min-width: 0; }
.as-name { display: block; font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: none; }
.as-name:hover { color: var(--brand); }
.as-tick { color: var(--brand); font-size: .78rem; vertical-align: baseline; }
.as-role { display: block; font-size: .78rem; color: var(--ink-mute); }
.as-profile {
  margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--brand);
  text-decoration: none; border: 1px solid #dbeafe; background: var(--brand-soft);
  padding: .25rem .7rem; border-radius: 999px; white-space: nowrap;
}
.as-profile:hover { background: #dbeafe; }
.as-meta {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 1rem;
  padding-top: .7rem; border-top: 1px solid var(--line-soft);
  font-size: .76rem; color: var(--ink-mute);
}
.as-meta-only { flex-basis: auto; padding-top: 0; border-top: 0; }
.as-meta i { color: var(--ink-mute); }

@media (max-width: 575.98px) {
  .author-strip { padding: .75rem .85rem; gap: .6rem; }
  .as-profile { margin-left: 0; order: 3; }
  .as-meta { gap: .65rem; font-size: .72rem; }
}

/* ---- sticky-ish sidebar panels ---- */
.side-panel { border-radius: var(--r-lg); overflow: hidden; }

/* ---- latest articles list in the right rail ---- */
.latest-list { display: flex; flex-direction: column; }
.latest-item {
  display: block; padding: .7rem .85rem; text-decoration: none;
  border-bottom: 1px solid var(--line-soft); transition: background .15s;
}
.latest-item:last-child { border-bottom: 0; }
.latest-item:hover { background: var(--line-soft); }
.latest-item img {
  width: 100%; height: 78px; object-fit: cover;
  border-radius: var(--r-sm); margin-bottom: .4rem; display: block;
}
.latest-country { display: block; font-size: .7rem; color: var(--ink-mute); }
.latest-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.latest-item:hover .latest-title { color: var(--brand); }

/* =====================================================================
   FAQ — gradient banner header
   ===================================================================== */
.faq-section-header {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #38bdf8 100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 1.15rem 1.35rem;
  margin-bottom: 0;
  color: #fff;
}
.faq-section-header h2 {
  color: #fff; font-size: 1.35rem; font-weight: 800;
  display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem;
}
.faq-section-header h2 i { color: #fff; font-size: 1.25rem; }
.faq-section-header p { color: rgba(255,255,255,.88); font-size: .85rem; margin: 0; }

.faq-section .faq-item:first-of-type { border-radius: 0; border-top: 0; }
.faq-section .faq-item {
  margin-bottom: 0; border-radius: 0; border-top: 0;
}
.faq-section .faq-item:last-of-type {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

@media (max-width: 575.98px) {
  .faq-section-header { padding: 1rem; }
  .faq-section-header h2 { font-size: 1.12rem; }
  .faq-section-header p { font-size: .78rem; }
}

/* =====================================================================
   JOB DETAIL PAGE
   ===================================================================== */
.job-detail-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.jd-head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.jd-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .3rem; }
.jd-location { font-size: .9rem; color: var(--ink-soft); margin: 0; }

.jd-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem; margin: 0 0 1.25rem;
}
.jd-facts dt {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-mute); margin-bottom: .2rem;
}
.jd-facts dd { margin: 0; font-size: .95rem; font-weight: 700; color: var(--ink); }
.jd-pay { color: var(--money) !important; }

.jd-block { padding-top: 1.25rem; border-top: 1px solid var(--line); margin-bottom: 1.25rem; }
.jd-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-mute); margin-bottom: .6rem;
}
.jd-src { font-size: .75rem; }
.jd-description { font-size: .95rem; line-height: 1.8; color: var(--ink-soft); }

.jd-apply { padding-top: 1.25rem; border-top: 1px solid var(--line); text-align: center; }
.jd-apply-btn { padding: .65rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 8px; }
.jd-apply-note { font-size: .75rem; color: var(--ink-mute); margin: .7rem 0 0; }

@media (max-width: 575.98px) {
  .job-detail-card { padding: 1.1rem .95rem; border-radius: var(--r-md); }
  .jd-title { font-size: 1.35rem; }
  .jd-facts { grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
  .jd-facts dd { font-size: .88rem; }
  .jd-apply-btn { width: 100%; }
}

.author-flag { font-size: 1.5rem; vertical-align: middle; margin-left: .3rem; }

/* =====================================================================
   MOBILE AUDIT
   Nothing on any page may push the viewport sideways, and every tap
   target has to be reachable with a thumb.
   ===================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }

img, svg, video, iframe, table, pre { max-width: 100%; }
pre, code { overflow-x: auto; word-break: break-word; }

/* long slugs, URLs and company names */
.post-body a, .job-card-meta, .latest-title, .jd-location,
.directory-link, .footer-link { overflow-wrap: anywhere; }

@media (max-width: 991.98px) {
  /* the three-column pages become one column with the rails inline */
  .side-panel { margin-bottom: 1rem; }
  .post-title { font-size: 1.5rem; }
  .container { padding-inline: 1rem; }
}

@media (max-width: 767.98px) {
  .hero-band     { padding: 1.75rem 0 1.5rem; }
  .hero-title    { font-size: 1.5rem; }
  .section-title { font-size: 1.05rem; }

  /* stats bar wraps to two per row instead of scrolling */
  .stats-bar { gap: .75rem 1.25rem; padding: .75rem .9rem; }
  .stats-bar .stat { flex: 0 0 calc(50% - .75rem); justify-content: center; }
  .stats-bar .sep  { display: none !important; }

  .salary-item .accordion-button { font-size: .84rem; padding: .65rem .8rem; }
  .salary-figure { margin-left: 0; }
  .salary-facts  { grid-template-columns: repeat(2, 1fr); }

  .highlight-card { padding: .85rem 1rem; }
  .toprole        { padding: .6rem .8rem; }
  .toprole-title  { white-space: normal; }

  .article-tile img { height: 110px; }
  .breadcrumb { font-size: .74rem; }

  /* tap targets */
  .city-chip, .tag-chip, .skill-chip { padding: .25rem .6rem; }
  .pagination .page-link { padding: .4rem .7rem; }
}

@media (max-width: 575.98px) {
  .container { padding-inline: .85rem; }
  .post-title { font-size: 1.35rem; }
  .stats-bar strong { font-size: .92rem; }
  .stats-bar .lbl   { font-size: .74rem; }

  .insight-name  { font-size: .76rem; }
  .insight-value { font-size: .76rem; }

  .directory-heading { font-size: .95rem; }
  .site-footer { padding: 1.75rem 0 1.25rem; }
  .footer-link { font-size: .8rem; }

  /* forms should never trigger the iOS zoom */
  input, select, textarea { font-size: 16px !important; }
}

/* admin panel on a phone */
@media (max-width: 767.98px) {
  .adm-body { padding: .9rem; }
  .adm-top  { padding: .6rem .9rem; }
  .rep-row  { padding: .8rem; }
  .sticky-actions { margin-inline: -.9rem; padding: .65rem .9rem; flex-wrap: wrap; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .stat-tile .val { font-size: 1.35rem; }
}

/* ---- header nav as an outlined pill group ---- */
.nav-pill-group {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem;
  background: var(--surface);
  gap: .15rem;
}
.nav-pill {
  border-radius: 999px;
  padding: .35rem .85rem !important;
  font-size: .88rem;
  color: var(--ink-soft) !important;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-pill:hover  { background: var(--line-soft); color: var(--ink) !important; }
.nav-search      { max-width: 240px; }
.nav-search .form-control { border-radius: 999px 0 0 999px; }
.nav-search .btn          { border-radius: 0 999px 999px 0; }

@media (max-width: 991.98px) {
  .nav-pill-group { border: 0; padding: 0; margin: .5rem 0; flex-direction: column; }
  .nav-pill       { padding: .5rem .25rem !important; }
  .nav-search     { max-width: 100%; }
}

/* ---- salary insight extras ---- */
.insight-trend  { font-size: .8rem; margin-left: .2rem; }
.insight-demand { color: var(--money); }
.insight-foot   { gap: .75rem; }
.toprole-trend  { font-size: .72rem; margin-left: .15rem; }

/* highlight cards are informational, not links */
.highlight-card { cursor: default; }