/* Marketing page sections: a hairline-separated band with a heading and either a stacked
   intro above a wide visual or a text column beside an artifact (split) */
@layer components {
  .home-section {
    border-bottom: 1px solid var(--color-border);

    .home-section__container {
      max-width: var(--page-width);
      margin: 0 auto;
      padding: var(--space-24) var(--space-6);
    }

    /* Heading and paragraph stacked above a full-width visual */
    .home-section__intro {
      max-width: 36rem;
      margin-bottom: var(--space-10);

      p {
        margin-top: var(--space-4);
        font-size: var(--text-lg);
        color: var(--color-text-muted);
        text-wrap: pretty;
      }
    }

    .home-section__container--split {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-20);
      align-items: start;
    }

    .home-section__text p {
      max-width: 36ch;
      margin-top: var(--space-5);
      font-size: var(--text-lg);
      color: var(--color-text-muted);
      text-wrap: pretty;
    }

    /* Prose beside a split heading, under the same ink rule as lists */
    .home-section__body {
      max-width: 40rem;
      padding-top: var(--space-4);
      border-top: 2px solid var(--color-text);

      p {
        margin: 0 0 var(--space-4);
        font-size: var(--text-lg);
        color: var(--color-text-muted);
        text-wrap: pretty;
      }
    }
  }

  .home-section__title {
    max-width: 22ch;
    margin: 0;
    font-size: 2.25rem;
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  @media (max-width: 960px) {
    .home-section .home-section__intro,
    .home-section .home-section__container--split {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }

    .home-section .home-section__container {
      padding-top: var(--space-16);
      padding-bottom: var(--space-16);
    }
  }

  @media (max-width: 640px) {
    .home-section__title {
      font-size: var(--text-3xl);
    }
  }
}