/* ============================================================
   Zenca — Tools page
   Card grid for interactive companions to the writing.
   Uses the shared tokens from site.css.
   ============================================================ */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(36px, 5vw, 56px);
}

/* Each tool is a full-card link. */
.tool-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), background 0.22s var(--ease);
}
.tool-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  background: #141210;
}
.tool-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tool-card-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.tool-tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
}
.tool-status {
  margin-left: auto;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px;
}

.tool-name { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0; }
.tool-desc { margin-top: 12px; color: var(--muted); font-weight: 300; font-size: 1rem; line-height: 1.55; }

.tool-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tool-meta li {
  font-size: 0.78rem; color: var(--muted); padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
}

.tool-cta {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); font-weight: 500; font-size: 0.95rem;
}
.tool-cta span { transition: transform 0.22s var(--ease); }
.tool-card:hover .tool-cta span { transform: translateX(4px); }

/* Non-interactive placeholder that signals more tools are coming. */
.tool-card.is-placeholder {
  border-style: dashed; background: transparent; justify-content: center; align-items: center;
  text-align: center; color: var(--faint); min-height: 200px;
}
.tool-card.is-placeholder:hover { transform: none; border-color: var(--line-2); background: transparent; }
.tool-card.is-placeholder p { color: var(--faint); font-weight: 300; font-size: 0.95rem; max-width: 30ch; }