/*
 * The Recognised Sponsor directory's dynamic markup, in the How to [ ] in NL design tokens.
 *
 * The page chrome and the server-rendered directory markup use the site's Tailwind classes.
 * This file styles only what the vendored client writes at runtime - result cards, the
 * location suggestions, and the show/hide state of the alert and empty messages - by the
 * class names the client emits, so the vendored module stays unedited in its markup.
 * Every value resolves to a token from src/styles/htnl-tokens.css.
 */

.sd-alert,
.sd-empty { display: none; }
.sd-alert.is-visible,
.sd-empty.is-visible { display: block; }

.sponsor-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-elevated);
  padding: 1.25rem;
}
.sponsor-card:hover { border-color: var(--border-strong); }
.ff-dir-card-title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.ff-dir-card-title a { color: var(--text-primary); text-decoration: none; }
.ff-dir-card-title a:hover { color: var(--text-brand); }
.ff-dir-card-id { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
.ff-dir-card-id strong { color: var(--text-primary); font-weight: 600; }
.ff-dir-meta { display: flex; flex-direction: column; gap: 0.5rem; }
.ff-dir-meta-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ff-dir-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.ff-dir-tag,
.sponsor-industry-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ff-dir-card-foot { margin-top: auto; padding-top: 0.5rem; }
.sponsor-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-brand);
  text-decoration: none;
}
.sponsor-primary-action:hover { text-decoration: underline; }

.sd-listbox {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgb(10 18 28 / 0.12);
}
.sd-listbox[hidden] { display: none; }
.ff-place-option {
  cursor: pointer;
  border-radius: var(--radius-control);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.ff-place-option.is-active,
.ff-place-option:hover { background: var(--bg-surface); }
.ff-place-option[aria-selected="true"] { font-weight: 600; }
.sd-field[hidden], .ff-dir-field[hidden] { display: none; }