/* The Jobs tab (/jobs/) and the city / field pages (jobs.php).
   THE SAME LOOK AS top_listings.html (Biju 2026-10-04: "the formatting and count and looks do not match with the
   other pages"). The .wrap / .updated / .boards / .board / .note / .cta rules are copied from that page's own
   <style> block, class for class - keep the two in step if either changes. */
.wrap { padding: 0 6vw 6rem; }
.updated {
  font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 2.2rem 0 2.4rem; line-height: 1.7;
}
.updated b { color: var(--accent); font-weight: 500; }
.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.boards .board { border-top: 2px solid var(--gold); padding: 1.1rem 0 0; margin: 0; min-width: 0; }
.board h2 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 1.9rem; letter-spacing: 0.01em; color: var(--paper);
  margin: 0 0 0.2rem; line-height: 1;
}
.board .sub {
  font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
  display: flex; justify-content: space-between;
}
.board ol { list-style: none; margin: 0; padding: 0; }
.board li {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: 0.6rem;
  align-items: baseline; padding: 0.42rem 0; border-bottom: 1px solid var(--line);
}
.board li:nth-child(-n+10) .nm { font-weight: 600; }
.board .r {
  font-family: 'DM Mono', monospace; font-size: 0.66rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.board .nm {
  font-size: 0.88rem; color: var(--paper); line-height: 1.35;
  overflow-wrap: anywhere;
}
.board .ct {
  font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--gold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.note { max-width: 46rem; margin-top: 3rem; font-size: 0.86rem; line-height: 1.7; color: var(--muted); }
.cta { margin-top: 2.2rem; }
@media (max-width: 980px) { .boards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .boards { grid-template-columns: 1fr; } }

/* ── additions for the jobs pages, in the same vocabulary ── */
.board .nm a { color: var(--paper); text-decoration: none; }
.board .nm a:hover { color: var(--gold); }
.board-more {
  font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0.9rem 0 0;
}
.board-more a { color: var(--gold); text-decoration: none; }
.lp-tag a { color: inherit; text-decoration: none; }
.lp-tag a:hover { color: var(--gold); }

/* a city / field page: the openings take two columns, employers and related pages the third */
.lp-boards { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.lp-side { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.board .job-co { display: block; font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
@media (max-width: 980px) { .lp-boards { grid-template-columns: 1fr; } }

/* the hub: every country with its biggest cities */
.board-wide { border-top: 2px solid var(--gold); padding: 1.1rem 0 0; margin: 3rem 0 0; }
.hub-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem 2rem; }
.hub-country { border-bottom: 1px solid var(--line); padding-bottom: 0.8rem; }
.hub-country h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.3rem; display: flex; justify-content: space-between; gap: 0.6rem; }
.hub-country h3 a { color: var(--paper); text-decoration: none; }
.hub-country h3 .ct {
  font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--gold); font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.hub-country p { margin: 0; font-size: 0.8rem; line-height: 1.6; color: var(--muted); }
.hub-country p a { color: var(--muted); text-decoration: none; }
.hub-country a:hover { color: var(--gold); }

/* the hub's Top 100 employers: one ranked list flowing over three columns */
.board ol.cols3 { columns: 3 16rem; column-gap: 2rem; }
.board ol.cols3 li { break-inside: avoid; }