/* =========================================================
   css/responsive.css — 全域響應式斷點補全
   說明：layout.css 已處理 header/nav/footer 的切換（≥1024px）
         此文件補充各頁面在 768px / 1024px / 1280px 的佈局調整
   ========================================================= */

/* ══════════════════════════════════════════════════════════
   § 0  Base: Max-Width Container on Desktop
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* 統一將 page-wrapper 限制在 max-width 並居中 */
  .page-wrapper {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════
   § 1  Tablet ≥ 768px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Buy Page ── */
  .buy-price-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .buy-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Staking Page ── */
  .staking-plans-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .staking-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Flexible Page ── */
  .flex-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Referral Page ── */
  .referral-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Community Page ── */
  .comm-levels-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .comm-stats-row {
    gap: var(--sp-6);
  }

  /* ── Dashboard Page ── */
  .dash-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-stat-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── About Page ── */
  .about-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .about-team-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Help Page ── */
  .help-guides-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .help-faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    align-items: start;
  }

  /* ── Hero Typography ── */
  .about-hero-title,
  .help-hero-title {
    font-size: var(--text-4xl);
  }
  .referral-hero-title,
  .comm-hero-title {
    font-size: var(--text-3xl);
  }

  /* ── Staking confirm + buy form max-width ── */
  .buy-form-section,
  .flexible-form-wrap {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════
   § 2  Desktop ≥ 1024px  (nav switch handled in layout.css)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Section level padding for all pages ── */
  .about-section,
  .help-section,
  .help-search-wrap,
  .help-categories {
    padding-left: var(--sp-6);
    padding-right: var(--sp-6);
  }
  .about-hero,
  .help-hero {
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-10);
  }
  .about-cta {
    margin-left: var(--sp-6);
    margin-right: var(--sp-6);
  }
  .help-contact-card {
    margin-left: var(--sp-6);
    margin-right: var(--sp-6);
  }

  /* ── About: roadmap 2-col on desktop ── */
  .about-roadmap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }
  .about-roadmap::before { display: none; }
  .about-roadmap-item { margin-bottom: 0; }
  .about-team-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Help: contact buttons horizontal ── */
  .help-contact-btns {
    flex-direction: row;
    justify-content: center;
  }

  /* ── Staking: show 3 plans per row, max 4 at XL ── */
  .staking-plans-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Referral: side-by-side code+list on desktop ── */
  .referral-bottom-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
  }

  /* ── Buy: form + info side by side ── */
  .buy-layout-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
  }

  /* ── Dashboard ── */
  .dash-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Community levels 4-col on tablet, 8 total in 2 rows ── */
  .comm-levels-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   § 3  Wide ≥ 1280px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

  /* ── Staking: 4 plans per row on wide screen ── */
  .staking-plans-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Community: all 8 levels in one row ── */
  .comm-levels-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  /* ── About team: 3 cols in wide ── */
  .about-team-grid { grid-template-columns: repeat(3, 1fr); }

  /* ── Hero Typography ── */
  .about-hero-title {
    font-size: 52px;
  }
  .help-hero-title {
    font-size: var(--text-4xl);
  }
}