/* Project page text: title, facts and description all look like regular text,
   in tight lines. One blank line separates the description from the facts. */
.project-details {
  font-size: 20px;
  line-height: 1;

  h1 {
    font-size: inherit;
  }

  dt,
  dd {
    display: inline;
    margin: 0;
  }
}

.project-description {
  margin-block-start: 1em;
}

/* Mobile: the title stands apart, then one block with the description above
   the facts */
@media (width < 768px) {
  .project-details {
    display: flex;
    flex-direction: column;

    h1 {
      margin-block-end: var(--spacing-7);
    }
  }

  .project-description {
    order: 1;
    margin-block-start: 0;
  }

  .project-facts {
    order: 2;
    margin-block-start: 1em;
  }
}

/* Mobile gallery: full-width images in a vertical stack, below the text.
   The negative margin cancels main's padding. There is no zoomed-out state. */
.project-gallery {
  margin-block-start: var(--spacing-5);
  margin-inline: calc(-1 * var(--spacing-3));

  ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
  }

  img {
    width: 100%;
  }
}

/* Desktop gallery: a full-screen horizontal strip that runs under the text and
   nav. --h is the height of a Full image; a Small one has --scale set inline by
   project.php. Everything derives from --h, so zooming scales the whole strip
   uniformly and project-zoom.js can animate it as one transform. */
@media (min-width: 768px) {
  .project-details {
    font-size: 11px;
    position: relative;
    z-index: 1;
    width: calc(28vw - 2 * var(--spacing-5));
  }

  .project-gallery {
    --h: 100vh;
    --start: 28vw;
    position: fixed;
    inset: 0;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;

    ul {
      flex-direction: row;
      align-items: center;
      gap: calc(var(--h) * 0.03);
      width: max-content;
      height: 100%;
      padding-inline: var(--start) var(--spacing-5);
    }

    li {
      flex: none;
    }

    img {
      width: auto;
      max-width: none;
      height: calc(var(--h) * var(--scale, 1));
      cursor: zoom-out;
    }

    &.is-zoomed-out {
      --h: 28vh;
      --start: var(--spacing-5);

      img {
        cursor: zoom-in;
      }
    }
  }
}