/* Shared styles for /หาเพื่อนคุย/ hub + province pages — layered on top of
   assets/style.css?v=20260813-violet and blog/blog.css?v=20260813-violet. */

.province-hub { padding: 140px 0 80px; }
.province-hub-inner { max-width: 900px; }
.province-hub h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 8px; }
.province-hub-sub { color: var(--text-secondary); margin: 0 0 40px; }

.province-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.province-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 16px);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.province-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.province-card h2 { font-size: 17px; margin: 0 0 4px; }
.province-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

.locality-list { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.locality-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.locality-list li strong { color: var(--text); display: block; margin-bottom: 3px; font-size: 15px; }
.locality-list li span { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }