/*
 * Inhaltsstile: Blog, Beiträge und StreamField-Blöcke.
 *
 * Gerüst, Tokens, Layout-Primitive und Skelett stehen in den Dateien daneben
 * (tokens.css, base.css, layout.css, frame.css, skeleton.css). Hier stehen nur
 * Klassen, die aus den Inhalts-Templates kommen; Werte sind Tokens.
 */

@layer components {
  .paging-footer {
    margin-block-start: var(--space-l);
  }

  .post-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .post {
    padding-block: var(--space-m);
    border-block-end: var(--border-thin) solid var(--color-line-soft);
  }

  .post-meta {
    margin-block: var(--space-xxs);
    color: var(--color-text-muted);
  }

  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    margin-block: var(--space-m);
  }

  .pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pagination-link {
    display: inline-block;
    padding: var(--space-xs) var(--space-s);
    border: var(--border-thin) solid transparent;
    border-radius: var(--radius-box);
  }

  .pagination-link.is-disabled {
    color: var(--color-text-muted);
  }

  .pagination-link.is-current {
    font-weight: var(--weight-bold);
  }

  /* The cover image of a post: spacing only, like the blocks below. */
  figure.post-cover {
    margin: 0 0 var(--space-l);
  }

  /* Imported text may contain very long unbroken runs -- pasted URLs and
     hashtag or handle chains without spaces.  Without this the page itself
     scrolls sideways on every screen size, so the run is allowed to break. */
  .block-paragraph,
  .block-paragraph a {
    overflow-wrap: anywhere;
  }

  /* StreamField blocks: only spacing, no design decision. */
  figure.block-image {
    margin: var(--space-l) 0;
  }

  figure.block-image figcaption {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-s);
  }

  .download-meta {
    color: var(--color-text-muted);
    font-size: var(--text-s);
  }

  .gallery-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gallery-figure {
    margin: 0;
  }

  .gallery-caption {
    max-width: var(--gallery-caption-max);
    overflow-wrap: anywhere;
  }

  /* Native <dialog>: the browser positions and centres it and paints the
     backdrop, so only the neutral chrome of the element is reset here. */
  .gallery-modal {
    max-width: var(--modal-max-inline);
    max-height: var(--modal-max-block);
    padding: 0;
    border: 0;
    overflow: auto;
    color: inherit;
    background: transparent;
  }

  .gallery-modal::backdrop {
    background: var(--color-backdrop);
  }

  .gallery-modal-content {
    padding: var(--space-m);
    background: var(--color-surface-raised);
    border-radius: var(--radius-box);
  }

  .gallery-modal-nav {
    display: flex;
    gap: var(--space-m);
    justify-content: space-between;
    margin-top: var(--space-s);
  }

  /* Preserve text tables on narrow screens without widening the page. */
  .block-table {
    max-width: 100%;
    overflow-x: auto;
    margin-block: var(--space-m);
  }
  .block-table th,
  .block-table td {
    padding: var(--space-xs) var(--space-s);
    vertical-align: top;
  }

  .block-audio audio {
    width: 100%;
    max-width: var(--audio-max);
  }
}