/* Region browse SEO pages (GE-3) + map discovery — public, buyer-facing,
   mobile-first. Tokens only (no hardcoded hex). */

.region-page { max-width: 64rem; margin: 0 auto; padding: var(--space-4); }

.region-header {
  display: flex; align-items: center;
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.region-brand {
  font-weight: var(--fw-bold, 700); font-size: 1.25rem;
  letter-spacing: -0.01em; text-decoration: none; color: var(--text, #0f172a);
}
.region-main { padding: var(--space-5) 0; }

.region-breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; padding: 0; margin: 0 0 var(--space-4);
  font-size: var(--fs-sm, 12px); color: var(--muted, #64748b);
}
.region-breadcrumb a { color: var(--muted, #64748b); }
.region-breadcrumb a:hover { color: var(--primary); }
.region-breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--dim, #cbd5e1); }
.region-breadcrumb [aria-current="page"] { color: var(--text, #0f172a); font-weight: var(--fw-medium, 500); }

.region-main h1 { font-size: var(--fs-h1, 20px); font-weight: var(--fw-semibold, 600); letter-spacing: -0.01em; margin: var(--space-2) 0; }
.region-main h2 { font-size: var(--fs-h2, 16px); font-weight: var(--fw-semibold, 600); margin: var(--space-6) 0 var(--space-3); }
.region-main > p { color: var(--muted, #475569); }

.region-states, .region-districts ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-2);
}
.region-states a, .region-districts a {
  display: block; padding: var(--space-3) var(--space-4); min-height: 44px;
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md, 10px);
  background: var(--surface, #fff); color: var(--text, #0f172a); text-decoration: none;
  font-weight: var(--fw-medium, 500);
  transition: border-color var(--dur-micro, .15s) var(--ease), color var(--dur-micro, .15s) var(--ease);
}
.region-states a:hover, .region-districts a:hover { border-color: var(--primary); color: var(--primary); }

.region-layouts {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4);
}
.region-card {
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md, 10px);
  padding: var(--card-pad, 20px); background: var(--surface, #fff);
  transition: border-color var(--dur-micro, .15s) var(--ease), box-shadow var(--dur-micro, .15s) var(--ease);
}
.region-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.region-card__title { font-size: var(--fs-h2, 16px); margin: 0 0 var(--space-1); }
.region-card__title a { color: var(--text, #0f172a); }
.region-card__title a:hover { color: var(--primary); }
.region-card__project { font-weight: var(--fw-semibold, 600); margin: var(--space-1) 0; }
.region-card__builder, .region-card__loc { color: var(--muted, #64748b); font-size: var(--fs-sm, 12px); margin: 2px 0; }
.region-card__meta { display: flex; gap: var(--space-4); margin: var(--space-3) 0 0; }
.region-card__meta dt { font-size: var(--fs-xs, 11px); color: var(--muted, #64748b); text-transform: uppercase; letter-spacing: var(--track-label, .04em); }
.region-card__meta dd { margin: 0; font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; }

.region-empty { color: var(--muted, #64748b); }
.region-empty.empty-state { background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-md, 10px); }

.region-footer {
  margin-top: var(--space-12); padding-top: var(--space-4);
  border-top: 1px solid var(--border, #e5e7eb); color: var(--muted, #64748b); font-size: var(--fs-sm, 12px);
}

/* --- Map discovery results / loading / empty status ---------------------- */
.map-results {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border, #e5e7eb); border-left-width: 3px;
  border-radius: var(--r-md, 10px); background: var(--surface, #fff);
  font-size: var(--fs-table, 13px); color: var(--text, #0f172a);
}
.map-results--loading { border-left-color: var(--primary); color: var(--muted, #475569); }
.map-results--found { border-left-color: var(--st-available); }
.map-results--empty { border-left-color: var(--st-reserved); color: var(--muted, #475569); }
.map-results--error { border-left-color: var(--st-sold); color: var(--st-sold); }

/* region browse — state cards */
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:18px 0}
.region-card{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--border,#e2e8f0);border-radius:14px;background:var(--surface,#fff);text-decoration:none;color:var(--text,#0f172a);transition:border-color .15s,transform .1s,box-shadow .15s}
.region-card:hover{border-color:var(--accent,#4178b8);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.region-card__pin{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent,#4178b8) 12%,transparent);color:var(--accent,#4178b8)}
.region-card__pin svg{width:20px;height:20px}
.region-card__name{flex:1;font-weight:600;font-size:15px}
.region-card__go{color:var(--muted,#94a3b8);font-size:18px}