/* ============================================================
   JobsByCountry mobile-fit layer (2026-10-06)
   Loaded LAST on every public page, so it wins over the older sheets.
   Goals: no horizontal scroll from 320px up, long words wrap instead of
   widening the page, and links/buttons are big enough to tap.
   ============================================================ */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---- long words / grid items never widen the page ---- */
h1,h2,h3,h4,.facet-name,.live-job-company,.live-job-location,.content-card,.job-desc,.panel-header{overflow-wrap:anywhere}
.panel,.content-card,.facet-card,.directory,.city-card,.job-layout > *,.job-head > div,.panel-header > *{min-width:0}
.job-head > div:not(.job-logo){flex:1 1 200px}
.job-desc img,.content-card img{max-width:100%;height:auto}
.job-desc pre,.content-card pre{max-width:100%;overflow-x:auto}
.job-desc table,.content-card table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* facet cards (categories, countries, companies): name and count wrap instead of spilling out */
.facet-card{flex-wrap:wrap;gap:6px 12px;min-width:0}
.facet-card .facet-name{min-width:0;flex:1 1 120px}
.facet-card .facet-count{flex:none;margin-left:auto}

/* ---- tap targets (links inside text were only 17-20px tall) ---- */
@media (max-width:820px){
  .breadcrumbs a{display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
  .breadcrumbs ol{gap:0 6px}
  .footer a{display:inline-block;padding:8px 0}
  .footer-socials a{width:44px;height:44px}
  .hyb-popular a{display:inline-flex;align-items:center;min-height:36px;padding:0 3px}
  .toc a{display:inline-block;padding:4px 0}
}

/* ---- very narrow phones (320-380px): header must fit ---- */
@media (max-width:380px){
  .container,.container-narrow{padding:0 14px}
  .site-header .inner{gap:8px;min-height:72px}
  .jbc-logo{height:25px}
  .header-actions{gap:8px}
  .icon-btn,.ghost-btn,.menu-btn{min-width:42px;height:42px;padding:0 10px}
  .menu-btn{font-size:21px}
  .job-head{gap:14px}
  .job-logo{height:54px;width:54px;font-size:21px}
}

/* ---- round 2: header logo and related-links lists ---- */
.brand{min-height:44px}
@media (max-width:820px){
  .content-card li > a:only-child{display:inline-block;padding:7px 0}
  .content-card li{margin-bottom:2px}
}

/* ============================================================
   Company logos (2026-10-06): never stretched, never cropped.
   Logos are wide/square/tall, so they sit on a white tile with
   object-fit:contain. Initials (no image) keep the small square.
   ============================================================ */
.job-head > .job-logo{flex:0 0 auto}
.job-logo:has(img){
  width:128px;
  height:72px;
  padding:10px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(16,42,76,.10);
  overflow:hidden;
}
body[data-theme='dark'] .job-logo:has(img){border-color:rgba(255,255,255,.10);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.job-logo:has(img) img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;display:block}
.job-logo:not(:has(img)){width:64px;height:64px}

@media (max-width:560px){
  /* stack: logo on top, full-width title below (no squeezed one-word-per-line title) */
  .job-head{flex-direction:column;align-items:flex-start;gap:14px;flex-wrap:nowrap}
  .job-head > div:not(.job-logo){flex:1 1 auto;width:100%}
  .job-logo:has(img){width:112px;height:64px;padding:8px 12px}
}
@media (max-width:380px){
  .job-logo:has(img){width:100px;height:58px}
  .job-logo:not(:has(img)){width:54px;height:54px}
}

/* logo tile: flex + max-* keeps any aspect ratio (wide, square, tall) fully inside the tile */
.job-logo:has(img){display:flex;align-items:center;justify-content:center}
.job-logo:has(img) img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}

/* logo tile polish: a little more room for the artwork */
.job-logo:has(img){padding:8px 12px;width:136px;height:76px}
@media (max-width:560px){ .job-logo:has(img){padding:7px 11px;width:116px;height:66px} }
@media (max-width:380px){ .job-logo:has(img){padding:6px 10px;width:104px;height:60px} }

/* breadcrumbs: every crumb (link or current page) shares one centre line */
.breadcrumbs ol{align-items:center}
.breadcrumbs li{display:flex;align-items:center}
@media (max-width:820px){
  .breadcrumbs li{min-height:36px}
  .breadcrumbs{margin-bottom:12px}
}

