/* ═══════════════════════════════════════════════════════
   team-profile.css  |  /team/profile.php
   ═══════════════════════════════════════════════════════ */

/* ── Hero ── */
.tp-hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
  padding:120px 28px 80px;
}

/* Breadcrumb */
.tp-breadcrumb{
  position:absolute;top:88px;left:28px;
  display:flex;align-items:center;gap:8px;z-index:5;
  font-family:'Exo 2',sans-serif;font-size:.82rem;color:rgba(255,255,255,.4);
}
.tp-breadcrumb a{color:rgba(42,125,216,.8);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .2s;}
.tp-breadcrumb a:hover{color:#5fc8e8;}
.tp-bc-sep{opacity:.3;}

/* Edit btn */
.tp-edit-btn{
  position:absolute;top:88px;right:28px;z-index:5;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(42,125,216,.12);border:1px solid rgba(42,125,216,.3);
  border-radius:10px;padding:8px 16px;
  font-family:'Exo 2',sans-serif;font-size:.82rem;font-weight:600;color:#5fc8e8;
  text-decoration:none;transition:all .25s;
}
.tp-edit-btn:hover{background:rgba(42,125,216,.25);transform:translateY(-2px);}

/* Inner layout */
.tp-hero-inner{
  max-width:1100px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:flex-start;
  position:relative;z-index:2;
}

/* ── Left column ── */
.tp-hero-left{display:flex;flex-direction:column;align-items:center;gap:18px;}

/* Avatar */
.tp-avatar-wrap{position:relative;width:200px;height:200px;}
.tc-spin-ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:2px solid transparent;
  border-top-color:#2a7dd8;border-right-color:#1F7A8C;
  animation:spin 3s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.tp-avatar{width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid rgba(42,125,216,.25);}
.tp-avatar-img{width:100%;height:100%;object-fit:cover;}

/* Socials */
.tp-socials{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.tp-soc-btn{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:rgba(255,255,255,.55);
  text-decoration:none;transition:all .25s;--sc:#fff;
}
.tp-soc-btn:hover{background:rgba(255,255,255,.1);color:var(--sc);border-color:var(--sc);transform:translateY(-3px) scale(1.1);box-shadow:0 6px 20px rgba(0,0,0,.3);}

/* WhatsApp */
.tp-wa-btn{
  display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  border-radius:14px;padding:13px 20px;
  font-family:'Exo 2',sans-serif;font-size:.9rem;font-weight:600;color:#fff;
  text-decoration:none;box-shadow:0 4px 20px rgba(34,197,94,.25);
  transition:transform .25s,box-shadow .25s;
}
.tp-wa-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(34,197,94,.35);}
.tp-wa-btn i{font-size:1.1rem;}

/* ── Right column ── */
.tp-hero-right{display:flex;flex-direction:column;gap:14px;}

/* Availability badge */
.tp-avail-badge{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:'Exo 2',sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:.07em;padding:4px 12px;border-radius:50px;
}
.tp-avail-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.avail-on  {background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3);}
.avail-on  .tp-avail-dot{background:#22c55e;box-shadow:0 0 8px #22c55e;}
.avail-busy{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.25);}
.avail-busy .tp-avail-dot{background:#fbbf24;}
.avail-off {background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.22);}
.avail-off  .tp-avail-dot{background:#f87171;}

/* Name / Role */
.tp-name{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.1;}
.tp-role{font-family:'Exo 2',sans-serif;font-size:.95rem;font-weight:600;color:#5fc8e8;letter-spacing:.1em;text-transform:uppercase;}

/* Tagline */
.tp-tagline{
  font-family:'Exo 2',sans-serif;font-size:.95rem;font-style:italic;
  color:rgba(255,255,255,.5);letter-spacing:.02em;
}

/* Meta row */
.tp-meta-row{display:flex;gap:18px;flex-wrap:wrap;}
.tp-meta{font-family:'Exo 2',sans-serif;font-size:.85rem;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:7px;}
.tp-meta i{color:#2a7dd8;}

/* Stats */
.tp-stats{display:flex;gap:28px;flex-wrap:wrap;padding:16px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.tp-stat{display:flex;flex-direction:column;gap:2px;}
.tp-stat-val{font-family:'Orbitron',sans-serif;font-size:1.5rem;font-weight:700;color:#2a7dd8;}
.tp-stat-lbl{font-family:'Exo 2',sans-serif;font-size:.75rem;color:rgba(255,255,255,.4);letter-spacing:.05em;}

/* Bio */
.tp-bio{font-family:'Exo 2',sans-serif;font-size:.95rem;line-height:1.75;color:rgba(255,255,255,.6);max-width:580px;}

/* Platform chips (hero) */
.tp-platforms{display:flex;gap:10px;flex-wrap:wrap;}
.tp-platform-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:50px;
  background:rgba(255,255,255,.04);
  border:1px solid color-mix(in srgb,var(--pc,#2a7dd8) 40%,transparent);
  font-family:'Exo 2',sans-serif;font-size:.8rem;font-weight:600;
  color:rgba(255,255,255,.7);text-decoration:none;
  transition:all .25s;--pc:#2a7dd8;
}
.tp-platform-chip:hover{background:color-mix(in srgb,var(--pc) 15%,transparent);color:#fff;transform:translateY(-2px);}
.tp-platform-chip i{color:var(--pc);}
.tp-chip-rating{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;color:#fbbf24;margin-left:2px;}

/* ── Sections ── */
.tp-section{padding:60px 0;}
.tp-section-inner{max-width:1100px;margin:0 auto;padding:0 28px;}
.tp-section-hd{margin-bottom:40px;}
.tp-section-title{font-family:'Orbitron',sans-serif;font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;color:#fff;margin-top:8px;}
.tp-section-title em{font-style:normal;background:linear-gradient(135deg,#2a7dd8,#5fc8e8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── Video ── */
.tp-video-wrap{background:rgba(8,15,30,.7);border:1px solid rgba(42,125,216,.18);border-radius:20px;overflow:hidden;width:100%;}
.tp-video-frame{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;}
.tp-video-frame iframe,.tp-video-frame video.tp-video-native{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
/* ── Skills grid ── */
.tp-skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.tp-skill{
  background:rgba(8,15,30,.6);border:1px solid rgba(42,125,216,.14);
  border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .25s,transform .25s;
}
.tp-skill:hover{border-color:rgba(42,125,216,.35);transform:translateY(-3px);}
.tp-skill-top{display:flex;justify-content:space-between;align-items:center;}
.tp-skill-name{font-family:'Exo 2',sans-serif;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85);}
.tp-skill-pct{font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:700;color:#2a7dd8;}
.tp-skill-bar{height:6px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;}
.tp-skill-fill{height:100%;width:0;background:linear-gradient(90deg,#2a7dd8,#1F7A8C,#5fc8e8);border-radius:6px;transition:width .9s cubic-bezier(.4,0,.2,1);}
.tp-skill-level{font-family:'Exo 2',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:4px;align-self:flex-start;}
.lv-expert      {background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.25);}
.lv-advanced    {background:rgba(42,125,216,.12);color:#5fc8e8;border:1px solid rgba(42,125,216,.25);}
.lv-intermediate{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2);}
.lv-beginner    {background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1);}

/* ── Platforms grid ── */
.tp-platforms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;}
.tp-platform-card{
  background:rgba(8,15,30,.6);border:1px solid rgba(42,125,216,.14);
  border-radius:18px;padding:28px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;text-align:center;
  transition:all .28s;--pc:#2a7dd8;
}
.tp-platform-card:hover{background:color-mix(in srgb,var(--pc) 8%,rgba(8,15,30,.8));border-color:color-mix(in srgb,var(--pc) 50%,transparent);transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.tp-platform-icon{width:54px;height:54px;border-radius:14px;background:color-mix(in srgb,var(--pc) 15%,rgba(8,15,30,.9));border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--pc);transition:transform .25s;}
.tp-platform-card:hover .tp-platform-icon{transform:scale(1.1) rotate(-5deg);}
.tp-platform-name{font-family:'Exo 2',sans-serif;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.8);}
.tp-platform-rating{display:flex;align-items:center;gap:3px;font-size:.78rem;color:#fbbf24;}
.tp-platform-rating span{color:rgba(255,255,255,.5);font-family:'Exo 2',sans-serif;font-size:.78rem;margin-left:4px;}
.tp-platform-cta{font-family:'Exo 2',sans-serif;font-size:.78rem;color:color-mix(in srgb,var(--pc) 70%,#fff);}

/* ── CV Download Button ── */
.tp-cv-btn{
  display:inline-flex;align-items:center;gap:10px;width:100%;justify-content:center;
  background:linear-gradient(135deg,rgba(229,57,53,.15),rgba(229,57,53,.08));
  border:1px solid rgba(229,57,53,.35);
  border-radius:14px;padding:13px 20px;
  font-family:'Exo 2',sans-serif;font-size:.9rem;font-weight:600;color:#ef9a9a;
  text-decoration:none;
  transition:transform .25s,box-shadow .25s,background .25s;
  position:relative;overflow:hidden;
}
.tp-cv-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(229,57,53,.1),transparent);
  opacity:0;transition:opacity .25s;
}
.tp-cv-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(229,57,53,.2);
  background:linear-gradient(135deg,rgba(229,57,53,.25),rgba(229,57,53,.12));
  color:#fff;
}
.tp-cv-btn:hover::before{opacity:1;}
.tp-cv-btn .fa-file-pdf{color:#e53935;font-size:1.1rem;}
.tp-cv-btn .tp-cv-arrow{margin-left:auto;font-size:.85rem;opacity:.7;}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease,transform .55s ease;}
.reveal.rd2{transition-delay:.12s;}
.reveal.rd3{transition-delay:.22s;}
.reveal.rd4{transition-delay:.32s;}
.reveal.visible{opacity:1;transform:none;}

/* CV Download Button */
.tp-cv-btn{
  display:inline-flex;align-items:center;gap:9px;width:100%;justify-content:center;
  background:linear-gradient(135deg,rgba(229,57,53,.15),rgba(229,57,53,.08));
  border:1px solid rgba(229,57,53,.35);
  border-radius:14px;padding:13px 20px;
  font-family:'Exo 2',sans-serif;font-size:.9rem;font-weight:600;
  color:#ef9a9a;text-decoration:none;
  transition:all .25s;
  box-shadow:0 4px 18px rgba(229,57,53,.12);
}
.tp-cv-btn:hover{
  background:linear-gradient(135deg,rgba(229,57,53,.25),rgba(229,57,53,.15));
  border-color:rgba(229,57,53,.6);color:#fff;
  transform:translateY(-3px);
  box-shadow:0 8px 28px rgba(229,57,53,.25);
}
.tp-cv-btn .fa-file-pdf{color:#e53935;font-size:1.05rem;}
.tp-cv-arrow{margin-left:auto;font-size:.8rem;opacity:.7;}

/* ── Responsive ── */
@media(max-width:900px){
  .tp-hero-inner{grid-template-columns:1fr;gap:32px;}
  .tp-hero-left{flex-direction:row;flex-wrap:wrap;justify-content:center;}
  .tp-avatar-wrap{width:140px;height:140px;}
  .tp-wa-btn{width:auto;}
  .tp-breadcrumb,.tp-edit-btn{top:75px;}
}
@media(max-width:600px){
  .tp-hero{padding:100px 20px 60px;}
  .tp-stats{gap:18px;}
  .tp-skills-grid{grid-template-columns:1fr;}
  .tp-platforms-grid{grid-template-columns:repeat(2,1fr);}
}