/* ============================================================
   .grid-cards — proposed canonical auto-fit card grid (loaded only on /docs/ui-kit)
   ============================================================
   Replaces 10 auto-fit grid declarations across production:
     .results-grid          (style.css, 140px)        -> --compact (rounded up; chips, not cards)
     .ssl-summary-fields    (style.css, 220px)        -> --compact
     .tools-related-grid    (tools.css, 220px)        -> --compact
     .tools-index-grid      (tools.css, 300px)        -> --wide
     .location-cards-grid   (locations.css, 280px)    -> default
     .network-identity-grid (location-detail.css, 200px) -> --compact (rounded up)
     .use-cases-grid        (privacy.css, 250px)      -> default (rounded up)
     .rights-grid           (privacy.css, 280px)      -> default
     .security-features     (privacy.css, 300px)      -> --wide (rounded up)
     .faq-grid              (privacy.css, 350px)      -> --wide (rounded down)

   Three width buckets (compact / default / wide) + a single gap modifier.
   Hardcoded 16/20/24px gaps in privacy.css collapse onto the canonical
   var(--space-lg) (24px), with --tight (16px) for chip-density grids.

   Sits at section level — peer of .prose, child of .section-pad > .container.
   Cards inside use .card-next (or any card variant). Does NOT carry
   background or padding — surface is each card's responsibility.

   Slots:
     .grid-cards            base; minmax(280px, 1fr) auto-fit + var(--space-lg) gap

   Width modifiers:
     --compact   minmax(220px, 1fr) — chip-grids, narrow card variants
     --wide      minmax(340px, 1fr) — generous cards (FAQ, security feature blocks)

   Gap modifier:
     --tight     gap: var(--space-md) — chip-density compact grids only

   Mobile (≤540px): all variants collapse to a single 1fr column.
   ============================================================ */

.grid-cards {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-cards--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grid-cards--wide {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.grid-cards--tight {
    gap: var(--space-md);
}

@media (max-width: 540px) {
    .grid-cards,
    .grid-cards--compact,
    .grid-cards--wide {
        grid-template-columns: 1fr;
    }
}