/* ==========================================================
   SEO-hubs: [yy-hub-extra] (lokale info / werkgevers) en
   het aantal vacatures per kantoor in [yy-hub-offices].
   ========================================================== */

.yy-hub-offices__count {
  margin: -4px 0 10px;
  padding: 0;
  font-weight: 600;
  color: #6516C1;
}

/* Divi-sectie met enkel [yy-hub-extra] verbergen als het blok leeg is */
.yy-hub-extra-section:not(:has(.yy-hub-extra)) {
  display: none;
}

.yy-hub-extra {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: start;
}

.yy-hub-extra .yy-hub-extra__text h2 {
  margin: 0 0 14px;
  padding: 0;
  color: #004735;
  font-weight: 700;
  font-size: 35px !important;
  line-height: 1.15;
}

.yy-hub-extra__text p {
  margin: 0 0 12px;
  padding: 0;
}

.yy-hub-extra__cta {
  margin-top: 18px !important;
}

.yy-hub-extra__btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #004735;
  color: #fff !important;
  font-weight: 600;
  transition: background .18s ease;
}

.yy-hub-extra__btn:hover {
  background: #6516C1;
}

.yy-hub-extra__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.yy-hub-extra__card {
  padding: 20px 22px;
  border: 1px solid #cecece;
  border-radius: 15px;
  background: #fbfaf7;
}

.yy-hub-extra__card:first-child {
  grid-column: 1 / -1;
}

.yy-hub-extra__card h3 {
  margin: 0 0 12px;
  padding: 0;
  color: #004735;
  font-size: 18px;
  font-weight: 700;
  text-transform: none !important;
}

.yy-hub-extra__chips,
.yy-hub-extra__bars,
.yy-hub-extra__links {
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

.yy-hub-extra__chips li::before,
.yy-hub-extra__bars li::before,
.yy-hub-extra__links li::before {
  content: none !important;
  display: none !important;
}

.yy-hub-extra__chips li,
.yy-hub-extra__bars li,
.yy-hub-extra__links li {
  list-style: none !important;
  margin: 0 !important;
}

.yy-hub-extra__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yy-hub-extra__chips li {
  padding: 6px 14px;
  border: 1px solid #6516C1;
  border-radius: 999px;
  color: #6516C1;
  font-size: 14px;
  line-height: 1.3;
}

/* Chip als link: hele pil klikbaar */
.yy-hub-extra__chips li:has(a) {
  padding: 0;
}

.yy-hub-extra .yy-hub-extra__chips a,
.yy-hub-extra .yy-hub-extra__chips a:visited {
  display: block;
  padding: 6px 14px;
  border-radius: 999px;
  color: #6516C1 !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}

.yy-hub-extra .yy-hub-extra__chips a:hover,
.yy-hub-extra .yy-hub-extra__chips a:focus-visible {
  background: #6516C1;
  color: #fff !important;
}

.yy-hub-extra__bars li {
  display: grid;
  grid-template-columns: minmax(0, 9em) 1fr 3em;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
}

.yy-hub-extra__bars a,
.yy-hub-extra__links a {
  color: #004735;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.yy-hub-extra__bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #e6e3dc;
  overflow: hidden;
}

.yy-hub-extra__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #004735;
}

.yy-hub-extra__pct {
  text-align: right;
  font-weight: 600;
}

.yy-hub-extra__big {
  margin: 0 0 4px !important;
  padding: 0;
  color: #004735;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.yy-hub-extra__small {
  margin: 0 0 8px !important;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
}

.yy-hub-extra__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 14px;
}

@media (max-width: 980px) {
  .yy-hub-extra {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .yy-hub-extra .yy-hub-extra__text h2 {
    font-size: 30px !important;
  }
}

@media (max-width: 600px) {
  .yy-hub-extra__facts {
    grid-template-columns: 1fr;
  }
  .yy-hub-extra__bars li {
    grid-template-columns: minmax(0, 8em) 1fr 3em;
  }
}

/* Balkbreedte per 5% (geen inline styling) */
.yy-hub-extra__fill.yy-w-0 { width: 0%; }
.yy-hub-extra__fill.yy-w-5 { width: 5%; }
.yy-hub-extra__fill.yy-w-10 { width: 10%; }
.yy-hub-extra__fill.yy-w-15 { width: 15%; }
.yy-hub-extra__fill.yy-w-20 { width: 20%; }
.yy-hub-extra__fill.yy-w-25 { width: 25%; }
.yy-hub-extra__fill.yy-w-30 { width: 30%; }
.yy-hub-extra__fill.yy-w-35 { width: 35%; }
.yy-hub-extra__fill.yy-w-40 { width: 40%; }
.yy-hub-extra__fill.yy-w-45 { width: 45%; }
.yy-hub-extra__fill.yy-w-50 { width: 50%; }
.yy-hub-extra__fill.yy-w-55 { width: 55%; }
.yy-hub-extra__fill.yy-w-60 { width: 60%; }
.yy-hub-extra__fill.yy-w-65 { width: 65%; }
.yy-hub-extra__fill.yy-w-70 { width: 70%; }
.yy-hub-extra__fill.yy-w-75 { width: 75%; }
.yy-hub-extra__fill.yy-w-80 { width: 80%; }
.yy-hub-extra__fill.yy-w-85 { width: 85%; }
.yy-hub-extra__fill.yy-w-90 { width: 90%; }
.yy-hub-extra__fill.yy-w-95 { width: 95%; }
.yy-hub-extra__fill.yy-w-100 { width: 100%; }

/* Divi-sectie "Kantoren" verbergen als er geen kantoor getoond wordt */
.yy-hub-offices-section:not(:has(.yy-hub-offices)) {
  display: none;
}