/* ============================================
   COMPANIES — top-level firm directory page.
   Reuses tokens from variables.css + components.css.
   ============================================ */

#companies-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---- Hero ---- */
.companies-hero {
  padding: var(--space-12) 0 var(--space-8);
  text-align: center;
}
.companies-hero__inner {
  max-width: 820px;
  margin: 0 auto;
}
.companies-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
  margin-bottom: var(--space-3);
}
.companies-hero__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: 1.1;
  margin: 0 0 var(--space-4) 0;
}
.companies-hero__lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 auto var(--space-6) auto;
  max-width: 720px;
}
.companies-hero__note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 auto var(--space-6) auto;
  max-width: 720px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--border, rgba(127, 127, 127, 0.18));
  border-radius: var(--radius-md, 10px);
  text-align: left;
}
.companies-hero__note strong { color: var(--text); }
.companies-podnote {
  max-width: 1100px;
  margin: var(--space-6) auto var(--space-2) auto;
  padding: 0 var(--space-4);
}
.companies-podnote .companies-hero__note { margin-bottom: 0; }
.company-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-xs, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  margin: 0 0 var(--space-2) 0;
}
.companies-hero__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.companies-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.companies-hero__stat-n {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-color);
  line-height: 1;
}
.companies-hero__stat-l {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ---- Search / filter bar ---- */
.companies-filter {
  padding: var(--space-2) 0 var(--space-4);
}
.companies-filter__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.companies-filter__input {
  flex: 1;
  min-width: 280px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-color);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.companies-filter__input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.companies-filter__count {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---- Grid ---- */
.companies-grid-section { padding-bottom: var(--space-10); }
.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-5);
}
.companies-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  /* Stay invisible for the first 350ms: on a cached load the firm grid renders
     well under that, so the "Loading firm pages..." spinner never flashes when
     bouncing between cached pages. JS replaces this node once the grid is ready. */
  opacity: 0;
  animation: companies-loading-appear 0.2s ease 0.35s forwards;
}
@keyframes companies-loading-appear { to { opacity: 1; } }
.companies-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: companies-spin 0.8s linear infinite;
}
@keyframes companies-spin { to { transform: rotate(360deg); } }
.companies-empty {
  grid-column: 1 / -1;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
}
.companies-empty a { color: var(--accent-primary); }

/* Crawler-visible fallback when JS is disabled. Plain link list, low-key. */
.companies-noscript-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.companies-noscript-list li {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.companies-noscript-list a {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: var(--font-medium);
}

/* ---- Card ---- */
.company-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--text-color);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}
.company-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.company-card::before {
  /* accent stripe on top edge — keeps the card visually anchored */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-primary);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.company-card:hover::before { opacity: 1; }

.company-card__logo-wrap {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--space-4);
  position: relative;
}
.company-card__logo {
  max-height: 56px;
  max-width: 200px;
  object-fit: contain;
}
.company-card__logo-fallback {
  display: none;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-color);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  letter-spacing: 0.05em;
}
.company-card__logo-wrap--fallback .company-card__logo-fallback { display: inline-block; }

.company-card__body { flex: 1; }
.company-card__head { margin-bottom: var(--space-3); }
.company-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.2;
}
.company-card__tagline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.company-card__blurb {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 var(--space-4) 0;
  /* clamp to 3 lines so all cards align */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.company-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.company-card__role {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent-primary);
  font-weight: var(--font-medium);
}
.company-card__diffs {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.company-card__diff--e { color: #10b981; }
.company-card__diff--m { color: #f59e0b; }
.company-card__diff--h { color: #ef4444; }

.company-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.company-card__count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.company-card__cta {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--accent-primary);
}

/* ---- Coming-soon roadmap ---- */
.companies-roadmap {
  padding: var(--space-8) 0 var(--space-12);
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-6);
}
.companies-roadmap__head { margin-bottom: var(--space-5); }
.companies-roadmap__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-2) 0;
}
.companies-roadmap__desc {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin: 0;
}
.companies-roadmap__desc a { color: var(--accent-primary); }
.companies-roadmap__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.companies-roadmap__list li {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .companies-hero { padding: var(--space-8) 0 var(--space-6); }
  .companies-hero__title { font-size: var(--text-3xl); }
  .companies-hero__lede { font-size: var(--text-base); }
  .companies-hero__stats { gap: var(--space-5); }
  .companies-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .company-card { padding: var(--space-4); }
}

