/* ═══════════════════════════════════════════════════════════════
   tools.css - Tools Index & Category Page Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Tools grid ───────────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
@media (max-width: 640px) { .tools-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 400px) { .tools-grid { grid-template-columns: 1fr; } }

/* ── Category header ──────────────────────────────────────────── */
.tools-cat-header {
  padding: 48px 0 32px;
}
.tools-cat-header h1 {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}

/* ── Filter tabs ──────────────────────────────────────────────── */
.tools-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tools-filter-tab {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  transition: all 0.15s;
}
.tools-filter-tab:hover { border-color: #f27328; color: #f27328; }
.tools-filter-tab.is-active {
  background: #fef7f0;
  border-color: #f27328;
  color: #f27328;
  font-weight: 600;
}