/* ============================================================
   BMS GLOBAL — Responsive: All Breakpoints
   ============================================================ */

/* ── ≤ 1280px: Large Tablet / Small Desktop ───────────────── */
@media (max-width: 1280px) {
  :root { --page-max: 100%; }
  .page-wrap { padding: var(--space-8) var(--space-6) var(--space-16); }
  .company-grid       { grid-template-columns: repeat(2, 1fr); }
  .quick-grid         { grid-template-columns: repeat(3, 1fr); }
  .marketplace-grid   { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .course-grid        { grid-template-columns: repeat(2, 1fr); }
  .dash-stats-grid    { grid-template-columns: repeat(2, 1fr); }
  .admin-stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .trust-strip        { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(19,47,97,0.08); }
  .rec-benefits-grid  { grid-template-columns: repeat(2, 1fr); }
  .why-grid           { grid-template-columns: repeat(2, 1fr); }
  .footer-inner       { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ── ≤ 1140px: Laptop / Tablet ─────────────────────────────────────── */
@media (max-width: 1140px) {
  .nav-links { display: none; }
  .hamburger-btn { display: flex; }
  .nav-search { display: none; }
  .nav-rec-btn { display: none; }
}

/* ── ≤ 1024px: Tablet ─────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Dashboard sidebar collapses */
  .dash-shell   { grid-template-columns: 1fr; }
  .admin-shell  { grid-template-columns: 1fr; }
  .dash-sidebar {
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
    box-shadow: 20px 0 55px rgba(0,0,0,0.20);
  }
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
  }
  .dash-sidebar.open,
  .admin-sidebar.open { transform: translateX(0); z-index: var(--z-drawer); }
  .dash-main    { width: 100%; }
  .admin-main   { width: 100%; }
  .dash-menu-btn { display: grid; }
  .dash-content   { padding: var(--space-5); }
  .admin-content  { padding: var(--space-5); }

  .mobile-bottom-nav  { display: flex; }
  .dash-content-grid  { grid-template-columns: 1fr; }
  .admin-content-grid { grid-template-columns: 1fr; }
  .profile-grid       { grid-template-columns: 1fr; }
  .investment-layout  { grid-template-columns: 1fr; }
  .rec-form-section   { grid-template-columns: 1fr; }
  .contact-grid       { grid-template-columns: 1fr; }
  .dash-grid          { grid-template-columns: 1fr; }
  .events-grid        { grid-template-columns: repeat(2, 1fr); }
  .featured-event     { grid-template-columns: 1fr; gap: var(--space-6); }
  .events-rec-strip   { grid-template-columns: 1fr; text-align: center; }
  .events-rec-strip::after { display: none; }
  .events-rec-strip p { margin: 0 auto var(--space-6); }
  .rec-strip-ctas     { flex-direction: row; justify-content: center; flex-wrap: wrap; }


  .rec-strip {
    flex-direction: column;
    text-align: center;
    padding: var(--space-8);
    gap: var(--space-6);
  }
  .rec-strip-content p { max-width: 100%; }
  .rec-strip-actions {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .rec-strip-actions .btn { flex: 1; min-width: 160px; justify-content: center; }
}

/* ── ≤ 768px: Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .page-wrap { padding: var(--space-5) var(--space-4) 100px; }

  /* Hero slider on mobile */
  .hero {
    padding: var(--space-8) var(--space-6) calc(var(--space-8) + 60px);
    min-height: 460px;
    border-radius: var(--r-lg);
  }
  .hero h1  { font-size: clamp(30px, 8vw, 46px); letter-spacing: -1.2px; }
  .hero > .hero-content > p { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: var(--space-5); }
  .stat-one, .stat-two { display: none; }

  /* Trust strip */
  .trust-strip {
    margin: -18px var(--space-4) 0;
    grid-template-columns: 1fr 1fr;
  }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(19,47,97,0.08); }
  .trust-item:nth-child(3) { border-bottom: none; }
  .trust-item:nth-child(4) { border-right: none; }

  /* Grids */
  .company-grid     { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }
  .company-card     { min-height: 220px; }
  .company-card-body { padding: var(--space-4); }
  .company-card h3  { font-size: var(--text-base); }
  .company-card p   { font-size: 12px; }
  .quick-grid       { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .quick-card       { padding: var(--space-4) var(--space-2); }
  .listing-grid     { grid-template-columns: 1fr; }
  .marketplace-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .companies-showcase { grid-template-columns: 1fr; }
  .showcase-card    { min-height: 280px; }
  .showcase-card-body { padding: var(--space-5); }
  .showcase-card h2 { font-size: 18px; }
  .course-grid      { grid-template-columns: 1fr; }
  .event-list       { grid-template-columns: 1fr; }
  .events-grid      { grid-template-columns: 1fr; }
  .events-hero      { padding: var(--space-6); gap: var(--space-6); }
  .events-hero h1   { font-size: 32px; }
  .events-hero-stats { grid-template-columns: 1fr; padding-top: var(--space-5); gap: var(--space-4); }
  .events-hero-dots { display: none; }
  .featured-event   { padding: var(--space-6); }
  .countdown-num    { font-size: 24px; }
  .events-newsletter { padding: var(--space-6); flex-direction: column; text-align: center; justify-content: center; }
  .newsletter-form  { flex-direction: column; }
  .timeline-card    { flex-direction: column; text-align: center; gap: var(--space-4); }
  .timeline-date-col { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: var(--space-4); width: 100%; }
  .tmeta            { justify-content: center; }
  .why-grid         { grid-template-columns: 1fr; }
  .rec-benefits-grid { grid-template-columns: 1fr; }
  .how-steps        { grid-template-columns: 1fr; gap: var(--space-5); }
  .how-steps::before { display: none; }
  .saved-grid       { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-stats-grid  { grid-template-columns: 1fr 1fr; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }

  /* Company detail cards */
  .company-detail-card {
    grid-template-columns: 70px 1fr;
    gap: var(--space-4);
  }
  .company-detail-card .btn { grid-column: 1/-1; }
  .company-logo { width: 70px; height: 70px; font-size: 28px; }

  /* Page header */
  .page-header { padding: var(--space-6); border-radius: var(--r-lg); }
  .section-head h2 { font-size: var(--text-2xl); }

  /* Academy */
  .academy-hero-section { display: block; padding: var(--space-7); border-radius: var(--r-lg); }
  .academy-visual { display: none; }

  /* REC Hero */
  .rec-hero {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--space-6);
    min-height: auto;
  }
  .rec-hero-card { display: none; }
  .rec-hero h1 { font-size: clamp(28px, 7vw, 44px); }

  /* Auth pages */
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-side { display: none; }
  .auth-form-side { padding: var(--space-6) var(--space-4); }

  /* Topbar */
  .dash-topbar { padding: 0 var(--space-4); gap: var(--space-2); }
  .dash-topbar h1 { font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-topbar { padding: 0 var(--space-4); gap: var(--space-2); }
  .dash-search { display: none; }
  .page-title-wrap { min-width: 0; }

  /* Account header */
  .account-header { flex-wrap: wrap; border-radius: var(--r-lg); }
  .account-header .header-actions { width: 100%; margin-left: 0; }

  /* Wallet */
  .wallet-actions { flex-direction: column; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Filter bar */
  .filter-bar { flex-wrap: wrap; }
  .filter-select { margin-left: 0; width: 100%; }

  /* Admin table */
  .admin-table-wrap { overflow-x: auto; }
  .data-table { min-width: 700px; }

  /* WhatsApp button — hide label on mobile */
  .whatsapp-label { display: none; }
  .whatsapp-float { padding: 15px; bottom: 90px; right: 16px; }
}

/* ── ≤ 480px: Small Mobile ────────────────────────────────── */
@media (max-width: 480px) {
  .navbar-inner { padding: 0 var(--space-4); }
  .brand-text   { display: none; }
  .nav-actions .profile-chip .profile-name { display: none; }

  .marketplace-grid { grid-template-columns: 1fr; }
  .saved-grid       { grid-template-columns: 1fr; }
  .dash-stats-grid  { grid-template-columns: 1fr; }
  .admin-stats-grid { grid-template-columns: 1fr; }
  .trust-strip      { grid-template-columns: 1fr; }
  .trust-item       { border-right: none !important; border-bottom: 1px solid rgba(19,47,97,0.08) !important; }
  .trust-item:last-child { border-bottom: none !important; }

  .event-card { grid-template-columns: 60px 1fr; }
  .event-card .btn { grid-column: 1/-1; }

  .rec-strip { padding: var(--space-6) var(--space-4); margin: var(--space-6) 0; }
  .rec-strip-content h2 { font-size: var(--text-2xl); }
  .form-row { grid-template-columns: 1fr; }

  .account-header { padding: var(--space-5); }
  .account-avatar-large { width: 60px; height: 60px; font-size: 20px; }

  .enquiry-card .eq-meta { display: none; }
}

/* ── ≤ 440px: Very Small Phones ───────────────────── */
@media (max-width: 440px) {
  /* Company cards: single column so they breathe properly */
  .company-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .company-card {
    min-height: 200px;
  }
  .company-card-body {
    padding: var(--space-5);
  }
  .company-card h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-black);
  }
  .company-card p {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.92);
  }
  /* SVG art shrinks gracefully */
  .card-art {
    height: 55%;
    opacity: 0.80;
  }
  /* Quick grid: 2 cols on tiny screens */
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  /* Marketplace: 1 col */
  .marketplace-grid { grid-template-columns: 1fr; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-navbar, .site-footer, .mobile-bottom-nav,
  .dash-sidebar, .admin-sidebar, .toast, .modal-overlay { display: none; }
  body { background: white; }
  .page-wrap { padding: 0; }
}