/* ===================================================
   皇冠体育 - 响应式样式表
   CSS前缀: hm-
   =================================================== */

/* --- xl: >= 1280px (default) --- */

/* --- lg: 1024px - 1279px --- */
@media (max-width: 1279px) {
  .hm-container { max-width: 1024px; }
  .hm-hero h1 { font-size: 3rem; }
  .hm-nav-links a { padding: 24px 12px; font-size: 0.88rem; }
  .hm-footer-main { gap: 30px; }
}

/* --- md: 768px - 1023px --- */
@media (max-width: 1023px) {
  .hm-container { max-width: 768px; }

  .hm-hero h1 { font-size: 2.5rem; }
  .hm-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }

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

  .hm-ranking-layout { grid-template-columns: 1fr; }
  .hm-membership-layout { grid-template-columns: 1fr; }
  .hm-app-section { grid-template-columns: 1fr; text-align: center; }
  .hm-app-mockup { order: -1; }
  .hm-app-mockup img { max-width: 280px; }

  .hm-news-layout { grid-template-columns: 1fr; }
  .hm-news-card.hm-news-large img { min-height: 300px; }

  .hm-gallery-grid { columns: 2; }

  .hm-betting-layout { grid-template-columns: 1fr; }
  .hm-sidebar { position: static; }

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

  .hm-nav-links { display: none; }
  .hm-nav-links.hm-nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--hm-bg);
    border-bottom: 2px solid var(--hm-secondary);
    box-shadow: var(--hm-shadow);
    z-index: 999;
  }
  .hm-nav-links.hm-nav-open a {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(139,69,19,0.1);
  }
  .hm-hamburger { display: flex; }
  .hm-btn-cta.hm-nav-cta-desktop { display: none; }
}

/* --- sm: 640px - 767px --- */
@media (max-width: 767px) {
  html { font-size: 15px; }

  .hm-section { padding: 50px 0; }
  .hm-section-title h2 { font-size: 1.8rem; }

  .hm-hero { min-height: 500px; }
  .hm-hero h1 { font-size: 2rem; }
  .hm-hero-subtitle { font-size: 0.95rem; }
  .hm-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .hm-hero-stat .hm-stat-number { font-size: 1.5rem; }

  .hm-grid-4 { grid-template-columns: 1fr; }
  .hm-grid-3 { grid-template-columns: 1fr; }
  .hm-grid-2 { grid-template-columns: 1fr; }

  .hm-app-features { grid-template-columns: 1fr; }
  .hm-download-buttons { flex-direction: column; }

  .hm-gallery-grid { columns: 2; }

  .hm-footer-main { grid-template-columns: 1fr; gap: 30px; }

  .hm-page-header { padding: 40px 0; }
  .hm-page-header h1 { font-size: 1.6rem; }

  .hm-prediction-card { padding: 25px; }
}

/* --- xs: < 640px --- */
@media (max-width: 639px) {
  html { font-size: 14px; }

  .hm-hero h1 { font-size: 1.8rem; }
  .hm-hero-badge { font-size: 0.75rem; padding: 6px 16px; }
  .hm-hero-buttons { flex-direction: column; align-items: center; }
  .hm-btn-primary, .hm-btn-outline { width: 100%; max-width: 280px; text-align: center; }

  .hm-gallery-grid { columns: 1; }

  .hm-podium { flex-direction: column; align-items: center; }

  .hm-partners-logos { gap: 20px; }
  .hm-partner-logo { font-size: 0.9rem; padding: 10px 18px; }

  .hm-bet-slip { width: 100%; right: -100%; }
  .hm-bet-slip.hm-active { right: 0; }

  .hm-betting-table { font-size: 0.8rem; }
  .hm-betting-table th, .hm-betting-table td { padding: 10px 8px; }
}