/* ════════════════════════════════════════════════════════════
   AI FIT MAP — category.css
   Category hub + /tools/ index styling.
   Phase: Content Expansion Foundation — placeholder styles.
   Visual polish arrives in a later phase.
   ════════════════════════════════════════════════════════════ */

/* ── /tools/ index ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 32px 0 64px;
}

.cat-card {
  display: block;
  background: #fff;
  border: 1px solid #E2EAE6;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cat-card:hover {
  box-shadow: 0 8px 24px rgba(40, 80, 60, 0.10);
  transform: translateY(-2px);
}

.cat-card__icon { font-size: 32px; display: block; margin-bottom: 12px; }
.cat-card__name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20px; margin: 0 0 8px; }
.cat-card__desc { color: #5A6B62; font-size: 14px; line-height: 1.5; margin: 0; }

/* ── Category hub ── */
.cat-hero {
  padding: 48px 24px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.cat-hero h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 12px;
}

.cat-hero p { color: #5A6B62; font-size: 17px; max-width: 640px; }

.cat-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px 32px;
}

.cat-tool-card {
  background: #fff;
  border: 1px solid #E2EAE6;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-tool-card h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20px; margin: 0; }
.cat-tool-card p { color: #5A6B62; font-size: 14px; margin: 0; }
.cat-tool-rating { font-size: 14px; font-weight: 700; color: #1F6E8C; }
.cat-tool-card .btn { margin-top: auto; align-self: flex-start; }

.cat-guides {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}

.cat-guides h2, .cat-comparisons h2 { font-family: 'Nunito', sans-serif; font-weight: 800; }
.cat-guides a, .cat-comparisons a { color: #1F6E8C; font-weight: 600; }

.cat-guides__list, .cat-comparisons__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-comparisons {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 24px 64px;
}