/* ==================================================================
   JUSTPIXEL
   HOME
   ================================================================== */

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

.jp-home-hero {
  position: relative;

  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem);

  overflow: hidden;

  background: linear-gradient(
    135deg,
    var(--jp-surface-accent) 0%,
    var(--jp-bg) 58%
  );

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

/*
 * Very subtle brand glow.
 * Decorative only.
 */
.jp-home-hero::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -180px;
  right: -120px;

  border-radius: 50%;

  background: color-mix(in srgb, var(--jp-primary) 9%, transparent);

  pointer-events: none;
}

.jp-home-hero-grid {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  align-items: center;

  gap: clamp(3rem, 7vw, 6rem);
}

/* ------------------------------------------------------------------
   HERO TEXT
   ------------------------------------------------------------------ */

.jp-home-hero-content {
  max-width: 720px;
}

.jp-home-eyebrow,
.jp-home-section-label {
  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-home-hero h1 {
  max-width: 700px;

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

  font-size: clamp(3rem, 7vw, 5.4rem);

  letter-spacing: -0.045em;

  line-height: 0.98;
}

.jp-home-hero-copy {
  max-width: 650px;

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

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

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

  line-height: 1.65;
}

.jp-home-hero-actions {
  display: flex;
  flex-wrap: wrap;

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

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

.jp-home-hero-visual {
  display: flex;

  justify-content: center;
}

/* ------------------------------------------------------------------
   CODE WINDOW
   ------------------------------------------------------------------ */

.jp-home-code-window {
  width: min(100%, 460px);

  overflow: hidden;

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

  background: var(--jp-surface);

  box-shadow: var(--jp-shadow);
}

.jp-home-code-window-bar {
  display: flex;

  gap: 6px;

  padding: var(--jp-space-4) var(--jp-space-5);

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

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

.jp-home-code-window-bar span {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: var(--jp-border-strong);
}

.jp-home-code-content {
  display: flex;
  flex-direction: column;

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

  padding: var(--jp-space-8) var(--jp-space-6);
}

.jp-code-line {
  width: 88%;
  height: 12px;

  border-radius: var(--jp-radius-pill);

  background: color-mix(in srgb, var(--jp-primary) 24%, var(--jp-surface-soft));
}

.jp-code-line-medium {
  width: 68%;
}

.jp-code-line-short {
  width: 42%;
}

.jp-code-gap {
  height: var(--jp-space-2);
}

.jp-home-code-status {
  display: flex;
  align-items: center;

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

  padding: var(--jp-space-4) var(--jp-space-5);

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

  background: var(--jp-surface-soft);

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

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

.jp-home-status-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--jp-success);
}

/* ==================================================================
   STANDARD HOME SECTIONS
   ================================================================== */

.jp-home-section {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.jp-home-section + .jp-home-section {
  border-top: 1px solid var(--jp-border);
}

.jp-home-section-heading {
  max-width: 720px;

  margin-bottom: var(--jp-space-8);
}

.jp-home-section-heading h2,
.jp-home-library h2,
.jp-home-build h2 {
  margin-bottom: var(--jp-space-4);

  font-size: clamp(2rem, 4vw, 3rem);

  letter-spacing: -0.025em;
}

.jp-home-section-heading p {
  font-size: var(--jp-text-lg);
}

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

.jp-home-principles {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

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

.jp-home-principle {
  padding: var(--jp-space-8) var(--jp-space-8) 0 0;
}

.jp-home-principle + .jp-home-principle {
  padding-left: var(--jp-space-8);

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

.jp-home-principle-number {
  display: block;

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

  color: var(--jp-primary);

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

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

.jp-home-principle h3 {
  margin-bottom: var(--jp-space-3);

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

.jp-home-principle p {
  margin: 0;

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

/* ==================================================================
   SOFTWARE LIBRARY FEATURE
   ================================================================== */

.jp-home-library {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(380px, 1.1fr);

  align-items: center;

  gap: clamp(3rem, 7vw, 6rem);

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

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

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

.jp-home-library-content {
  max-width: 560px;
}

.jp-home-library-content p {
  color: var(--jp-text-muted);
}

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

/* ------------------------------------------------------------------
   MINI TOOL PREVIEWS
   ------------------------------------------------------------------ */

.jp-home-library-preview {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

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

.jp-home-mini-tool {
  display: flex;
  align-items: center;

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

  min-width: 0;

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

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

  background: var(--jp-surface);

  color: var(--jp-text);

  text-decoration: none;

  box-shadow: var(--jp-shadow-xs);

  transition:
    transform var(--jp-transition),
    border-color var(--jp-transition),
    box-shadow var(--jp-transition);
}

.jp-home-mini-tool:hover {
  transform: translateY(-2px);

  border-color: var(--jp-border-strong);

  box-shadow: var(--jp-shadow-sm);

  color: var(--jp-text);

  text-decoration: none;
}

.jp-home-mini-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 48px;

  width: 48px;
  height: 48px;

  border-radius: var(--jp-radius-md);

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

  color: var(--jp-primary);

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

.jp-home-mini-tool > div:last-child {
  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 2px;
}

.jp-home-mini-tool strong {
  color: var(--jp-text);
}

.jp-home-mini-tool span {
  color: var(--jp-text-muted);

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

/* ==================================================================
   WHAT WE BUILD
   ================================================================== */

.jp-home-build {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap: clamp(2.5rem, 7vw, 6rem);

  align-items: start;
}

.jp-home-build-heading {
  max-width: 520px;
}

.jp-home-build-copy {
  max-width: 620px;

  padding-top: var(--jp-space-2);
}

.jp-home-build-copy p {
  font-size: var(--jp-text-lg);
}

.jp-home-build-copy .jp-muted {
  font-size: var(--jp-text-base);
}

/* ------------------------------------------------------------------
   TEXT LINK
   ------------------------------------------------------------------ */

.jp-home-text-link {
  display: inline-flex;
  align-items: center;

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

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

  color: var(--jp-primary);

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

  text-decoration: none;
}

.jp-home-text-link:hover {
  gap: var(--jp-space-3);

  text-decoration: none;
}

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

@media (max-width: 991px) {
  .jp-home-hero-grid {
    grid-template-columns: 1fr;
  }

  .jp-home-hero-content {
    max-width: 760px;
  }

  .jp-home-hero-visual {
    justify-content: flex-start;
  }

  .jp-home-library {
    grid-template-columns: 1fr;
  }

  .jp-home-build {
    grid-template-columns: 1fr;

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

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

@media (max-width: 767px) {
  .jp-home-hero {
    padding: 3.5rem 0;
  }

  .jp-home-hero h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .jp-home-hero-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .jp-home-hero-actions .jp-btn {
    width: 100%;
  }

  /* Principles */

  .jp-home-principles {
    grid-template-columns: 1fr;
  }

  .jp-home-principle,
  .jp-home-principle + .jp-home-principle {
    padding: var(--jp-space-6) 0;

    border-left: 0;
  }

  .jp-home-principle + .jp-home-principle {
    border-top: 1px solid var(--jp-border);
  }

  /* Library */

  .jp-home-library {
    padding: var(--jp-space-6);
  }

  .jp-home-library-preview {
    grid-template-columns: 1fr;
  }
}