/* ══════════════════════════════════════════════
   AI TOOLS GRID
   Styles for .fat-tools-section / .fat-tool-card,
   used on free-ai-tools.php (and anywhere the
   ai-text-tools.php partial is included).

   Uses the same CSS custom properties as
   about.css where they exist, with sane fallbacks
   so this file also works standalone.
══════════════════════════════════════════════ */

.fat-tools-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 24px;
  }
  
  .fat-tools-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
  }
  
  .fat-tools-section-label i {
    font-size: 18px;
    color: var(--soperai-accent, #2f7a52);
  }
  
  .fat-tools-section-label h3 {
    margin: 0;
    font-family: var(--soperai-heading-font, 'Zilla Slab', serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--soperai-text, #121815);
  }
  
  .fat-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .fat-tool-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: 14px;
    background: var(--soperai-card-bg, #ffffff);
    border: 1px solid var(--soperai-border, rgba(18, 24, 21, 0.1));
    box-shadow: 0 1px 2px rgba(18, 24, 21, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    color: inherit;
  }
  
  .fat-tool-card:hover,
  .fat-tool-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(18, 24, 21, 0.1);
    border-color: var(--soperai-accent, #2f7a52);
  }
  
  .fat-tool-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .fat-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--soperai-accent-soft, rgba(47, 122, 82, 0.12));
    color: var(--soperai-accent, #2f7a52);
    font-size: 17px;
    flex-shrink: 0;
  }
  
  .fat-tool-card-title {
    font-family: var(--soperai-heading-font, 'Zilla Slab', serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--soperai-text, #121815);
  }
  
  .fat-tool-card-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--soperai-text-muted, rgba(18, 24, 21, 0.68));
    flex-grow: 1;
  }
  
  .fat-tool-card-use-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--soperai-accent, #2f7a52);
  }
  
  .fat-tool-card-use-btn i {
    font-size: 12px;
    transition: transform 0.18s ease;
  }
  
  .fat-tool-card:hover .fat-tool-card-use-btn i,
  .fat-tool-card:focus-visible .fat-tool-card-use-btn i {
    transform: translateX(4px);
  }
  
  /* Dark theme support, mirrors the toggle used on about-us.php / index.php */
  body.theme-dark .fat-tool-card {
    background: var(--soperai-card-bg-dark, #1a221d);
    border-color: var(--soperai-border-dark, rgba(255, 255, 255, 0.08));
  }
  
  body.theme-dark .fat-tool-card-title,
  body.theme-dark .fat-tools-section-label h3 {
    color: var(--soperai-text-dark, #f2f5f2);
  }
  
  body.theme-dark .fat-tool-card-desc {
    color: var(--soperai-text-muted-dark, rgba(242, 245, 242, 0.68));
  }
  
  /* Optional per-category accent, applied only if present */
  .fat-tool-card--textgen .fat-tool-icon,
  .fat-tool-card--humanize .fat-tool-icon,
  .fat-tool-card--newsletter .fat-tool-icon,
  .fat-tool-card--ghost .fat-tool-icon {
    color: #2f7a52;
    background: rgba(47, 122, 82, 0.12);
  }
  
  .fat-tool-card--slides .fat-tool-icon,
  .fat-tool-card--summarizer .fat-tool-icon,
  .fat-tool-card--chatdocs .fat-tool-icon {
    color: #2a6f97;
    background: rgba(42, 111, 151, 0.12);
  }
  
  .fat-tool-card--jobdesc .fat-tool-icon,
  .fat-tool-card--offerletter .fat-tool-icon {
    color: #b5651d;
    background: rgba(181, 101, 29, 0.12);
  }
  
  .fat-tool-card--resumesummary .fat-tool-icon,
  .fat-tool-card--federalresume .fat-tool-icon,
  .fat-tool-card--applicationletter .fat-tool-icon {
    color: #6a4c93;
    background: rgba(106, 76, 147, 0.12);
  }
  
  .fat-tool-card--writingprompt .fat-tool-icon {
    color: #c9a227;
    background: rgba(201, 162, 39, 0.12);
  }
  
  @media (max-width: 640px) {
    .fat-tools-section {
      padding: 32px 16px;
    }
  }