/* ============================================
   Tools Index - Card Layout with Descriptions
   ============================================ */

.tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--space-8);
	margin: var(--space-6) 0;
}

.tool-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-8) var(--space-6);
	border: var(--border-sm) solid var(--gray);
	text-decoration: none;
	color: inherit;
	transition: all var(--transition-fast);
	min-height: 8rem;
}

.tool-card:hover {
	border-color: var(--light);
	background-color: var(--black);
	transform: translateY(-0.125rem);
}

.tool-card:focus {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
	background-color: var(--dark);
	box-shadow: 0 0 0 0.25rem var(--black), 0 0 0 0.375rem var(--light);
}

.tool-card:focus-visible {
	outline: 0.125rem solid var(--light);
	outline-offset: 0.125rem;
	background-color: var(--dark);
	box-shadow: 0 0 0 0.25rem var(--black), 0 0 0 0.375rem var(--light);
}

.tool-card .emoji {
	font-family: 'emoji', sans-serif;
	font-weight: 560;
	color: var(--white);
	font-size: 2rem;
	line-height: 1;
	margin-bottom: var(--space-2);
}

.tool-card:hover .emoji,
.tool-card:focus .emoji{
	color: var(--color);
}

.tool-card strong {
	display: block;
	color: var(--light);
	font-size: var(--font-md);
	line-height: var(--lh-md);
	margin-bottom: var(--space-2);
	font-weight: 600;
}

.tool-card span {
	display: block;
	color: var(--gray);
	font-size: var(--font-sm);
	line-height: var(--lh-sm);
}