---
// GridGroup — gap:1px hairline-separated card grid wrapper.
//
// The separator technique is deliberate house style: a `gap: 1px` over a
// coloured parent background fakes borders without `border` shorthand. Each
// direct child paints its own background, which is what makes the 1px seam
// show. Do not "fix" this into `border`.
//
// Built from `.agents/templates/components/grid-group.astro` per task 08 of
// the Astro refactor. The landing page wraps six `RouteCard` instances in
// this group; the route-grid layout also pushes each card's link to the
// bottom, which `RouteCard` carries itself so this wrapper stays generic.

interface Props {
  /** Accessible label for the group, surfaced as `aria-label` on the section. */
  label: string;
  /** Number of columns at the widest breakpoint. */
  columns?: number;
}

const { label, columns = 3 } = Astro.props;
---

<section class="group" aria-label={label}>
  <div class="grid" style={`--columns: ${columns}`}>
    <slot />
  </div>
</section>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 1px; /* hairline separators, drawn by the parent background */
    background: var(--line);
  }

  /* Children paint their own background, which is what makes the 1px show. */
  .grid > :global(*) {
    background: var(--paper);
  }

  @media (max-width: 800px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
</style>
