/*
 * Werkvormen — Martha Kindercoaching
 * ----------------------------------------
 * Alleen op de Werkvormen-template geladen (zie functions.php).
 * Drie kaarten met foto bovenaan, daaronder een icon-chip (generiek,
 * components.css), titel en tekst.
 */

.werkvormen__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-8);
}

.werkvorm__card {
  display:          flex;
  flex-direction:   column;
  background-color: var(--background);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-md);
  overflow:         hidden;   /* foto loopt tot de (afgeronde) bovenrand */
  transition:       transform var(--transition-fast),
                    box-shadow var(--transition-fast);
}

.werkvorm__card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.werkvorm__media {
  overflow: hidden;   /* ruimte voor .media-zoom; hoeken komen van de kaart */
}

.werkvorm__media img {
  display:      block;
  width:        100%;
  height:       100%;
  aspect-ratio: 4 / 5;
  object-fit:   cover;
}

.werkvorm__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-6) var(--space-6) var(--space-8);
}

.werkvorm__title {
  margin:      0;
  font-size:   var(--text-xl);
  font-weight: var(--font-bold);
  color:       var(--ink);
}

.werkvorm__text {
  margin:      0;
  color:       var(--muted-foreground);
  font-size:   var(--text-sm);
  line-height: var(--leading-relaxed);
}

@media (max-width: 900px) {
  .werkvormen__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .werkvormen__grid { grid-template-columns: 1fr; }
}