/* Follow toggle on directory cards */
.company-follow-btn {
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-light);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  margin-right: var(--space-2);
}
.company-follow-btn:hover { background: var(--accent); color: #fff; }
.company-follow-btn--on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Phone pass (true-width ~360-414px; desktop zoom:1.2 is dropped to 1
       on <=768px via a head script, so these widths are real device px).
       Placed AFTER the base .company-follow-btn rule above so the override
       below wins on equal specificity via source order. ---- */
@media (max-width: 768px) {
  /* Stop content padding from eating the narrow viewport. */
  #companies-content { padding: 0 var(--space-4); }

  /* Force a single-column grid even on wider phones / landscape so a
     360px-minmax track can never trigger a horizontal scroll. */
  .companies-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Search + count stack vertically; input no longer demands 280px. */
  .companies-filter__inner { flex-direction: column; align-items: stretch; }
  .companies-filter__input { min-width: 0; width: 100%; flex: none; }
  .companies-filter__count { align-self: flex-start; }

  /* Logo can't push wider than the card on a ~280px inner width. */
  .company-card__logo { max-width: 100%; }

  /* Long firm names wrap instead of forcing the card wide. */
  .company-card__name { overflow-wrap: anywhere; word-break: break-word; }

  /* Stat rows wrap rather than overflow. */
  .company-card__diffs { flex-wrap: wrap; }
  .company-card__roles { row-gap: var(--space-1); }

  /* The footer is the real overflow risk: count + Follow button + CTA on
     one nowrap flex row clips the CTA under the card's overflow:hidden.
     Let it wrap; keep Follow pinned right next to the count, CTA flows. */
  .company-card__footer { flex-wrap: wrap; gap: var(--space-2); }
  .company-follow-btn { margin-left: auto; margin-right: 0; white-space: normal; }
  .company-card__count,
  .company-card__cta { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  /* Tighten hero stat spacing so the 3 stats don't crowd at ~360px. */
  .companies-hero__stats { gap: var(--space-4); }
  .companies-hero__stat-n { font-size: var(--text-2xl); }

  /* Footer: drop the side-by-side meta+button layout entirely. The count
     line takes the full width, then the Follow button + CTA sit on the
     row below, each free to sit on its own line if needed — zero clip. */
  .company-card__footer { align-items: flex-start; }
  .company-card__count { flex: 1 0 100%; }
  .company-follow-btn { margin-left: 0; }
  .company-card__cta { margin-left: auto; }
}

/* ===== Mobile audit fixes (2026-06-08 sweep): follow-btn tap target + readable role ===== */
@media (max-width: 768px) {
  .company-follow-btn { padding: 8px 12px; }
  .company-card__role { font-size: var(--text-sm); padding: 3px 10px; }
}

/* End-of-directory CTA → all firm playlists (the long-tail firms live here, not as cards) */
.companies-more { max-width: 720px; margin: 40px auto 8px; padding: 26px 28px; text-align: center; border: 1px solid var(--border-color, #e5e7eb); border-radius: 16px; background: var(--bg-elevated, #fafbfc); }
.companies-more__text { font-size: .98rem; line-height: 1.6; color: var(--text-secondary, #4b5563); margin: 0 0 16px; }
.companies-more__text b { color: var(--text-primary, #111827); }
.companies-more__cta { display: inline-block; padding: 11px 22px; border-radius: 10px; background: #4c5fd5; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; }
.companies-more__cta:hover { background: #3b4bd9; filter: brightness(1.05); }