/* ===========================================================================
   Category cards — the shared component behind BOTH surfaces:
     · the standalone homepage  (plugins/main)          — inline $CM glyphs
     · the category browser     (plugins/cat, 3 levels) — icon files from rns_cat.icon
   1:1 with the mockup D:\Downloads\camperplaats-categories.html.

   Kept in its own file (loaded by the homepage AND by system/header.php) so the
   two surfaces cannot drift apart. The mockup's dark-mode block is deliberately
   NOT ported.

   The mockup's extra tokens are declared LOCALLY on .catsec rather than on :root,
   so the surrounding pages keep their own --line/--muted and nothing else shifts.
   All selectors are scoped under .catsec because .ic/.body/.nm/.sub/.ct/.all/.tt
   are generic enough to collide with bootstrap/mp.css on inner pages.
   =========================================================================== */
.catsec{
  --amber-2:#c9741d;--amber-tint:#FBEFD9;--amber-line:#F0D19A;
  --ic-bg:#EEF3EC;--ic-line:#DDE6DC;
  --cat-line:#D5DCD4;--cat-muted:#6D796F;
  --cat-ease:cubic-bezier(.22,.61,.36,1);
  --cat-amber:#E08A2C;--cat-pine:#1F3D30;--cat-card:#fff;
}

/* section head: amber tick + eyebrow/title + "Alle categorieën" pill
   (used on the homepage; the category browser keeps its own SEO <h1> + lead) */
.catsec .shead{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.catsec .shead .tick{width:5px;height:26px;border-radius:3px;background:var(--cat-amber);flex-shrink:0}
.catsec .shead .tt .eb{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2)}
.catsec .shead .tt h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:23px;letter-spacing:-.02em;line-height:1.1;margin:0}
.catsec .shead .all{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--amber-2);border:1px solid var(--amber-line);background:var(--amber-tint);padding:9px 14px;border-radius:10px;transition:all .15s;white-space:nowrap;text-decoration:none}
.catsec .shead .all:hover{background:var(--cat-amber);color:#3a2408;border-color:var(--cat-amber)}
.catsec .shead .all svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none}

.catsec .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.catsec .cat{position:relative;display:flex;align-items:center;gap:13px;background:var(--cat-card);border:1px solid var(--cat-line);border-radius:13px;padding:9px 15px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:none;transition:transform .16s var(--cat-ease),border-color .16s,box-shadow .2s}
/* amber accent tick on the left edge — grows to full height on hover */
.catsec .cat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--cat-amber);border-radius:0 3px 3px 0;opacity:.35;transition:height .2s var(--cat-ease),opacity .2s}
.catsec .cat:hover{transform:translateY(-2px);border-color:var(--amber-line);box-shadow:0 14px 28px -20px rgba(21,33,28,.55)}
.catsec .cat:hover::before{height:100%;opacity:1}

.catsec .cat .ic{width:44px;height:44px;border-radius:11px;background:var(--ic-bg);border:1px solid var(--ic-line);display:grid;place-items:center;flex-shrink:0;transition:background .16s,border-color .16s}
/* inline SVG glyph (homepage) */
.catsec .cat .ic .cico{width:23px;height:23px;stroke:var(--cat-pine);stroke-width:1.6;fill:none;transition:stroke .16s}
/* raster icon, mockup size (drop images/cat/<slug>.png to use this) */
.catsec .cat .ic .cimg{width:33px;height:33px;object-fit:contain}
/* line-art SVG served as a FILE (rns_cat.icon) — same 24-viewBox line art as .cico,
   so it takes .cico's 23px, not the raster 33px. Its stroke colour lives in the file
   and therefore cannot follow the hover; the icon BOX still turns amber (as the
   mockup's own raster card behaves). */
.catsec .cat .ic .cisvg{width:23px;height:23px;object-fit:contain}
.catsec .cat:hover .ic{background:var(--amber-tint);border-color:var(--amber-line)}
.catsec .cat:hover .ic .cico{stroke:var(--amber-2)}

.catsec .cat .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.catsec .cat .nm{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catsec .cat .sub{font-size:11.5px;color:var(--cat-muted);line-height:1.4}

/* count as an amber pill — brand pop against the monotone card.
   Deliberately STATIC on hover: no colour change and, above all, no movement. */
.catsec .cat .ct{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:13px;color:var(--amber-2);background:var(--amber-tint);border:1px solid var(--amber-line);padding:3px 9px;border-radius:8px;flex-shrink:0;font-feature-settings:"tnum";line-height:1.35}
/* The chevron RESERVES its 16px from the start and only fades/slides via transform,
   so revealing it can never re-flow the row and shove the count sideways.
   (transform is composited — it does not participate in layout.) */
.catsec .cat .chev{width:16px;height:16px;stroke:var(--amber-2);stroke-width:2.4;fill:none;flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .18s var(--cat-ease),transform .18s var(--cat-ease)}
.catsec .cat:hover .chev{opacity:1;transform:none}
.catsec .cat:focus-visible{outline:2px solid var(--cat-amber);outline-offset:2px;border-radius:13px}

@media(max-width:900px){.catsec .catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.catsec .catgrid{grid-template-columns:1fr}.catsec .shead .tt h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){
  .catsec .cat,.catsec .cat::before,.catsec .cat .ic,.catsec .cat .ct,.catsec .cat .chev{transition:none}
  .catsec .cat:hover{transform:none}
}