/*
 * The /tools/ page ([gradient_tools], includes/tools/hub.php): one section per
 * tool group, a card per tool with its menu tile colour.
 */

.tg-tools-hub .th-group { max-width: 1180px; margin: 44px auto 0; padding: 0 4px; }
.tg-tools-hub .th-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.tg-tools-hub .th-hd h2 { margin: 0 !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.01em; }
.tg-tools-hub .th-hd p { margin: 0 !important; font-size: 14px; color: #6E6E78; }

.tg-tools-hub .th-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .tg-tools-hub .th-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tg-tools-hub .th-grid { grid-template-columns: repeat(3, 1fr); } }

.tg-tools-hub .th-card {
	display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 20px;
	background: #fff; border: 1px solid #EEEEF2; box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	color: #111 !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tg-tools-hub .th-card:hover { transform: translateY(-2px); border-color: #DCDCE4; box-shadow: 0 10px 24px rgba(17, 17, 17, .08); }
.tg-tools-hub .th-card i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.tg-tools-hub .th-card span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tg-tools-hub .th-card b { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.tg-tools-hub .th-card b em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #111; color: #fff; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; margin-left: 4px; }
.tg-tools-hub .th-card small { font-size: 13.5px; line-height: 1.5; color: #5F5F6B; }
.tg-tools-hub .th-group:last-child { margin-bottom: 56px; }

@media (prefers-reduced-motion: reduce) {
	.tg-tools-hub .th-card { transition: none; }
	.tg-tools-hub .th-card:hover { transform: none; }
}

/* Dark mode */
html[data-theme="dark"] .tg-tools-hub .th-card { background: #15151D; border-color: rgba(255, 255, 255, .09); color: #EDEDF2 !important; }
html[data-theme="dark"] .tg-tools-hub .th-card:hover { border-color: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .tg-tools-hub .th-card small, html[data-theme="dark"] .tg-tools-hub .th-hd p { color: #9D9DAD; }
html[data-theme="dark"] .tg-tools-hub .th-card b em { background: #EDEDF2; color: #111; }