/* Archive-only visual refinements for the portfolio country filter. */
.portfolio-country-filter {
	width: min(100%, 18.75rem);
}

html[dir="rtl"] .portfolio-country-filter {
	margin-inline-start: auto;
}

html[dir="ltr"] .portfolio-country-filter {
	margin-inline-end: auto;
}

.portfolio-country-filter__label {
	display: block;
	margin-bottom: 0.5rem;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
}

.portfolio-country-filter__control {
	position: relative;
}

.portfolio-country-filter__icon,
.portfolio-country-filter__chevron {
	position: absolute;
	top: 50%;
	width: 1rem;
	height: 1rem;
	color: #6b7280;
	pointer-events: none;
	transform: translateY(-50%);
}

.portfolio-country-filter__icon {
	inset-inline-start: 1rem;
}

.portfolio-country-filter__chevron {
	inset-inline-end: 1rem;
}

.portfolio-country-filter__select {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding-block: 0.625rem;
	padding-inline: 2.75rem;
	border: 1px solid #e5e7eb;
	border-radius: var(--radius-button);
	background: #f9fafb;
	box-shadow: none;
	color: #4b5563;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-country-filter__select:hover {
	border-color: #d1d5db;
	background: #f3f4f6;
}

.portfolio-country-filter__select:focus {
	border-color: var(--accent-color);
	outline: none;
	box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

.dark .portfolio-country-filter__label {
	color: #e5e7eb;
}

.dark .portfolio-country-filter__select {
	border-color: #334155;
	background: #1e293b;
	color: #e5e7eb;
}

.dark .portfolio-country-filter__select:hover {
	border-color: #475569;
	background: #334155;
}

.dark .portfolio-country-filter__icon,
.dark .portfolio-country-filter__chevron {
	color: #94a3b8;
}

@media (min-width: 1024px) {
	.portfolio-archive-shell .portfolio-card h3 {
		font-size: 1.25rem;
	}
}

@media (max-width: 639px) {
	.portfolio-country-filter {
		width: 100%;
	}
}