/* Home page sections ([home-upcoming-races] etc., see class-nrng-home.php).
   Self-contained: reads the --nrng-* design tokens when the site has them in
   global CSS, with the same values as fallbacks when it doesn't. */

.nrng-hm-races{
  --hm-yellow:var(--nrng-yellow,#F7B500);--hm-yellow-deep:var(--nrng-yellow-deep,#E0A200);
  --hm-yellow-soft:var(--nrng-yellow-soft,#FFF3D2);--hm-ink:var(--nrng-ink,#16140F);
  --hm-paper:var(--nrng-paper,#FFFFFF);--hm-bg2:var(--nrng-bg-2,#ECE9DF);
  --hm-line:var(--nrng-line,#E2DDD1);--hm-muted:var(--nrng-muted,#736C5C);
  --hm-r:var(--nrng-r,14px);--hm-rs:var(--nrng-r-s,10px);
  --hm-display:var(--nrng-font-display,"Oswald","Noto Sans TC",sans-serif);
  display:flex;flex-direction:column;gap:10px;font-family:var(--nrng-font-body,"Hanken Grotesk","Noto Sans TC",sans-serif);
  color:var(--hm-ink)}

.nrng-hm-race{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--hm-paper);
  border:1px solid var(--hm-line);border-radius:var(--hm-r);padding:16px 20px}
.nrng-hm-rdate{font-family:var(--hm-display);font-weight:700;font-size:15px;min-width:120px}
.nrng-hm-rmain{flex:1;min-width:180px}
.nrng-hm-rname{font-family:var(--hm-display);font-weight:600;text-transform:uppercase;font-size:18px}
.nrng-hm-rplace{font-size:13px;color:var(--hm-muted);margin-top:2px}
.nrng-hm-rdists{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.nrng-hm-chip{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:var(--hm-bg2);color:var(--hm-muted)}

.nrng-hm-btn{font-family:var(--hm-display);text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  font-size:12.5px;padding:1rem 3rem;min-height:44px;box-sizing:border-box;border-radius:var(--hm-rs);
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;
  background:var(--hm-yellow);color:var(--hm-ink);box-shadow:0 2px 0 var(--hm-yellow-deep);transition:.15s}
.nrng-hm-btn:hover{background:var(--hm-yellow-deep);color:var(--hm-ink);transform:translateY(-1px)}

.nrng-hm-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:4px 10px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.05em;background:var(--hm-yellow-soft);color:#8A6A00}

/* Mobile: date and Register button share the first row (button on the right),
   the race details drop to a full-width second row. */
@media (max-width:640px){
  .nrng-hm-race{display:grid;grid-template-columns:1fr auto;grid-template-areas:"date act" "main main";
    align-items:center;gap:12px 18px}
  .nrng-hm-rdate{grid-area:date;min-width:0}
  .nrng-hm-rmain{grid-area:main;min-width:0}
  .nrng-hm-btn,.nrng-hm-tag{grid-area:act;justify-self:end}
  .nrng-hm-btn{padding:1rem 2rem}
}