/* ============================================================
   ImProve — voorbeeldopmaak teampagina (v2)
   Gebruikt de tokens en componenten uit assets/styles.css.
   ============================================================ */

/* ---------- Opening ---------- */

.tm-opening{background:var(--paper);padding:40px 0 46px}
/* dezelfde kleurbalk als in de header, als afsluiting onder het beeld */
.tm-balk{
  display:block;
  height:9px;
  background:linear-gradient(90deg,
    #B0AFAF 0 9%, #7B0041 9% 14%, #C30066 14% 40%,
    #D9261C 40% 44%, #F6A924 44% 66%, #9A5B23 66% 78%, #A9977A 78% 100%);
}

/* ---------- Profielen ---------- */

.tm-profielen{background:var(--sand);padding:12px 0 4px}
.tm-persoon{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:48px;
  align-items:start;
  padding:46px 0;
  border-bottom:1px solid rgba(138,116,90,.22);
}
.tm-persoon:last-child{border-bottom:0}
.tm-persoon-gespiegeld{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.tm-persoon-gespiegeld .tm-portret{order:2}
.tm-persoon-gespiegeld .tm-persoon-copy{order:1}

.tm-portret{
  margin:0;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(45,33,40,.14);
}
.tm-portret img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 18%;
}

.tm-rol{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--bronze-deep);
}
.tm-persoon-copy h2{
  margin:8px 0 0;
  font-size:clamp(26px,2.7vw,34px);
}
.tm-tekst{margin-top:16px}
.tm-tekst p{
  margin:0 0 13px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.68;
  max-width:64ch;
}
.tm-tekst p:last-child{margin-bottom:0}

/* Expertise: rustige opsomming, geen badges */
.tm-expertise{margin:26px 0 0}
.tm-expertise-kop{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bordeaux);
}
.tm-expertise ul{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:7px;
  max-width:60ch;
}
.tm-expertise li{
  position:relative;
  padding-left:20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.tm-expertise li:before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--bordeaux);
  opacity:.55;
}

.tm-voor{
  margin:22px 0 0;
  padding-top:15px;
  border-top:1px solid rgba(138,116,90,.24);
  color:var(--muted);
  font-size:14.8px;
  line-height:1.5;
  max-width:62ch;
}
.tm-voor span{
  display:inline;
  margin-right:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bordeaux);
}

/* ---------- Slot ---------- */

.tm-slot{background:var(--paper);padding:44px 0 52px}
.tm-slot-band{
  position:relative;
  overflow:hidden;
  background:var(--lichtbruin);
  border-radius:26px;
  padding:34px 38px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:34px;
  align-items:center;
}
.tm-slot-band:after{
  content:"";
  position:absolute;
  right:-30px;bottom:-46px;
  width:300px;height:325px;
  background:url("pijlen-watermerk.png") right bottom / contain no-repeat;
  opacity:.5;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.tm-slot-band .actions{margin:0;position:relative;z-index:1}

/* ---------- Kleinere schermen ---------- */

@media (max-width:1000px){
  .tm-opening-grid{grid-template-columns:1fr;gap:30px}
  .tm-opening-copy h1{max-width:none}
  .tm-persoon,.tm-persoon-gespiegeld{grid-template-columns:1fr;gap:26px;padding:34px 0}
  .tm-persoon-gespiegeld .tm-portret{order:0}
  .tm-persoon-gespiegeld .tm-persoon-copy{order:0}
  .tm-portret{max-width:320px}
  .tm-slot-band{grid-template-columns:1fr;gap:22px}
  .tm-slot-band:after{opacity:.32}
}
@media (max-width:640px){
  .tm-slot-band{padding:26px 22px}
  .tm-slot-band .actions{display:grid;width:100%}
  .tm-slot-band .actions .btn{width:100%}
}

/* v439 — labels iets groter op een telefoon */
@media (max-width:860px){
  .tm-voor span,.tm-rol{font-size:12.5px}
}

/* v441 — teampagina op tablet */
@media (min-width:701px) and (max-width:1000px){
  .tm-opening-beeld img{aspect-ratio:16/9;object-position:center 30%}
  .tm-persoon{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:30px;align-items:start}
  .tm-persoon-gespiegeld{grid-template-columns:minmax(0,1fr) minmax(0,240px)}
  .tm-persoon-gespiegeld .tm-portret{order:2}
  .tm-persoon-gespiegeld .tm-persoon-copy{order:1}
  .tm-portret{max-width:none}
  .tm-slot-band{grid-template-columns:1fr;gap:20px}
}

/* v442 — werkwijzeblok rustiger laten lezen */
.section-head p:not(.lead):not(.eyebrow){
  margin-top:12px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.68;
  max-width:72ch;
}

/* v443 — alle alinea's in een sectiekop op dezelfde regelbreedte */
.section-head .lead{max-width:72ch}

/* v443 — slotband compacter */
.tm-slot{padding:36px 0 44px}
.tm-slot-band{padding:28px 32px;gap:28px}.tm-slot-band h2{margin:10px 0 0;font-size:clamp(23px,2.5vw,29px);color:var(--bordeaux);max-width:20ch}.tm-slot-band p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.55;max-width:58ch;margin-top:10px}
@media (min-width:701px) and (max-width:1000px){
  .tm-slot-band{grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
}

/* Portretten op mobiel bescheidener; de paginakop is daar al beeldvullend. */
@media (max-width:700px){
  .tm-portret{max-width:210px;border-radius:18px}
  .tm-portret img{aspect-ratio:4/5}
  .tm-persoon,.tm-persoon-gespiegeld{gap:18px}
}

/* De losse portretten stonden groter dan de foto in de paginakop.
   Op een breed scherm dus een smallere beeldkolom. */
@media (min-width:1001px){
  .tm-persoon{grid-template-columns:minmax(0,258px) minmax(0,1fr);gap:44px}
  .tm-persoon-gespiegeld{grid-template-columns:minmax(0,1fr) minmax(0,258px)}
}

/* Beide portretten links: de foto van Jolanda stond helemaal rechts, met een
   gat tussen tekst en beeld. Nu lijnen de twee profielen op dezelfde rand uit. */
/* Simone links, Jolanda rechts. De tekstkolom is even breed als de tekst zelf,
   zodat haar foto tegen de tekst aan staat in plaats van tegen de paginarand. */
@media (min-width:1001px){
  .tm-persoon{grid-template-columns:258px 600px;justify-content:start}
  .tm-persoon-gespiegeld{grid-template-columns:600px 258px}
  .tm-persoon-gespiegeld .tm-portret{order:2}
  .tm-persoon-gespiegeld .tm-persoon-copy{order:1}
}

/* Het portret begint op dezelfde hoogte als de lopende tekst, niet als de naam.
   8px marge boven de naam + de regelhoogte van de naam + 16px boven de tekst. */
@media (min-width:701px){
  .tm-portret{margin-top:calc(24px + clamp(26px, 2.7vw, 34px) * 1.08)}
}