/**
 * Atlas Core - Pattern Styles
 * Styles for shortcode-generated metro and city lists
 */

/* Metro List Styles */
.atlas-metros-list {
	margin: 2rem 1rem;
}

.atlas-metros-heading {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: #1a1a1a;
}

.atlas-metros-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	max-width: 100%;
}

.atlas-metros-item {
	margin: 0;
}

.atlas-metros-link {
	display: flex;
	height: 100%;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	color: #0066cc;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #f5f5f5;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.atlas-metros-link:hover,
.atlas-metros-link:focus {
	background-color: #0066cc;
	color: #ffffff;
	text-decoration: none;
}

/* City List Styles */
.atlas-cities-list {
	margin: 2rem 1rem;
}

.atlas-cities-heading {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: #1a1a1a;
}

.atlas-cities-items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	max-width: 100%;
}

.atlas-cities-item {
	margin: 0;
}

.atlas-cities-link {
	display: flex;
	height: 100%;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	color: #0066cc;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #f5f5f5;
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;

}

.atlas-cities-link:hover,
.atlas-cities-link:focus {
	background-color: #0066cc;
	color: #ffffff;
	text-decoration: none;
}

/* Breadcrumb Styles */
.atlas-breadcrumbs {
	margin: 1rem 0;
	font-size: 0.9rem;
}

.atlas-breadcrumbs-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.atlas-breadcrumbs-item {
	margin: 0;
	display: inline-flex;
	align-items: center;
}

.atlas-breadcrumbs-link {
	color: #0066cc;
	text-decoration: none;
	transition: color 0.2s ease;
}

.atlas-breadcrumbs-link:hover,
.atlas-breadcrumbs-link:focus {
	color: #004499;
	text-decoration: underline;
}

.atlas-breadcrumbs-current {
	color: #666;
	font-weight: 500;
}

.atlas-breadcrumbs-separator {
	color: #999;
	margin: 0 0.25rem;
	user-select: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.atlas-metros-items,
	.atlas-cities-items {
		grid-template-columns: 1fr;
	}
	
	.atlas-breadcrumbs {
		font-size: 0.85rem;
	}
}

/* Alternative styles for compact display */
.atlas-metros-list.compact .atlas-metros-items,
.atlas-cities-list.compact .atlas-cities-items {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.5rem;
}

.atlas-metros-list.compact .atlas-metros-link,
.atlas-cities-list.compact .atlas-cities-link {
	padding: 0.375rem 0.5rem;
	font-size: 0.9rem;
}