/* ============================================================
   photo-card.css — de fotokaart uit de sectie "In de praktijk" van /voice.

   Letterlijk overgenomen uit templates/harnies/assets/harnies.css (blok
   "Fotokaarten") plus de healfie-thema-overrides uit harnies-healfie.css
   (.cards-carousel .photo-card__media). Alleen de twee thematokens die deze
   site niet kent zijn vervangen door hun tegenhanger:
     --color-surface          -> --color-white
     --color-surface-alt-deep -> --color-light
   ============================================================ */

.photo-card {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;   /* beeld sluit aan op de afgeronde bovenhoeken */
}
.photo-card__media {
  position: relative;
  aspect-ratio: 895 / 431;
  background: var(--color-light);
}
.photo-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;   /* gelijk voor alle kaarten */
  display: block;
}

/* Icoon-badge: wit frame met een zacht groen binnenvlak, hangt half over de
   rand tussen beeld en tekst. Links gelijk met de tekst eronder; op alle
   kaarten exact dezelfde positie. */
.photo-card__badge {
  position: absolute; z-index: 3;
  left: 22px; bottom: 6px; transform: translateY(50%);   /* iets boven de beeldrand */
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 18px;
  background: var(--color-white);
}
.photo-card__badge-inner {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;   /* dunne witte rand van ~6px rondom */
  border-radius: 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.photo-card__badge svg { width: 21px; height: 21px; }

@media (min-width: 700px) {
  .photo-card__badge { width: 50px; height: 50px; }
  .photo-card__badge-inner { width: 38px; height: 38px; }
}
@media (min-width: 1024px) {
  .photo-card__badge { width: 56px; height: 56px; }
  .photo-card__badge-inner { width: 44px; height: 44px; }
}

.photo-card__body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 42px 22px 22px;   /* bovenruimte voor de overhangende badge */
}
@media (min-width: 700px)  { .photo-card__body { padding: 44px 22px 24px; } }
@media (min-width: 1024px) { .photo-card__body { padding: 46px 22px 24px; } }
.photo-card__title { font-size: 19px; line-height: 1.3; }
.photo-card__text  { font-size: 15px; line-height: 1.55; color: var(--color-body); }