/* ==========================================================================
   Component: Tool Page Hero
   Reuses .hero__dropzone / .hero__page etc. from hero.css — this file only
   adds the breadcrumb, heading and layout specific to a single tool page.
   ========================================================================== */

.tool-hero {
  background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-white) 100%);
  text-align: center;
}

.tool-hero__inner {
  max-width: 640px;
}

.tool-hero__breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.tool-hero__breadcrumb a { color: var(--color-text-secondary); }
.tool-hero__breadcrumb a:hover { color: var(--color-primary); }
.tool-hero__breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 600; }

.tool-hero__heading {
  font-size: var(--fs-h2);
  color: var(--color-text);
}

.tool-hero__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
}

.tool-hero__upload-wrap {
  margin-top: var(--space-7);
  max-width: 480px;
  margin-inline: auto;
}