/* ══════════════════════════════════════════════════════════════════
   CATALOG PAGE — Theme overrides for the plugin-rendered /catalog/ page
   ══════════════════════════════════════════════════════════════════

   The /catalog/ page is rendered entirely by the Sisu Admin plugin
   (class-catalog.php → render_catalog). It outputs:

     .sisu-catalog
       .sisu-catalog-header (title + description)
       .sisu-catalog-body          (grid: 220px sidebar + 1fr content)
         .sisu-catalog-sidebar     (categories list)
         .sisu-catalog-content     (header subtitle + browse-by-category tiles)
           .sisu-category-browse
             .sisu-category-grid   (5-column rigid grid — the problem)
               .sisu-category-card
                 .sisu-category-image-wrap
                   img + h3.sisu-category-name

   The plugin hard-codes `grid-template-columns: repeat(5, 1fr)` for the
   tile grid. When the catalog page is rendered inside its own narrow
   content column (the right-hand 1fr of a 220px+1fr layout), 5 columns
   squeeze the tiles to ~90-110px wide and the longer labels like
   "Sauna & Ice Bath Contrast Packages" overflow the tile.

   Theme-level fix: override the plugin grid with auto-fit + minmax so
   the tile count adapts to the available column width, and let the
   label wrap cleanly inside the tile.

   These overrides target `.sisu-catalog-content .sisu-category-grid`
   (i.e. only the embedded version inside the catalog 2-col layout —
   not the plugin's stand-alone shortcode usage elsewhere) so we don't
   break tiles where they have full-width to play with.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   Tile grid — auto-fit min 200px
   ───────────────────────────────────────────────────────────────── */
.sisu-catalog-content .sisu-category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:20px;
}

/* Stop grid items from forcing their content width and blowing the
   parent track open (the default min-width:auto on grid items is what
   was letting long labels overflow). */
.sisu-catalog-content .sisu-category-grid .sisu-category-card{
  min-width:0;
}

/* ─────────────────────────────────────────────────────────────────
   Tile label — clean wrapping, no overflow, sensible line-height
   ───────────────────────────────────────────────────────────────── */
.sisu-catalog-content .sisu-category-card .sisu-category-name{
  /* Wrap long labels (default rules had no word-break/hyphens fallback) */
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  /* Slightly tighter padding so labels fit on smaller tiles */
  padding:14px 14px;
  font-size:.95rem;
  line-height:1.3;
}

/* ─────────────────────────────────────────────────────────────────
   Catalog header — title and description block above the tiles
   The plugin's header puts title left, description right. On wider
   screens this looks fine; on narrower content columns it crowds.
   Subtle theme polish (does not break plugin styling).
   ───────────────────────────────────────────────────────────────── */
.sisu-catalog .sisu-catalog-title{
  font-family:var(--f, 'Prompt', sans-serif);
  letter-spacing:-.01em;
}

/* ─────────────────────────────────────────────────────────────────
   Sidebar categories list — make the active state match theme tokens
   so it doesn't look like a different design language.
   ───────────────────────────────────────────────────────────────── */
.sisu-catalog-sidebar a.is-active,
.sisu-catalog-sidebar a[aria-current="page"]{
  color:var(--ice, #3D87C4);
  font-weight:600;
}

/* ─────────────────────────────────────────────────────────────────
   Defensive: if the sidebar duplicates the tiles (it does — both lists
   are categories), keep the visual hierarchy clear by emphasising the
   tiles over the sidebar text.
   ───────────────────────────────────────────────────────────────── */
.sisu-catalog-sidebar{font-size:.92rem}