/* About — Figma node 1272:1202 */

/* Page head: Figma wraps the headline across the full 980px intro, not balanced. */
.about-page-title {
  text-wrap: pretty;
}

/* Native WebVTT cues; browser or OS caption preferences can override this. */
.page-head__media--video video::cue {
  font-size: 80%;
}

/* Mission: story block over a photo that starts ~387px down and fades up to white. */
.about-mission {
  --statement-height: 1131px;
  --statement-image-top: 387px;
  --statement-image-position: center top;
  --statement-width: 968px;
}

.about-mission::before {
  top: 151px;
  height: 565px;
  background: linear-gradient(
    180deg,
    #fff 45.19%,
    rgba(255, 255, 255, 0.75) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}

.about-mission .statement__content {
  gap: 20px;
}

/* Our Impact: header and accordion 40px apart, no bottom padding (Founder row follows). */
.about-impact {
  --section-gap: 40px;
  padding-bottom: 0;
}

.about-impact .section-header,
.about-impact .section-header > .t-body-l {
  max-width: 1000px;
}

/* Design shows 12px between an open item's title and its body. */
.about-impact .accordion__item[open] summary {
  padding-bottom: 12px;
}

/* Items without approved body copy stay as collapsed rows. */
.about-impact .accordion__body:empty {
  display: none;
}

/* Founder row: 64px column gap and 12px above the link, per V4 / Content Row. */
.about-founder .content-row--padded {
  gap: 64px;
}

.about-founder__portrait {
  object-position: center 33%;
}

/* Match the Summer Camp crop so Starr's face stays in frame at 4:3. */
.about-coach__photo {
  object-position: center 37%;
}

.about-founder .content-row + .content-row {
  margin-top: var(--section-y);
}

.about-founder .actions {
  padding-top: 12px;
}

@media (max-width: 1100px) {
  .about-mission {
    --statement-height: 1080px;
    --statement-image-top: 440px;
  }

  .about-mission::before {
    top: 200px;
  }

  .about-founder .content-row--padded {
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .about-founder .content-row--padded {
    gap: 32px;
  }
}

@media (max-width: 720px) {
  .about-mission {
    --statement-height: 1080px;
    --statement-image-top: 600px;
    --statement-image-position: 40% top;
  }

  .about-mission::before {
    top: 360px;
    height: 400px;
  }
}

@media (max-width: 380px) {
  .about-mission {
    --statement-height: 1160px;
    --statement-image-top: 680px;
  }

  .about-mission::before {
    top: 440px;
  }
}