/* world-region.css — Region index page styles */

/* ---------------------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------------------- */
.page-header--region { padding: 2rem 1.5rem 1.25rem; }

.region-header__meta {
  margin-bottom: 0.4rem;
  font-family: 'Inconsolata', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.region-header__eyebrow { color: var(--gold); }

.region-header__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* Reuse stat-badge from world-location.css — include that file too when using this page */
.stat-badge--faction-weight.stat-badge--high   { background: rgba(122,31,31,0.12); color: var(--crimson); border-color: rgba(122,31,31,0.25); }
.stat-badge--faction-weight.stat-badge--medium { background: rgba(184,137,42,0.12); color: var(--gold); border-color: rgba(184,137,42,0.25); }
.stat-badge--faction-weight.stat-badge--low    { background: rgba(154,142,122,0.12); color: var(--muted); border-color: rgba(154,142,122,0.25); }
.stat-badge--ancestry { background: rgba(44,107,180,0.12); color: var(--steel); border-color: rgba(44,107,180,0.25); }

/* ---------------------------------------------------------------------------
 * Body layout
 * ------------------------------------------------------------------------- */
.region-body { max-width: 960px; }
.region-map-panel { margin-bottom: 1.5rem; }
.region-prose { margin-bottom: 2rem; }

/* ---------------------------------------------------------------------------
 * Location card grid
 * ------------------------------------------------------------------------- */
.region-locations h2 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.location-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.location-card {
  display: block;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.15s, background 0.15s;
}
.location-card:hover {
  border-color: var(--gold);
  background: rgba(184,137,42,0.06);
}

.location-card__type {
  font-family: 'Inconsolata', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.location-card--city .location-card__type { color: var(--gold); }
.location-card--sacred-site .location-card__type { color: var(--steel); }
.location-card--dungeon .location-card__type { color: var(--crimson); }

.location-card__title {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.location-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}