/* Regions — loaded only on /regions. */

/* ============================================================
   REGIONS
   ============================================================ */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.region-card {
  border-radius: 10px;
  padding: 1.25rem;
  border: 1.5px dashed var(--border);
  background: var(--white);
  transition: all var(--transition);
}
.region-card.active {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(61,191,164,0.05);
}
.region-card h3 {
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.region-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.region-status.live { color: var(--green); }
.region-card p { font-size: 0.83rem; color: var(--muted); margin-top: 0.5rem; }

.region-note { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
.region-card-cta { border-color: var(--amber); background: rgba(245,166,35,0.04); }

@media (max-width: 768px) { .region-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .region-grid { grid-template-columns: 1fr; } }