/* ==========================================================================
   Specialist directory / matching quiz — designed empty states.
   Loaded only on those two page templates. Logical properties only, so it
   mirrors correctly in RTL (RavanLine, Persian) and LTR (English).
   ========================================================================== */

.directory-empty {
	max-width: 1000px;
	margin-inline: auto;
	padding: var(--space-3xl) var(--space-xl);
	text-align: center;
	background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-surface) 70%);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.directory-empty__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: var(--space-base);
	border-radius: 50%;
	background: var(--color-surface); color: var(--color-primary-dark);
	box-shadow: var(--shadow-sm);
}
.directory-empty__icon svg { width: 26px; height: 26px; }
.directory-empty__title { margin: 0 0 var(--space-sm); font-size: 1.4rem; line-height: 1.4; color: var(--color-text); }
.directory-empty__lead {
	max-width: 560px; margin: 0 auto var(--space-xl);
	color: var(--color-text); opacity: 0.85; line-height: 1.9;
}
.directory-empty__actions {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md);
}

/* "No specialists yet": four "what you can do now" cards */
.directory-empty__cards {
	list-style: none; margin: var(--space-2xl) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-base);
	text-align: start;
}
.directory-empty__card {
	display: flex; flex-direction: column; gap: var(--space-xs); height: 100%;
	padding: var(--space-lg);
	background: var(--color-surface); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.directory-empty__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-primary); text-decoration: none; }
.directory-empty__card:focus-visible,
.directory-empty__foot a:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
.directory-empty__card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-bottom: var(--space-sm);
	border-radius: var(--radius-sm);
	background: var(--color-primary-light); color: var(--color-primary-dark);
}
.directory-empty__card-title { font-weight: 700; line-height: 1.5; }
.directory-empty__card-desc { font-size: 0.85rem; line-height: 1.8; color: var(--color-text-muted); }
.directory-empty__foot { margin: var(--space-xl) 0 0; color: var(--color-text-muted); }
.directory-empty__foot a { font-weight: 600; color: var(--color-primary-dark); text-decoration: none; }

/* Smaller variants (inside the results list / quiz result): no gradient frame */
.directory-empty--filtered,
.directory-empty--slots,
.directory-empty--nl,
.directory-empty--quiz { padding: var(--space-2xl) var(--space-xl); }
.directory-empty--filtered .directory-empty__lead,
.directory-empty--slots .directory-empty__lead,
.directory-empty--nl .directory-empty__lead,
.directory-empty--quiz .directory-empty__lead { margin-bottom: var(--space-lg); }
/* Inside the (single-column) results grid the panel spans the full row */
.specialist-grid > .directory-empty { grid-column: 1 / -1; width: 100%; margin-inline: 0; max-width: none; }
.matching-quiz__empty.directory-empty { padding: var(--space-2xl) var(--space-xl); }

@media (max-width: 900px) {
	.directory-empty__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.directory-empty { padding: var(--space-2xl) var(--space-base); }
	.directory-empty__title { font-size: 1.2rem; }
	.directory-empty__cards { grid-template-columns: 1fr; }
	.directory-empty__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.directory-empty__card { transition: none; }
	.directory-empty__card:hover { transform: none; }
}