/*
 * [glossary] shortcode grid
 * Colors approximate the mockup - adjust the variables below to match
 * final brand hex values (the orange should match the existing
 * #C45D3C used elsewhere in the theme unless a different shade was
 * intended here).
 */
.glossary-grid {
	--glossary-card-bg: #1c1a1e;
	--glossary-card-border: #3a373c;
	--glossary-title-color: #C45D3C;
	--glossary-body-color: #e6e3e6;

	display: grid;
	gap: 24px;
	margin: 32px 0;
	grid-template-columns: repeat(3, 1fr);
}

.glossary-grid--cols-1 {
	grid-template-columns: 1fr;
}

.glossary-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.glossary-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.glossary-card {
	background: var(--glossary-card-bg);
	border: 1px solid var(--glossary-card-border);
	border-radius: 8px;
	padding: 24px;
}

.glossary-card__title {
	color: var(--glossary-title-color);
	margin: 0 0 12px;
	font-size: 1.1rem;
}

.glossary-card__body {
	color: var(--glossary-body-color);
	font-size: 0.95rem;
	line-height: 1.5;
}

.glossary-card__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.glossary-grid,
	.glossary-grid--cols-2,
	.glossary-grid--cols-3 {
		grid-template-columns: 1fr;
	}
}