/* ═══════════════════════════════════════════════════════════
   COLAB — tools.css
   Section 03 — TOOLS GRID
   Theme:  .section--light (warm cream #faf5ef)
   Layout: 2-col mobile 768px+, 4-col desktop 1024px+
   Rendered by: tools.js via window.renderTools()
   STATUS: DONE ✓
   ═══════════════════════════════════════════════════════════ */

/* ─── SECTION HEADER ────────────────────────────────────── */
.tools__headline {
  margin-top: var(--space-sm);
  color: var(--light-text);
}

.tools__body {
  color: var(--light-muted);
  margin-top: var(--space-sm);
  max-width: 52ch;
}

/* ─── TOOLS GRID ────────────────────────────────────────── */
.tools__grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 600px) {
  .tools__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tools__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
  }
}

/* ─── TOOL CARD ─────────────────────────────────────────── */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* .card base handles bg, border, radius, hover */
}

/* ─── TOOL CARD — icon area ─────────────────────────────── */
.tool-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.15);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  flex-shrink: 0;
}

.tool-card__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Inline SVG fallback — rendered when no image exists */
.tool-card__icon-fallback {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--orange);
  text-shadow: var(--glow-text);
  letter-spacing: 0.04em;
}

/* ─── TOOL CARD — tag ───────────────────────────────────── */
.tool-card__tag {
  margin-bottom: var(--space-xs);
}

/* ─── TOOL CARD — name ──────────────────────────────────── */
.tool-card__name {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--light-text);
  line-height: 1.2;
}

/* ─── TOOL CARD — description ───────────────────────────── */
.tool-card__desc {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--light-muted);
  line-height: 1.65;
  max-width: 100%;
  flex: 1;
}

/* ─── TOOL CARD — footer: price + CTA ──────────────────── */
.tool-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(249, 115, 22, 0.12);
  flex-wrap: wrap;
}

.tool-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tool-card__pricing .price {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}

.tool-card__pricing .price--note {
  font-family: 'DM Mono', monospace;
  font-size: 0.64rem;
  color: var(--light-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── SECTION FOOTER — browse all link ─────────────────── */
.tools__footer {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}

/* Override btn--outline on light section */
.section--light .btn--outline {
  color: var(--light-text);
  border-color: rgba(26, 16, 8, 0.25);
}

.section--light .btn--outline:hover {
  color: var(--orange);
  border-color: var(--orange);
  box-shadow: var(--glow-border);
}