/**
 * File: WEB/css/conquer-map-page.css
 * Description: Styles for the dedicated conquer-map.html page. Reuses the
 *   shared design tokens from css/style.css (colors, radii, fonts) rather
 *   than introducing a new palette. The homepage's .conquer-map-panel /
 *   .map-stat styles already live in style.css and are reused as-is there.
 */

.cmap-hero {
  text-align: center;
  padding: 64px 24px 40px;
  background: radial-gradient(ellipse at top, rgba(200,137,42,.12), transparent 60%);
}
.cmap-hero-inner { max-width: 780px; margin: 0 auto; }
.cmap-hero-eyebrow {
  display: inline-block;
  color: var(--amber);
  font: 800 11px var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cmap-hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  color: var(--text-white);
  margin: 0 0 16px;
}
.cmap-hero-desc {
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.65;
}

.cmap-section-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.cmap-section-head h2 { font-family: var(--font-display); font-size: 26px; color: var(--text-white); margin: 10px 0; }

.cmap-live-badge, .cmap-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font: 800 11px var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmap-live-badge { color: #61d98b; background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.3); }
.cmap-soon-badge { color: var(--amber-light); background: rgba(200,137,42,.1); border: 1px dashed var(--border-bright); }

.cmap-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.cmap-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.cmap-stat-card .stat-value { font-family: var(--font-display); font-size: 30px; color: var(--text-white); }
.cmap-stat-card .stat-value.amber { color: var(--amber-light); }
.cmap-stat-card .stat-label { color: var(--text-dim); font: 700 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }

.cmap-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.cmap-detail-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.cmap-detail-card h3 { font-family: var(--font-display); font-size: 16px; color: var(--text-white); margin: 0 0 6px; }
.cmap-card-note { color: var(--text-dim); font-size: 12px; margin: 0 0 14px; line-height: 1.5; }

.cmap-state-list, .cmap-city-list { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.cmap-state-row { display: grid; grid-template-columns: 40px 1fr 44px; align-items: center; gap: 10px; }
.cmap-state-code { color: var(--amber-light); font: 700 12px var(--font-ui); }
.cmap-state-bar-track { height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.cmap-state-bar-fill { height: 100%; background: linear-gradient(90deg, var(--copper), var(--amber-light)); border-radius: inherit; }
.cmap-state-count { text-align: right; color: var(--text-light); font: 700 12px var(--font-ui); }

.cmap-city-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cmap-city-row b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(200,137,42,.12); color: var(--amber-light); font: 700 10px var(--font-ui); }
.cmap-city-row span { color: var(--text-light); font-size: 13px; }
.cmap-city-row strong { color: var(--amber-light); font-size: 13px; }

.cmap-empty-note { color: var(--text-dim); font-size: 12px; }

.cmap-coming-soon-section { background: linear-gradient(180deg, transparent, rgba(200,137,42,.04) 30%, transparent); }
.cmap-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.cmap-soon-card {
  padding: 22px;
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-md);
  background: rgba(200,137,42,.03);
}
.cmap-soon-icon { font-size: 26px; display: block; margin-bottom: 10px; }
.cmap-soon-card h4 { font-family: var(--font-display); font-size: 14px; color: var(--text-white); margin: 0 0 8px; }
.cmap-soon-card p { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
  .cmap-detail-grid { grid-template-columns: 1fr; }
}