/* ==========================================================================
   Dienstkaart — nummer, titel en tekst in een licht kader
   ========================================================================== */

.service-card {
  --card-pad: clamp(1.5rem, 2.4vw, 2.125rem); /* 24→34, zelfde als doelgroepkaart */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--card-pad);
  background: var(--bg-card);
  border: var(--border-width) solid var(--border);
}

.service-card__number {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
}

.service-card__title {
  margin-bottom: var(--space-1);
  font-size: var(--fs-card); /* zelfde maat als alle kaarttitels */
  line-height: var(--lh-snug);
}

.service-card__text {
  color: var(--fg-body);
  font-size: var(--fs-small);
  text-wrap: balance; /* korte tekst: regels even lang, geen losse woorden onderaan */
}

/* Zonder kader: de omringende rij tekent de lijnen (zie over-ons.css).
   Kleinere titel, ruimte tussen nummer en titel zoals in het ontwerp. */
.service-card--plain {
  gap: var(--space-3);
  padding: var(--space-6) 0;
  background: none;
  border: 0;
}

.service-card--plain .service-card__number {
  margin-bottom: var(--space-6);
}

.service-card--plain .service-card__title {
  font-size: var(--fs-card);
}

@media (min-width: 48em) {
  .service-card--plain {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
}

/* Met foto bovenaan (16:9), tot de rand van de kaart. */
.service-card--media {
  overflow: hidden;
}

.service-card__media {
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--space-3);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--petrol-media);
}

.service-card__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}