/* ==========================================================================
   regions.css — /regions hub (2026-09-29). Builds on palmerston-north.css
   (pn-head, pn-eyebrow, pn-radar, pn-reason). Prefix .rg-*.
   ========================================================================== */

.rg .pn-radar { max-width: 420px; }

/* Radar chips: towns placed roughly by geography around the centre dot. */
.rg .rg-chip--np { top: 14%; left: 0; }
.rg .rg-chip--na { top: 8%; right: 4%; }
.rg .rg-chip--wg { top: 42%; left: 4%; }
.rg .rg-chip--ms { top: 50%; right: 0; }
.rg .rg-chip--wl { bottom: 12%; left: 14%; }
.rg .rg-chip--nz { bottom: 4%; right: 10%; background: var(--nx-orange); border-color: var(--nx-orange); color: #fff; }
html.nx-js .rg .pn-radar.is-in .rg-chip--na { transition-delay: 120ms; }
html.nx-js .rg .pn-radar.is-in .rg-chip--wg { transition-delay: 240ms; }
html.nx-js .rg .pn-radar.is-in .rg-chip--ms { transition-delay: 360ms; }
html.nx-js .rg .pn-radar.is-in .rg-chip--wl { transition-delay: 480ms; }
html.nx-js .rg .pn-radar.is-in .rg-chip--nz { transition-delay: 640ms; }

.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.rg-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--nx-line);
  border-radius: 22px;
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-soft);
  text-decoration: none;
  transition: transform var(--nx-t-base) var(--nx-ease-out), box-shadow var(--nx-t-base) var(--nx-ease-out), border-color var(--nx-t-base) var(--nx-ease-out);
}
.rg-card:hover { transform: translateY(-4px); box-shadow: var(--nx-shadow-lift); border-color: rgba(247, 148, 29, .45); }
.rg-card:focus-visible { outline: 3px solid rgba(247, 148, 29, .45); outline-offset: 3px; }
.rg-card__tag {
  margin-bottom: 10px;
  color: var(--nx-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rg-card h3 { margin: 0 0 8px; color: var(--nx-ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.rg-card p { flex: 1; margin: 0 0 18px; color: var(--nx-ink-soft); font-size: .96rem; line-height: 1.6; }
.rg-card__more { color: var(--nx-ink); font-size: .92rem; font-weight: 700; }
.rg-card__more span { display: inline-block; color: var(--nx-orange-dark); transition: transform var(--nx-t-base) var(--nx-ease-out); }
.rg-card:hover .rg-card__more span { transform: translateX(4px); }

.rg-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 900px;
}

@media (max-width: 767px) {
  .rg-modes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rg-card { transition: none; }
}

/* "We work best in person": the recommended option stands out. */
.rg-mode--pick { border-color: rgba(247, 148, 29, .55); box-shadow: var(--nx-shadow-soft); }
.rg-mode__tag {
  display: table;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nx-orange);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}