/**
 * =============================================================================
 * PAGE: About
 * =============================================================================
 * Intro, Mission, Background, Team heading + marquee, Careers CTA.
 * All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* =========================================================================
 * SHARED SECTION SPACING
 * ========================================================================= */
.about-mission,
.about-background {
  padding: var(--space-16) var(--padding-x);
}

.about-mission__inner,
.about-background__inner {
  max-width: var(--container-content);
  margin-inline: auto;
}

/* 60px top padding above the Our Mission block (the timeline below has 0 bottom
   padding, so this 60px IS the full gap). Background keeps the same rhythm. */
.about-mission,
.about-background {
  padding-top: var(--space-30); /* 60px */
  padding-bottom: 0;
}

/* 20px breathing room below Our Background for readability. */
.about-background {
  /* Gap with Our Mission above reduced to 0 (was 60px) — test layout. */
  padding-top: 0;
  padding-bottom: var(--space-10); /* 20px */
}

/* =========================================================================
 * MISSION — Two-column image + text
 * ========================================================================= */
.about-mission__inner {
  display: grid;
  /* Figma: 387px image (left) + 755px copy (right), 58px gap. */
  grid-template-columns: 387px 1fr;
  gap: var(--space-28);
  align-items: center;
}

.about-mission__title,
.about-background__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  margin-bottom: var(--space-8);
}

.about-mission__body,
.about-background__body {
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
  margin-bottom: var(--space-6);
}

.about-mission__body:last-child,
.about-background__body:last-child {
  margin-bottom: 0;
}

.about-mission__media img,
.about-background__media img {
  width: 100%;
  aspect-ratio: 387 / 465; /* Figma image proportion */
  border-radius: var(--radius-xl);
  object-fit: cover;
}

/* =========================================================================
 * BACKGROUND — Two-column text + image (reversed)
 * ========================================================================= */
.about-background__inner {
  display: grid;
  /* Figma: 755px copy (left) + 387px image (right), 58px gap. */
  grid-template-columns: 1fr 387px;
  gap: var(--space-28);
  align-items: center;
}

/* =========================================================================
 * INTRO — "Global Leader for Digital Phenotyping Worldwide" (centered title,
 * left-aligned copy, centered CTA)
 * ========================================================================= */
.about-intro {
  padding: var(--space-20) var(--padding-x) var(--space-40);
}

.about-intro__inner {
  max-width: var(--container-content); /* fill the full 1200px section width */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-8);
}

.about-intro__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  /* Centered heading over the left-aligned body copy. */
  align-self: stretch;
  text-align: center;
}

.about-intro__body {
  margin: 0;
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

.about-intro__cta {
  margin-top: var(--space-4);
  align-self: center; /* centered button under the left-aligned body (per Figma) */
}

/* =========================================================================
 * TEAM HEADING — "Our Team Behind" + careers intro (the marquee is the block below)
 * ========================================================================= */
.about-team-heading {
  /* No bottom padding: the team marquee below already carries its own top
     padding, so the heading now sits closer to the slider. */
  padding: var(--space-16) var(--padding-x) 0;
}

.about-team-heading__inner {
  max-width: var(--container-content);
  margin-inline: auto;
}

.about-team-heading__title {
  margin: 0;
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  text-align: center; /* centered heading (per Figma) */
}

/* Careers intro paragraph sits under the team heading, left-aligned full width. */
.about-team-heading__intro {
  margin: var(--space-20) 0 0;
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
  text-align: left;
}

/* =========================================================================
 * CAREERS CTA — centered "Join Our Team" button
 * ========================================================================= */
.about-careers {
  /* Tight top padding so the button sits close under the team marquee
     (which now has 0 bottom padding). Bottom keeps its rhythm before the demo CTA. */
  padding: var(--space-12) var(--padding-x) var(--space-40);
}

.about-careers__inner {
  max-width: var(--container-content); /* fill the full 1200px width */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-10);
}

/* The CTA button is centered. */
.about-careers__cta {
  align-self: center;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 1023px) {
  .about-mission,
  .about-background,
  .about-intro,
  .about-team-heading,
  .about-careers {
    padding-inline: var(--padding-x-md);
  }

  .about-mission__inner,
  .about-background__inner {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  /* Keep the image above the copy when the two columns stack. */
  .about-background__inner .about-background__media {
    order: -1;
  }

  .about-mission__title,
  .about-background__title,
  .about-intro__title,
  .about-team-heading__title {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 767px) {
  .about-mission,
  .about-background,
  .about-intro,
  .about-team-heading,
  .about-careers {
    padding-inline: var(--padding-x-sm);
    padding-block: var(--space-24);
  }

  .about-mission__title,
  .about-background__title,
  .about-intro__title,
  .about-team-heading__title {
    font-size: var(--text-xl);
  }
}