/* The sitemap for people (/sitemap): short lists side by side (shop, styles, help), then the blog and
   every artist with their artworks across the full width. Plain links, easy to scan. */

@layer pages {
  .sitemap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10) var(--space-8);
    margin-bottom: var(--space-16);
  }

  @media (min-width: 700px) {
    .sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sitemap__section--wide { grid-column: 1 / -1; }
  }

  .sitemap__section { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

  .sitemap__title {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--bp-line);
    font-size: var(--fs-xl);
  }

  .sitemap__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .sitemap__list a { color: var(--bp-ink); text-decoration: none; }
  .sitemap__list a:hover { color: var(--bp-brand-600); text-decoration: underline; }

  @media (min-width: 700px) {
    .sitemap__list--columns { display: block; columns: 2; column-gap: var(--space-8); }
    .sitemap__list--columns li { break-inside: avoid; margin-bottom: var(--space-2); }
  }

  .sitemap__artists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-8) var(--space-8);
  }

  .sitemap__artist { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .sitemap__artist-name { font-size: var(--fs-lg); }
  .sitemap__artist-name a { color: var(--bp-heading); text-decoration: none; }
  .sitemap__artist-name a:hover { color: var(--bp-brand-600); }

  .sitemap__list--works { gap: var(--space-1); font-size: var(--fs-sm); }
  .sitemap__list--works a { color: var(--bp-ink-2); font-style: italic; }
}