// The home page's own layout: the grids each section drops its cards into,
// plus the skip link. Everything else belongs to a component.
.landing-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(var(--landing-columns, 3), minmax(0, 1fr));
  }
}

.landing-grid--four {
  @media (min-width: 1024px) {
    --landing-columns: 4;
  }
}

.landing-grid--logos {
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  @media (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.landing-issues {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;

  // `@pi/ui`'s reset spaces every `li + li`; this list is spaced by `gap`.
  > li {
    margin: 0;
  }
}

.landing-subsection {
  margin-top: 3rem;
}

.landing-subsection__title {
  margin: 0;
  font-size: 1.25rem;
}

.landing-subsection__lead {
  margin: 0.375rem 0 0;
  color: var(--pi-color-grey-600, #5b5b6b);
}

.landing-form__wrap {
  max-width: 40rem;
}

.landing-skip {
  position: absolute;
  left: -9999px;

  &:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--pi-color-white, #fff);
    border-radius: 0.5rem;
  }
}

// "See the full radar" under the section's summary of it.
.landing-section__more {
  margin: 2rem 0 0;

  a {
    color: var(--pi-color-primary);
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}