/*  Copyright (C) Bitstem GmbH
 *  All rights reserved.
 *
 *  This source code is proprietary and confidential.
 *  Unauthorized copying, distribution, or disclosure of this file,
 *  in whole or in part, is strictly prohibited unless explicitly
 *  permitted in writing by Bitstem GmbH.
 *
 *  Author: Klaus Kuehnhammer <klaus@bitstem.com>
 */

/* News list and post. Built from the design's tokens: rows separated by
   its dotted divider, product-style square images, mono type with the
   display serif for post titles as in prose headings. */

@layer components {
  .news-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .news-list li + li {
    border-top: 1px dotted var(--color-divider-dotted);
  }

  .news-post {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-4);
    padding-block: var(--space-4);
  }

  /* The image column exists only for posts that have a cover image. */
  .news-post:has(.news-post__image) {
    grid-template-columns: 5.5rem 1fr;
  }

  .news-post__image {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: contain;
  }

  .news-post__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .news-post__date,
  .news-article__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .news-post__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--line-height-tight);
  }

  .news-post:hover .news-post__title,
  .news-post:focus-visible .news-post__title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .news-post__excerpt {
    font-size: var(--text-sm);
  }

  .news-empty {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .news-article__date {
    margin-block: calc(-1 * var(--space-4)) var(--space-5);
    text-align: center;
  }

  .news-article__image {
    inline-size: 100%;
    max-inline-size: 22rem;
    margin: 0 auto var(--space-6);
  }

  .news-article__back {
    margin-block-start: var(--space-8);
    text-align: center;
    font-size: var(--text-sm);
  }

  .news-article__back a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}