@import "../styles.css";

.tools-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 56px;
}

.tools-hero,
.tool-layout,
.tool-faq,
.tool-cta,
.tools-grid,
.tools-intro,
.tools-support,
.tool-copy,
.tool-steps,
.related-guides {
  margin-top: 56px;
}

.tools-hero {
  display: grid;
  gap: 18px;
  padding: 72px 0 32px;
}

.tools-hero h1,
.tool-layout h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.tools-hero p,
.tools-intro p,
.tool-lede,
.tool-copy p,
.tool-faq p,
.tool-card p,
.example-card p,
.result-card p,
.result-card li,
.tool-support-card p {
  color: var(--muted);
  line-height: 1.75;
}

.tools-grid,
.tool-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.tool-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: start;
}

.tool-card,
.tool-panel,
.tool-support-card,
.example-card,
.result-card,
.tool-faq article,
.tool-cta-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.tool-card,
.tool-support-card,
.example-card,
.result-card,
.tool-faq article,
.tool-cta-card {
  padding: 26px;
}

.tool-copy,
.tool-steps,
.related-guides {
  display: grid;
  gap: 18px;
}

.tool-copy-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 28px;
}

.tool-copy-card h2,
.tool-copy-card h3 {
  margin: 0 0 12px;
}

.tool-copy-card ul,
.tool-copy-card ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.75;
}

.step-grid,
.related-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.step-card,
.related-guide-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 24px;
}

.step-card h3,
.related-guide-card h3 {
  margin: 0 0 10px;
}

.step-card p,
.related-guide-card p,
.tool-copy-card li,
.tool-copy-card p {
  color: var(--muted);
  line-height: 1.75;
}

.related-guide-card a {
  display: inline-flex;
  margin-top: 16px;
}

.tool-card h3,
.tool-support-card h3,
.example-card h2,
.result-card h2,
.tool-panel h2,
.tool-faq h3 {
  margin: 0 0 12px;
}

.tool-card a,
.tool-support-card a {
  display: inline-flex;
  margin-top: 16px;
}

.tool-panel {
  padding: 24px;
}

.tool-form {
  display: grid;
  gap: 16px;
}

.tool-form label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
}

.tool-form input,
.tool-form textarea,
.tool-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.84);
}

.tool-form textarea {
  min-height: 132px;
  resize: vertical;
}

.tool-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.result-card {
  display: grid;
  gap: 16px;
}

.result-card ul,
.tool-faq-list {
  margin: 0;
  padding-left: 20px;
}

.tool-faq {
  display: grid;
  gap: 18px;
}

.tool-faq article {
  padding: 22px 24px;
}

.tool-cta-card {
  text-align: center;
}

.tool-cta-card .hero-actions {
  justify-content: center;
}

.tool-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.92rem;
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.42rem 0.78rem;
  background: rgba(217, 58, 0, 0.1);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.result-empty {
  color: var(--muted);
  font-style: italic;
}

.result-status {
  color: var(--muted);
  font-size: 0.94rem;
}

.result-status.error {
  color: #a32222;
}

@media (max-width: 980px) {
  .tools-grid,
  .tool-layout,
  .step-grid,
  .related-guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .tools-shell {
    width: min(1120px, calc(100% - 24px));
  }

  .tools-hero {
    padding-top: 40px;
  }
}