/* ============================================
   RaceBase shared mobile stylesheet
   Applies to all 12 pages. Loaded after each page's inline <style>
   so these rules override.
   ============================================ */

/* ---------- Tablet breakpoint ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 32px !important; }
  .hero h1 { font-size: 88px !important; }
  .hero .sub { font-size: 16px !important; }
  .stat-strip-inner { padding: 0 32px !important; }
  .stat .num { font-size: 26px !important; }
}

/* ---------- Mobile breakpoint ---------- */
@media (max-width: 720px) {

  /* Universal */
  body { overflow-x: hidden; }
  .container { padding: 0 20px !important; max-width: 100% !important; }
  img { max-width: 100%; height: auto; }

  /* Header / nav */
  header { padding: 16px 0 !important; }
  .nav { flex-wrap: wrap !important; gap: 12px; }
  .brand img.rb-logo,
  .brand img.logo { height: 32px !important; }
  .nav ul {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px !important;
    font-size: 12px !important;
    justify-content: flex-start;
  }
  .nav-social { margin-right: 8px !important; gap: 10px !important; }
  .nav-social a { width: 30px !important; height: 30px !important; }
  .nav-social a svg { width: 14px; height: 14px; }
  .nav .cta-btn,
  .nav-cta { padding: 10px 16px !important; font-size: 12px !important; }
  /* Hide dropdown menus on mobile — links still reachable via footer */
  .nav .drop-menu { display: none !important; }
  .nav .has-drop > a::after { display: none !important; }

  /* Hero (global) */
  .hero { height: auto !important; min-height: 600px !important; padding: 120px 0 60px !important; }
  .hero-inner { padding-top: 20px !important; padding-bottom: 40px !important; }
  .hero h1 { font-size: 56px !important; line-height: 0.95 !important; }
  .hero h1 span { display: block; }
  .hero .sub { font-size: 15px !important; margin-top: 18px !important; max-width: 100% !important; }
  .hero .cn { font-size: 18px !important; }
  .eyebrow-hero { flex-wrap: wrap; gap: 8px !important; font-size: 10px !important; }
  .hero .ctas { margin-top: 24px !important; gap: 10px !important; }
  .hero .ctas .cta-btn,
  .hero .ctas .btn { padding: 12px 18px !important; font-size: 13px !important; }
  .assoc { display: none !important; } /* hide co-brand top-right on mobile */

  /* 9 Dragons stat strip — stack 2x2 */
  .stat-strip { position: relative !important; }
  .stat-strip-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 20px !important;
  }
  .stat { padding: 16px 0 !important; }
  .stat .num { font-size: 22px !important; }
  .stat .lbl { font-size: 10px !important; }

  /* 9 Dragons registration countdown */
  .reg-countdown { padding: 16px 18px !important; gap: 10px !important; max-width: 100% !important; }
  .reg-countdown .rc-units { gap: 12px !important; }
  .reg-countdown .rc-u { min-width: 48px !important; }
  .reg-countdown .rc-u .v { font-size: 32px !important; }
  .reg-countdown .rc-u .l { font-size: 9px !important; letter-spacing: .15em !important; }
  .reg-countdown .rc-when { font-size: 11px !important; }

  /* Big Boar's hero overrides */
  .bb-logo-wrap { width: 200px !important; margin-bottom: 20px !important; }
  .hero .meta { flex-direction: column; gap: 12px !important; align-items: flex-start; font-size: 11px !important; }
  .hero .meta .v { font-size: 15px !important; }

  /* Section spacing */
  section { padding: 56px 0 !important; }
  .section-eyebrow { font-size: 11px !important; }
  h2, h3 { font-size: 32px !important; line-height: 1.05 !important; }
  h3 { font-size: 24px !important; }
  .section-lead, .lead { font-size: 15px !important; }
  p { font-size: 15px !important; }

  /* Multi-column grids → single column */
  .grid,
  .cards,
  .card-grid,
  .race-grid,
  .events-grid,
  .accred-row,
  .ch-grid,
  .stat-grid,
  .formats-grid,
  .impact-grid,
  .pillars,
  .pillar-grid,
  .team-grid,
  .three-col,
  .four-col,
  .two-col,
  [class*="cols-"],
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .accred-row { flex-wrap: wrap !important; justify-content: center !important; }
  .accred-row .ac { width: 100% !important; }

  /* Tables — make scrollable */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13px; }
  .table-wrap { overflow-x: auto; }

  /* Aid station / kit tables — collapse */
  .aid-table, .kit-table { font-size: 12px !important; }
  .aid-table th, .aid-table td,
  .kit-table th, .kit-table td { padding: 8px 6px !important; }

  /* Past editions table */
  .past-editions table { font-size: 12px !important; }
  .past-editions th, .past-editions td { padding: 6px !important; }

  /* CTA band / final */
  .cta-band h2 { font-size: 36px !important; }
  .cta-band p { font-size: 14px !important; }
  .cta-band .inner { padding: 0 20px !important; }

  /* Footer */
  footer { padding: 48px 0 !important; }
  footer .container > div[style*="grid"],
  footer .footer-grid,
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  footer .brand img.rb-logo,
  footer .brand img.logo { width: 36px !important; height: 36px !important; }

  /* Buttons general */
  .btn, .cta-btn { font-size: 13px !important; padding: 12px 18px !important; }

  /* Sponsor / impact strips */
  .icta, .icta-inner { flex-direction: column !important; gap: 16px !important; text-align: left !important; }
  .icta h3 { font-size: 22px !important; }

  /* Race format / pillar cards */
  .race-card, .pillar, .format-card, .ch-card {
    padding: 24px !important;
  }
  .race-card h3, .pillar h3, .format-card h3 { font-size: 22px !important; }
  .race-card .meta { flex-wrap: wrap; gap: 12px !important; }

  /* Hero logo images (priderun, bigboars) */
  .priderun-logo, .pr-logo { max-width: 240px !important; }

  /* Maps / elevation images */
  .map-row, .elev-row { grid-template-columns: 1fr !important; }
}

/* ---------- Small mobile (<=420px) ---------- */
@media (max-width: 420px) {
  .container { padding: 0 16px !important; }
  .hero h1 { font-size: 44px !important; }
  .reg-countdown .rc-u .v { font-size: 26px !important; }
  .reg-countdown .rc-units { gap: 8px !important; }
  .reg-countdown .rc-u { min-width: 40px !important; }
  h2, h3 { font-size: 26px !important; }
  .stat .num { font-size: 18px !important; }
  .nav ul { font-size: 11px !important; gap: 10px !important; }
}