/*
 * Signal and Echo design system: the post-list site part (site profile, issue 164 slice 18;
 * .claude/reference/site-profile.md s4, s6).
 *
 * .sds-post-list holds .sds-post items. Each post has, in order and each optional: a meta line in the
 * eyebrow role (.sds-post-meta: date, kind), a title (.sds-post-title, usually holding a link), a
 * byline (.sds-post-byline), a hook (.sds-post-hook), tags (.sds-post-tags, holding .sds-tag) and
 * actions (.sds-post-actions). The default is a stacked list split by rules: a devlog or a list of
 * legal documents.
 *
 * data-variant="catalog" is a grid of posts: each post adds a media part (.sds-post-media, 16:9) and
 * an aside of key and value meta (.sds-post-aside, a dl). The grid is 1 column up to 37.5em, 2 above
 * that, 3 from 75em and 4 from 120em, and it never adds a 5th: it stops at --sds-page-max (taste
 * call 3).
 *
 * The list sets no page gutter: it sits in the site's own section, which pads it. It stops at the cap
 * and centers there, so its section's background still bleeds. Widths are site breakpoints
 * (600, 1200 and 1920 CSS pixels), not the game size classes.
 * Every value is a token; the only literals are 0, percentages, ratios and unitless numbers.
 */

/* sds-claims: post-list */

@layer sds.reset, sds.components;

@layer sds.components {
  .sds-post-list {
    display: flex;
    flex-direction: column;
    max-inline-size: var(--sds-page-max);
    margin-block: 0;
    margin-inline: auto;
    padding: 0;
    list-style: none;
  }

  .sds-post {
    display: flex;
    flex-direction: column;
    gap: var(--sds-space-2);
    min-inline-size: 0;
    padding-block: var(--sds-space-5);
    border-block-end: var(--sds-border-thin) solid var(--sds-color-line);
  }

  .sds-post:first-child {
    padding-block-start: 0;
  }

  .sds-post-meta {
    display: block;
    margin: 0;
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-ui);
    font-size: calc(var(--sds-type-eyebrow-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-eyebrow-weight);
    letter-spacing: var(--sds-type-eyebrow-tracking);
    line-height: var(--sds-type-eyebrow-line-height);
    text-transform: var(--sds-type-eyebrow-transform);
  }

  .sds-post-title {
    margin: 0;
    color: var(--sds-color-text-strong);
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-heading-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    letter-spacing: var(--sds-type-heading-tracking);
    line-height: var(--sds-type-heading-line-height);
  }

  /* The title link reads as the title; it turns accent and shows its line on hover. */
  .sds-post-title a {
    color: inherit;
    text-decoration-line: none;
    border-radius: var(--sds-radius-sm);
  }

  .sds-post-title a:where(:hover) {
    color: var(--sds-color-accent-text);
    text-decoration-line: underline;
    text-decoration-style: var(--sds-link-decoration);
    text-decoration-thickness: var(--sds-link-thickness);
    text-underline-offset: var(--sds-link-offset);
  }

  .sds-post-title a:where(:focus-visible) {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  .sds-post-byline {
    margin: 0;
    color: var(--sds-color-text-muted);
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-small-weight);
    letter-spacing: var(--sds-type-small-tracking);
    line-height: var(--sds-type-small-line-height);
  }

  .sds-post-hook {
    margin: 0;
    color: var(--sds-color-text-soft);
  }

  .sds-post-tags,
  .sds-post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sds-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sds-post-tags {
    margin-block-start: var(--sds-space-1);
  }

  .sds-post-actions {
    gap: var(--sds-space-3);
    margin-block-start: var(--sds-space-2);
  }

  .sds-post-media {
    display: block;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--sds-radius-md);
    background: var(--sds-color-surface-raised);
  }

  .sds-post-media :where(img, video, picture, svg) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* --- the aside: key and value pairs (platform, year, status), keys in the eyebrow role. */

  .sds-post-aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sds-space-1) var(--sds-space-4);
    margin: 0;
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-small-weight);
    letter-spacing: var(--sds-type-small-tracking);
    line-height: var(--sds-type-small-line-height);
  }

  .sds-post-aside dt {
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-ui);
    font-size: calc(var(--sds-type-eyebrow-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-eyebrow-weight);
    letter-spacing: var(--sds-type-eyebrow-tracking);
    text-transform: var(--sds-type-eyebrow-transform);
  }

  .sds-post-aside dd {
    margin: 0;
    color: var(--sds-color-text);
  }

  /* --- catalog: a grid of posts, 1 column on a phone and 4 at most, inside the page cap. */

  .sds-post-list[data-variant="catalog"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sds-space-7) var(--sds-space-6);
  }

  .sds-post-list[data-variant="catalog"] > .sds-post {
    padding: 0;
    border: 0;
  }

  .sds-post-list[data-variant="catalog"] .sds-post-media {
    margin-block-end: var(--sds-space-2);
  }

  .sds-post-list[data-variant="catalog"] .sds-post-aside {
    margin-block-start: auto;
    padding-block-start: var(--sds-space-3);
    border-block-start: var(--sds-border-thin) solid var(--sds-color-line);
  }

  @media (width > 37.5em) {
    .sds-post-list[data-variant="catalog"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 75em) {
    .sds-post-list[data-variant="catalog"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 120em) {
    .sds-post-list[data-variant="catalog"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}