/* ============================================================
   RoadSafe — หน้าหลักฝั่งประชาชน (Default.aspx)
   ใช้ค่าจาก rs-tokens.css เท่านั้น
   ============================================================ */

.rs-home {
  max-width: var(--rs-content-max, 1440px);
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* ---- Hero ---- */
.rs-hero {
  background: var(--rs-primary, #16265a);
  color: var(--rs-on-primary, #ffffff);
  border-radius: var(--rs-radius-lg, 1.25rem);
  padding: 2.5rem 2rem;
  margin-bottom: 1.5rem;
}

.rs-hero h1 {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0 0 .5rem;
}

.rs-hero p {
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  color: var(--rs-text-faint, #9aa6c7);
  max-width: 46rem;
  margin: 0 0 1.25rem;
}

.rs-hero .rs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.rs-hero .rs-btn-report {
  background: var(--rs-highlight, #ef7a1f);
  border: none;
  color: #fff;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: var(--rs-radius-md, .875rem);
}

.rs-hero .rs-btn-report:hover { background: var(--rs-highlight-hover, #d96a12); color: #fff; }

.rs-hero .rs-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  padding: .7rem 1.4rem;
  border-radius: var(--rs-radius-md, .875rem);
}

.rs-hero .rs-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- การ์ดทางลัด ---- */
.rs-home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.rs-home-card {
  display: block;
  background: var(--rs-surface, #ffffff);
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  border-radius: var(--rs-radius-md, .875rem);
  box-shadow: var(--rs-shadow-sm, 0 2px 10px rgba(20, 34, 77, .06));
  padding: 1.25rem;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}

.rs-home-card:hover {
  box-shadow: var(--rs-shadow-md, 0 12px 34px rgba(20, 34, 77, .10));
  transform: translateY(-2px);
}

.rs-home-card .rs-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--rs-radius-sm, .5rem);
  background: var(--rs-primary-soft, #e8f0fb);
  color: var(--rs-primary, #16265a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: .75rem;
}

.rs-home-card h2 {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--rs-text, #16265a);
  margin: 0 0 .3rem;
}

.rs-home-card p {
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  font-size: .9rem;
  color: var(--rs-text-muted, #5c6683);
  margin: 0;
}

/* ---- สถิติ (โครง — รอข้อมูลจริง) ---- */
.rs-home-stats {
  background: var(--rs-surface, #ffffff);
  border: 1px solid var(--rs-border-soft, #e4e9f2);
  border-radius: var(--rs-radius-md, .875rem);
  padding: 1.5rem;
}

.rs-home-stats h2 {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--rs-text, #16265a);
  margin: 0 0 1rem;
}

.rs-home-stats .rs-stats-empty {
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  color: var(--rs-text-faint, #9aa6c7);
  text-align: center;
  padding: 2rem 1rem;
  border: 1px dashed var(--rs-border, #c3ccdd);
  border-radius: var(--rs-radius-sm, .5rem);
}

.rs-stats-empty i { font-size: 1.6rem; display: block; margin-bottom: .4rem; }

@media (max-width: 768px) {
  .rs-home-cards { grid-template-columns: 1fr; }
  .rs-hero { padding: 1.75rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-home-card { transition: none; }
  .rs-home-card:hover { transform: none; }
}

/* ---- ตารางตัวเลขสถิติ (ข้อมูลจริง) ---- */
.rs-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.rs-stat {
  text-align: center;
  padding: 1rem .5rem;
  background: var(--rs-surface-muted, #f6f8fc);
  border-radius: var(--rs-radius-md, .875rem);
}

.rs-stat .rs-stat-value {
  font-family: var(--rs-font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--rs-primary, #16265a);
  line-height: 1.1;
}

.rs-stat .rs-stat-label {
  font-family: var(--rs-font-body, 'Sarabun', sans-serif);
  font-size: .85rem;
  color: var(--rs-text-muted, #5c6683);
  margin-top: .3rem;
}

@media (max-width: 576px) {
  .rs-stats-grid { grid-template-columns: 1fr; }
}