@layer qyj.components.qyj-project-grid {
  qyj-project-grid {
    display: block;

    & > [role="group"]:not([hidden]) {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-block-end: 0.75rem;
    }

    & > [role="group"] > button {
      font: inherit;
      padding: 0.25rem 0.75rem;
      border: 1px solid currentColor;
      border-radius: var(--qyj-radius);
      background: transparent;
      color: inherit;
      cursor: pointer;
    }

    & > [role="group"] > button[aria-pressed="true"] {
      background: var(--qyj-color-accent);
      color: var(--qyj-color-surface);
    }

    & > ul {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
      gap: 1rem;
      padding: 0;
      list-style: none;
    }

    /* A parent adjusting a child it contains. Its sub-layer comes after the
       tile's in the Site-wide order, so this wins on every Page, whichever
       stylesheet arrives first — the tile's own margin is for tiles standing
       alone. */
    & > ul > li > qyj-project-tile {
      margin-block: 0;
    }
  }
}