/* assets/css/about.css
 * Layout for the About page.
 */

/* ---- Page head ------------------------------------------------------ */

.about-hero {
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  padding: 40px 0;
  background: var(--band);
}

.about-hero > .container {
  width: 100%;
  max-width: var(--hero-w);
}

  /* PROPORTIONAL, NOT FIXED. At a fixed 726px the artwork kept its full size
     while the narrower band took every pixel out of the copy. 1.16fr is the
     ratio the two columns already had at 1460, so the balance is unchanged and
     both simply scale. */
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 60px;
  align-items: center;
}

.about-hero__title {
  /* FACE AND WEIGHT STATED, NOT INHERITED.
     These relied on the global `h1` rule for bold. That holds while the hero
     is an <h1> on a page that loaded base.css in the usual order — and stops
     holding the moment one is rendered from a React page, wrapped in another
     element, or reached with a different stylesheet order. A hero headline
     should not depend on which tag it happens to be in. */
  font-family: var(--font-heading);
  font-weight: 700;

  --hard-shadow-offset: 3px;
  margin-top: 8px;
  font-size: var(--hero);
  line-height: var(--hero-lh);
}

.about-hero__lead {
  max-width: 460px;
  margin-top: 18px;
}

.about-hero__art {
  width: 100%;
  height: auto;
}

/* ---- Stats bar ------------------------------------------------------
 * Pulled up so it straddles the band edge and ties the head to the page.
 */

.about-stats {
  margin-top: -62px;
}

.about-stats__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 0;
  padding: 40px 60px;
  border-radius: 20px;
  background: var(--forest);
  color: var(--white);
}

.stat {
  text-align: center;
}

.stat__figure {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h4);
  line-height: 45px;
  color: var(--white);
}

.stat__label {
  margin: 6px 0 0;
  font-size: var(--body);
  line-height: 22px;
  color: var(--band);
}

/* ---- Story ----------------------------------------------------------- */

.story {
  padding-top: 110px;
}

.story__inner {
  max-width: 780px;
  margin-inline: auto;
}

.story__lead {
  margin-top: 24px;
  font-size: var(--lead);
  line-height: 30px;
}

.story__quote {
  margin: 40px 0;
  padding: 4px 0 4px 30px;
  border-left: 4px solid var(--band);
}

.story__quote p {
  font-family: var(--font-accent);
  font-size: 30px;
  line-height: 38px;
}

.story__body {
  font-size: var(--lead);
  line-height: 30px;
  color: var(--ink-soft);
}

/* ---- Values ---------------------------------------------------------- */

.values {
  margin-top: 110px;
  padding: 100px 0;
  background: var(--forest);
}

.values .sec-head {
  gap: 10px;
}

.values .eyebrow,
.values h2 {
  color: var(--white);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.value {
  padding: 36px 34px;
  border-radius: var(--radius);
  background: var(--band);
}

.value__title {
  font-size: var(--h5);
  line-height: 39px;
}

.value__body {
  margin-top: 14px;
  font-size: var(--lead);
  line-height: 27px;
}

/* ---- Who it is for ---------------------------------------------------- */

.people {
  padding-top: 110px;
}

.people .sec-head {
  gap: 10px;
}

.people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 40px;
  margin-top: 64px;
}

.person {
  text-align: center;
}

.person__face {
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--verde-100);
}

.person__role {
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.person__body {
  max-width: 300px;
  margin: 8px auto 0;
  color: var(--ink-soft);
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 1340px) {
  .about-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .about-stats__bar {
    padding: 36px 32px;
  }
}

@media (max-width: 1100px) {
  .about-hero {
    padding: 56px 0 90px;
  }

  .about-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  

  .about-hero__title .marker {
    display: none;
  }

  .about-hero__art {
    max-width: 620px;
  }

  .about-stats__bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .story,
  .people {
    padding-top: 72px;
  }

  .values {
    margin-top: 72px;
    padding: 72px 0;
  }

  .values__grid,
  .people__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 44px;
  }

    }

@media (max-width: 640px) {
  

  .about-stats {
    margin-top: -48px;
  }

  .about-stats__bar {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 24px;
    text-align: left;
  }

  .stat {
    text-align: left;
  }

  .story__quote p {
    font-size: 25px;
    line-height: 32px;
  }

  .values__grid,
  .people__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  }