/* Tools hub (/orodja, /en/tools) — scoped to .th-* so no other static page is affected. Uses hub.css tokens. */
.th-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.th-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:999px;font-weight:700;
  text-decoration:none;border:1px solid hsl(var(--border));color:hsl(var(--foreground));background:hsl(var(--card));
  transition:transform .15s,border-color .15s}
.th-btn:hover{transform:translateY(-2px);border-color:hsl(var(--primary) / .6);text-decoration:none}
.th-btn.primary{background:var(--gradient);border-color:transparent;color:hsl(var(--primary-foreground))}
.th-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;padding:0;margin:18px 0 0;color:hsl(var(--muted-foreground));font-size:.9rem}
.th-meta li::before{content:"✓";color:hsl(var(--accent));font-weight:700;margin-right:7px}

.th-featured{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin:26px 0 8px;padding:24px 26px;
  border-radius:22px;border:1px solid hsl(var(--primary) / .55);text-decoration:none;color:inherit;position:relative;overflow:hidden;
  background:linear-gradient(135deg,hsl(var(--primary) / .24),hsl(var(--accent) / .09) 70%),hsl(var(--card));
  box-shadow:0 20px 50px -30px hsl(var(--primary) / .8);transition:transform .15s,box-shadow .15s}
.th-featured:hover{transform:translateY(-3px);text-decoration:none;box-shadow:0 26px 56px -28px hsl(var(--primary))}
.th-featured .th-emoji{font-size:58px;line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.th-badge{display:inline-block;margin-bottom:8px;padding:3px 11px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:hsl(var(--accent) / .16);color:hsl(var(--accent));border:1px solid hsl(var(--accent) / .4)}
.th-featured .th-title{font-size:1.3rem;margin:0 0 6px}
.th-featured .th-desc{margin:0;max-width:60ch;color:hsl(var(--foreground) / .82)}
.th-featured .th-cta{white-space:nowrap}

.th-section{margin-top:34px}
.th-section h2{margin:0 0 14px;font-size:1.15rem;letter-spacing:-.01em}
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
a.th-card{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:16px;border:1px solid hsl(var(--border));
  background:hsl(var(--card));text-decoration:none;color:inherit;
  transition:transform .15s,border-color .15s,box-shadow .15s}
a.th-card:hover{transform:translateY(-3px);border-color:hsl(var(--primary) / .6);box-shadow:0 18px 36px -24px hsl(var(--primary) / .7);text-decoration:none}
.th-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;line-height:1;background:hsl(var(--primary) / .16)}
.th-title{margin:0;font-weight:700;color:hsl(var(--foreground));font-size:1.02rem;line-height:1.3}
.th-desc{margin:0;color:hsl(var(--muted-foreground));font-size:.92rem;line-height:1.5;flex:1}
.th-go{margin-top:6px;font-weight:700;font-size:.9rem;color:hsl(var(--accent))}
a.th-card:focus-visible,a.th-featured:focus-visible,.th-btn:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:3px}

@media (max-width:640px){
  .th-featured{grid-template-columns:1fr;gap:14px;padding:20px}
  .th-featured .th-emoji{font-size:46px}
}
@media (prefers-reduced-motion:reduce){
  .th-btn,.th-featured,a.th-card{transition:none}
  .th-btn:hover,.th-featured:hover,a.th-card:hover{transform:none}
}