/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/clusters-contactpersons/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* style.scss – Cluster Contactpersonen
   - Afbeelding links, content rechts
   - Teksten rechts uitgelijnd
   - Kleurgebruik via theme.json variabelen
*/
.sn-cluster-contacts {
  /* Layout tokens */
  --gap: var(--wp--preset--spacing--small, 1rem);
  --media-w: 8rem; /* breedte van de portretfoto links */
  --media-ratio: 9 / 21; /* ratio uit theme.json (9:21) */
  /* Grid met kaarten (kolommen via inline style: --sn-cols) */
  /* Kaart: 2 kolommen – links media, rechts content */
  /* Afbeelding: 9:21 staand, links uitgelijnd, geen ronde uitsnede */
  /* Iconen + links */
  /* Subtiele hover/focus state voor de kaart */
  /* Responsive */
  /* Compact als er geen foto is */
  /* Progressive enhancement: als er geen figure in de kaart zit, maak één kolom */
}
.sn-cluster-contacts .sn-cluster-contacts__heading {
  margin: 0 0 var(--wp--preset--spacing--small, 1rem) 0;
  font-weight: 600;
  color: var(--wp--preset--color--grey-dark);
}
.sn-cluster-contacts .sn-cluster-contacts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--sn-cols, 3), minmax(0, 1fr));
  gap: var(--gap);
}
.sn-cluster-contacts .sn-cluster-contacts__item {
  margin: 0;
}
.sn-cluster-contacts .sn-cluster-contacts__card {
  display: grid;
  grid-template-columns: var(--media-w) 1fr;
  align-items: center;
  gap: 0.875rem;
  padding: 2rem;
  border-radius: 2rem;
  background: var(--wp--preset--color--grey-light);
  color: inherit;
}
.sn-cluster-contacts .sn-cluster-contacts__figure {
  margin: 0;
  width: var(--media-w);
  /* figure staat links in de grid; tekstuitlijning van parent heeft geen effect op media */
  text-align: left;
}
.sn-cluster-contacts .sn-cluster-contacts__photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--media-ratio);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2rem 0 0 2rem;
}
.sn-cluster-contacts .sn-cluster-contacts__content {
  /* alle tekst rechts uitgelijnd (expliciet voor duidelijkheid) */
  text-align: right;
}
.sn-cluster-contacts .sn-cluster-contacts__name {
  margin: 0.15rem 0 0.15rem 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--wp--preset--color--grey-dark);
}
.sn-cluster-contacts .sn-cluster-contacts__function {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  color: var(--wp--preset--color--grey-dark);
  opacity: 0.9;
}
.sn-cluster-contacts .sn-cluster-contacts__meta {
  list-style: none;
  margin: 0.25rem 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: flex-end; /* lijst rechts uitlijnen */
  font-size: 0.9375rem;
}
.sn-cluster-contacts .sn-cluster-contacts__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.sn-cluster-contacts .sn-cluster-contacts__meta-item i {
  /* Font Awesome 7 iconen */
  color: var(--wp--preset--color--primary);
  font-size: 1em; /* volg tekstgrootte */
  line-height: 1;
}
.sn-cluster-contacts .sn-cluster-contacts__meta a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.sn-cluster-contacts .sn-cluster-contacts__meta a:hover,
.sn-cluster-contacts .sn-cluster-contacts__meta a:focus-visible {
  text-decoration: underline;
}
.sn-cluster-contacts .sn-cluster-contacts__card:hover,
.sn-cluster-contacts .sn-cluster-contacts__card:focus-within {
  background: var(--wp--preset--color--grey-light);
  border-color: var(--wp--preset--color--grey);
}
@media (max-width: 900px) {
  .sn-cluster-contacts .sn-cluster-contacts__grid {
    grid-template-columns: repeat(var(--sn-cols, 2), minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .sn-cluster-contacts {
    --media-w: 6rem; /* iets smaller beeld op mobiel */
  }
  .sn-cluster-contacts .sn-cluster-contacts__grid {
    grid-template-columns: 1fr; /* één kolom kaarten */
  }
  .sn-cluster-contacts .sn-cluster-contacts__card {
    grid-template-columns: var(--media-w) 1fr; /* beeld links blijft */
  }
}
.sn-cluster-contacts .sn-cluster-contacts__figure:empty {
  display: none;
}
.sn-cluster-contacts .sn-cluster-contacts__figure:empty + .sn-cluster-contacts__content .sn-cluster-contacts__name {
  margin-top: 0;
}
.sn-cluster-contacts .sn-cluster-contacts__card:not(:has(.sn-cluster-contacts__figure)) {
  grid-template-columns: 1fr;
}

/* Optioneel: utility voor expliciet de 9:21 verhouding elders */
.is-aspect-ratio-9-21 .sn-cluster-contacts__photo {
  aspect-ratio: 9/21;
}

/*# sourceMappingURL=style-index.css.map*/