/* Job list cards v2 (2026-10-06, Stephen: "it's a mess on mobile ... buttons don't extend").
   Loaded only where lj_jobpage_v2() is on (inc/header.php). CSS only — the card markup in
   index.php / search.php / category.php / subpage.php is unchanged.
   Phone: logo beside the title, salary as plain text, summary clamped to 3 lines, the two
   buttons side by side across the full card width.
   Selectors start 'html body' because this file loads before style.css. */
/* Town and sector links (2026-10-06, Stephen: "i dont like the little tabs ... the scroll bar
   looks strange"): plain links, no pill shapes, no sideways-scrolling strip. */
html body .subpage-nav,
html body .category-nav {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline;
  gap: 0.35rem 1.1rem; overflow: visible; white-space: normal; text-align: left;
  padding: 0.7rem 1.25rem; background: #fff; font-size: 0.95rem;
  padding-inline: max(1.25rem, calc((100% - 1160px) / 2));   /* line up with the page content on wide screens */
}
html body .subpage-nav a,
html body .category-nav a {
  display: inline; padding: 0; margin: 0; background: none; border: 0; border-radius: 0;
  color: #374151; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}
html body .subpage-nav a:hover, html body .category-nav a:hover,
html body .subpage-nav a.active, html body .category-nav a.active {
  background: none; color: var(--accent); text-decoration-color: currentColor;
}
html body .subpage-nav-label { flex-basis: 100%; margin: 0; font-weight: 700; color: #111827; }
/* At the top of list pages the 34-sector list would push the jobs down: shown at the foot of
   job and town pages instead, and via "Browse Categories" in the header. */
html body .category-nav { display: none; }
html body .jd2-more .category-nav,
html body .subpage-more .category-nav { display: block; columns: 2; column-gap: 1.25rem; }
html body .jd2-more .category-nav::before,
html body .subpage-more .category-nav::before { content: "By sector:"; display: block; font-weight: 700; color: #111827; margin-bottom: 0.4rem; column-span: all; }
html body .jd2-more .category-nav a,
html body .subpage-more .category-nav a { display: block; padding: 0.3rem 0; break-inside: avoid; }
html body .jd2-more .subpage-nav,
html body .subpage-more .subpage-nav { border-bottom: 0; }
@media (min-width: 700px) {
  html body .jd2-more .category-nav,
  html body .subpage-more .category-nav { columns: 4; }
}

/* Town pages: count line under the list heading; area write-up below the jobs. */
html body .subpage-list-title { margin-bottom: 0.25rem; }
html body .subpage-count { margin: 0 0 1rem; color: #4b5563; font-size: 0.95rem; }
html body .subpage-about { margin-top: 2.5rem; }
html body .subpage-nearby { margin-top: 2.5rem; max-width: 760px; }
html body .subpage-nearby ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e5e7eb; }
html body .subpage-nearby li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #e5e7eb; }
html body .subpage-nearby li a { font-weight: 600; }
html body .subpage-nearby li span { color: #4b5563; white-space: nowrap; }
html body .subpage-note { color: #6b7280; font-size: 0.85rem; margin-top: 0.5rem; }
html body .subpage-faqs a, html body .subpage-nearby a {
  text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

@media (max-width: 700px) {
  /* Shorter banner on phones so the first job is reached sooner (search box kept). */
  html body .hero { padding: 1.5rem 1rem 1.75rem; }
  html body .hero-h1 { font-size: 1.6rem; margin-bottom: 0.3rem; }
  html body .hero-sub { font-size: 0.95rem; margin-bottom: 0.8rem; }
  html body .job-listing {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 0.8rem;
    row-gap: 0.15rem;
    padding: 0.95rem;
    border-radius: 6px;
  }
  html body .job-listing .job-logo { grid-column: 1; grid-row: 1 / span 2; }
  html body .job-listing .job-logo img { width: 48px; height: 48px; padding: 2px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; }
  html body .job-listing .job-info { display: contents; }
  html body .job-listing .job-info > * { grid-column: 1 / -1; margin: 0; }
  html body .job-listing .job-info > h3,
  html body .job-listing .job-info > h3 + .job-meta { grid-column: 2; }
  html body .job-listing .job-info > h3 { font-size: 1.05rem; line-height: 1.3; align-self: end; }
  html body .job-listing .job-info > h3 + .job-meta { align-self: start; }
  html body .job-listing .job-meta { font-size: 0.95rem; color: #4b5563; }
  html body .job-listing .salary-chip { background: none; border: 0; padding: 0; color: #111827; font-weight: 700; font-size: 1rem; }
  html body .job-listing .job-info > .job-meta:nth-of-type(2) { margin-top: 0.45rem; }
  html body .job-listing .job-date { font-size: 0.85rem; color: #6b7280; }
  html body .job-listing .job-info > div:not([class]) {
    margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.5; color: #374151;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  html body .job-listing .job-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem;
  }
  html body .job-listing .job-actions a,
  html body .job-listing .job-actions a.more-btn,
  html body .job-listing .job-actions .apply-now-btn {
    width: 100%; max-width: none; min-width: 0; margin: 0; text-align: center; padding: 0.7rem 0.5rem; font-size: 1rem;
  }
}