/* About page — page-specific layout only. Component look (cards/buttons/grids) comes from base.css. */

.section-title { margin-bottom: var(--space-5); }

/* 1. Page hero */
.about-hero-section { padding-top: var(--space-7); }
.about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); }
}
.about-hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.about-hero-content h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: var(--space-3); }
.about-credentials { font-weight: 600; color: var(--color-primary-dark); margin-bottom: var(--space-2); }
.about-reg { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* 2. Full bio */
.about-bio { max-width: 78ch; }
.about-bio p { margin-bottom: var(--space-4); }
.about-bio p:last-child { margin-bottom: 0; }

/* 3. Career timeline */
.timeline {
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-border);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--space-7);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: calc(-1 * var(--space-6) - 8px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-content h3 { font-size: 1.1rem; margin-bottom: var(--space-2); color: var(--color-primary-dark); }
.timeline-content p { color: var(--color-text-muted); max-width: 60ch; }

/* 4. Awards & Recognition */
.award-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.award-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform .2s ease;
}
.award-card img:hover { transform: scale(1.02); }
.award-card h3 { color: var(--color-primary-dark); }
.award-card p { color: var(--color-text-muted); overflow-wrap: anywhere; }
.award-meta { font-weight: 600; color: var(--color-accent) !important; font-size: 0.9rem; }

/* 5. Affiliations strip */
.affiliation-card { text-align: center; }
.affiliation-card h3 { margin-bottom: var(--space-2); color: var(--color-primary-dark); }
.affiliation-role { color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-2); }
.affiliation-card p:last-child { color: var(--color-text-muted); }

/* Mobile readability guard (verified at 375px) */
@media (max-width: 480px) {
  .timeline { padding-left: var(--space-5); }
  .timeline-dot { left: calc(-1 * var(--space-5) - 8px); }
}