/* About page specific styles */
.about-hero {
  text-align: center;
  margin-bottom: 1.25rem;
}
.about-hero h2 {
  margin: 0 0 0.5rem 0;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
}
.about-hero .subtitle {
  margin: 0 auto;
  max-width: 760px;
  color: var(--color-text);
  opacity: 0.9;
}

.team-section { padding: 2rem 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.team-member {
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  padding-right: 48px;
}
.team-member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.team-member img {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 1rem auto; border: 3px solid rgba(0,0,0,0.06);
}
.team-member h4 { margin: 0 0 .4rem 0; color: var(--color-primary); font-family: var(--font-heading, 'Playfair Display'); text-align: left; }
.team-member p { font-size: .95rem; margin: 0; color: var(--color-text); }

/* Team roles list */
.team-roles { 
  list-style: none; 
  margin: .35rem 0 0 0; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  gap: .45rem; 
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  text-align: left;
}
.team-roles .role-item { 
  display: flex; 
  align-items: flex-start; 
  gap: .55rem; 
  line-height: 1.35; 
  font-size: .88rem; 
  background: rgba(0,0,0,0.03); 
  padding: .4rem .6rem .45rem .55rem; 
  border-radius: 7px; 
  color: #111; 
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
}
.team-roles .role-item:nth-child(1) { background: rgba(0,105,62,0.10); }
.team-roles .role-item:nth-child(2) { background: rgba(0,105,62,0.07); }
.team-roles .role-item:nth-child(3) { background: rgba(0,105,62,0.05); }
.team-roles .role-item .role-icon { 
  display: inline-flex; 
  width: 22px; 
  height: 22px; 
  border-radius: 4px; 
  align-items: center; 
  justify-content: center; 
  background: #00693E; 
  color: #fff; 
  font-size: .75rem; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.team-roles .role-item .role-icon i { line-height: 1; }
.team-roles .role-item .role-text { flex: 1; }

/* Dark mode adjustments for roles */
body.dark-mode .team-roles .role-item { 
  background: rgba(255,255,255,0.06); 
  color: #e6e6e6; 
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4);
}
body.dark-mode .team-roles .role-item:nth-child(1) { background: rgba(125,240,194,0.18); }
body.dark-mode .team-roles .role-item:nth-child(2) { background: rgba(125,240,194,0.13); }
body.dark-mode .team-roles .role-item:nth-child(3) { background: rgba(125,240,194,0.09); }
body.dark-mode .team-roles .role-item .role-icon { background: #7df0c2; color: #1D1F20; box-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* Vertical icon rail */
.team-social-links { position: absolute; top: 1.25rem; right: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.team-icon { color: var(--color-primary); text-decoration: none; }
.team-icon:hover { color: var(--color-secondary); transform: scale(1.12); }
.team-social-links i { font-size: 1.15rem; }

/* Social section */
.social-links { text-align: center; margin-top: 2rem; }
/* Make icon buttons truly blend with page background on About page */
.icon-btn { 
  display:inline-flex; align-items:center; justify-content:center; 
  width:48px; height:48px; border-radius:50%; 
  border: none; background: transparent; box-shadow: none; 
  color: var(--color-primary); margin: 0 .75rem; 
  transition: color .2s ease, transform .2s ease;
}
.icon-btn:hover { color: var(--color-secondary); transform: translateY(-2px); }
.icon-btn:focus { outline: 2px dashed var(--color-border); outline-offset: 3px; }
.icon-btn i { font-size: 1.25rem; }

/* Dark mode adjustments */
body.dark-mode .team-member { background-color: var(--surface-1); border: 1px solid var(--surface-border); }
body.dark-mode .team-member p { color: var(--color-text); }
/* Keep icons clean in dark mode too */
body.dark-mode .icon-btn { background: transparent; border: none; color: var(--color-primary-dark); }
body.dark-mode .icon-btn:hover { background: transparent; color: var(--color-secondary-dark); }

/* Unified section headings and text widths for alignment harmony */
.content-block h3 { text-align: center; margin-bottom: .75rem; }
/* Center paragraphs on About page content blocks */
.about-page .content-page .content-block p { max-width: 850px; margin: 0 auto 1rem; text-align: center !important; }
/* Ensure all headings on About page are centered (override globals) */
.about-page .content-page h2,
.about-page .content-page h3 { text-align: center !important; }