/* =========================================================
 * Pages — ページ固有レイアウト
 * components.css の再利用ブロックを組み合わせる
 * ========================================================= */

/* =========================================================
 * page-home
 * ========================================================= */

.page-home .hero { padding-bottom: clamp(3rem, 7vw, 5rem); }
.page-home .section + .section { padding-top: var(--space-12); }

/* =========================================================
 * page-jobs
 * ========================================================= */

.page-jobs__header {
  padding-block: var(--space-12);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.page-jobs__title {
  font-size: var(--text-4xl);
  margin: var(--space-2) 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
}
.page-jobs__lead {
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  max-width: 56ch;
  margin: 0;
}
.page-jobs__main { padding-block: var(--space-10); }
.page-jobs__count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
.page-jobs__count strong {
  font-size: var(--text-xl);
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
.page-jobs__count-aside {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-faint);
}

/* =========================================================
 * page-job-detail
 * ========================================================= */

.page-job-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-10);
}
.page-job-detail__aside { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
  .page-job-detail__layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-10);
  }
  .page-job-detail__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    align-self: start;
  }
}