/* ---- footer side padding (2026-10-09) ----
   `.footer .top{padding:52px 0}` out-ranked `.container{padding:0 18px}`, so on phones the
   footer link columns touched the screen edge on every page. */
@media (max-width:820px){
  .footer .top{padding-left:18px;padding-right:18px}
}
@media (max-width:380px){
  .footer .top{padding-left:14px;padding-right:14px}
}

/* ---- employers featured through ATS APIs (2026-10-09) ---- */
.emp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 18px}
.emp-logo{
  display:flex;align-items:center;justify-content:center;min-height:100px;padding:18px 20px;
  background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.emp-logo img{width:auto;height:auto;max-width:100%;max-height:54px;object-fit:contain;display:block}
.emp-logo:hover{border-color:var(--accent);transform:translateY(-2px)}
@media (max-width:900px){.emp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.emp-logo{min-height:88px;padding:14px}}
@media (prefers-reduced-motion:reduce){.emp-logo{transition:none}.emp-logo:hover{transform:none}}

/* partners v2: logo + role count tiles */
.emp-logo{flex-direction:column;gap:12px;min-height:150px;text-align:center}
.emp-img{display:flex;align-items:center;justify-content:center;height:60px;width:100%}
.emp-img img{max-height:52px}
.emp-logo[href*="Notion"] .emp-img img{max-height:60px}
.emp-meta{display:flex;flex-direction:column;gap:2px;color:#0f172a}
.emp-meta strong{font-size:.95rem}
.emp-meta small{font-size:.78rem;color:#475569}

/* company logos on facet cards */
.facet-card.has-logo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px}
.facet-logo{display:flex;align-items:center;justify-content:center;width:84px;height:46px;padding:6px 8px;background:#fff;border:1px solid var(--border);border-radius:10px}
.facet-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:480px){.facet-card.has-logo{grid-template-columns:auto minmax(0,1fr)}.facet-card.has-logo .facet-count{grid-column:1/-1;justify-self:start;margin-left:0}}
/* logos only: name kept for screen readers */
.facet-card.has-logo{display:flex;align-items:center;justify-content:space-between;gap:14px}
.facet-card.has-logo .facet-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facet-card.has-logo .facet-logo{flex:1 1 auto;width:auto;height:58px;padding:8px 14px;justify-content:center}
.facet-card.has-logo .facet-logo img{max-height:42px}
.facet-card.has-logo .facet-count{flex:0 0 auto;margin-left:0}
@media (max-width:480px){.facet-card.has-logo{flex-wrap:wrap}.facet-card.has-logo .facet-logo{flex:1 1 100%}.facet-card.has-logo .facet-count{margin-left:auto}}
@media (min-width:481px){.facet-card.has-logo{flex-wrap:nowrap}.facet-card.has-logo .facet-logo{min-width:0;flex:1 1 0}}

/* flags on country cards */
.facet-card.has-flag{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:nowrap}
.facet-flag{flex:0 0 auto;display:block;width:40px;height:30px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
.facet-flag img{display:block;width:100%;height:100%;object-fit:cover}
.facet-card.has-flag .facet-name{flex:1 1 0;min-width:0}
.facet-card.has-flag .facet-count{margin-left:auto}
.facet-flag[hidden]{display:none}

/* country description line */
.facet-card .facet-desc{display:block;font-size:12.5px;line-height:1.4;color:var(--muted-2);margin-top:6px;font-family:'DM Sans',sans-serif;font-weight:400}

/* ---- 2026-10-10: footer social icons on phones ----
   The phone footer rule `.footer a{display:inline-block;padding:8px 0}` also hit the social icons and pushed the glyph
   to the top left of its box. Centre it again. */
.footer .footer-socials a{display:inline-flex;align-items:center;justify-content:center;padding:0}

/* ---- 2026-10-10: one neutral badge style ----
   On site / Remote (green), Full time (slate) and pay (orange) now share the site's neutral look; blue stays for the accent. */
.badge-slate,.badge-green,.badge-orange{background:rgba(15,42,76,.06);color:var(--heading);border:1px solid var(--border)}
body[data-theme='dark'] .badge-slate,body[data-theme='dark'] .badge-green,body[data-theme='dark'] .badge-orange{
  background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.16)}