/* ============================================
   TEAM PAGE STYLES — team.css
   N Trims · Trims & Accessories
   ============================================ */

/* ---- TEAM PAGE HERO ---- */
.team-page-hero {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 80px 60px 60px;
  text-align: center;
}

.team-page-hero .hero-eyebrow {
  justify-content: center;
}

.team-page-hero .hero-eyebrow::before {
  display: none;
}

.team-page-hero .hero-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.team-page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
}

.team-page-hero h1 strong {
  font-weight: 600;
  color: var(--accent);
}

.team-page-hero p {
  font-size: 15px;
  color: var(--mid);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ---- STATS STRIP ---- */
.team-stats {
  display: flex;
  gap: 48px;
  align-items: center;
  background: var(--accent);
  color: #fff;
  padding: 32px 60px;
  justify-content: center;
  flex-wrap: wrap;
}

.team-stat-item {
  text-align: center;
}

.team-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}

.team-stat-lbl {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .7;
  font-weight: 500;
}

/* ---- FULL TEAM SECTION ---- */
.full-team-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 60px;
}

/* ---- BACK LINK ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 40px;
  transition: gap .2s;
}

.back-link::before { content: '←'; }
.back-link:hover { gap: 14px; }

/* ---- FILTER BAR ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-btn {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--mid);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all .2s;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- FULL TEAM GRID ---- */
.full-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* ---- EMPLOYEE CARD ---- */
.employee-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 36px 24px 28px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
  cursor: pointer;
}

.employee-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.employee-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.09);
}

/* ---- EMPLOYEE AVATAR ---- */
.emp-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  margin: 0 auto 18px;
  border: 3px solid var(--border);
  background: var(--accent-light);
  color: var(--accent);
}

.emp-avatar-img{
  width:85px;
  height:85px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 18px;
  border:3px solid var(--border);
  display:block;
}

/* Avatar colour variants */
.emp-avatar.teal   { background: var(--accent-light); color: var(--accent);  border-color: #c8ddd5; }
.emp-avatar.gold   { background: #fdf3e3;             color: #b8976a;        border-color: #e8d9c0; }
.emp-avatar.rose   { background: #fdecea;             color: #c0544a;        border-color: #e8c8c5; }
.emp-avatar.indigo { background: #eceef8;             color: #4a54a0;        border-color: #c8cce8; }
.emp-avatar.amber  { background: #fef7e0;             color: #b07c1a;        border-color: #e8d898; }
.emp-avatar.slate  { background: #eef0f4;             color: #4a5568;        border-color: #c8cdd8; }
.emp-avatar.plum   { background: #f3edf8;             color: #7b4fa0;        border-color: #d8c5e8; }
.emp-avatar.coral  { background: #fef0ec;             color: #c05830;        border-color: #e8c8b8; }

/* ---- CARD CONTENT ---- */
.employee-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}

.emp-role {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.emp-dept {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.emp-bio {
  font-size: 13px;
  line-height: 1.7;
  color: var(--mid);
  margin-bottom: 18px;
}

.emp-contact {
  font-size: 12px;
  color: var(--light);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.emp-contact a {
  color: var(--accent);
  text-decoration: none;
}

/* ---- VIEW PROFILE BUTTON ---- */
.view-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-top: 14px;
}

.view-profile-btn::after {
  content: '→';
  transition: transform .2s;
}

.employee-card:hover .view-profile-btn::after {
  transform: translateX(4px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .full-team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .team-page-hero  { padding: 60px 24px 40px; }
  .full-team-section { padding: 50px 24px; }
  .full-team-grid  { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .team-stats      { padding: 28px 24px; gap: 28px; }
}

@media (max-width: 480px) {
  .full-team-grid  { grid-template-columns: 1fr; }
}