/* ============================================================
   index.css — home / post listing page styles
   ============================================================ */

@layer components {

  /* ── Hero ── */
  .hero {
    padding-block: var(--space-xl) var(--space-l);
    border-block-end: 1px solid var(--rule);
  }

  .hero-eyebrow {
    font-family: var(--sans);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin-block-end: var(--space-s);
  }

  .hero-title {
    font-family: var(--serif);
    font-size: var(--step-4);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-block-end: var(--space-s);
  }

  .hero-desc {
    font-family: var(--serif);
    font-size: var(--step-1);
    color: var(--ink-2);
    line-height: 1.7;
    /* Avoid max-width on text content — use ch units instead for reflow safety */
    max-inline-size: 52ch;
  }

  /* ── Tag filter bar ── */
  .tag-filter {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--rule);
  }

  .tag-filter__label {
    font-family: var(--sans);
    font-size: var(--step--1);
    color: var(--ink-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .tag--active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);

    &:hover {
      background: var(--ink-2);
      color: var(--paper);
      border-color: var(--ink-2);
    }
  }

  /* ── Post list ── */
  .post-list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-s);
  }

  .post-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-s);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--rule);
    container-type: inline-size;

    &:first-child {
      border-block-start: 1px solid var(--rule);
    }

    /* Stack on very narrow containers */
    @container (max-width: 24rem) {
      grid-template-columns: 1fr;
    }
  }

  .post-list-link {
    text-decoration: none;
    display: block;

    &:hover .post-list-title {
      color: var(--ink-3);
    }
  }

  .post-list-title {
    font-family: var(--serif);
    font-size: var(--step-1);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.4;
    margin-block-end: var(--space-2xs);
    transition: color var(--transition);
  }

  .post-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .post-list-date {
    font-family: var(--sans);
    font-size: var(--step--1);
    color: var(--ink-4);
    white-space: nowrap;
  }

  .post-list-readtime {
    font-family: var(--sans);
    font-size: var(--step--1);
    color: var(--ink-4);
    white-space: nowrap;
    text-align: end;
    align-self: start;
    padding-block-start: 0.15em;
  }

  .post-list-audio {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--sans);
    font-size: var(--step--1);
    color: var(--ink-4);
  }
}