@layer components {
	.results-heading {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		margin-block-end: var(--space-6);
	}

	.results-heading-icon {
		font-size: var(--fs-2xl);
		line-height: 1;
	}

	.results-heading h2 {
		margin: 0;
		font-size: var(--fs-xl);
		color: var(--color-primary-dark);
	}

	.results-heading p {
		margin: 0;
	}

	.directory-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--space-4);
	}

	.directory-empty {
		grid-column: 1 / -1;
		text-align: center;
		padding-block: var(--space-6);
	}

	.institution-card {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		padding: var(--space-5);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.institution-card > * {
		margin: 0;
	}

	.institution-card h3 {
		color: var(--color-primary-dark);
	}

	.institution-type {
		font-size: var(--fs-sm);
		color: var(--color-accent);
		font-weight: 700;
	}

	.institution-meta {
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.institution-meta li {
		display: flex;
		gap: var(--space-2);
	}

	.institution-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
	}

	.institution-tag {
		font-size: 0.75rem;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-pill);
		background: var(--color-primary-soft);
		color: var(--color-primary-dark);
	}

	.institution-placeholder-badge {
		align-self: flex-start;
		font-size: 0.7rem;
		font-weight: 700;
		padding: 2px var(--space-2);
		border-radius: var(--radius-sm);
		background: #fff3cd;
		color: #8a6d1a;
		border: 1px solid #f0dca0;
	}
}