/* Public Scout / Catalogue pages — these reuse the REAL in-app components from
   style.css (.dash-subnav, .scout-lenses, .scout-grid, .scout-card, .cat-series,
   .cat-set, .cat-detail-head, .cat-sort, .cat-more …) so they're pixel-identical
   to the signed-in Scout tab. This file only: (1) the page wrapper, (2) the
   desktop grid column counts (the app sets these under body.surge-app, which the
   public pages don't carry), (3) link resets (we use <a> where the app uses
   <button>), (4) the public footer CTA. */
/* width:100% is essential — the marketing body centers (doesn't stretch) its
   children, so without it the wrapper shrinks to the grid's natural width and
   the page looks narrow/inconsistent between languages. */
.cat-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 22px 20px 70px; }

/* The app bumps the grid to 6 / 2 columns on desktop under body.surge-app — match it. */
@media (min-width: 1024px) {
  .scout-public .scout-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .scout-public .cat-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The app's tiles/chips/sets are <button>s; we render <a>s for real navigation. */
.scout-public a.scout-card,
.scout-public a.cat-set,
.scout-public a.scout-lens,
.scout-public a.dash-subnav-btn,
.scout-public a.cat-back,
.scout-public a.cat-more,
.scout-public a.cat-sort-btn,
.scout-public a.cat-langpill { text-decoration: none; color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.cat-powered { text-align: center; font-size: 12px; color: var(--hint); margin-top: 26px; }
.cat-powered a { color: var(--muted); }
.cat-cta { margin-top: 30px; border: 1px solid var(--border2); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, var(--surface)), var(--surface)); padding: 28px; text-align: center; }
.cat-cta h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0 0 8px; }
.cat-cta p { font-size: 15px; color: var(--muted); margin: 0 0 18px; }
.cat-cta a { display: inline-block; background: var(--surge-grad); color: #fff; font-weight: 700; text-decoration: none; border-radius: 12px; padding: 12px 26px; }