/* ═══════════════════════════════════════════════════
   MODERNEAST Design System — Responsive Breakpoints
   Mobile ≤768 | Tablet 769-1024 | Desktop ≥1025 | Wide ≥1400
   ═══════════════════════════════════════════════════ */

/* ── Mobile (≤768px) — 師傅端主要體驗 ── */
@media (max-width: 768px) {
  /* Layout */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* Navigation */
  body.has-nav-bottom { padding-bottom: 64px; }

  /* Typography adjustments in base.css & typography.css */

  /* Grid fallbacks */
  .brand-grid { grid-template-columns: 1fr; }
  .level-grid { grid-template-columns: repeat(2, 1fr); }

  /* Split sections — stack vertically */
  .split { flex-direction: column; }
  .split.reverse { flex-direction: column; }
  .split-img { min-height: 300px; }
  .split-text { padding: 40px 24px; }

  /* Stats */
  .stats { flex-direction: column; gap: 32px; }

  /* Touch targets — minimum 48x48 */
  .btn-outline, .btn-gold, .btn-terra, .btn-line {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Full-width buttons on mobile */
  .btn-full-mobile {
    width: 100%;
    text-align: center;
  }
}

/* ── Tablet (769-1024px) — iPad 展間展示 ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }

  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .level-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Desktop (≥1025px) — 設計師電腦工作 ── */
@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }

  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* Side filter panel */
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--sp-xl);
  }
  .sidebar-filter {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

/* ── Wide (≥1400px) — 大螢幕/雙螢幕設計師 ── */
@media (min-width: 1400px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }

  .container { max-width: var(--container-wide); }

  .hero h1 { font-size: 42px; }
  .title-en { font-size: 52px; }
}