/* Job list component CSS — local to the sync package.
 *
 * Same scope rule as sync-job-detail.css: tokens.css is shared, this file
 * may only reference its `var(--*)` definitions. The grep-based design-token
 * test (test_design_tokens.py) enforces this at CI time.
 */

.job-list {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--space-5);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

.job-list__breadcrumb {
  margin-bottom: var(--space-5);
}

.job-list__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-alt);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.job-list__back:hover,
.job-list__back:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.job-list__back-arrow {
  font-size: var(--text-base);
  line-height: 1;
}

.job-list__header {
  text-align: center;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--color-accent);
}

.job-list__title {
  font-size: var(--text-4xl);
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

.job-list__lede {
  font-size: var(--text-base);
  color: var(--color-muted);
  margin: 0;
}

.job-list__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.job-list-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

/* 職種系統アクセント (2026-07-23 採用コンサルフィードバック対応) */
.job-list-card--care   { border-left-color: var(--job-care); }
.job-list-card--nurse  { border-left-color: var(--job-nurse); }
.job-list-card--office { border-left-color: var(--job-office); }
.job-list-card--it     { border-left-color: var(--job-it); }

.job-list-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.job-list-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.job-list-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.job-list-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-list-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.job-list-card__labels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.job-list-card__label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* 職種ラベル(先頭チップ)のみ系統色化、雇用形態ラベルは中立トーンのまま */
.job-list-card--care .job-list-card__label:first-child   { background: var(--job-care-soft);   color: var(--job-care-ink); }
.job-list-card--nurse .job-list-card__label:first-child  { background: var(--job-nurse-soft);  color: var(--job-nurse-ink); }
.job-list-card--office .job-list-card__label:first-child { background: var(--job-office-soft); color: var(--job-office-ink); }
.job-list-card--it .job-list-card__label:first-child     { background: var(--job-it-soft);     color: var(--job-it-ink); }

.job-list-card__title {
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin: 0;
  line-height: var(--lh-tight);
}

.job-list-card__address {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.job-list-card__description {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: var(--lh-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.job-list-card__cta {
  align-self: flex-start;
  margin-top: var(--space-3);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.job-list-card__link:hover .job-list-card__cta {
  color: var(--color-accent-dark);
}

.job-list__footer {
  text-align: center;
  padding-top: var(--space-8);
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.job-list__source-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-faint);
}