/* ---------------------------------------------------------------------------
   /tools/ index + the shell around each tool page.

   The tool UI itself is styled by its own bundle (tools-app), which ships the kape.tools
   design system re-inked to the BrewedOps palette. This file owns only the page shell:
   breadcrumb, index header and cards.
   --------------------------------------------------------------------------- */

.tools-page,
.tool-page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: calc(120px + env(safe-area-inset-top)) 1.5rem clamp(96px, 14vh, 160px);
  color: var(--color-fg);
}

/* Breadcrumb (same pattern as /videos/, /about/ and the legal pages) */
.tool-crumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.tool-crumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
}

.tool-crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* A short word like "Home" is only ~41px wide, under the 44px touch target. */
  min-width: 44px;
  color: var(--color-fg-secondary);
  text-decoration: none;
}

.tool-crumbs a:hover,
.tool-crumbs a:focus-visible {
  color: var(--color-fg);
}

/* --- Index header --- */
.tools-head {
  max-width: 760px;
  margin: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.tools-head__eyebrow {
  margin: 0 0 1rem;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
}

.tools-head__title {
  margin: 0;
  font-weight: 800;
  font-size: var(--text-display-l);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.tools-head__lead {
  margin: 1.5rem 0 0;
  max-width: 62ch;
  font-size: var(--text-body-lead);
  line-height: 1.6;
  color: var(--color-fg-secondary);
}

/* --- Cards --- */
.tools-grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.tool-card__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0.5rem;
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  background: color-mix(in srgb, var(--color-fg) 3%, transparent);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 240ms var(--ease-out),
    background-color 240ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.tool-card__category {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.tool-card__name {
  margin: 0;
  /* nav.css styles `.mega-card__name, .tool-card__name` for the nav mega-menu's
     cards, and that selector is not scoped to the nav - it lands here too and
     makes this heading an inline-flex box. A flex h2 turns the AI badge into a
     flex ITEM, which drops it onto its own line as soon as the name wraps. Say
     block explicitly so the badge stays inline after the last word. */
  display: block;
  font-size: var(--text-display-s);
  font-weight: 700;
  line-height: 1.2;
}

/* Marks the one tool in the set that does not run in your browser. Outline rather
   than a solid fill: a filled accent chip beside a display-size name reads as a
   button and competes with the card's own Open affordance. The lifted accent is
   the one that reads as text on this page's near-black. */
.tool-card__badge {
  /* Inline, so it follows the last word of the name rather than dropping below a
     wrapped title. */
  display: inline-block;
  vertical-align: 0.18em;
  margin-left: 0.5rem;
  border: 1px solid var(--color-accent-on-dark);
  border-radius: 999px;
  padding: 0.15em 0.6em 0.2em;
  /* Fixed rather than relative to the name, which is display-sized here. */
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  white-space: nowrap;
}

.tool-card__tagline {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-fg-secondary);
}

.tool-card__go {
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
}

@media (hover: hover) {
  .tool-card__link:hover {
    border-color: var(--color-border-strong);
    background: color-mix(in srgb, var(--color-fg) 6%, transparent);
    transform: translateY(-2px);
  }
}

.tool-card__link:focus-visible {
  outline: 2px solid var(--color-accent-on-dark);
  outline-offset: 3px;
}

/* --- Tool mount --- */
.tool-mount {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.tool-mount__fallback {
  padding: 3rem 0;
  font-size: var(--text-body);
  color: var(--color-fg-muted);
}

/* Heads-up on the cards for tools that fetch a model before they can run */
.tool-card__weight {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-fg-muted);
}