/* A26 Collection component · v1.0.0-alpha.0016-content-structure */
@layer a26.components {
  .a26-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--a26-collection-gap, var(--a26-space-3));
  }
  .a26-collection-item {
    min-height: var(--a26-control-hit-min);
    border: 0;
    border-radius: var(--a26-collection-radius, var(--a26-radius-lg));
    background: var(--a26-bg-surface);
    color: var(--a26-text-primary);
    padding: var(--a26-space-3);
    display: grid;
    gap: var(--a26-space-2);
    text-align: start;
    cursor: pointer;
  }
  .a26-collection-item:hover { background: var(--a26-fill-quaternary); }
  .a26-collection-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-accent) 70%, transparent); outline-offset: 2px; }
  .a26-collection-item__image {
    min-height: 78px;
    border-radius: calc(var(--a26-radius-lg) - 4px);
    background: linear-gradient(145deg, var(--a26-fill-secondary), var(--a26-fill-quaternary));
    display: grid;
    place-items: center;
    font: var(--a26-font-title-2);
    color: var(--a26-accent);
  }
  .a26-collection-item__title { font: var(--a26-font-footnote); color: var(--a26-text-secondary); }
}