/* Homepage strip of real jobs: swipeable row on phones, 3 columns on tablets, one row of 6 on desktop. */
.jobs-strip h2 { margin: .25rem 0 1.5rem; }
.jobs-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 62%);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}
.job-card {
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.job-card:hover, .job-card:focus-visible { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.job-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.job-client { display: block; padding: .6rem .75rem 0; font-size: .95rem; font-weight: 600; color: var(--color-dark); }
.job-what { display: block; padding: .15rem .75rem .8rem; font-size: .85rem; line-height: 1.35; color: var(--color-text-secondary, #555); }
@media (min-width: 700px) {
  .jobs-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
@media (min-width: 980px) {
  .jobs-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .job-card { transition: none; }
}