/* Shared first-course invitation on Today and Courses. */
.content.course-welcome-page > :is(.hero, .courses-directory-header) {
  min-height: 76px;
  padding: 12px 0 0;
}

.course-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 400px);
  align-items: center;
  gap: 40px;
  max-width: 1040px;
  min-height: min(620px, 65vh);
  margin: 36px auto 0;
  padding: 40px 24px;
}

.course-welcome-copy h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.course-welcome-copy p {
  margin: 22px 0 28px;
  color: var(--color-muted);
  font-size: 20px;
  line-height: 1.6;
  text-wrap: pretty;
}

.course-welcome .course-welcome-action {
  min-height: 50px;
  height: auto;
  gap: 20px;
  padding: 12px 22px;
  font-size: 16px;
  line-height: 1.4;
  white-space: normal;
}

.course-welcome-action svg {
  flex-shrink: 0;
  transform: rotate(45deg);
}

.course-welcome-nova {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  justify-self: center;
  image-rendering: pixelated;
}

@media (max-width: 1000px) {
  .course-welcome {
    grid-template-columns: minmax(0, 1.3fr) minmax(160px, 1fr);
    gap: 24px;
    padding-inline: 0;
  }
}

@media (max-width: 640px) {
  .course-welcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    margin-top: 32px;
    padding: 8px 0 32px;
  }

  .course-welcome-nova {
    grid-row: 1;
    max-width: 200px;
  }

  .course-welcome-copy h2 {
    font-size: 36px;
  }

  .course-welcome-copy p {
    margin: 18px 0 24px;
    font-size: 16px;
  }
}