/* =====================================================================
   Hunebed Media / Over ons (pagina-specifieke stijlen)
   Aanvullingen op het gedeelde design-systeem (styles.css).
   ===================================================================== */

/* ------------------------------ ONS VERHAAL ------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.story-aside { position: sticky; top: 110px; align-self: start; }
.story-body { display: flex; flex-direction: column; gap: 22px; }
.story-body p {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  color: #3D3F47;
}
.story-body strong { color: var(--ink); font-weight: 600; }

/* -------------------------------- TEAM ------------------------------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.team-member {
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.team-member:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(0,0,0,.4);
}
.team-member__band {
  position: relative;
  height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.team-member__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px);
}
.team-member__avatar {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 38px;
  color: #fff;
  border: 5px solid var(--bg-3);
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
}
.team-member__body { padding: 76px 30px 34px; text-align: center; }
.team-member__body .h3 { color: var(--text); }
.team-member__role { margin-top: 6px; font-size: 14.5px; color: var(--teal-light); font-weight: 600; }
.team-member__bio { margin: 18px 0 22px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.team-member__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.team-member__tags span {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
  color: #C7C8CF;
}

/* CTA-band staat nu als gedeelde component .cta-band in styles.css */

/* ----------------------------- RESPONSIVE --------------------------- */
@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; gap: 34px; }
  .story-aside { position: static; top: auto; }
}
@media (max-width: 620px) {
  .team-grid { grid-template-columns: 1fr; }
}