/* ==========================================================================
   Doelgroepkaart — beeld, nummer, titel, tekst, link
   De link rekt via ::after over de hele kaart, zodat de kaart klikbaar is
   terwijl alleen de linktekst de linknaam is.
   ========================================================================== */

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-card);
  border: var(--border-width) solid var(--border);
  transition:
    border-color var(--dur-2) var(--ease-plain),
    transform var(--dur-4) var(--ease-out),
    box-shadow var(--dur-4) var(--ease-plain);
}

.audience-card:hover,
.audience-card:focus-within {
  border-color: var(--accent);
}

.audience-card:hover {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-lift);
}

/* Beeld ------------------------------------------------------------------ */

.audience-card__media {
  position: relative;
  aspect-ratio: var(--ratio-card-mobile);
  overflow: hidden;
  background: var(--petrol-900); /* ook de laadkleur achter de foto */
}

.audience-card__img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ratio-card-mobile);
  object-fit: cover;
  transition: transform var(--dur-6) var(--ease-out);
}

.audience-card:hover .audience-card__img {
  transform: scale(var(--zoom-media));
}

.audience-card__placeholder {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: var(--scrim-label);
  border-radius: var(--radius-xs);
  color: var(--on-dark-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Tekst ------------------------------------------------------------------ */

.audience-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(1.5rem, 2.4vw, 2.125rem); /* 24→34, ontwerp */
}

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

.audience-card__title {
  font-size: var(--fs-card);
  line-height: var(--lh-snug);
}

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

/* Onderaan de kaart; als flex-kind rekt de lijn over de volle breedte. */
/* Lijn over de volle breedte, pijl direct achter het laatste woord (ook als
   de tekst over twee regels loopt). Bij aanwijzen van de kaart schuift de
   pijl op; de ruimte zelf verandert niet, zodat beide kaarten gelijk doen. */
.audience-card__link {
  display: block;
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--fg-1);
}

.audience-card__link:hover {
  gap: 0.625rem; /* geen gap-animatie van .link-arrow: hier geen flexbox */
}

.audience-card__link-end {
  white-space: nowrap;
}

.audience-card__link .arrow {
  margin-left: 0.625rem; /* 10px, zelfde ruimte als .link-arrow */
  vertical-align: -0.0625rem; /* 1px: optisch op de hoofdletters */
}

.audience-card__link:hover .arrow {
  transform: translateX(var(--space-2));
}

/* Hele kaart klikbaar: het ::after-vlak van de link legt zich over de kaart.
   De link zelf moet daarvoor niet gepositioneerd zijn (links.css geeft
   .link-arrow position: relative voor het grotere tikvlak), anders blijft
   het vlak zo groot als de link. Het tikvlak is hier niet nodig. */
.audience-card .audience-card__link {
  position: static;
}

.audience-card .audience-card__link::before {
  content: none;
}

.audience-card__link::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}

@media (min-width: 64em) {
  .audience-card__media,
  .audience-card__img {
    aspect-ratio: var(--ratio-card);
  }
}

/* Raster ------------------------------------------------------------------
   Eén kolom, begrensd zodat kaarten niet te breed worden; vanaf 1024px
   naast elkaar (twee kaarten). */
.audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
  max-width: 38.75rem; /* 620px, ontwerp */
  padding: 0;
  list-style: none;
}

@media (min-width: 64em) {
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}