/* ==========================================================================
   KDFTek redesign v1 — Worker 3: Tool Cards (2026-10-03)
   Premium .tool-tile cards: /tools/ hub, /tools/category/* pages, "Related
   free tools" on tool pages. Pure CSS — no HTML/JS, no external assets,
   no SEO/AdSense impact. Hooks into redesign-v1-tokens.css (--cat-*,
   --shadow-*, --radius-*); point-of-use fallbacks keep cards premium even
   if the tokens layer is ever absent.
   Category colors with no markup hooks:
     • Hub "All live tools" grid: the grouping script sets inline
       style="order: N" per tile (N = catIndex*1000 + position); the
       selectors in 4b decode that (< 100 tools per category assumed).
     • Hub "Browse by category" cards: matched by href (4a).
     • Category pages: matched via canonical URL with :has() (4e).
   ========================================================================== */

/* ---------- 1. Premium card base --------------------------------------- */
.tool-tile{
  position:relative;
  overflow:hidden; /* clips the hover hairline to the rounded corners */
  border-radius:var(--radius-lg,1rem);
  border:1px solid var(--line,#e6e8eb);
  background:#fff;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(15,20,17,.06));
  padding:20px;
  gap:10px;
  text-decoration:none;
}
.tool-tile:hover{text-decoration:none}
/* category gradient hairline across the top, revealed on hover */
.tool-tile::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--cat-grad,linear-gradient(135deg,#22c55e,#16a34a));
  opacity:0;
}
.tool-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg,0 12px 32px -8px rgba(15,20,17,.12));
  border-color:color-mix(in srgb,var(--cat,#16a34a) 38%,#ffffff);
}
.tool-tile:hover::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .tool-tile{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
  .tool-tile::before{transition:opacity .2s ease}
}
@media (prefers-reduced-motion:reduce){
  .tool-tile{transition:none}
}

/* ---------- 2. Icon: 52px gradient tile, white glyph -------------------- */
.tool-tile-icon{
  width:52px;height:52px;
  flex:none;
  justify-self:start;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:var(--cat-grad,linear-gradient(135deg,#22c55e,#16a34a));
  color:#fff;
  margin-bottom:10px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(15,20,17,.06)),inset 0 1px 0 rgba(255,255,255,.28);
}
.tool-tile-icon .tool-icon{width:52px!important;height:52px!important;color:#fff}
.tool-tile-icon .tool-icon svg{width:26px;height:26px}

/* ---------- 3. Hierarchy: pill meta, bold title, muted desc -------------- */
.tool-tile .meta{
  justify-self:start;
  background:var(--cat-soft,#dcfce7);
  color:var(--cat-ink,#14532d);
  border-radius:999px;
  padding:4px 10px;
  font-size:10.5px;
  letter-spacing:.06em;
}
.tool-tile strong{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink,#101613);
}
.tool-tile p{
  font-size:14px;
  line-height:1.55;
  color:var(--muted,#5f6b62);
}
.tool-tile .cap-go{
  color:var(--cat-ink,#14532d);
  font-size:13.5px;
  font-weight:800;
  margin-top:6px;
}

/* ---------- 4a. Browse-by-category cards (hub), matched by href --------- */
.tool-tile[href="/tools/category/finance/"]{--cat:var(--cat-finance,#16a34a);--cat-soft:var(--cat-finance-soft);--cat-ink:var(--cat-finance-ink);--cat-grad:var(--cat-finance-grad)}
.tool-tile[href="/tools/category/datetime/"]{--cat:var(--cat-datetime,#d97706);--cat-soft:var(--cat-datetime-soft);--cat-ink:var(--cat-datetime-ink);--cat-grad:var(--cat-datetime-grad)}
.tool-tile[href="/tools/category/converter/"]{--cat:var(--cat-converter,#7c3aed);--cat-soft:var(--cat-converter-soft);--cat-ink:var(--cat-converter-ink);--cat-grad:var(--cat-converter-grad)}
.tool-tile[href="/tools/category/text/"]{--cat:var(--cat-text,#ca8a04);--cat-soft:var(--cat-text-soft);--cat-ink:var(--cat-text-ink);--cat-grad:var(--cat-text-grad)}
.tool-tile[href="/tools/category/image/"]{--cat:var(--cat-image,#4f46e5);--cat-soft:var(--cat-image-soft);--cat-ink:var(--cat-image-ink);--cat-grad:var(--cat-image-grad)}
.tool-tile[href="/tools/category/pdf/"]{--cat:var(--cat-pdf,#dc2626);--cat-soft:var(--cat-pdf-soft);--cat-ink:var(--cat-pdf-ink);--cat-grad:var(--cat-pdf-grad)}
.tool-tile[href="/tools/category/developer/"]{--cat:var(--cat-developer,#0284c7);--cat-soft:var(--cat-developer-soft);--cat-ink:var(--cat-developer-ink);--cat-grad:var(--cat-developer-grad)}
.tool-tile[href="/tools/category/design/"]{--cat:var(--cat-design,#c026d3);--cat-soft:var(--cat-design-soft);--cat-ink:var(--cat-design-ink);--cat-grad:var(--cat-design-grad)}
.tool-tile[href="/tools/category/security/"]{--cat:var(--cat-security,#1d4ed8);--cat-soft:var(--cat-security-soft);--cat-ink:var(--cat-security-ink);--cat-grad:var(--cat-security-grad)}
.tool-tile[href="/tools/category/productivity/"]{--cat:var(--cat-productivity,#0d9488);--cat-soft:var(--cat-productivity-soft);--cat-ink:var(--cat-productivity-ink);--cat-grad:var(--cat-productivity-grad)}
.tool-tile[href="/color-tools/"]{--cat:var(--cat-color,#e11d78);--cat-soft:var(--cat-color-soft);--cat-ink:var(--cat-color-ink);--cat-grad:var(--cat-color-grad)}

/* ---------- 4b. Hub "All live tools": decode the order hack ---------------
   style="order: catIndex*1000 + pos": 0 finance · 1 datetime · 2 converter ·
   3 text · 4 image · 5 pdf · 6 developer · 7 design · 8 security ·
   9 productivity · 10 color. Scoped to .tools-hub. */
.tools-hub .tool-tile[style*="order: "]:not([style*="order: 0"]):not([data-category]){--cat:var(--cat-finance,#16a34a);--cat-soft:var(--cat-finance-soft);--cat-ink:var(--cat-finance-ink);--cat-grad:var(--cat-finance-grad)}
.tools-hub .tool-tile:is([style*="order: 10;"],[style*="order: 20;"],[style*="order: 30;"],[style*="order: 40;"],[style*="order: 50;"],[style*="order: 60;"],[style*="order: 70;"],[style*="order: 80;"],[style*="order: 90;"]){--cat:var(--cat-finance,#16a34a);--cat-soft:var(--cat-finance-soft);--cat-ink:var(--cat-finance-ink);--cat-grad:var(--cat-finance-grad)}
.tools-hub .tool-tile[style*="order: 1"][style*="0"]:not([style*="order: 10;"]):not([style*="order: 1000"]):not([style*="order: 11"]):not([data-category]){--cat:var(--cat-datetime,#d97706);--cat-soft:var(--cat-datetime-soft);--cat-ink:var(--cat-datetime-ink);--cat-grad:var(--cat-datetime-grad)}
.tools-hub .tool-tile[style*="order: 2"][style*="0"]:not([style*="order: 20;"]):not([data-category]){--cat:var(--cat-converter,#7c3aed);--cat-soft:var(--cat-converter-soft);--cat-ink:var(--cat-converter-ink);--cat-grad:var(--cat-converter-grad)}
.tools-hub .tool-tile[style*="order: 3"][style*="0"]:not([style*="order: 30;"]):not([data-category]){--cat:var(--cat-text,#ca8a04);--cat-soft:var(--cat-text-soft);--cat-ink:var(--cat-text-ink);--cat-grad:var(--cat-text-grad)}
.tools-hub .tool-tile[style*="order: 4"][style*="0"]:not([style*="order: 40;"]):not([data-category]){--cat:var(--cat-image,#4f46e5);--cat-soft:var(--cat-image-soft);--cat-ink:var(--cat-image-ink);--cat-grad:var(--cat-image-grad)}
.tools-hub .tool-tile[style*="order: 5"][style*="0"]:not([style*="order: 50;"]):not([data-category]){--cat:var(--cat-pdf,#dc2626);--cat-soft:var(--cat-pdf-soft);--cat-ink:var(--cat-pdf-ink);--cat-grad:var(--cat-pdf-grad)}
.tools-hub .tool-tile[style*="order: 6"][style*="0"]:not([style*="order: 60;"]):not([data-category]){--cat:var(--cat-developer,#0284c7);--cat-soft:var(--cat-developer-soft);--cat-ink:var(--cat-developer-ink);--cat-grad:var(--cat-developer-grad)}
.tools-hub .tool-tile[style*="order: 7"][style*="0"]:not([style*="order: 70;"]):not([data-category]){--cat:var(--cat-design,#c026d3);--cat-soft:var(--cat-design-soft);--cat-ink:var(--cat-design-ink);--cat-grad:var(--cat-design-grad)}
.tools-hub .tool-tile[style*="order: 8"][style*="0"]:not([style*="order: 80;"]):not([data-category]){--cat:var(--cat-security,#1d4ed8);--cat-soft:var(--cat-security-soft);--cat-ink:var(--cat-security-ink);--cat-grad:var(--cat-security-grad)}
.tools-hub .tool-tile[style*="order: 9"][style*="0"]:not([style*="order: 90;"]):not([data-category]){--cat:var(--cat-productivity,#0d9488);--cat-soft:var(--cat-productivity-soft);--cat-ink:var(--cat-productivity-ink);--cat-grad:var(--cat-productivity-grad)}
.tools-hub .tool-tile[style*="order: 1000"]:not([data-category]){--cat:var(--cat-color,#e11d78);--cat-soft:var(--cat-color-soft);--cat-ink:var(--cat-color-ink);--cat-grad:var(--cat-color-grad)}

/* ---------- 4c. Hub category group headings: color dots ----------------- */
.tool-cat-title::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--cat-grad,linear-gradient(135deg,#22c55e,#16a34a));flex:none}
h3.tool-cat-title[style="order: 0;"]{--cat-grad:var(--cat-finance-grad)}
h3.tool-cat-title[style="order: 1000;"]{--cat-grad:var(--cat-datetime-grad)}
h3.tool-cat-title[style="order: 2000;"]{--cat-grad:var(--cat-converter-grad)}
h3.tool-cat-title[style="order: 3000;"]{--cat-grad:var(--cat-text-grad)}
h3.tool-cat-title[style="order: 4000;"]{--cat-grad:var(--cat-image-grad)}
h3.tool-cat-title[style="order: 5000;"]{--cat-grad:var(--cat-pdf-grad)}
h3.tool-cat-title[style="order: 6000;"]{--cat-grad:var(--cat-developer-grad)}
h3.tool-cat-title[style="order: 7000;"]{--cat-grad:var(--cat-design-grad)}
h3.tool-cat-title[style="order: 8000;"]{--cat-grad:var(--cat-security-grad)}
h3.tool-cat-title[style="order: 9000;"]{--cat-grad:var(--cat-productivity-grad)}
h3.tool-cat-title[style="order: 10000;"]{--cat-grad:var(--cat-color-grad)}
h3.tool-cat-title[style="order: 11000;"]{--cat-grad:linear-gradient(135deg,#9ca3af,#6b7280)}

/* ---------- 4d. Popular section (hub): warm gold accent ------------------
   Its h2 is the only .tool-section-title without an inline style. */
.tools-hub h2.tool-section-title:not([style]) + .tools-grid .tool-tile:not([data-category]){--cat:#b45309;--cat-soft:#fef3c7;--cat-ink:#92400e;--cat-grad:linear-gradient(135deg,#fbbf24,#d97706)}

/* ---------- 4e. Category pages: detect via canonical URL ---------------- */
html:has(head link[rel="canonical"][href*="/tools/category/finance/"]) .tools-grid .tool-tile{--cat:var(--cat-finance,#16a34a);--cat-soft:var(--cat-finance-soft);--cat-ink:var(--cat-finance-ink);--cat-grad:var(--cat-finance-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/datetime/"]) .tools-grid .tool-tile{--cat:var(--cat-datetime,#d97706);--cat-soft:var(--cat-datetime-soft);--cat-ink:var(--cat-datetime-ink);--cat-grad:var(--cat-datetime-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/converter/"]) .tools-grid .tool-tile{--cat:var(--cat-converter,#7c3aed);--cat-soft:var(--cat-converter-soft);--cat-ink:var(--cat-converter-ink);--cat-grad:var(--cat-converter-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/text/"]) .tools-grid .tool-tile{--cat:var(--cat-text,#ca8a04);--cat-soft:var(--cat-text-soft);--cat-ink:var(--cat-text-ink);--cat-grad:var(--cat-text-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/image/"]) .tools-grid .tool-tile{--cat:var(--cat-image,#4f46e5);--cat-soft:var(--cat-image-soft);--cat-ink:var(--cat-image-ink);--cat-grad:var(--cat-image-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/pdf/"]) .tools-grid .tool-tile{--cat:var(--cat-pdf,#dc2626);--cat-soft:var(--cat-pdf-soft);--cat-ink:var(--cat-pdf-ink);--cat-grad:var(--cat-pdf-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/developer/"]) .tools-grid .tool-tile{--cat:var(--cat-developer,#0284c7);--cat-soft:var(--cat-developer-soft);--cat-ink:var(--cat-developer-ink);--cat-grad:var(--cat-developer-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/design/"]) .tools-grid .tool-tile{--cat:var(--cat-design,#c026d3);--cat-soft:var(--cat-design-soft);--cat-ink:var(--cat-design-ink);--cat-grad:var(--cat-design-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/security/"]) .tools-grid .tool-tile{--cat:var(--cat-security,#1d4ed8);--cat-soft:var(--cat-security-soft);--cat-ink:var(--cat-security-ink);--cat-grad:var(--cat-security-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/productivity/"]) .tools-grid .tool-tile{--cat:var(--cat-productivity,#0d9488);--cat-soft:var(--cat-productivity-soft);--cat-ink:var(--cat-productivity-ink);--cat-grad:var(--cat-productivity-grad)}
html:has(head link[rel="canonical"][href*="/tools/category/color/"]) .tools-grid .tool-tile{--cat:var(--cat-color,#e11d78);--cat-soft:var(--cat-color-soft);--cat-ink:var(--cat-color-ink);--cat-grad:var(--cat-color-grad)}

/* ---------- 5. Mobile: 2-col grid, compact premium cards -----------------
   Hub already forces 2 cols via its inline layer (same values); this
   extends the pattern to category/tool pages. Tool pages keep their own
   related-grid columns from redesign-v1-toolpage.css. */
@media (max-width:900px){
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tool-tile{padding:14px;gap:8px;border-radius:14px}
  .tool-tile-icon{width:40px;height:40px;border-radius:11px;margin-bottom:6px}
  .tool-tile-icon .tool-icon{width:40px!important;height:40px!important}
  .tool-tile-icon .tool-icon svg{width:22px;height:22px}
  .tool-tile .meta{font-size:10px;padding:3px 8px}
  .tool-tile strong{font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tool-tile p{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tool-tile .cap-go{font-size:12px;margin-top:4px}
  .tool-cat-title::before{width:10px;height:10px}
}