/* ============================================================
   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); }

/* ---------- Kaart-carrousel ----------
   Letterlijk overgenomen uit assets/css/harnies-healfie.css (blok
   "Kaart-carrousel", de carrousel op /voice). Drie kaarten in beeld,
   horizontaal snappend. Twee aanpassingen, beide omdat deze site het
   betreffende token niet kent:
     rgba(var(--shadow-rgb), 0.35)  -> rgba(28, 36, 75, 0.35)
     .photo-card__link              -> .card__link  (de linkstijl die deze
                                       site al gebruikt, zie .card--join)
   ------------------------------------------------------------------ */
.cards-carousel { position: relative; }
.cards-carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3);
  gap: 24px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 2px 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cards-carousel__track::-webkit-scrollbar { display: none; }
.cards-carousel__track > .photo-card { scroll-snap-align: start; height: 100%; }
.cards-carousel .photo-card__media { aspect-ratio: 895 / 431; }
.cards-carousel .photo-card__media img { object-position: 50% 50%; }
.cards-carousel .photo-card__body { display: flex; flex-direction: column; flex: 1; }
.cards-carousel .photo-card__text { margin-bottom: 16px; }
.cards-carousel .card__link { margin-top: auto; }
.cards-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--color-border);
  box-shadow: 0 8px 22px -10px rgba(28, 36, 75, 0.35);
  color: var(--color-heading); font-size: 24px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; transition: color .15s ease, border-color .15s ease;
}
.cards-carousel__nav:hover { color: var(--color-primary); border-color: var(--color-primary); }
.cards-carousel__nav:disabled { opacity: .35; cursor: default; }
.cards-carousel__nav--prev { left: -20px; }
.cards-carousel__nav--next { right: -20px; }
@media (max-width: 980px) { .cards-carousel__track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 620px) {
  .cards-carousel__track { grid-auto-columns: 84%; }
  .cards-carousel__nav { display: none; }
}

/* ---------- Compactere kaarten op de platformconcepten ----------
   Alleen overbodige ruimte weg; geen andere kaartstijl. Gescoped op de
   pagina, zodat de kaarten op /voice en de homepage ongewijzigd blijven.
     bovenruimte 46 -> 36px (de badge steekt maximaal 28px in de body)
     onderruimte  24 -> 20px
     de losse 16px onder de tekst in de carrousel vervalt              */
.page-platform-concept-2 .photo-card__body,
.page-platform-concept-3 .photo-card__body { padding: 36px 20px 20px; gap: 4px; }
.page-platform-concept-2 .cards-carousel .photo-card__text,
.page-platform-concept-3 .cards-carousel .photo-card__text { margin-bottom: 0; }