/* =========================================================
   CyberEdge Technologies — Software Solutions catalogue
   ---------------------------------------------------------
   Loaded only by software-solutions.html — the filter chips and
   the card grid. Each card links to a demo application under
   demos/<slug>/, which carries its own self-contained app.css.
   Design tokens come from style.css.
   ========================================================= */

/* .sr-only lives in style.css — it is used by more than one page */

/* ---------- toolbar ---------- */
.sw-tools{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:16px 18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.sw-tools input[type=search]{
  font:inherit;font-size:.94rem;padding:.6rem .85rem;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);flex:1 1 260px;min-width:0;
}
.sw-tools input[type=search]:focus{outline:2px solid var(--ce-blue);outline-offset:-1px;border-color:var(--ce-blue)}
.sw-count{font-size:.85rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.sw-chip{
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);transition:.16s var(--ease);
}
.sw-chip:hover{border-color:var(--ce-blue);color:var(--ce-blue)}
.sw-chip.on{background:var(--ce-blue);border-color:var(--ce-blue);color:#fff}
.sw-chip-n{
  font-size:.7rem;font-weight:700;padding:.05rem .4rem;border-radius:999px;
  background:var(--bg-alt);color:var(--ink-3);
}
.sw-chip.on .sw-chip-n{background:rgba(255,255,255,.22);color:#fff}

/* ---------- groups + cards ---------- */
.sw-group{padding:0;margin:0 0 44px}
.sw-group-head{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px 16px;
  padding-bottom:14px;margin-bottom:20px;border-bottom:2px solid var(--line);
}
.sw-group-head h2{margin:0;font-size:clamp(1.25rem,.9rem + 1vw,1.75rem)}
.sw-group-head p{grid-column:1/-1;margin:0;color:var(--ink-2);font-size:.94rem;max-width:78ch}
.sw-group-n{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ce-blue);white-space:nowrap;
}
.sw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px}
.sw-card{
  display:flex;flex-direction:column;gap:10px;padding:20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:.18s var(--ease);
}
.sw-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9d8e8}
.sw-card-top{display:flex;align-items:center;justify-content:space-between}
/* background and colour are set per solution from solutions-icons.js */
.sw-ico{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;background:var(--bg-tint);color:var(--ce-blue);
}
.sw-ico svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.sw-n{
  font-size:.74rem;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.sw-card h3{margin:0;font-size:1.02rem;line-height:1.3}
.sw-card p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55;flex:1}
.sw-tags{display:flex;flex-wrap:wrap;gap:6px}
.sw-tags span{
  font-size:.7rem;font-weight:600;letter-spacing:.02em;padding:.2rem .5rem;
  border-radius:var(--radius);background:var(--bg-alt);color:var(--ink-2);
}
.sw-run{
  font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;text-align:left;
  text-decoration:none;align-self:flex-start;
  margin-top:4px;padding:.55rem .8rem;border-radius:var(--radius);
  border:1px solid var(--ce-blue);background:#fff;color:var(--ce-blue);
  display:inline-flex;align-items:center;gap:.4rem;transition:.16s var(--ease);
}
.sw-run:hover{background:var(--ce-blue);color:#fff}
.sw-run span{transition:transform .16s var(--ease)}
.sw-run:hover span{transform:translateX(3px)}
.sw-empty{
  padding:48px;text-align:center;color:var(--ink-3);
  border:1px dashed var(--line);border-radius:var(--radius-lg);
}

/* ---------- responsive ---------- */
@media (pointer:coarse){
  .sw-chip,.sw-run,.sw-nav{min-height:var(--tap)}
  .sw-tools input[type=search]{min-height:var(--tap);font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .sw-card{transition:none}
  .sw-card:hover{transform:none}
}
@media print{
  .sw-tools,.sw-chips,.sw-run{display:none!important}
  .sw-card{break-inside:avoid;box-shadow:none}
}