/* =========================================
   MergeIT – Echipa (stil ca index)
   Paletă: #61E786 #90EE90 #B6F3AF #D8FAD5 #28428D #142B70 + alb
   ========================================= */

:root{
  --g1:#61E786; --g2:#90EE90; --g3:#B6F3AF; --g4:#D8FAD5;
  --b1:#28428D; --b2:#142B70;
  --ink:var(--b2); --muted:rgba(20,43,112,.70); --soft:rgba(20,43,112,.85);

  /* Carduri translucide */
  --card-bg: rgba(216,250,213,.72); /* D8FAD5 @ 72% */
  --card-brd: rgba(40,66,141,.16);
  --card-shadow: 0 10px 30px rgba(40,66,141,.14);
}

/* ===== Headings ===== */
.team-section .section-title{
  text-align:center; color:var(--b1); font-weight:900; margin:0 0 8px;
}
.team-section .section-kicker{
  text-align:center; color:var(--muted); margin:0;
}

/* ===== Grid ===== */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  max-width:1100px;
  margin:40px auto 10px;
  padding:0 12px;
  justify-items:center; /* centrează cărțile când rămâne o coloană */
}

/* ===== Card ===== */
.person.card{
  width:100%; max-width:340px;
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:20px; padding:22px 18px 18px;
  background:var(--card-bg);
  backdrop-filter: blur(8px) saturate(120%);
  border:1px solid var(--card-brd);
  box-shadow: var(--card-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  color:var(--ink); text-align:left;
}
@media (hover:hover){
  .person.card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(40,66,141,.18);
    border-color:rgba(40,66,141,.22);
  }
}

/* Avatar */
.photo-wrap{ margin-bottom:12px }
.avatar{
  width:72px; height:72px; border-radius:999px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, var(--g3), var(--g2));
  box-shadow: 0 8px 18px rgba(40,66,141,.20);
  border:1px solid rgba(40,66,141,.10);
}
.avatar-initial{ font-weight:800; font-size:28px; color:var(--b2) }

/* Body */
.person-body{ display:grid; gap:8px }
.name{ margin:0; font-size:20px; font-weight:800; color:var(--b2) }

/* Badge rol */
.role-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--b2);
  background: rgba(255,255,255,.72);
  border:1px solid rgba(40,66,141,.16);
}
.role-badge .dot{
  width:8px; height:8px; border-radius:999px; background:var(--g1);
  box-shadow:0 0 0 2px rgba(97,231,134,.25);
}

.bio{ color:var(--soft); font-size:15px; line-height:1.55; margin:2px 0 10px }

/* Contact chips */
.contact-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:12px; text-decoration:none;
  background:#fff; color:var(--b2);
  border:1px solid rgba(40,66,141,.22);
  font-weight:750; font-size:14px;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
@media (hover:hover){
  .chip:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(40,66,141,.18); background:var(--g1) }
}
.chip .ico{ width:16px; height:16px; flex:0 0 16px }

/* ===== CTA din secțiunea echipei (scopat – nu atinge headerul) ===== */
.team-section .btn.btn-primary{
  background: var(--g1);
  color: var(--b2);
  border: 1px solid rgba(40,66,141,.12);
  font-weight: 800;
}
@media (hover:hover){
  .team-section .btn.btn-primary:hover{ filter: brightness(1.04) }
}

.cta-center{
  text-align:center;
  margin:40px 0 20px;
}
.team-section .cta-center .btn{
  padding:12px 28px; font-size:16px; font-weight:700; border-radius:10px;
}

/* ===== Responsive tweaks ===== */
@media (max-width:768px){
  .person.card{ max-width:100% }
}
@media (max-width:560px){
  .person.card{ padding:18px 14px; max-width:100% }
  .bio{ font-size:14.5px }
  .team-section .cta-center .btn{
    width:100%; max-width:320px; /* buton full width, dar nu peste lățimea cardurilor */
  }
}

.avatar {
  width: 80px;       /* dimensiunea avatarului */
  height: 80px;
  border-radius: 50%; /* face cerc */
  overflow: hidden;   /* taie poza care depășește cercul */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee; /* fallback dacă poza nu se încarcă */
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* scalează și decupează poza frumos */
  display: block;
}