/* ═══════════════════════════════════════════════
   PI Team Member Card — Front  v4.0 | SedixWeb
═══════════════════════════════════════════════ */
:root {
  --pi-accent:     #c8a96e;
  --pi-accent-lt:  #e8d5a8;
  --pi-dark:       #111111;
  --pi-mid:        #3a3a3a;
  --pi-border:     #e8e0d0;
  --pi-bg:         #ffffff;
  --pi-shadow:     0 8px 40px rgba(0,0,0,.07);
  --pi-radius:     4px;
  --pi-font-head:  'Playfair Display', Georgia, serif;
  --pi-font-body:  'Lato', 'Helvetica Neue', sans-serif;
  --pi-name-size:  26px;
  --pi-title-size: 13px;
  --pi-bio-size:   14px;
  --pi-photo-size: 110px;
  --pi-card-pad:   48px;
  --pi-top-border: 4px;
}

/* Card */
.pi-member-card {
  background:    var(--pi-bg);
  border:        1px solid var(--pi-border);
  border-top:    var(--pi-top-border) solid var(--pi-accent);
  border-radius: var(--pi-radius);
  box-shadow:    var(--pi-shadow);
  padding:       var(--pi-card-pad);
  font-family:   var(--pi-font-body);
  color:         var(--pi-dark);
  max-width:     900px;
  margin:        0 auto;
  animation:     pi-rise .55s cubic-bezier(.22,.61,.36,1) both;
}
.pi-member-card + .pi-member-card { margin-top: 32px; }

@keyframes pi-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header row */
.pi-header {
  display:        flex;
  align-items:    flex-start;
  gap:            28px;
  margin-bottom:  28px;
  padding-bottom: 26px;
  border-bottom:  1px solid var(--pi-border);
}

/* Photo */
.pi-photo-wrap {
  flex-shrink:   0;
  width:         var(--pi-photo-size);
  height:        var(--pi-photo-size);
  border-radius: var(--pi-radius);
  overflow:      hidden;
  border:        2.5px solid var(--pi-accent-lt);
  background:    #f2efe9;
  position:      relative;
}
.pi-photo-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: filter .35s ease, transform .35s ease;
}
.pi-photo-img.pi-gray                              { filter: grayscale(100%); }
.pi-member-card:hover .pi-photo-img.pi-gray-hover  { filter: grayscale(0%); transform: scale(1.03); }

/* Identity */
.pi-identity { flex: 1; min-width: 0; }

.pi-name {
  font-family:    var(--pi-font-head);
  font-size:      var(--pi-name-size);
  font-weight:    700;
  color:          var(--pi-dark);
  line-height:    1.2;
  margin:         0 0 5px;
  letter-spacing: -.3px;
}
.pi-job-title {
  font-family:    var(--pi-font-body);
  font-size:      var(--pi-title-size);
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--pi-accent);
  margin:         0 0 16px;
}

/* Contacts */
.pi-contacts {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px 20px;
}
.pi-contact-item {
  display:         flex;
  align-items:     center;
  gap:             6px;
  font-size:       13px;
  color:           var(--pi-mid);
  text-decoration: none;
  transition:      color .2s, transform .2s;
}
.pi-contact-item:hover        { color: var(--pi-accent); }
.pi-contact-item:hover .pi-ico { transform: scale(1.15); }
.pi-contact-item span          { white-space: nowrap; }

/* Icons */
.pi-ico {
  width:  15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform .2s;
}
.pi-ico-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bio */
.pi-bio {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}
.pi-bio p {
  font-size:   var(--pi-bio-size);
  line-height: 1.82;
  color:       var(--pi-mid);
  font-weight: 300;
  margin:      0;
}
.pi-bio p:first-child  { font-size: calc(var(--pi-bio-size) + 1px); color: var(--pi-dark); font-weight: 400; }
.pi-bio strong         { color: var(--pi-dark); font-weight: 700; }
.pi-bio a              { color: var(--pi-accent); text-decoration: none; }
.pi-bio a:hover        { text-decoration: underline; }

/* Footer */
.pi-footer-bar {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-top:  26px;
  padding-top: 16px;
  border-top:  1px solid var(--pi-border);
}
.pi-footer-line {
  width:      28px;
  height:     2px;
  background: var(--pi-accent);
  flex-shrink:0;
}
.pi-footer-text {
  font-size:      10px;
  font-weight:    800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color:          var(--pi-accent);
}

/* Responsive */
@media (max-width: 600px) {
  .pi-member-card { padding: 22px 16px; }
  .pi-header      { flex-direction: column; gap: 16px; }
  .pi-name        { font-size: 20px; }
  .pi-contacts    { gap: 7px 14px; }
}