/* ============================================================
   SocialAI Manager — Responsive refinements
   Loaded last. Overrides on top of style.css + animations.css.
   Breakpoints follow Bootstrap 5 lg/xl conventions.
   ============================================================ */

/* ---------- Large desktops & up ---------- */
@media (min-width: 1400px) {
  :root { --container-x: 2rem; }
}

/* ---------- Laptop (≤ 1199px) ---------- */
@media (max-width: 1199.98px) {
  .hero-title { font-size: clamp(2rem, 4.6vw, 3.4rem); }
  .preview-badge.badge-3 { display: none; }
}

/* ---------- Tablet (≤ 991px) — navbar collapses ---------- */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: .75rem;
    box-shadow: var(--shadow-lg);
  }
  .navbar-nav { gap: .15rem; }
  .nav-actions { margin-top: .75rem; justify-content: stretch; }
  .nav-actions .btn { flex: 1; }

  .hero { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-trust { text-align: left; }

  .section-head { text-align: center; }
  .section-title { text-align: center; }
  .billing-toggle { margin-inline: auto; }

  /* Dashboard sidebar collapses into a drawer */
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-topbar .sidebar-toggle { display: inline-flex; }
}

/* ---------- Mobile large (≤ 767px) ---------- */
@media (max-width: 767.98px) {
  :root { --container-x: 1rem; }

  .section { padding-block: 3rem; }
  .hero { padding-block: 2.5rem; }
  .hero-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }

  .feature-card,
  .price-card,
  .testimonial,
  .story,
  .stat-card { padding: 1.4rem; }

  .price .amount { font-size: 2.2rem; }

  .cta-banner { padding: 1.8rem 1.2rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  .foot-bottom { flex-direction: column; align-items: flex-start; }

  .preview-badge.badge-2 { display: none; }

  /* App content tighter on mobile */
  .app-content { padding: 1rem; }
  .app-topbar { padding-inline: 1rem; }
  .topbar-user .u-meta { display: none; }
}

/* ---------- Small mobile (≤ 575px) ---------- */
@media (max-width: 575.98px) {
  .hero-title { font-size: 2rem; }
  .stat-num { font-size: 1.7rem; }
  .section-title { font-size: 1.6rem; }

  .preview-window { min-height: auto; }
  .preview-body { grid-template-columns: 1fr; min-height: auto; }
  .pv-side { flex-direction: row; padding: .75rem; }
  .pv-side .pv-logo { margin: 0; }
  .pv-side .pv-line { display: none; }
  .pv-cards { grid-template-columns: 1fr; }

  .page-head { align-items: flex-start; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1; }

  .nav-actions { flex-wrap: wrap; }
  .btn-ghost { display: none; }

  /* KPI grid single column */
  .kpi-value { font-size: 1.5rem; }

  .toast-stack { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }

  .to-top { right: 1rem; bottom: 1rem; }
}

/* ---------- Extra small (≤ 380px) ---------- */
@media (max-width: 380px) {
  .navbar-brand .brand-text { font-size: 1.05rem; }
  .hero-cta .btn { width: 100%; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .to-top, .toast-stack,
  .preview-badge, .hero-bg, .sidebar-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .glass, .card-soft, .section-card { box-shadow: none !important; border: 1px solid #ddd !important; }
  a { color: #000 !important; text-decoration: underline; }
}