/* ==================================================================
   JUSTPIXEL
   ABOUT
   ================================================================== */

/* ==================================================================
   HERO
   ================================================================== */

.jp-about-hero {
  max-width: 900px;

  padding: var(--jp-space-8) 0 clamp(3rem, 7vw, 5rem);
}

.jp-about-eyebrow {
  display: inline-block;

  margin-bottom: var(--jp-space-4);

  color: var(--jp-primary);

  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-bold);

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.jp-about-hero h1 {
  max-width: 850px;

  margin-bottom: var(--jp-space-6);

  font-size: clamp(2.75rem, 6vw, 4.8rem);

  letter-spacing: -0.04em;

  line-height: 1;
}

.jp-about-lead {
  max-width: 760px;

  margin: 0;

  color: var(--jp-text-muted);

  font-size: clamp(1.1rem, 2vw, 1.3rem);

  line-height: 1.7;
}

/* ==================================================================
   MAIN SECTIONS
   ================================================================== */

.jp-about-section {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.7fr)
    minmax(0, 1.3fr);

  gap: clamp(2rem, 6vw, 5rem);

  padding: clamp(3rem, 6vw, 4.5rem) 0;

  border-top: 1px solid var(--jp-border);
}

/* ------------------------------------------------------------------
   SECTION HEADING
   ------------------------------------------------------------------ */

.jp-about-section-heading {
  max-width: 320px;
}

.jp-about-number {
  display: block;

  margin-bottom: var(--jp-space-4);

  color: var(--jp-primary);

  font-family: var(--jp-font-mono);

  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-bold);
}

.jp-about-section-heading h2 {
  margin: 0;

  font-size: clamp(1.75rem, 3vw, 2.3rem);

  letter-spacing: -0.025em;
}

/* ------------------------------------------------------------------
   SECTION CONTENT
   ------------------------------------------------------------------ */

.jp-about-section-content {
  max-width: 700px;
}

.jp-about-section-content p {
  margin-top: 0;
  margin-bottom: var(--jp-space-5);

  font-size: var(--jp-text-lg);
}

.jp-about-section-content .jp-muted {
  font-size: var(--jp-text-base);
}

.jp-about-section-content .jp-btn {
  margin-top: var(--jp-space-3);
}

/* ==================================================================
   PRINCIPLES
   ================================================================== */

.jp-about-principles {
  display: grid;

  gap: var(--jp-space-4);
}

.jp-about-principle {
  padding: var(--jp-space-5) 0;

  border-bottom: 1px solid var(--jp-border);
}

.jp-about-principle:first-child {
  padding-top: 0;
}

.jp-about-principle:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}

.jp-about-principle h3 {
  margin-bottom: var(--jp-space-2);

  font-size: var(--jp-text-lg);
}

.jp-about-principle p {
  max-width: 620px;

  margin: 0;

  color: var(--jp-text-muted);
}

/* ==================================================================
   CLOSING STATEMENT
   ================================================================== */

.jp-about-closing {
  display: flex;
  flex-direction: column;

  gap: var(--jp-space-4);

  margin-top: var(--jp-space-8);

  padding: clamp(2rem, 5vw, 4rem);

  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-xl);

  background: var(--jp-surface-accent);
}

.jp-about-closing span {
  color: var(--jp-primary);

  font-size: var(--jp-text-sm);
  font-weight: var(--jp-weight-bold);

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.jp-about-closing strong {
  max-width: 780px;

  color: var(--jp-text);

  font-size: clamp(1.6rem, 4vw, 2.8rem);

  font-weight: var(--jp-weight-bold);

  letter-spacing: -0.025em;

  line-height: 1.2;
}

/* ==================================================================
   TABLET / MOBILE
   ================================================================== */

@media (max-width: 767px) {
  .jp-about-hero {
    padding-top: var(--jp-space-4);
  }

  .jp-about-section {
    grid-template-columns: 1fr;

    gap: var(--jp-space-6);
  }

  .jp-about-section-heading {
    max-width: none;
  }

  .jp-about-section-content p {
    font-size: var(--jp-text-base);
  }
}