/* ============================================================
   LISTING.CSS — City MSP Listing Page Styles
   Depends on: global.css
   ============================================================ */

/* ── Filter Bar ─────────────────────────────────────────────── */
.filter-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 800;
  background: rgba(20,20,20,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.filter-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  /* On mobile: horizontal scroll instead of wrapping */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 2px; /* prevent cut-off on scroll */
}
.filter-inner::-webkit-scrollbar { display: none; }
.filter-label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.filter-select {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 34px 8px 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--transition);
  min-width: 140px;
}
.filter-select:focus {
  outline: none;
  border-color: var(--navy);
}
.filter-select:hover {
  border-color: var(--border-light);
}
.filter-count {
  margin-left: auto;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-count strong {
  color: var(--white);
  font-weight: 700;
}
.filter-reset {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy-line);
  background: none;
  border: 1px solid rgba(33,24,57,0.3);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  display: none;
}
.filter-reset.visible { display: block; }
.filter-reset:hover {
  background: rgba(33,24,57,0.12);
}

/* ── Company Grid ───────────────────────────────────────────── */
.listings-section { padding: 48px 0 72px; }
.listings-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.listings-title { font-size: 1.4rem; color: var(--white); }
.listings-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 4px; }
/* ── Company list: ranked result rows ───────────────────────────
   Full-width rows (not a card grid): merit rank on the left, identity +
   blurb in the middle, rating + actions in a right rail. Distinct from the
   legacy vertical-card grid and clean for AI engines to read as a ranked list. */
.company-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.no-results {
  display: none;
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.no-results svg { margin: 0 auto 16px; opacity: 0.3; }
.no-results h3 { color: var(--text-muted); margin-bottom: 8px; font-size: 1.1rem; }

/* ── Company Row ────────────────────────────────────────────── */
.company-card {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  align-items: stretch;
  gap: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}
.company-card:hover {
  border-color: var(--navy);
  box-shadow: 0 6px 22px rgba(33,24,57,0.12);
  transform: translateY(-1px);
}
.company-card.hidden { display: none; }

/* Rank marker */
.card-rank {
  flex: 0 0 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
  line-height: 1;
}
.card-rank-num {
  font-family: 'Manrope', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-line);
}
.card-rank-num::before {
  content: '#';
  font-size: 0.62em;
  font-weight: 700;
  opacity: 0.55;
  vertical-align: super;
  margin-right: 1px;
}
.card-rank-lbl {
  font-family: 'Manrope', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.card-rank--ad { justify-content: center; padding-top: 0; color: var(--cyan); font-size: 1.1rem; }

/* Logo */
.company-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--dark-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy-line);
  flex-shrink: 0;
  overflow: hidden;
}
.company-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

/* Center content column */
.card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.card-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.company-name {
  font-family: 'Manrope', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
}
.company-location {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.company-location svg { flex-shrink: 0; }

/* Card meta */
.card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.meta-item svg { color: var(--navy-line); flex-shrink: 0; }
.meta-val { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--text-dim); }

/* Services tags */
.card-services .tag-list { gap: 5px; }

/* Right rail: rating + actions */
.card-aside {
  flex: 0 0 196px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}
