/* The Sitepress tree: blog index, posts, and the standalone pages.
 *
 * Article typography styles `article` directly. A few posts carried `prose`
 * classes, but the typography plugin was never installed, so they did nothing
 * and were dropped. */
@layer components {
  .page {
    margin-inline: auto;
    max-inline-size: 64rem;
    padding: var(--block-space-double) var(--inline-space-double);
  }

  .page__header {
    padding-block-end: var(--block-space-double);

    img {
      block-size: 3rem;
      flex-shrink: 0;
      inline-size: 3rem;
      margin-inline: auto;
    }
  }

  /* Post body
  /* ------------------------------------------------------------------------ */

  article {
    color: var(--color-ink);
    font-size: var(--text-normal);
    line-height: 1.75;
    margin-inline: auto;
    max-inline-size: 65ch;

    > * {
      margin-block-end: 1em;
    }

    h2, h3 {
      color: var(--color-ink-darkest);
    }

    h2 {
      font-size: var(--text-large);
      font-weight: 700;
      text-align: center;
      text-wrap: balance;
    }

    h3 {
      font-weight: 700;
    }

    ol, ul {
      list-style: revert;
      padding-inline-start: 1.1em;
    }

    /* Screenshots and clips centre themselves; a post only sets a max width
       when it wants one narrower than the column */
    :is(img, video) {
      display: block;
      margin-inline: auto;
      max-inline-size: 100%;
    }
  }

  .ordinal {
    font-variant-numeric: ordinal;
  }

  .post__back {
    display: block;
    padding-block: var(--block-space);
    text-align: center;
  }

  /* Blog index
  /* ------------------------------------------------------------------------ */

  .blog-index {
    margin-inline: auto;
    max-inline-size: 36rem;
  }

  .blog-index__header {
    margin-block-end: var(--block-space-double);
  }

  .blog-index__posts {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .blog-index__title {
    text-wrap: balance;

    @media (any-hover: hover) {
      a:hover & {
        text-decoration: underline;
      }
    }
  }

  .blog-index__date {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    white-space: nowrap;
  }

  /* Screenshot gallery — swipes horizontally, one figure snapping into view
  /* ------------------------------------------------------------------------ */

  .gallery {
    display: flex;
    gap: calc(var(--inline-space) * 2);
    overflow-x: scroll;
    padding-block-end: var(--block-space-half);
    padding-inline: var(--inline-space-half);
    scroll-snap-type: x mandatory;

    @media (min-width: 640px) {
      gap: calc(var(--inline-space) * 4);
      padding-inline: calc(var(--inline-space) * 7);
    }
  }

  .gallery__figure {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto; /* don't let the images stretch */
    gap: var(--block-space);
    inline-size: 83.333%;
    scroll-snap-align: center;

    @media (min-width: 640px) {
      inline-size: fit-content;
    }

    img {
      border-radius: 0.5em;
      border: 1px solid var(--color-ink-lighter);
      box-shadow: var(--shadow);
      max-inline-size: 100%;
    }
  }

  .gallery__caption {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    text-align: center;
  }

  /* A screenshot beside its explanation, stacking on narrow screens */
  .feature-split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);

    @media (min-width: 768px) {
      flex-wrap: nowrap;
    }
  }

  .feature-split__image {
    margin-block-start: 0;
    margin-inline: auto;

    @media (min-width: 768px) {
      inline-size: 40%;
    }
  }
}