/*
 * EA Directory Styles (v3)
 * Rich member cards with business info, search/filter
 */
@import 'ea-multisite.css';

.ea-directory-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ── Filters ──────────────────────────────────────────────────────────── */
.ea-dir-filters { margin-bottom: 28px; }
.ea-dir-search-input {
  width: 100%; padding: 12px 18px; border-radius: 8px;
  border: 2px solid var(--ea-gray-200); font-size: 1rem;
  margin-bottom: 14px; box-sizing: border-box;
  transition: border-color 0.2s;
}
.ea-dir-search-input:focus { border-color: var(--ea-navy); outline: none; }
.ea-dir-type-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-filter-btn {
  padding: 6px 16px; border-radius: 100px; border: 2px solid var(--ea-gray-200);
  background: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s; color: var(--ea-gray-600);
}
.ea-filter-btn:hover { border-color: var(--ea-navy); color: var(--ea-navy); }
.ea-filter-btn.ea-filter-active { background: var(--ea-navy); border-color: var(--ea-navy); color: #fff; }

/* ── Grid ─────────────────────────────────────────────────────────────── */
.ea-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.ea-dir-card {
  background: #fff;
  border: 1.5px solid var(--ea-gray-200);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--ea-shadow);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ea-dir-card:hover { transform: translateY(-2px); box-shadow: var(--ea-shadow-lg); border-color: var(--ea-navy-mid); }

.ea-dir-card-ribbon {
  position: absolute; top: 16px; right: -26px;
  background: var(--ea-amber); color: #fff;
  padding: 4px 36px; font-size: 0.72rem; font-weight: 800;
  transform: rotate(35deg);
  letter-spacing: 0.08em;
}

.ea-dir-card-header { display: flex; gap: 16px; align-items: flex-start; }
.ea-dir-avatar img  { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--ea-gray-200); }
.ea-dir-card-intro  { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ea-dir-name        { font-size: 1.1rem; font-weight: 800; color: var(--ea-navy); margin: 0; }
.ea-dir-owner-name  { font-size: 0.78rem; color: var(--ea-gray-400); }

.ea-dir-desc { font-size: 0.85rem; color: var(--ea-gray-600); line-height: 1.5; margin: 0; }

/* ── Service tags ─────────────────────────────────────────────────────── */
.ea-dir-services { display: flex; flex-wrap: wrap; gap: 6px; }
.ea-svc-tag {
  background: var(--ea-gray-100); color: var(--ea-gray-600);
  padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 600;
}

/* ── Contact info ─────────────────────────────────────────────────────── */
.ea-dir-card-contact { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ea-gray-100); padding-top: 14px; }
.ea-dir-contact-item { font-size: 0.82rem; color: var(--ea-gray-600); text-decoration: none; transition: color 0.15s; }
.ea-dir-contact-item:hover { color: var(--ea-navy); }

/* ── Actions ──────────────────────────────────────────────────────────── */
.ea-dir-card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.ea-empty, .ea-dir-no-results {
  text-align: center; padding: 40px; color: var(--ea-gray-400);
  font-size: 1rem; grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .ea-directory-grid { grid-template-columns: 1fr; }
  .ea-dir-card { padding: 18px; }
}