/* ─────────────────────────────────────────────
   Expert Directory — directory.css
   Minimal, theme-agnostic. Override in your child theme.
───────────────────────────────────────────── */

/* Filter bar */
.ep-directory {
  --ep-color-primary: var(
    --theme-palette-color-1,
    var(--theme-link-initial-color, #000)
  );
  --ep-color-primary-hover: var(
    --theme-palette-color-2,
    var(--theme-palette-color-1, #000)
  );
  --ep-color-secondary: var(
    --theme-palette-color-9,
    var(--theme-palette-color-9, #f0f0f0)
  );
  --ep-color-heading: var(
    --theme-heading-color,
    var(--theme-palette-color-3, #111)
  );
  --ep-color-text: var(--theme-text-color, var(--theme-palette-color-3, #444));
  --ep-color-muted: var(--theme-palette-color-4, #888);
  --ep-color-border: var(
    --theme-border-color,
    var(--theme-palette-color-5, #eee)
  );
  --ep-color-surface: var(
    --theme-palette-color-8,
    var(--theme-palette-color-6, #f5f5f5)
  );
  --ep-color-surface-alt: var(
    --theme-palette-color-7,
    var(--theme-palette-color-6, #f0f0f0)
  );

  --ep-color-solid: var(
    --theme-palette-color-8,
    var(--theme-palette-color-8, #ffffff)
  );

  --ep-space-xs: 6px;
  --ep-space-sm: 8px;
  --ep-space-md: 16px;
  --ep-space-lg: 24px;
  --ep-space-xl: 32px;
}

.ep-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ep-space-sm);
  margin-bottom: var(--ep-space-xl);
}

.ep-filter-btn {
  padding: var(--ep-space-xs) var(--ep-space-md);
  border: 1px solid var(--ep-color-border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--ep-color-text);
  transition: all 0.2s ease;
}

.ep-filter-btn:hover,
.ep-filter-btn.active {
  background: var(--ep-color-primary);
  color: var(--theme-button-text-initial-color, #fff);
  border-color: var(--ep-color-primary);
}

/* Cards grid */
.ep-cards-grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ep-space-lg);
}

/* Card */
.ep-card {
  border: 1px solid var(--ep-color-border);
  background-color: var(--ep-color-solid);
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ep-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ep-card.ep-hidden {
  display: none;
}

.ep-card-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Avatar */
.ep-card-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ep-color-surface);
}

.ep-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card body */
.ep-card-body {
  padding: var(--ep-space-lg);
}

.ep-card-name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ep-color-primary);
}

.ep-card-speciality {
  margin: 0 0 12px;
  color: var(--ep-color-secondary);
}

/* Divider */
.ep-card-divider {
  background-color: var(--ep-color-border) !important;
  margin: 20px 0 !important;
  width: 100%;
}

/* Problem pills */
.ep-card-problems-heading,
.ep-card-problems-heading:hover {
  color: var(--ep-color-muted);
  margin-bottom: var(--ep-space-sm);
}

.ep-card-problems {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ep-space-xs);
}

.ep-pill {
  flex-grow: 1;
  padding: 3px 10px;
  font-size: 14px;
  background: var(--ep-color-border);
  border-radius: 999px;
  color: var(--ep-color-text);
}

/* Meta (country · languages) */
.ep-card-meta {
  margin: 0;
  color: var(--ep-color-muted);
}