/* /samenwerking/
   Paginakop (pageHero), WBJV-blok met blauwe knop en logo, twee donkere partnerkaarten,
   en twee kolommen (huisartsen, gemeente) met rond icoon. */

.page-hero--samenwerking {
  --ph-img: url("/assets/images/header-behandelcentrum-twente-1.webp");
  --ph-pos: 0 92%;
  --ph-pos-t: 0 0%;
  --ph-pos-m: -165px 55%;
  --ph-min: 364px;
  --ph-min-m: 484px;
  --ph-pad-m: 0 0 10px;
  --ph-intro-w: 59.694%;
}

/* Gedeeld binnen deze pagina */
.sw-heading { color: var(--color-text); font-size: 40px; }
.sw-text { width: 100%; line-height: 1.5; }
.sw-text a { color: var(--color-link); }

/* --------------------------------------------
   WBJV
   -------------------------------------------- */
.sw-wbjv__inner,
.sw-network__inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(100%, 1140px);
  margin: 0 auto;
  padding: 100px 0;
}

.sw-wbjv__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.sw-wbjv__cta { flex-shrink: 0; width: 53.439%; max-width: 53.439%; }

/* Blauwe WBJV-knop (zelfde knop, andere kleuren) */
.sw-btn {
  --btn-bg: #1DBBE9;
  --btn-border: #1DBBE9;
  --btn-hover-bg: #1181A2;
  --btn-hover-border: #1181A2;
}

.sw-wbjv__logo { align-self: flex-end; width: 10%; max-width: 10%; text-align: center; }

.sw-wbjv__logo img,
.sw-card__logo img {
  display: inline-block;
  border-radius: 5px;
  vertical-align: middle;
}

.sw-wbjv__logo img { width: 100%; }

/* --------------------------------------------
   Partnerkaarten
   -------------------------------------------- */
.sw-partners { padding: 0 10px; }

.sw-partners__inner {
  display: flex;
  max-width: min(100%, 1140px);
  margin: 0 auto;
  padding: 10px 0;
}

.sw-card {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  min-width: 0;
  padding: 3%;
  background-color: var(--color-slate);
}

.sw-card__logo img { width: 25%; }
.sw-card__text { color: var(--color-white); }

/* --------------------------------------------
   Huisartsen / gemeente
   -------------------------------------------- */
.sw-network__cols {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 10px;
}

.sw-col {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  width: 45%;
  min-width: 0;
  min-height: 330px;
}

.sw-col--gemeente { align-self: flex-start; gap: 5px; }

.sw-col__icons { display: flex; gap: 20px; width: 100%; }

/* Rond icoon (Elementor icon, stacked + circle) */
.sw-icon__wrap { line-height: 24px; }
.sw-icon--center .sw-icon__wrap { text-align: center; }

.sw-icon__circle {
  display: inline-block;
  padding: 15px;
  border-radius: 50%;
  background-color: var(--color-primary);
  font-size: 39px;
  line-height: 1;
  text-align: center;
  fill: var(--color-white);
}

.sw-icon__circle svg { position: relative; display: block; width: 1em; height: 39px; }

/* --------------------------------------------
   Mobiel
   -------------------------------------------- */
@media (max-width: 767px) {
  .sw-heading { font-size: 25px; }

  .sw-wbjv,
  .sw-network { padding: 0 15px; }
  .sw-wbjv__inner { max-width: min(100%, 767px); padding: 20px 0 50px; }
  .sw-network__inner { max-width: min(100%, 767px); padding: 50px 0 30px; }

  .sw-wbjv__row { flex-wrap: wrap; gap: 0; }
  .sw-wbjv__cta { width: 218px; max-width: 218px; }
  .sw-wbjv__cta .btn { font-size: 13px; }
  .sw-wbjv__logo { width: 100px; max-width: 100px; }

  .sw-partners__inner { flex-wrap: wrap; max-width: min(100%, 767px); }
  .sw-card { flex-wrap: wrap; width: 100%; }

  .sw-network__cols { flex-wrap: wrap; padding: 0; }
  .sw-col { flex-wrap: wrap; gap: 0; width: 100%; min-height: 55px; }
  .sw-col--gemeente { min-height: 330px; }
  .sw-col__icons { flex-wrap: wrap; }
  .sw-col--gemeente .sw-icon { align-self: flex-start; }
  .sw-network__outro { padding-top: 30px; }
}