/* /het-team/ : page-only rules (design-v2 B). Everything else comes from site.css. Europa 400/700 only. */

/* Text hero: actions stay visible at every width, as a row from tablet up */
.hero--text .hero__actions{display:block}
@media (min-width:768px){
  .hero--text .hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
  .hero--text .hero__actions > * + *{margin-top:0}
  .hero--text .hero__copy{max-width:72ch}
}
@media (min-width:1024px){
  .hero--text{padding-block:var(--s-7) var(--s-8)}
  .hero--text .hero__copy{grid-column:1 / 9}
  .hero--team .hero__copy{grid-column:1 / 8}
  .hero--team .hero__grid{align-items:center}
}

/* Hero: the four doctors as a 2x2 cluster beside the copy from 1024; phones get the team photo in 01 instead */
/* The figure is a plain block, not the rounded teal photo box of .hero__photo: that box clipped the caption's first letters at its rounded corner and sat flush against the text */
.hero__docs{display:none;margin:0;background:transparent;box-shadow:none;overflow:visible;border-radius:0}
@media (min-width:1024px){
  .hero__docs{display:block;grid-column:9 / -1;grid-row:1;align-self:center}
  .hero__docs-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hero__docs-grid li{background:#fff;border:1px solid var(--c-rule);border-radius:var(--r-lg);padding:10px 10px 14px;box-shadow:var(--sh-card);min-width:0}
  .hero__docs-grid .frame{display:block;border-radius:var(--r-md);background:var(--c-mint)}
  .hero__docs-grid .frame img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
  .hero__doc-name{display:block;margin-top:10px;padding:0 4px;font-weight:700;color:var(--c-navy);font-size:.95rem;line-height:1.3}
  .hero__doc-role{display:block;padding:0 4px;font-size:.75rem;color:var(--c-muted);line-height:1.35}
  .hero__doc-big{display:block;padding:0 4px;margin-top:3px;font-size:.75rem;font-weight:700;color:var(--c-teal-dark);font-variant-numeric:tabular-nums lining-nums}
}
.hero__docs .photo-caption{margin:var(--s-3) 0 0;padding:0 2px;max-width:40ch;overflow-wrap:anywhere}

/* 01: the clinic. Team cut-out on white in a rounded frame, then four number tiles */
.kliniek .section__head{margin-bottom:var(--s-5)}
.kliniek .note{margin-top:var(--s-5)}
.kliniek__photo .frame{background:#fff;border:1px solid var(--c-rule);box-shadow:var(--sh-soft);padding:12px 8px 0}
.kliniek__photo .frame img{object-fit:contain;object-position:bottom}
.team-stats{list-style:none;padding:0;margin-top:var(--s-6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.team-stats .tile{min-height:0;gap:10px}
.team-stats .big{font-size:clamp(1.5rem,1rem + 2.2vw,2.6rem);overflow-wrap:normal}
.team-stats .tile__label{overflow-wrap:anywhere;hyphens:manual;-webkit-hyphens:manual}
.team-stats .tile__sub{overflow-wrap:anywhere}
/* phones: one tile per row, number beside the label ("haartransplantaties" does not fit a half-width tile without a hyphen) */
@media (max-width:479px){
  .team-stats{grid-template-columns:1fr;gap:10px}
  .team-stats .tile{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:16px 18px}
  .team-stats .big{flex:none;min-width:4.5ch}
  .team-stats .tile__label{margin-top:0}
}
@media (max-width:767px){.team-stats .tile__label{font-size:.95rem}}
@media (min-width:480px) and (max-width:767px){.team-stats .tile{padding:20px 16px}}
@media (min-width:1024px){
  .team-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:var(--s-7)}
  .team-stats .big{font-size:clamp(1.75rem,.9rem + 1.5vw,2.4rem)}
}

/* 02: the grid. Section head above the groups, the PRP label on a member card, the navy card at the end */
#teamleden .section__head + .team-group{margin-top:0}
.member__tag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 9px;border-radius:var(--r-pill);background:var(--c-teal-tint);color:var(--c-teal-dark);font-size:.7rem;font-weight:700;line-height:1.3}
.member__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-teal);flex:none}
.team-cta{margin-top:var(--s-8)}

/* Risk section: statement heading beside the box; the band is surface-2, so the box goes white with a hairline */
.risico__title{max-width:24ch}
#risico-sectie .rule-dot{margin-bottom:var(--s-5)}
#risico-sectie .box{background:#fff;border:1px solid var(--c-rule)}