@layer components, layout;

@layer components {
  .library-route {
    gap: var(--s7);
  }

  .library-hero {
    max-width: var(--reading-max);
  }

  .library-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem);
    align-items: end;
    gap: var(--s4);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  .library-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .library-results {
    display: grid;
    gap: var(--s7);
  }

  .library-group > header {
    max-width: var(--reading-max);
  }
}

@layer layout {
  @media (max-width: 767px) {
    .library-route,
    .library-results {
      gap: var(--s6);
    }

    .library-controls {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}