/* About page */

/* ---------- Intro: portrait + greeting ---------- */
.about-hero { margin: 140px 0 48px; padding: 10px; }
.about-hero__inner { display: flex; gap: 24px; }
.about-hero__media { flex: 0 1 45%; padding: 10px; }
.about-hero__media img { width: 100%; }
.about-hero__text { flex: 0 1 100%; display: flex; flex-direction: column; justify-content: center; padding: 10px; }
.about-hero__text-inner { width: 100%; max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.about-hero__title { font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--c-primary); }
.about-hero__lead { font-family: var(--f-head); font-size: 18px; line-height: 1.2; color: var(--c-navy); }
.about-hero__lead p, .about-hero__lead p:last-child { margin: 0 0 1.6em; }

/* ---------- My Values ---------- */
.about-values { background: var(--c-gray-100); padding: 48px 0; }
.about-values > .container { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.about-values__head { width: 100%; padding: 20px; text-align: center; }
.about-values__head h2 { font-size: 22px; margin-bottom: 8px; }
.about-values__head p { font-size: 14px; margin-bottom: 1.4px; }
.about-values__grid {
  width: 100%; padding: 10px;
  display: flex; justify-content: center; align-items: flex-start; gap: 48px;
}
.value-card {
  flex: 0 0 30%; min-height: 320px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  background: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: 8px;
}
.value-card__icon { display: block; width: 80px; height: 80px; margin: 0 auto; flex: none; }
.value-card__body { width: 100%; padding: 10px; display: flex; flex-direction: column; gap: 24px; text-align: center; }
.value-card__title { font-family: var(--f-body); font-size: 14px; font-weight: 700; line-height: 1.2; margin-bottom: .4px; }
.value-card__body p { font-size: 14px; margin-bottom: .4px; }

/* ---------- A Bit About Me ---------- */
.about-bio { padding: 48px 0; background: var(--c-white); }
.about-bio > .container { display: flex; flex-direction: column; gap: 24px; }
.about-bio__head { padding: 10px; text-align: center; }
.about-bio__head h2 { font-size: 22px; }
.about-bio__text { padding: 10px; font-size: 14px; }
.about-bio__text p, .about-bio__text p:last-child { margin: 0 0 1.6em; }

/* ---------- Mentorship / article cards ---------- */
.about-features { background: var(--c-gray-100); padding: 100px 0; }
.about-features__inner { display: flex; justify-content: center; align-items: flex-start; gap: 40px; }
.feature-card { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; gap: 24px; }
.feature-card__media { width: 70%; padding: 10px; }
.feature-card__media a, .feature-card__media img { display: block; width: 100%; }
.feature-card__body { padding: 10px; display: flex; flex-direction: column; align-items: flex-start; }
.feature-card__eyebrow { font-size: 12px; font-weight: 700; line-height: 1.2; margin: 0 0 3.2px; }
.feature-card__title { font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 19.2px; }
.feature-card__text, .feature-card__text:last-child { font-size: 14px; margin: 0 0 1.6em; }
.feature-card__btn {
  padding: 10px 40px; color: var(--c-navy); background: var(--c-white); border-color: var(--c-gray-300);
}
.feature-card__btn:hover, .feature-card__btn:focus-visible { color: var(--c-navy); background: var(--c-gray-50); border-color: var(--c-gray-300); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .about-hero__text-inner { max-width: 80%; }
  /* Three 30% cards get too narrow for their copy on tablets; stack them like the mobile layout. */
  .about-values__grid { flex-wrap: wrap; }
  .value-card { flex-basis: 100%; max-width: 560px; min-height: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .about-hero__inner { flex-wrap: wrap; }
  .about-hero__media, .about-hero__text { flex-basis: 100%; }
  /* The original nested a second 90% inset here, making the intro narrower than every other block on mobile. */
  .about-hero__text-inner { max-width: 100%; }
  .about-features__inner { flex-direction: column; }
  .feature-card { flex: none; width: 100%; }
  .feature-card__media { width: 100%; }
}