/* ============================================================
   Primer Financial — assets/css/responsive.css
   Mobile-first responsive breakpoints
   Breakpoints: Mobile < 576px | Tablet 576–991px | Desktop ≥ 992px | Large ≥ 1200px
   ============================================================ */

/* ── Mobile (< 576px) ───────────────────────────────────────── */
@media (max-width: 575px) {
  :root {
    --space-3xl: 56px;
    --space-2xl: 40px;
    --space-xl:  32px;
  }

  .trust-topbar          { display: none; }
  .trust-since           { display: none !important; }

  /* Nav */
  .nav-toggle            { display: flex; }
  .nav-inner             { gap: var(--space-xs); }
  .nav-right             { gap: 4px; flex-shrink: 0; }
  .lang-btn              { padding: 4px 7px; font-size: 10px; }
  .main-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    flex-direction: column;
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-md);
    z-index: 500;
  }
  .main-menu.open { display: flex; }
  .main-menu .nav-link { padding: 12px 24px; border-radius: 0; }
  .has-dropdown:hover .nav-dropdown { display: none; }
  .has-dropdown.open .nav-dropdown {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .nav-right { gap: var(--space-xs); }
  .nav-cta   { display: none; }

  /* Hero */
  .hero { min-height: 0; }
  .hero-content { padding: var(--space-xl) 0; }
  .hero-widget-col { display: none; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn-swiss { width: 100%; justify-content: center; }
  .hero-trust-badges { flex-direction: column; gap: var(--space-sm); }
  .trust-badge { width: 100%; }

  /* Stats */
  .stat-divider { display: none; }

  /* Product cards */
  .product-card { margin-bottom: var(--space-md); }

  /* Calc widget */
  .calc-widget { margin-top: var(--space-xl); }
  .calc-result-amount { font-size: 28px; }

  /* CTA */
  .cta-actions { flex-direction: column; align-items: center; }

  /* Footer */
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-legal-links  { justify-content: center; }
  .social-links        { justify-content: flex-start; }

  /* Step progress */
  .step-label  { display: none; }
  .step-item:not(:last-child)::after { width: calc(100% - 40px); left: calc(50% + 20px); }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }

  /* Tables */
  .conditions-table,
  .compare-table { font-size: 13px; }
  .conditions-table th,
  .conditions-table td,
  .compare-table th,
  .compare-table td { padding: 10px 12px; }
}

/* ── Tablet (576px–991px) ───────────────────────────────────── */
@media (min-width: 576px) and (max-width: 991px) {
  :root {
    --space-3xl: 72px;
    --space-2xl: 56px;
  }

  /* Hide calc widget on tablet too — keeps hero clean */
  .hero-widget-col { display: none; }

  /* Nav */
  .nav-toggle { display: flex; }
  .nav-inner  { gap: var(--space-sm); }
  .main-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    flex-direction: column;
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-md);
    z-index: 500;
  }
  .main-menu.open { display: flex; }
  .main-menu .nav-link { padding: 12px 24px; border-radius: 0; }
  .has-dropdown:hover .nav-dropdown { display: none; }
  .has-dropdown.open   .nav-dropdown {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--bg);
  }
  .nav-cta { display: none; }

  /* Hero badges – wrap into 2 columns */
  .hero-trust-badges { gap: var(--space-sm); }

  /* Stats */
  .stat-item { padding: var(--space-sm); }

  /* Footer */
  .footer-bottom-inner { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .footer-legal-links  { justify-content: center; }
}

/* ── Tablet portrait (576px+) ───────────────────────────────── */
@media (min-width: 576px) {
  .hero-actions { flex-direction: row; }
  .cta-actions  { flex-direction: row; }
}

/* ── Desktop (992px+) ───────────────────────────────────────── */
@media (min-width: 992px) {
  .nav-toggle    { display: none; }
  .main-menu     { display: flex !important; }
  .nav-cta       { display: inline-flex; }

  /* Trust topbar */
  .trust-topbar  { display: block; }

  /* Hero layout: text left, widget right */
  .hero-row { display: flex; align-items: center; gap: var(--space-2xl); }
  .hero-text { flex: 1; min-width: 0; }
  .hero-widget-col { display: block; flex: 0 0 400px; max-width: 400px; }

  /* Stats 4 columns */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .stat-divider { height: 60px; background: rgba(255,255,255,.15); }

  /* Why us 3 columns */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  /* Product grid */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  /* Testimonials 3 columns */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  /* Blog 3 cols */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

/* ── Large screens (1200px+) ────────────────────────────────── */
@media (min-width: 1200px) {
  .container { max-width: 1200px; }

  .hero-widget-col { flex: 0 0 440px; max-width: 440px; }
}

/* ── Print styles ───────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .cookie-banner,
  #scroll-progress { display: none !important; }
  body { font-size: 12pt; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ── Dark mode (optional bonus) ─────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0d1a2a;
    --white:   #0d1a2a;
    --text:    #e5e7eb;
    --border:  #1e3350;
    --text-light: #9ca3af;
  }
  body { background: #061521; color: var(--text); }
  .main-nav { background: #0a1e35; }
  .site-logo .logo-name { color: var(--white); }
  .main-menu .nav-link { color: var(--text); }
  .product-card,
  .testimonial-card,
  .blog-card { background: #0a1e35; border-color: var(--border); }
  .calc-widget { background: #0a1e35; }
  .form-control { background: #0a1e35; color: var(--text); border-color: var(--border); }
  select.form-control { background-color: #0a1e35; }
}