/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Teacher and Me — the "Free tools" hub (static pages, generated by
   scripts/free-tools/plugin.ts). The page chrome (header, footer, buttons,
   tokens) comes from /placement-assets/placement.css, which every tool page
   loads first; this file holds only what the hub adds: the tool cards and
   the closing line. No script.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Four tools: one column on a phone, two by two above it — never three and
   a lone fourth card on its own row. */
.tool-cards {
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
  display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.tool-card h2 { font-size: 1.2rem; margin-bottom: var(--space-3); }
.tool-card p { color: var(--color-text-secondary); }
/* The button sits at the foot of every card, so a row of cards lines its buttons up. */
.tool-card .cta-actions { margin-top: auto; margin-bottom: 0; }

.hub-closing { font-size: 1.05rem; }