/* /tools/ hub. Cards reuse xagio's blog card (.card.bl-card / .bl-card-a / .bl-thumb / .bl-card-b / .bl-chip from blog.css).
   Only the thumbnail mock-up and the meta row are new. */
.th-hero { padding-bottom: 40px !important; }
.th-sec { padding-top: 8px !important; padding-bottom: 96px !important; }
.th-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.th-card .bl-card-b h3 { font-size: 21px; }

/* thumbnail: a miniature of the tool in xagio controls */
.th-thumb { position: relative; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #3a33e8 0%, #1e1b6b 55%, #11151c 100%) !important; }
.th-thumb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(#000, transparent 85%); pointer-events: none; }
.th-mock { position: relative; z-index: 1; width: 84%; display: grid; gap: 9px; transition: transform .45s cubic-bezier(.23,1,.32,1); }
.th-tabs { display: inline-flex; justify-self: center; gap: 2px; padding: 3px; border-radius: 999px; background: #ffffff14; }
.th-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font: 600 10.5px/1 var(--font); color: #c3cad8; }
.th-tab svg { width: 11px; height: 11px; }
.th-tab.on { background: #4840f0; color: #fff; box-shadow: 0 6px 16px -8px #3a33e8b3; }
.th-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 4px 0 14px; border-radius: 999px; background: #12161db3; box-shadow: inset 0 0 0 1px #ffffff1a; font: 500 11.5px var(--font); color: #e8ecf5; }
.th-q b { display: grid; place-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--primary); color: #fff; font: 600 10.5px var(--font); box-shadow: inset 0 1px #ffffff2e; }
.th-loc { display: inline-flex; align-items: center; justify-self: start; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: #ffffff14; font: 500 10.5px var(--font); color: #c9cdf6; }
.th-loc svg { width: 11px; height: 11px; color: #a9abff; }

.th-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.th-engs { display: inline-flex; gap: 4px; }
.th-eng { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--raised); }
.th-eng svg { width: 14px; height: 14px; }
.th-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--link); }
.th-go svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) {
  .th-card:hover .th-mock { transform: scale(1.03); }
  .th-card:hover .th-go svg { transform: translateX(3px); }
}
html.light .th-eng { background: #eef0f6; }

@media (max-width: 1000px) { .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .th-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .th-mock, .th-go svg { transition: none !important; } }