/* ─── TEAM PAGE – HIERARCHY TREE ─── */

/* ── Tier wrapper ── */
.tree-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

/* ── Tier label ── */
.tree-tier-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
}

.tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tier-dot-founder  { background: #FDCB4B; box-shadow: 0 0 8px #FDCB4B; }
.tier-dot-co       { background: #E84363; box-shadow: 0 0 8px #E84363; }
.tier-dot-hod      { background: #7C5CFF; box-shadow: 0 0 8px #7C5CFF; }
.tier-dot-member   { background: #3CBFAE; box-shadow: 0 0 8px #3CBFAE; }

/* ── Connector line between tiers ── */
.tree-line-down {
  width: 2px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(255,255,255,0.03));
  margin: 0 auto 32px;
  position: relative;
}
.tree-line-down::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

/* ── Row layouts ── */
.tree-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

.tree-row-center  { max-width: 320px; }
.tree-row-dual    { max-width: 720px; }
.tree-row-quad    { max-width: 1100px; }
.tree-row-five    { max-width: 1200px; }

/* ── Base card ── */
.tree-card {
  background: rgba(8, 14, 44, 0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
  position: relative;
  box-sizing: border-box;    /* prevents width blowout */
}

.tree-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* Card widths per tier */
.tree-card-founder { width: 300px; }
.tree-card-co,
.tree-card-tech    { width: 300px; }
.tree-card-hod     { width: 230px; }
.tree-card-member  { width: 200px; }

/* Hover effects per tier */
.tree-card-founder:hover { transform: translateY(-8px); border-color: rgba(253,203,75,0.4); box-shadow: 0 24px 64px rgba(253,203,75,0.15); }
.tree-card-co:hover      { transform: translateY(-6px); border-color: rgba(232,67,99,0.4);  box-shadow: 0 20px 56px rgba(232,67,99,0.15); }
.tree-card-tech:hover    { transform: translateY(-6px); border-color: rgba(246,146,58,0.4); box-shadow: 0 20px 56px rgba(246,146,58,0.15); }
.tree-card-hod:hover     { transform: translateY(-5px); border-color: rgba(124,92,255,0.4); box-shadow: 0 16px 48px rgba(124,92,255,0.15); }
.tree-card-member:hover  { transform: translateY(-4px); border-color: rgba(60,191,174,0.4); box-shadow: 0 12px 40px rgba(60,191,174,0.12); }

/* ── Photo rings ── */
.tree-photo-ring {
  border-radius: 50%;
  padding: 3px;
  margin-bottom: 16px;
  flex-shrink: 0;
  overflow: hidden;          /* CRITICAL: clips photo inside circle */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tree-card-founder .tree-photo-ring { width: 110px; height: 110px; }
.tree-card-co      .tree-photo-ring,
.tree-card-tech    .tree-photo-ring { width: 96px;  height: 96px; }
.tree-card-hod     .tree-photo-ring { width: 82px;  height: 82px; }
.tree-card-member  .tree-photo-ring { width: 72px;  height: 72px; }

.ring-founder { background: linear-gradient(135deg, #FDCB4B, #F6923A); box-shadow: 0 0 20px rgba(253,203,75,0.5); }
.ring-co      { background: linear-gradient(135deg, #E84363, #E44298); box-shadow: 0 0 16px rgba(232,67,99,0.4); }
.ring-tech    { background: linear-gradient(135deg, #F6923A, #FDCB4B); box-shadow: 0 0 16px rgba(246,146,58,0.4); }
.ring-hod     { background: linear-gradient(135deg, #7C5CFF, #5C9CFF); box-shadow: 0 0 14px rgba(124,92,255,0.4); }
.ring-member  { background: linear-gradient(135deg, #3CBFAE, #3C8FBF); box-shadow: 0 0 12px rgba(60,191,174,0.35); }

.tree-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Badges ── */
.tree-badge {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: 1px solid;
}

.badge-founder { background: rgba(253,203,75,0.15); border-color: rgba(253,203,75,0.45); color: #FDCB4B; }
.badge-co      { background: rgba(232,67,99,0.15);  border-color: rgba(232,67,99,0.45);  color: #E84363; }
.badge-tech    { background: rgba(246,146,58,0.15); border-color: rgba(246,146,58,0.45); color: #F6923A; }
.badge-hod     { background: rgba(124,92,255,0.15); border-color: rgba(124,92,255,0.45); color: #A07FFF; }
.badge-member  { background: rgba(60,191,174,0.12); border-color: rgba(60,191,174,0.4);  color: #3CBFAE; }

/* ── Typography ── */
.tree-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.tree-card-member .tree-name { font-size: 0.92rem; }
.tree-card-hod    .tree-name { font-size: 0.98rem; }

.tree-role {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
  margin-bottom: 0;
  line-height: 1.4;
}

.tree-bio {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  margin-bottom: 0;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .tree-row-quad { max-width: 760px; }
  .tree-card-hod { width: 210px; }
}

@media (max-width: 768px) {

  /* Co-founder + tech — stack vertically, full width */
  .tree-row-dual  { flex-direction: column; align-items: center; gap: 16px; }
  .tree-card-co,
  .tree-card-tech { width: min(90vw, 320px); }

  /* HODs — 2×2 grid */
  .tree-row-quad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 560px;
    margin: 0 auto;
  }
  .tree-card-hod { width: 100%; }

  /* Core team — 3-col grid */
  .tree-row-five {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
  }
  .tree-card-member { width: 100%; }

  /* Smaller photo rings on tablet */
  .tree-card-founder .tree-photo-ring { width: 90px; height: 90px; }
  .tree-card-co      .tree-photo-ring,
  .tree-card-tech    .tree-photo-ring { width: 78px; height: 78px; }
  .tree-card-hod     .tree-photo-ring { width: 66px; height: 66px; }
  .tree-card-member  .tree-photo-ring { width: 56px; height: 56px; }

  /* Scale down card padding & text */
  .tree-card   { padding: 18px 14px 16px; border-radius: 16px; }
  .tree-name   { font-size: 0.88rem; }
  .tree-role   { font-size: 0.7rem; }
  .tree-bio    { font-size: 0.76rem; margin-top: 8px; }
  .tree-badge  { font-size: 0.6rem; padding: 3px 10px; margin-bottom: 8px; }
  .tree-photo-ring { margin-bottom: 12px; }
}

@media (max-width: 480px) {
  /* Founder */
  .tree-card-founder { width: min(90vw, 300px); }

  /* HOD — keep 2 cols but smaller */
  .tree-row-quad { max-width: 100%; gap: 10px; }

  /* Core team — 2 cols on very small screens */
  .tree-row-five {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    gap: 10px;
  }

  .tree-card-hod    .tree-photo-ring { width: 58px; height: 58px; }
  .tree-card-member .tree-photo-ring { width: 52px; height: 52px; }
}