/* ============ Moonig — Responsive overrides ============ */

.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* ---------- Tablet landscape & below (≤1200px) ---------- */
@media (max-width: 1200px) {
  .site-header .header-inner,
  .page-layout,
  .event-section,
  .footer-cols,
  .footer-strip {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .site-header .header-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .page-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .hero-row { grid-template-columns: 1fr; }
  .event-content { grid-template-columns: 1fr; }
  .next-races-grid { grid-template-columns: 1fr; }
  .next-race-cell { border-right: none; border-bottom: 1px solid #eee; }

  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Programme timeline becomes scrollable */
  .programme-card { overflow-x: auto; }
  .timeline { min-width: 720px; }

  /* Tables scrollable */
  .reunion-block { overflow-x: auto; }
  .races-table { min-width: 720px; }
}

/* ---------- Mobile landscape (≤768px) ---------- */
@media (max-width: 768px) {
  body { font-size: 12px; }

  .top-banner { font-size: 11px; padding: 6px 12px; }

  .site-header .header-inner {
    gap: 10px;
    padding: 10px 16px;
  }
  .header-actions .btn-login,
  .header-actions .btn-signup {
    padding: 8px 14px;
    font-size: 12px;
  }

  .page-layout,
  .event-section { padding: 12px; }

  .card-title { font-size: 13px; padding: 10px 12px; }

  /* Event header */
  .event-info { flex-wrap: wrap; gap: 10px; }
  .event-bet-btn { width: 100%; }

  /* Sidebar upcoming races */
  .upcoming-races .race-line {
    grid-template-columns: 1fr 36px 50px auto;
    gap: 4px;
    padding: 8px;
  }

  /* Footer */
  .site-footer { padding: 24px 16px 16px; }
  .footer-cols { grid-template-columns: 1fr; gap: 18px; }
  .footer-cols--simple { grid-template-columns: 1fr; }
  .footer-strip {
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
  }
  .footer-legal { padding: 0 8px 16px; }

  /* Help grid */
  .help-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
  .help-icon { width: 48px; height: 48px; font-size: 18px; }

  /* Info pages */
  .info-section { padding: 16px; }
  .info-section-title { font-size: 14px; }
  .info-toc { padding: 12px 16px; }

  /* Day tabs */
  .day-tabs { overflow-x: auto; padding: 0 4px; }
  .day-tabs .day-tab {
    padding: 0 18px;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* Race tabs */
  .race-tabs { padding: 0 12px 12px; }
  .race-tabs .race-tab {
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Bonus banner */
  .bonus-banner { padding: 20px 16px; }
  .bonus-banner .amount { font-size: 30px; }
  .bonus-banner .label { font-size: 15px; }

  /* Signup form */
  .signup-form .field-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Small mobile (≤480px) ---------- */
@media (max-width: 480px) {
  .brand-logo .logo-text { font-size: 22px; }
  .brand-logo .age-restriction { width: 26px; height: 26px; font-size: 11px; }

  .help-grid { grid-template-columns: repeat(2, 1fr); }

  .reunion-header { font-size: 13px; padding: 10px 12px; }
  .reunions-title { padding: 12px; font-size: 13px; }

  .event-time { font-size: 13px; padding: 6px 10px; }
  .event-name { font-size: 12px; }

  .footer-strip { flex-direction: column; align-items: center; }
}