/* ============================================================
   RESPONSIVE.CSS — Mobile-First Breakpoints
   Mobile-first: styles here override desktop above each bp.
   ============================================================ */

/* ── 1440px: wide screens ─────────────────────────────────── */
@media (min-width: 1440px) {
  .container { padding-inline: var(--space-8); }
}

/* ── 1024px: desktop ──────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero */
  .hero .container { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero-visual { max-width: 540px; margin-inline: auto; }
  .hero-stats-row { grid-template-columns: repeat(3, 1fr); }

  /* Prices */
  .prices-grid { grid-template-columns: 1fr; }

  /* Calculator */
  .calc-wrapper { grid-template-columns: 1fr; }
  .calc-result-panel { opacity: 1; pointer-events: all; transform: none; }

  /* Training */
  .training-layout { grid-template-columns: 1fr; gap: var(--space-10); }

  /* Partners */
  .partners-grid { grid-template-columns: repeat(4, 1fr); }

  /* Profile */
  .profile-layout { grid-template-columns: 240px 1fr; }

  /* Producers */
  .producers-inner { grid-template-columns: auto 1fr; gap: var(--space-6); }
  .producers-cta-block { grid-column: 1 / -1; flex-direction: row; align-items: center; }

  /* Blog */
  .blog-layout { grid-template-columns: 1fr 1.3fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── 768px: tablet ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Typography */
  .section-title { font-size: var(--text-xl); }
  .hero-title    { font-size: var(--text-2xl); }

  /* Header intentionally not styled here — assets/css/header.css owns it now,
     including its own compact breakpoint at 1023px. */

  /* Hero */
  .hero { padding-block: var(--space-12) var(--space-10); }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Stats ticker font */
  .ticker-value { font-size: var(--text-sm); }

  /* Price cards */
  .price-cards { grid-template-columns: 1fr; }

  /* Products */
  .products-section .grid-auto { grid-template-columns: repeat(2, 1fr); }

  /* Calculator grid */
  .calc-result-grid { grid-template-columns: 1fr; }
  .calc-result-item--full { grid-column: 1; }

  /* Form rows */
  .form-row { grid-template-columns: 1fr; }

  /* Listings */
  .listings-filters-grid { grid-template-columns: repeat(2, 1fr); }
  .listings-search-row { flex-direction: column; }

  /* Producers */
  .producers-inner { grid-template-columns: 1fr; }
  .producers-row {
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .producers-title-block, .producers-cta-block { text-align: center; align-items: center; }

  /* Partners */
  .partners-grid { grid-template-columns: repeat(3, 1fr); }

  /* Blog */
  .blog-layout { grid-template-columns: 1fr; }
  .blog-secondary-list { display: grid; grid-template-columns: 1fr 1fr; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Training */
  .training-cta-card-actions { flex-direction: column; }
  .training-cta-card-actions .btn { width: 100%; justify-content: center; }

  /* CTA grid */
  .cta-grid { grid-template-columns: repeat(2, 1fr); }

  /* Profile */
  .profile-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .profile-sidebar { position: static; border-radius: 16px; }
  .profile-sidebar-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 12px 14px; text-align: start;
  }
  .profile-avatar { width: 46px; height: 46px; font-size: 21px; flex: 0 0 auto; margin: 0; }
  .profile-name { font-size: 14px; font-weight: 800; flex: 1 1 120px; min-width: 0; }
  .profile-role-chip { width: auto; margin: 0; font-size: 10px; padding: 4px 8px; }
  .profile-progress, .profile-progress-label, .profile-id, .profile-upline, .profile-verify-badge { display: none; }
  .profile-sidebar-header #logout-btn {
    order: 5; width: auto !important; margin: 0 !important; margin-inline-start: auto !important;
    padding: 6px 9px; font-size: 11px;
  }
  .profile-nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    padding: 8px 10px 10px; overflow: visible;
    border-top: 1px solid var(--border);
    background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(240,253,244,.72));
  }
  .profile-nav-link {
    width: auto; min-height: 62px; padding: 7px 3px;
    flex-direction: column; justify-content: center; gap: 4px;
    border: 1px solid transparent; border-radius: 12px;
    font-size: 10px; line-height: 1.35; text-align: center; white-space: normal;
  }
  .profile-nav-icon { width: 29px; height: 29px; border-radius: 9px; font-size: 0; }
  .profile-nav-label { max-width: 100%; font-size: 9.5px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
  .role-cards { grid-template-columns: 1fr; }
  .referral-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-newsletter { flex-direction: column; }
  .footer-newsletter-form { max-width: 100%; }

  /* Grids */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ── 480px: small tablet / large phone ────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-3xl: 1.75rem;
    --text-2xl: 1.5rem;
    --text-xl:  1.25rem;
  }

  /* Hero */
  .hero-quick { display: none; }

  /* Products */
  .products-section .grid-auto { grid-template-columns: 1fr 1fr; gap: var(--space-3); }

  /* Partners */
  .partners-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog secondary */
  .blog-secondary-list { grid-template-columns: 1fr; }

  /* Listings */
  .listings-filters-grid { grid-template-columns: 1fr; }
  .listing-details-grid { grid-template-columns: 1fr; }

  /* CTA grid */
  .cta-grid { grid-template-columns: 1fr; }

  /* Referral stats */
  .referral-stats-grid { grid-template-columns: 1fr; }

  /* Grids */
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }

  /* Footer bottom */
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* Profile nav stays compact and icon-first on small phones */
  .profile-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 7px; }
  .profile-nav-link { min-height: 58px; padding: 6px 2px; font-size: 9.5px; }
  .profile-nav-label { font-size: 8.75px; }
  .profile-nav-icon { width: 27px; height: 27px; }
  .profile-nav-icon svg { width: 16px; height: 16px; }
}

/* ── 390px: iPhone 14 Pro ─────────────────────────────────── */
@media (max-width: 390px) {
  .container { padding-inline: var(--space-3); }
  .price-card-amount { font-size: var(--text-2xl); }
  .hero-title { font-size: var(--text-xl); }
  .section-title { font-size: var(--text-lg); }
  .btn--lg { font-size: var(--text-base); }
}

/* ── Mini-app (Telegram/Bale style) ──────────────────────── */
.mini-app-page {
  max-width: 430px;
  margin-inline: auto;
  background: var(--surface);
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px; /* room for bottom nav */
}

.mini-app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 100vw);
  background: var(--surface-raised);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: var(--z-sticky);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.mini-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-block: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-family);
  transition: color var(--transition-fast);
  min-height: 60px;
}
.mini-nav-item:hover, .mini-nav-item.active { color: var(--color-primary); }
.mini-nav-icon { font-size: 1.4rem; }

/* ── Reduced motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stats-ticker-inner  { animation: none; }
  .hero::before, .hero::after { display: none; }
  .card:hover, .product-card:hover, .listing-card:hover { transform: none; }
  .producer-item:hover { transform: none; }
  .partner-card:hover  { transform: none; }
  .blog-card-sm:hover  { transform: none; }
  .blog-card-featured:hover { transform: none; }
  .price-card:hover    { transform: none; }
  .cta-card:hover      { transform: none; }
  .training-feature    { transition: none; }
  .price-update-time-dot { animation: none; }
}