/**
 * @file
 * MLT Modern — Job / case-study card.
 *
 * Wider 16:10 image, uppercase meta line, h3, p, and a row of small tag
 * pills at the foot. Suitable for "Recent Jobs" or "Case Studies" grids.
 *
 * Markup:
 *   <div class="mlt-job-grid">
 *     <article class="mlt-job-card">
 *       <div class="mlt-job-card__image" style="background-image:url('...')"></div>
 *       <div class="mlt-job-card__body">
 *         <div class="mlt-job-card__meta">Cheshunt · Sept 2025</div>
 *         <h3>Full house rewire, 1930s semi</h3>
 *         <p>5-day job covering ground and first floors...</p>
 *         <div class="mlt-job-card__tags">
 *           <span class="mlt-job-card__tag">Rewire</span>
 *           <span class="mlt-job-card__tag">Consumer Unit</span>
 *         </div>
 *       </div>
 *     </article>
 *     ...
 *   </div>
 */

.mlt-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.mlt-job-card {
  background: #fff;
  border-radius: var(--mlt-radius-lg);
  overflow: hidden;
  border: 1px solid var(--mlt-border);
  box-shadow: var(--mlt-shadow-card);
  display: flex;
  flex-direction: column;
}

.mlt-job-card__image {
  aspect-ratio: 16 / 10;
  background-color: #d0dae5;
  background-size: cover;
  background-position: center;
}

.mlt-job-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mlt-job-card__meta {
  font-size: 13px;
  color: var(--mlt-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.mlt-job-card h3 {
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--mlt-text);
  line-height: 1.3;
  font-weight: 700;
}

.mlt-job-card p {
  color: var(--mlt-text-light);
  font-size: 15px;
  flex: 1;
  line-height: 1.6;
  margin: 0;
}

.mlt-job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.mlt-job-card__tag {
  background: var(--mlt-primary-light);
  color: var(--mlt-primary);
  padding: 4px 10px;
  border-radius: var(--mlt-radius-sm);
  font-size: 12px;
  font-weight: 600;
}