/**
 * A.R.C Technology — About Page v6.0
 * "Resilient Orbit" — Bold mission cards, vibrant values, team grid
 * Selectors match HTML: .about-mv-card, .about-feature, .card--team, .card--dark
 */

.about-stats { padding: var(--space-8) 0; }

/* Mission / Vision — two-up grid */
.about-mv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: stretch;
}

@media (max-width: 767px) {
  .about-mv-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-grid-tight);
  }
}

/* Mission / Vision cards */
.about-mv-card {
  background: var(--color-surface);
  border: var(--border-thick) solid var(--color-navy);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  position: relative; overflow: hidden;
}
.about-mv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--color-teal);
}
.about-mv-card--accent::before { background: var(--color-coral); }
.about-mv-card__title {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: var(--font-bold); margin-bottom: var(--space-4);
}
.about-mv-card__text {
  font-size: var(--fs-body); color: var(--color-text-secondary); line-height: var(--leading-relaxed);
}
.about-mv-card__icon {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4); flex-shrink: 0;
  background: var(--color-teal-subtle); color: var(--color-on-light-teal);
}
.about-mv-card--accent .about-mv-card__icon { background: var(--color-coral-subtle); color: var(--color-on-light-coral-deep); }

/* Story / About features */
.about-feature {
  display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-5);
  border-radius: var(--radius-xl);
  transition: background var(--transition-fast) ease, transform var(--transition-base) var(--ease-bounce);
}
.about-feature:hover { background: var(--color-teal-subtle); transform: translateX(4px); }
.about-feature__icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: var(--color-teal-subtle); color: var(--color-on-light-teal);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Team grid — .card--team lives in cards.css; these are team-specific sub-elements */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--gap-grid); }

.card--team__avatar {
  width: 120px; height: 120px; border-radius: var(--radius-xl);
  margin: 0 auto var(--space-5); border: var(--border-thick) solid var(--color-teal-a11y);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--color-teal-subtle);
}
.card--team__avatar--photo { background: transparent; }
.card--team__photo {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.card--team__info { margin-bottom: var(--space-3); }
.card--team__name {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--font-bold); margin-bottom: var(--space-1);
}
.card--team__credentials { font-size: var(--fs-sm); font-weight: var(--font-medium); color: var(--color-text-muted); }
.card--team__role {
  display: block; font-size: var(--fs-sm); font-weight: var(--font-semibold); color: var(--color-on-light-teal); margin-bottom: var(--space-4);
}
.card--team__bio {
  font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-5);
  text-align: left;
}
.card--team__skills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.card--team__skill {
  font-size: var(--fs-xs); font-weight: var(--font-medium); padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-secondary);
}

/* Values grid — uses .card.card--dark from cards.css; no extra selectors needed */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--gap-grid-tight); }

@media (max-width: 767px) {
  .team-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .about-mv-card { padding: var(--space-8); }
}