/*
 * PostList static grid stylesheet (20-02 Task 1; ART-02, Phase 20 Codex Ruling
 * 2). The component emits ONLY data attributes; this sheet owns
 * grid-template-columns:repeat(N,1fr) and the narrow-screen collapse. Keyed on
 * data-columns exactly as public/noon-theme.css keys ProductGrid — no inline
 * style, no client JS. Served from /noon-post-list.css and hoisted into the
 * head by React's <link precedence> dedup whenever a PostList renders.
 */

/* Every rule below is in the `noon` cascade layer, so operator `customCss`
 * (unlayered) beats it regardless of specificity and of hoist order — the FULL
 * rationale lives ONCE, in `noon-theme.css`. Same layer name as all four Noon
 * sheets, so their order among themselves is unchanged; the rules are NOT
 * re-indented, so this file's only diff is the wrapper (260730-csc, #25). */
@layer noon {
  [data-block="PostList"] {
    display: grid;
    gap: 1.5rem;
  }

  [data-block="PostList"][data-columns="1"] {
    grid-template-columns: repeat(1, 1fr);
  }

  [data-block="PostList"][data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-block="PostList"][data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }

  [data-block="PostList"] [data-post-card] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  [data-block="PostList"] [data-post-card] img,
  [data-block="PostList"] [data-post-card] picture {
    display: block;
    width: 100%;
    height: auto;
  }

  /* NARROW-SCREEN COLLAPSE: every multi-column feed becomes a single column at
 * the locked breakpoint (proven by 20-03's computed-style responsive row). */
  @media (max-width: 640px) {
    [data-block="PostList"][data-columns="2"],
    [data-block="PostList"][data-columns="3"] {
      grid-template-columns: 1fr;
    }
  }

  /* ── close of @layer noon (260730-csc) ── */
}