/* Docenten Display — public team page, styled after muziekenwoord.be/team2 */

.dd-wrap {
  --dd-red: #e8425f;
  --dd-blue: #3d6fb4;
  --dd-ink: #333;
  --dd-gray: #7a7a7a;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 16px 60px;
  font-family: inherit;
}

/* ── Jump buttons ── */
.dd-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
}
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 5px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  transition: transform .12s, box-shadow .12s;
}
.dd-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
  color: #fff;
}
.dd-btn-blue { background: var(--dd-blue); }
.dd-btn-red  { background: var(--dd-red); }

/* ── Section headings ── */
.dd-section-title {
  color: var(--dd-red);
  font-weight: 700;
  margin: 46px 0 8px;
  scroll-margin-top: 90px;
}
h2.dd-section-title { font-size: 30px; }
h3.dd-section-title { font-size: 23px; margin-top: 34px; }

/* ── Card grid ──
   Desktop: per-section column count (--dd-cols, max 5) computed server-side
   for balanced rows; centered so smaller sections don't stretch. */
.dd-grid {
  display: grid;
  grid-template-columns: repeat(var(--dd-cols, 5), minmax(0, 225px));
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}
@media (max-width: 1024px) {
  .dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dd-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  padding: 26px 16px 22px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* photo with the team2 horizontal bar behind it */
.dd-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.dd-photo-wrap::before {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  top: 46px;
  height: 7px;
  background: #2b2b2b;
}
.dd-photo {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 7px solid #f4f4f4;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  background: #fff;
}
.dd-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #3d6fb4, #1a1f3c);
}

.dd-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--dd-ink);
  line-height: 1.25;
}
.dd-sub {
  font-size: 14px;
  color: var(--dd-gray);
  margin-top: 5px;
  line-height: 1.45;
}

/* Domain pill under the subject */
.dd-tag {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.dd-tag-jpr       { background: #fdeef1; color: var(--dd-red); }
.dd-tag-klassiek  { background: #f0f2fb; color: #5a63b8; font-weight: 600; }  /* quieter — the majority */
.dd-tag-woord     { background: #f6f0fd; color: #7c3aed; }
.dd-tag-kunstkuur { background: #fdf3e3; color: #b45309; }

/* ── Contact ── */
.dd-contact { margin-top: 11px; }
.dd-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #efefef;
  color: #6b6b6b !important;
  transition: background .12s, color .12s;
}
.dd-mail:hover {
  background: var(--dd-red);
  color: #fff !important;
}

@media (max-width: 560px) {
  .dd-grid { gap: 14px; }
  .dd-photo { width: 116px; height: 116px; }
  .dd-name { font-size: 17px; }
  .dd-btn { padding: 8px 16px; font-size: 14px; }
  .dd-photo-wrap::before { top: 36px; }
}