/* Homepage About: the "About" field from the Panel (kirbytext, so it contains
   <p>s) in a space above the first project, row view only. Without JS always
   visible; with JS hidden until assets/js/about.js sets .is-open. */
.intro {
  /* Space above the first project, the text sits at its bottom */
  --intro-space: 45vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--intro-space);
  font-size: var(--font-size-l);
  line-height: 1.1;

  .home:has(.project-list[data-view="grid"]) & {
    display: none;
  }

  .js & {
    transition:
      opacity var(--transition-slow),
      visibility var(--transition-slow);
  }

  /* visibility, not only opacity: hidden, the text is neither focused, read out nor found */
  .js &:not(.is-open) {
    opacity: 0;
    visibility: hidden;
  }
}

/* Mobile: starts under the header, where the first project used to start
   (project-list.css), and is its own snap point above the first project */
@media (width < 768px) {
  .intro {
    margin-block-start: calc(-1 * var(--header-height));
    padding-block-start: var(--header-height);
    scroll-snap-align: start;
  }
}

/* Desktop: from the 3rd of the project list's 12 columns (2 columns + 2 gaps
   in). The type grows with the screen, as in the design, never below --font-size-l. */
@media (min-width: 768px) {
  .intro {
    padding-block-end: var(--spacing-7);
    padding-inline-start: calc((100% + var(--spacing-4)) / 6);
    font-size: max(var(--font-size-l), 2.25vw);
  }
}