/* ==========================================================================
   10 / About (image led, human)
   Full bleed split: edge to edge image on the left, a short story and three
   beliefs on the right. The content edge lines up with the page container.
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-white);
}

/* ---- Image ---- */
.about__media {
  position: relative;
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: var(--color-gray-100);
}

.about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js .about__media {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}

.js .about:not(.is-inview) .about__media {
  clip-path: inset(100% 0 0 0);
}

/* ---- Content ---- */
.about__content {
  align-self: center;
  /* Right edge lines up with the container on wide screens */
  padding-block: var(--bleed-pad);
  padding-left: var(--space-12);
  padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

.about__eyebrow {
  color: var(--color-gray-500);
}

.about__title {
  max-width: 20ch;
  margin-top: var(--space-5);
}

.about__title .mark {
  background-image: linear-gradient(var(--color-brand-blue), var(--color-brand-blue));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.22em;
  transition: background-size 900ms var(--ease-out) 400ms;
}

.js .about:not(.is-inview) .about__title .mark {
  background-size: 0% 0.22em;
}

.about__text {
  max-width: 48ch;
  margin-top: var(--space-6);
  color: var(--color-gray-700);
}

.about__text p + p {
  margin-top: var(--space-4);
}

/* ---- Beliefs ---- */
.about__beliefs {
  margin-top: var(--space-10);
}

.about__beliefs-title {
  color: var(--color-gray-500);
}

.about__list {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.about-belief--blue   { --belief-color: var(--color-brand-blue); }
.about-belief--orange { --belief-color: var(--color-brand-orange); }
.about-belief--red    { --belief-color: var(--color-brand-red); }

.about-belief {
  padding-left: var(--space-5);
  border-left: 3px solid var(--belief-color);
}

.about-belief__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
}

.about-belief__text {
  margin-top: var(--space-1);
  color: var(--color-gray-700);
}

/* Content fades up after the image starts to reveal */
.js .about__content > * {
  transition:
    opacity 700ms var(--ease-out) 300ms,
    transform 700ms var(--ease-out) 300ms;
}

.js .about:not(.is-inview) .about__content > * {
  opacity: 0;
  transform: translateY(16px);
}

/* ---- Tablet: image on top ---- */
@media (max-width: 1024px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .about__content {
    padding: var(--bleed-pad) var(--container-pad);
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .about__media {
    aspect-ratio: 4 / 3;
  }

  .about__beliefs {
    margin-top: var(--space-8);
  }

  .about-belief {
    padding-left: var(--space-4);
  }
}