/* ==========================================================================
   BIXYN — About Page
   New sections for the About page: "About Bixyn" (founder) + "Core Values".
   Everything else (navbar, hero, cta, footer, buttons, typography, colors)
   reuses the existing shared design system.

   Desktop : About Bixyn = image left / text right.
   iPad/Mob: About Bixyn = image stacked on top, text below.
   Core Values : 2 x 2 grid on desktop & tablet, single column on mobile.
   ========================================================================== */

/* ------------------------------------------------------------------ Hero */
/* Slightly larger breathing room below the About hero on desktop. */
.about-hero {
  padding-bottom: 80px;
}

/* -------------------------------------------------------------- About Bixyn */
.about-bixyn {
  /* Subtle olive band echoing the reference, blends into the dark page. */
  background: var(--color-bg-alt);
  padding-block: 120px;
}

.about-bixyn__inner {
  display: flex;
  align-items: center;
  gap: var(--space-64);
}

.about-bixyn__media {
  flex: 0 0 42%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Green glow fallback so the frame reads correctly before the founder
     photo (assets/images/founder.png) is added. */
  background: radial-gradient(120% 120% at 85% 8%,
      #c7f56a 0%,
      #6f9a2e 26%,
      #2d4711 52%,
      #0d1300 100%);
}

.about-bixyn__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.about-bixyn__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.about-bixyn__title {
  color: var(--color-white);
}

.about-bixyn__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.about-bixyn__copy p {
  max-width: 520px;
}

.about-bixyn__lead {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

.about-bixyn__sign {
  display: flex;
  flex-direction: column;
  /* gap: var(--space-4); */
}

.about-bixyn__name {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-white);
}

.about-bixyn__role {
  font-size: var(--fs-body-sm);
}

/* -------------------------------------------------------------- Core Values */
.values {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-block: 120px;
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 40px;
}

/* Vertical divider down the middle (left column gets the right border). */
.value-card:nth-child(odd) {
  /* padding-left: 0; */
  border-right: 1px solid var(--color-border);
}

/* .value-card:nth-child(even) {
  padding-right: 0;
} */

/* Top row sits flush under the heading (no top border / padding). */
.value-card:nth-child(1),
.value-card:nth-child(2) {
  padding-top: 0;
}

/* Horizontal divider between the two rows. */
.value-card:nth-child(n+3) {
  border-top: 1px solid var(--color-border);
}

.value-card__num {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-olive);
}

.value-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.value-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: 33.6px;
  color: var(--color-white);
}

.value-card__desc {
  max-width: 600px;
}

.about-cta {
  max-width: 1000px;
}

/* ============================================ TABLET (≤ 1024px) ============================================ */
@media (max-width: 1024px) {

  /* About Bixyn — stack: image on top, text below */
  .about-bixyn {
    padding-block: 80px;
  }

  .about-bixyn__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }

  .about-bixyn__media {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .about-bixyn__content {
    gap: var(--space-16);
  }

  .about-bixyn__copy {
    gap: var(--space-16);
  }

  .about-bixyn__copy p {
    max-width: none;
  }

  /* Core Values — keep 2 x 2, tighten spacing */
  .values {
    gap: var(--space-48);
    padding-block: 80px;
  }

  .value-card {
    padding: 32px;
    gap: var(--space-16);
  }

  .value-card__num {
    font-size: 36px;
  }

  .value-card__title {
    font-size: 20px;
    line-height: 30px;
  }

  .value-card__desc {
    max-width: none;
  }
}

/* ============================================ MOBILE (≤ 640px) ============================================ */
@media (max-width: 640px) {

  /* About Bixyn */
  .about-bixyn {
    padding: 80px 0 40px 0 ;
  }

  .about-bixyn__inner {
    gap: var(--space-32);
  }

  .about-bixyn__media {
    aspect-ratio: 16 / 13;
  }

  .about-bixyn__title {
    line-height: 32px;
  }

  /* Core Values — single column, dividers between every card */
  .values {
    gap: var(--space-32);
    padding: 80px 20px 40px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    padding: 32px 0;
    gap: var(--space-16);
    border-top: 1px solid var(--color-border);
  }

  .value-card:nth-child(odd) {
    padding-left: 0;
    border-right: none;
  }

  .value-card:nth-child(even) {
    padding-right: 0;
  }

  .value-card:nth-child(1) {
    padding-top: 0;
    border-top: none;
  }

  .value-card:nth-child(2) {
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
  }

  .value-card__num {
    font-size: 36px;
  }

  .value-card__title {
    font-size: 20px;
    line-height: 28px;
  }
}