/* ════════════════════════════════════════════════════════════════════════════
   ABOUT.CSS — About & Team Member Pages
   RealSEOLife.com
   ════════════════════════════════════════════════════════════════════════════ */

/* Team accent color — the teal used in profile photo borders */
:root {
  --color-team-teal: #00C8BE;
  --border-team-teal: rgba(0, 200, 190, 0.45);
  --glow-team-teal: rgba(0, 200, 190, 0.10);
}


/* ══ ABOUT INDEX ════════════════════════════════════════════════════════════ */

/* ── About Header ────────────────────────────────────────────────────────── */
.about-header {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.about-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-team-teal);
  margin-bottom: var(--space-4);
}

.about-header__title {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.about-header__desc {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  max-width: 620px;
}


/* ── Team Grid ───────────────────────────────────────────────────────────── */
.about-team {
  margin-bottom: var(--space-16);
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-6);
}

/* ── Member Card ─────────────────────────────────────────────────────────── */
.about-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.about-member-card:hover {
  border-color: var(--border-team-teal);
  box-shadow: 0 4px 24px var(--glow-team-teal);
}

/* Circular photo with teal ring */
.about-member-card__photo-wrap {
  flex-shrink: 0;
}

.about-member-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-team-teal);
  box-shadow: 0 0 0 4px rgba(0, 200, 190, 0.12);
  display: block;
}

.about-member-card__photo--placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-panel-raised);
  border: 2px solid var(--color-team-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-team-teal);
}

.about-member-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.about-member-card__role {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-team-teal);
}

.about-member-card__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.about-member-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  max-width: 320px;
  margin: var(--space-2) 0 0;
}

.about-member-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.about-member-card__social {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.about-member-card__social:hover {
  color: var(--color-team-teal);
}


/* ── Mission Section ─────────────────────────────────────────────────────── */
.about-mission {
  padding: var(--space-10) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.about-mission__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-team-teal);
  margin-bottom: var(--space-4);
}

.about-mission__heading {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.about-mission__body p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 680px;
  margin-bottom: var(--space-4);
}

.about-mission__body p:last-child {
  margin-bottom: 0;
}


/* ══ TEAM MEMBER DETAIL PAGE ════════════════════════════════════════════════ */

/* ── Member Header ───────────────────────────────────────────────────────── */
.member-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.member-header__photo-wrap {
  flex-shrink: 0;
}

.member-header__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-team-teal);
  box-shadow: 0 0 0 5px rgba(0, 200, 190, 0.12);
  display: block;
}

.member-header__photo--placeholder {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--color-panel-raised);
  border: 2px solid var(--color-team-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-team-teal);
}

.member-header__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.member-header__role {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-team-teal);
}

.member-header__name {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}

.member-header__tagline {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  max-width: 520px;
  margin-top: var(--space-1);
}

.member-header__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.member-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.member-link:hover,
.member-link--linkedin:hover {
  color: var(--color-team-teal);
}


/* ── Expertise Chips ─────────────────────────────────────────────────────── */
.member-expertise {
  margin-bottom: var(--space-8);
}

.member-expertise__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.member-expertise__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ── Bio Sections ────────────────────────────────────────────────────────── */
.member-bio {
  margin-bottom: var(--space-10);
}

.member-bio p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 720px;
  margin-bottom: var(--space-5);
}

.member-bio p:last-child {
  margin-bottom: 0;
}

.member-bio-extended {
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-10);
}

.member-bio-extended__heading {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.member-bio-extended p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 720px;
  margin-bottom: var(--space-4);
}

.member-bio-extended p:last-child {
  margin-bottom: 0;
}


/* ── Back link ───────────────────────────────────────────────────────────── */
.member-back {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .about-team__grid {
    grid-template-columns: 1fr;
  }

  .member-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .member-header__identity {
    align-items: center;
  }

  .member-header__tagline {
    text-align: center;
  }

  .member-header__links {
    justify-content: center;
  }

  .member-expertise__chips {
    justify-content: center;
  }
}