/**
 * Chamathka Cab Service - recent jobs.
 * Snippet: "CCS Jobs Styles" | group: Jobs Section | type: CSS | run_at: all
 * CCS_JOBS_CSS_MARKER
 *
 * Alternating photo-and-detail rows. The badge is kept local to this section,
 * the way the hero keeps its own; nothing else on the page uses one yet.
 */

.ccs-jobs__list {
  display: grid;
  gap: var(--wp--preset--spacing--80);
}

.ccs-job {
  display: grid;
  gap: var(--wp--preset--spacing--60) var(--wp--custom--grid-gap);
  align-items: center;
}

@media (min-width: 900px) {
  .ccs-job {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  /* Every second job sends its photo to the right, so the page alternates. */
  .ccs-job--reverse .ccs-job__media {
    order: 2;
  }
}

.ccs-job__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--wp--custom--card-radius);
  box-shadow: var(--wp--custom--shadow-lg);
}

.ccs-job__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ccs-job__badge {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  left: var(--wp--preset--spacing--40);
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  padding: 0.35rem var(--wp--preset--spacing--20);
  border-radius: var(--wp--custom--radius-sm);
  background-color: var(--wp--preset--color--accent-fill);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wide);
  line-height: 1;
  text-transform: uppercase;
}

.ccs-job__title {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xxl);
}

.ccs-job__text {
  margin: 0 0 var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--muted);
}

.ccs-job__facts {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding-top: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}

.ccs-job__fact {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--base);
}

.ccs-job__fact dt {
  padding-top: 3px;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--subtle);
}

.ccs-job__fact dd {
  margin: 0;
  color: var(--wp--preset--color--muted);
}