/* ── Location browse pages: US states, Medellin communes, Worldwide ──────── */

/* Page wrapper */
.browse-wrap {
  padding: var(--sp-8, 3rem) var(--sp-6, 1.5rem) var(--sp-10, 5rem);
}

/* Hero text block */
.browse-wrap .hero {
  max-width: 640px;
  margin: 0 auto var(--sp-8, 3rem);
  text-align: center;
}
.browse-wrap .hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: var(--sp-4, 1rem);
  line-height: 1.08;
}
.browse-wrap .hero .sub {
  font-size: var(--text-md, 1rem);
  color: var(--muted, #888);
  max-width: 480px;
  margin: 0 auto;
}

/* ── Location card grid ───────────────────────────────────────────────────── */

.loc-section {
  max-width: 1080px;
  margin: 0 auto;
}

.loc-section-heading {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #888);
  margin-bottom: var(--sp-5, 1.25rem);
  text-align: center;
}

.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

/* Individual location card */
.loc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bone-2, #f5f5f0);
  border: 1px solid var(--line, #e0e0da);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.loc-card:hover {
  border-color: var(--accent, #6c47ff);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}

.loc-card__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-card__count {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted, #888);
  font-variant-numeric: tabular-nums;
  background: var(--bone-3, #ececec);
  border-radius: 20px;
  padding: 2px 9px;
  line-height: 1.6;
}

.loc-card:hover .loc-card__count {
  background: color-mix(in oklab, var(--accent, #6c47ff) 12%, var(--bone-3, #ececec));
  color: var(--accent, #6c47ff);
}

/* ── Worldwide model grid ─────────────────────────────────────────────────── */

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .loc-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 600px) {
  .browse-wrap {
    padding: var(--sp-6, 1.5rem) var(--sp-4, 1rem) var(--sp-8, 3rem);
  }
  .loc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .model-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}