/* ================================================================
   TechWorld Labs — about.css
   About page-specific styles. Layout/components live in global.css,
   page.css handles the sidebar+main shell, index.css supplies
   hero-stats, section-title, why-grid/why-card, pills, etc.
   ================================================================ */

/* ── Profile card (Meet the Creator) ── */
.profile-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 18px 0;
  transition: var(--transition);
}
.profile-card:hover {
  border-color: var(--border2);
  background: var(--bg4);
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  color: #000;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(0,180,255,0.3);
}
.profile-info { flex: 1; min-width: 0; }
.profile-name {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800;
  color: var(--text); margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.profile-role {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.8px;
  text-transform: uppercase; margin-bottom: 10px;
}
.profile-bio {
  font-size: 13.5px; color: var(--text2);
  line-height: 1.7; margin-bottom: 14px;
}
.profile-links {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.profile-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--text2);
  transition: var(--transition);
}
.profile-link:hover {
  color: var(--accent); border-color: var(--border2);
  background: var(--bg3);
}

/* ── Mission statement quote ── */
.mission-quote {
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  margin: 18px 0;
  background: rgba(0,180,255,0.04);
  border-radius: 0 10px 10px 0;
}
.mission-quote p {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--text); line-height: 1.6;
  letter-spacing: -0.2px;
  font-style: italic;
}
.mission-quote cite {
  display: block; margin-top: 10px;
  font-size: 12px; color: var(--text3);
  font-family: var(--font-mono);
  font-style: normal; letter-spacing: 0.5px;
}

/* ── Milestone / timeline list ── */
.milestone-list {
  display: flex; flex-direction: column;
  gap: 0; margin: 18px 0;
  position: relative;
}
.milestone-list::before {
  content: '';
  position: absolute;
  left: 15px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.milestone-item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 12px 0;
  position: relative;
}
.milestone-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg3); border: 2px solid var(--accent);
  flex-shrink: 0; margin-top: 5px;
  position: relative; z-index: 1;
  margin-left: 11px;
  box-shadow: 0 0 8px rgba(0,180,255,0.4);
}
.milestone-dot.green  { border-color: var(--accent2); box-shadow: 0 0 8px rgba(0,255,178,0.4); }
.milestone-dot.orange { border-color: var(--accent3); box-shadow: 0 0 8px rgba(255,107,53,0.4); }
.milestone-dot.yellow { border-color: var(--accent4); box-shadow: 0 0 8px rgba(255,214,0,0.4); }
.milestone-dot.purple { border-color: var(--accent5); box-shadow: 0 0 8px rgba(187,134,252,0.4); }
.milestone-body { flex: 1; min-width: 0; }
.milestone-year {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  color: var(--accent); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 2px;
}
.milestone-year.green  { color: var(--accent2); }
.milestone-year.orange { color: var(--accent3); }
.milestone-year.yellow { color: var(--accent4); }
.milestone-year.purple { color: var(--accent5); }
.milestone-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 3px;
}
.milestone-desc {
  font-size: 13px; color: var(--text2); line-height: 1.6;
}

/* ── Course overview list ── */
.course-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin: 18px 0;
}
.co-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
  display: flex; gap: 12px; align-items: flex-start;
  transition: var(--transition);
  border-left: 3px solid transparent;
}
.co-card:hover {
  background: var(--bg4); border-color: var(--border2);
}
.co-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.co-body { flex: 1; min-width: 0; }
.co-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.co-desc { font-size: 12.5px; color: var(--text2); line-height: 1.6; }
.co-count {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text4);
  margin-top: 6px;
}

/* ── Contact cards ── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin: 18px 0;
}
.contact-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: var(--transition);
  text-decoration: none;
}
.contact-card:hover {
  border-color: var(--border2); background: var(--bg4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.contact-card-icon {
  font-size: 24px; margin-bottom: 4px;
}
.contact-card-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text3);
}
.contact-card-value {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--text);
}
.contact-card-desc {
  font-size: 12px; color: var(--text3); line-height: 1.5;
}

/* ── About intro banner ── */
.about-banner {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg,
    rgba(0,180,255,0.06) 0%,
    rgba(0,255,178,0.04) 100%);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 24px;
  margin: 18px 0;
}
.about-banner-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 800;
  color: #000; flex-shrink: 0;
}
.about-banner-text { flex: 1; }
.about-banner-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800;
  color: var(--text); letter-spacing: -0.4px;
  margin-bottom: 6px;
}
.about-banner-sub {
  font-size: 13.5px; color: var(--text2); line-height: 1.65;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .profile-card     { flex-direction: column; gap: 16px; padding: 20px; }
  .profile-avatar   { width: 60px; height: 60px; font-size: 22px; }
  .course-overview-grid { grid-template-columns: 1fr; gap: 10px; }
  .contact-grid     { grid-template-columns: 1fr; gap: 10px; }
  .about-banner     { flex-direction: column; gap: 14px; padding: 20px; }
  .about-banner-title { font-size: 18px; }
  .mission-quote p  { font-size: 15px; }
}

@media (max-width: 480px) {
  .profile-card     { padding: 16px; border-radius: 12px; }
  .profile-name     { font-size: 17px; }
  .about-banner     { padding: 16px; border-radius: 12px; }
  .about-banner-icon{ width: 50px; height: 50px; font-size: 15px; }
  .about-banner-title { font-size: 16px; }
  .milestone-list::before { left: 10px; }
  .milestone-dot    { margin-left: 6px; }
  .co-card          { padding: 13px 14px; }
  .contact-card     { padding: 16px; }
}