/* ============================================================
   Visiopipe — henkilökuvat (Joel 8.10.2026)
   1) .vp-callme  = lomakkeiden soittolupausrivi lähetysnapin alla (pieni pyöreä kuva + nimi + lupaus)
   2) .vp-team    = yhteystiedot-sivun yhteyshenkilökortit
   Itsenäinen ja px-pohjainen: ei riipu sivun root-fonttikoosta
   (osa ländäreistä käyttää 62.5 % rootia). Liike vain transform/opacity.
   ============================================================ */

/* ---------- 1) Soittolupausrivi lomakkeissa ---------- */
.vp-callme.vp-callme {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 18px auto 0; padding: 0; border: 0; background: none;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left; box-sizing: border-box;
}
.vp-callme .vp-callme__ph {
  flex: none; width: 50px; height: 50px; padding: 2px; border-radius: 50%;
  background: linear-gradient(128deg, #dcab5e 0%, #cd9333 24%, #bd8126 50%, #ac7018 74%, #c98f34 100%);
  box-shadow: 0 4px 12px -6px rgba(150,100,26,.45);
  box-sizing: border-box;
}
.vp-callme .vp-callme__ph img {
  display: block; width: 46px !important; height: 46px !important; max-width: none;
  border-radius: 50%; border: 2px solid #fff; object-fit: cover; box-sizing: border-box;
  margin: 0; background: #e9e9eb;
}
.vp-callme .vp-callme__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; }
.vp-callme .vp-callme__name { display: block; margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: #201d19 !important; }
.vp-callme .vp-callme__nw { white-space: nowrap; }
.vp-callme .vp-callme__line { display: block; margin: 0; font-size: 13.5px; font-weight: 400; color: #6b645b !important; }

@media (max-width: 520px) {
  /* kapeassa lomakkeessa rivi kahdelle riville ja ryhmä keskelle napin alle */
  .vp-callme .vp-callme__txt { max-width: 236px; }
  .vp-callme .vp-callme__line { text-wrap: balance; }
}
@media (max-width: 350px) {
  .vp-callme .vp-callme__line { font-size: 12.5px; }
}

/* Popupissa mitoitus popupin omassa rem-skaalassa (popup-CSS on rem-pohjainen) */
#vp-popup .vp-callme.vp-callme { margin-top: 1rem; gap: .7rem; }
#vp-popup .vp-callme .vp-callme__ph { width: 2.9rem; height: 2.9rem; padding: .12rem; }
#vp-popup .vp-callme .vp-callme__ph img { width: 2.66rem !important; height: 2.66rem !important; border-width: .12rem; }
#vp-popup .vp-callme .vp-callme__name { font-size: .9rem; }
#vp-popup .vp-callme .vp-callme__line { font-size: .84rem; }

/* ---------- 2) Yhteyshenkilöt (yhteystiedot-sivu) ---------- */
.vp-team-head { margin: 0 0 clamp(22px, 3vw, 30px); }
.vp-team-head h2 {
  margin: 0; font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: #201d19;
}
.vp-team {
  display: grid; gap: clamp(14px, 2.4vw, 24px);
  grid-template-columns: 1fr 1fr;
}
.vp-team__card { margin: 0; min-width: 0; }
.vp-team__ph {
  position: relative; overflow: hidden; border-radius: 18px;
  aspect-ratio: 4 / 5; background: #eeeeef;
  box-shadow: 0 1px 2px rgba(32,29,25,.05), 0 14px 32px -20px rgba(32,29,25,.30);
  isolation: isolate;
}
.vp-team__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.16,1,.3,1);
}
.vp-team__ph::after { /* hiusviiva kuvan reunaan: valkoinen tausta ei sulaudu sivun pohjaan */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(32,29,25,.07); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .vp-team__card:hover .vp-team__ph img { transform: scale(1.025); }
}
.vp-team .vp-team__cap { margin: 0; padding: 14px 4px 0; text-align: left; }
.vp-team__cap b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #201d19; line-height: 1.3; }
.vp-team__cap span { display: block; margin-top: 2px; font-size: 14px; color: #6b645b; }

.vp-team__side { grid-column: 1 / -1; display: grid; gap: clamp(14px, 2.4vw, 20px); align-content: center; }
.vpfb--after .vp-team__side .vpfb-person,
.vpfb--after .vp-team__side .vpfb-company { margin: 0; }

@media (min-width: 900px) {
  .vp-team { grid-template-columns: 1fr 1fr 1.15fr; align-items: center; }
  .vp-team__side { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-team__ph img { transition: none; }
  .vp-team__card:hover .vp-team__ph img { transform: none; }
}

/* ---------- 3) Yhteystiedot: Myynti (Harri, Mikko) + Asennus (Juha), 12.10.2026 ---------- */
.vp-team__tel { display: inline-block; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--vp-gold-deep, #a96f1d); text-decoration: none; letter-spacing: .01em; }
.vp-team__tel:hover { text-decoration: underline; text-underline-offset: 3px; }
.vp-team__mail { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--vp-gold-deep, #a96f1d); text-decoration: none; letter-spacing: .01em; overflow-wrap: anywhere; }
.vp-team__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .vp-team__mail { font-size: clamp(12.5px, 3.75vw, 16px); letter-spacing: 0; } }
.vp-teams {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 24px); align-items: start;
  grid-template-areas: "hm hm" "c1 c2" "ha ha" "c3 .";
}
.vp-teams .vp-team-head { margin: 0; }
.vp-teams .vp-team-head--myynti { grid-area: hm; }
.vp-teams .vp-team-head--asennus { grid-area: ha; margin-top: 14px; }
.vp-teams .vp-team__card--1 { grid-area: c1; }
.vp-teams .vp-team__card--2 { grid-area: c2; }
.vp-teams .vp-team__card--3 { grid-area: c3; }
.vp-team-company { margin-top: clamp(24px, 3.2vw, 36px); }
@media (min-width: 900px) {
  .vp-teams { grid-template-columns: repeat(3, 1fr); grid-template-areas: "hm hm ha" "c1 c2 c3"; }
  .vp-teams .vp-team-head--asennus { margin-top: 0; }
}