.card-rating {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
}
.card-rating .rating-val {
  grid-row: 1 / 3;
  font-family: 'Manrope', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.card-rating .stars { font-size: 0.82rem; letter-spacing: 0.02em; }
.card-rating .review-count { font-size: 0.74rem; color: var(--text-muted); }
.card-rating .review-source {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.card-rating--unrated { display: flex; flex-direction: column; gap: 2px; }
.card-rating--unrated .review-source { text-transform: none; letter-spacing: 0; color: var(--text-dim); }

/* Card actions */
.card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.card-actions .btn { width: 100%; font-size: 0.8rem; padding: 9px 14px; }

/* ── City Info Section ───────────────────────────────────────── */
.city-info { background: var(--dark-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 56px 0; }
.city-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Sticky market sidebar. The prose column runs far longer than the stats column,
   which left a large blank area on the right of every city page. Pinning the stats
   keeps them beside the text the whole way down.
   Only above 1024px, because the grid collapses to one column below that and a
   sticky block in a stacked layout is just an obstruction.
   The max-height matters: this column can carry 8 stats, ~28 employer chips and
   several submarket cards, which is taller than a short viewport. Without it the
   bottom of the sidebar would be stranded off-screen while pinned, with no way to
   reach it. With it, a tall sidebar scrolls internally instead. */
@media (min-width: 1025px) {
  .city-info-grid > :not(.city-info-main) {
    position: sticky;
    top: calc(var(--nav-height, 88px) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--nav-height, 88px) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.city-info-main h2 { margin-bottom: 16px; font-size: 1.6rem; }
.city-info-main p { font-size: 0.92rem; line-height: 1.75; margin-bottom: 16px; }
.city-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.city-stat {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.city-stat-val {
  font-family: 'Manrope', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy-line);
  display: block;
  line-height: 1.1;
  margin-bottom: 2px;
}
.city-stat-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Market Data Section ─────────────────────────────────────── */
.market-section { padding: 56px 0; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.market-card {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
}
.market-card h3 {
  font-size: 1rem;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.market-card h3 span { color: var(--navy-line); }
.market-list { display: flex; flex-direction: column; gap: 10px; }
.market-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.market-list-item .key { color: var(--text-muted); }
.market-list-item .val {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* ── Employers / Neighborhoods ───────────────────────────────── */
.chips-section { margin-top: 24px; }
.chips-title {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--dark-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── FAQ Section ────────────────────────────────────────────── */
.faq-section {
  padding: 56px 0;
  background: var(--dark-2);
  border-top: 1px solid var(--border);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.open, .faq-item:hover { border-color: var(--border-light); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
}
.faq-q:hover { color: var(--white); }
.faq-q .faq-icon {
  width: 22px;
  height: 22px;
  background: var(--dark-4);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all var(--transition);
}
.faq-item.open .faq-q .faq-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: rotate(45deg);
}
.faq-a {
  display: none;
  padding: 0 20px 18px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.faq-item.open .faq-a { display: block; }

/* ── CTA Banner ─────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #3a0318 100%);
  border: 1px solid rgba(33,24,57,0.4);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner h2 { margin-bottom: 12px; font-size: 1.8rem; }
.cta-banner p { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin-bottom: 28px; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .market-grid { grid-template-columns: 1fr 1fr; }
  .city-info-grid { grid-template-columns: 1fr; gap: 32px; }
  /* New inline-grid sections */
  .pain-grid,
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .filter-inner { gap: 8px; }
  .filter-label { display: none; }
  .filter-count { font-size: 0.75rem; white-space: nowrap; }
  .filter-reset { font-size: 0.74rem; padding: 5px 10px; }
  .company-grid { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
  .city-stats-grid { grid-template-columns: 1fr 1fr; }
  .cta-banner { padding: 32px 20px; }
  .cta-banner h2 { font-size: 1.4rem; }
  .listings-header { flex-direction: column; align-items: flex-start; }
  .company-card { padding: 18px; }
  .card-actions .btn { min-height: 40px; font-size: 0.8rem; }
  /* New inline-grid sections → single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .filter-select { min-width: 120px; font-size: 0.8rem; padding: 8px 28px 8px 10px; }
  .card-actions { flex-direction: column; }
  .card-actions .btn { width: 100%; justify-content: center; }
  .city-stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { flex-direction: column; gap: 12px; }
  .hero-stats > div { display: flex; align-items: center; gap: 12px; }
  .hero-stat-val { font-size: 1.4rem; }
}

/* ── Ranked rows: responsive (overrides legacy card rules above) ──────── */
@media (max-width: 768px) {
  .company-card { flex-wrap: wrap; padding: 16px 18px; gap: 14px; }
  .card-rank { flex-basis: 30px; flex-direction: row; align-items: center; gap: 6px; }
  .card-rank-lbl { display: none; }
  .card-aside {
    flex-basis: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .card-actions { flex-direction: row; margin-top: 0; flex: 0 0 auto; }
  .card-actions .btn { width: auto; }
}
@media (max-width: 480px) {
  .card-aside { flex-direction: column; align-items: stretch; }
  .card-actions { flex-direction: column; width: 100%; }
  .card-actions .btn { width: 100%; justify-content: center; }
}