/*
 * mobile-funnel.css
 * Comprehensive mobile optimizations for the v3 premium funnel homepage.
 * Covers: 390px phones → 768px tablets → 1024px small desktops.
 */

/* ─── TABLET (≤1024px) ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero two-column → stack with tighter gap */
  .hero-grid-v3 {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    text-align: center;
  }
  .hero-v3 .hero-content .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-v3 .hero-content > div { justify-content: center; }
  .hero-v3 .badge-eyebrow { margin-left: auto; margin-right: auto; }
  .book-spine-mockup { max-width: 420px; margin: 0 auto; }
  
  /* Sections narrower padding */
  .section-v3 { padding: 80px 0; }
  .guarantee-panel { padding: 3rem 2.5rem; }
  
  /* Founder two-column → stack */
  .founder-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
}

/* ─── MOBILE (≤768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* --- Announcement bar --- */
  .announcement-bar {
    font-size: 0.78rem;
    padding: 8px 16px;
    line-height: 1.5;
  }

  /* --- Hero --- */
  .hero-v3 {
    padding: 60px 0 50px;
  }
  .hero-v3 h1 {
    font-size: clamp(1.9rem, 6vw, 2.6rem) !important;
  }
  .hero-v3 .hero-sub {
    font-size: 1rem;
  }
  /* CTA buttons stack on mobile */
  .hero-v3 .hero-content > div:not(.badge-eyebrow) {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .btn-cta-large,
  .btn-cta-ghost,
  .btn-cta-dark {
    width: 100%;
    text-align: center;
    padding: 16px 24px;
  }
  /* Book mockup hidden on small screens to save space */
  .hero-v3 .slide-in-right {
    display: none;
  }

  /* --- Trust strip → 2×3 wrap --- */
  .trust-strip-inner {
    gap: 1rem;
    justify-content: center;
  }
  .trust-item {
    font-size: 0.82rem;
    flex: 0 0 45%;
    justify-content: center;
  }

  /* --- Sections --- */
  .section-v3 { padding: 60px 0; }
  .section-v3-sm { padding: 40px 0; }

  /* --- Value stack --- */
  .value-stack-v3 { padding: 0; }
  .value-stack-v3 li {
    font-size: 1rem;
    gap: 0.75rem;
    align-items: flex-start;
  }

  /* --- Stats row → 2 columns --- */
  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .stat-block .stat-number { font-size: 2.2rem; }

  /* --- Process cards → single column --- */
  .process-card { padding: 2rem 1.5rem; }

  /* --- Service cards → single column (auto-fit already handles this) --- */
  .service-card-v3 { padding: 2rem 1.5rem; }

  /* --- Guarantee panel --- */
  .guarantee-panel {
    padding: 2.5rem 1.5rem;
    border-radius: 6px;
  }
  .guarantee-shield { width: 56px; height: 56px; font-size: 1.4rem; }

  /* --- FAQ --- */
  .faq-v3-item h3 {
    font-size: 1rem;
    padding: 1rem 0;
  }

  /* --- Founder section --- */
  .founder-portrait {
    min-height: 300px !important;
  }

  /* --- Final CTA section CTAs stack --- */
  .cta-btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .cta-btn-row a { width: 100%; text-align: center; }

  /* --- Any inline flex hero-actions --- */
  div[style*="display: flex"][style*="gap: 1rem"] {
    flex-wrap: wrap;
  }
}

/* ─── SMALL PHONE (≤480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Announcement bar single line */
  .announcement-bar { font-size: 0.73rem; }

  /* Hero */
  .hero-v3 { padding: 50px 0 40px; }
  .hero-v3 h1 { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
  .badge-eyebrow { font-size: 0.68rem; letter-spacing: 0.6px; padding: 5px 12px; }

  /* Trust strip → single column */
  .trust-item { flex: 0 0 100%; justify-content: center; }
  .trust-strip-inner { gap: 0.75rem; }

  /* Stats 2-col stays, just tighter */
  .stat-block .stat-number { font-size: 1.9rem; }
  .stat-block { padding: 1.25rem 0.5rem; }

  /* Section headings */
  h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }

  /* Value stack items */
  .value-stack-v3 li { font-size: 0.95rem; }
  .check-icon { width: 18px; height: 18px; }
  .check-icon i { font-size: 0.55rem; }

  /* Guarantee panel */
  .guarantee-panel { padding: 2rem 1.25rem; }

  /* Process card icons */
  .step-icon { width: 44px; height: 44px; font-size: 1.1rem; }

  /* Buttons full width */
  .btn-cta-large, .btn-cta-ghost, .btn-cta-dark {
    font-size: 1rem;
    padding: 14px 20px;
  }

  /* FAQ */
  .faq-v3-item h3 { font-size: 0.95rem; }
}

/* ─── CONTAINER PADDING ON ALL MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (max-width: 480px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ─── ACCESSIBILITY: FOCUS STATES ───────────────────────────────────────── */
.btn-cta-large:focus-visible,
.btn-cta-ghost:focus-visible,
.btn-cta-dark:focus-visible {
  outline: 3px solid var(--brass-accent);
  outline-offset: 3px;
}

/* ─── TOUCH: Remove hover transforms on touch devices ───────────────────── */
@media (hover: none) {
  .process-card:hover,
  .service-card-v3:hover {
    transform: none;
    box-shadow: none;
  }
  .btn-cta-large:hover,
  .btn-cta-dark:hover {
    transform: none;
  }
}

/* --- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .animate-float, .slide-in-left, .slide-in-right, .fade-in-up, .badge-eyebrow::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .btn-cta-large:hover, .btn-cta-dark:hover, .process-card:hover, .service-card-v3:hover {
    transform: none;
  }
}