/**
 * css/components/tool-grid.css — Website 2.0 shared component library
 * (#124)
 *
 * "Built on best-in-class" pattern — bordered 6-up tool grid, reflowing
 * 6 -> 3 -> 2 columns. Reference: tech-ai.html `.tools`/`.tool`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-tool-grid {
	margin-top: 84px;
	border: var( --hairline ) solid var( --rule-on-dark );
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
}

.cg-tool-grid__item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp( 150px, 11vw, 172px );
	padding: 36px 28px 34px;
	border-left: var( --hairline ) solid var( --rule-on-dark );
	border-top: var( --hairline ) solid var( --rule-on-dark );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-tool-grid__item:nth-child( -n + 6 ) {
	border-top: 0;
}

.cg-tool-grid__item:nth-child( 6n + 1 ) {
	border-left: 0;
}

.cg-tool-grid__item:hover {
	background-color: var( --box-hover-ink );
}

.cg-tool-grid__name {
	font-family: var( --font-serif );
	font-size: clamp( 18px, 1.35vw, 22px );
	line-height: 1.15;
	letter-spacing: -0.4px;
	color: var( --cg-cream );
	white-space: pre-line;
}

.cg-tool-grid__cat {
	margin-top: 24px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --accent );
}

@media ( max-width: 1024px ) {
	.cg-tool-grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.cg-tool-grid__item:nth-child( -n + 6 ) {
		border-top: var( --hairline ) solid var( --rule-on-dark );
	}

	.cg-tool-grid__item:nth-child( -n + 3 ) {
		border-top: 0;
	}

	.cg-tool-grid__item:nth-child( 6n + 1 ) {
		border-left: var( --hairline ) solid var( --rule-on-dark );
	}

	.cg-tool-grid__item:nth-child( 3n + 1 ) {
		border-left: 0;
	}
}

@media ( max-width: 680px ) {
	.cg-tool-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cg-tool-grid__item:nth-child( -n + 3 ) {
		border-top: var( --hairline ) solid var( --rule-on-dark );
	}

	.cg-tool-grid__item:nth-child( -n + 2 ) {
		border-top: 0;
	}

	.cg-tool-grid__item:nth-child( 3n + 1 ) {
		border-left: var( --hairline ) solid var( --rule-on-dark );
	}

	.cg-tool-grid__item:nth-child( 2n + 1 ) {
		border-left: 0;
	}
}