/* ============================================================
   MYSUGARDADDY – Premium Luxury Matchmaking Platform
   responsive.css – Responsive Breakpoints (Mobile-First)
   ============================================================ */

/* -- Base Mobile Adjustments ------------------------------- */
@media (max-width: 480px) {
  :root {
    --section-py: 64px;
    --container-px: 18px;
  }

  .section-title { font-size: 1.7rem; }

  /* Header */
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-headline { font-size: 1.45rem; line-height: 1.25; }
  .hero-subtext { font-size: 0.9rem; }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; }
  .hero-stats { gap: 24px; }
  .hero-stat-number { font-size: 1.4rem; }
  .hero-trust { display: none; }

  /* Search */
  .search-form { grid-template-columns: 1fr; gap: 12px; }

  /* Members */
  .members-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .member-card-name { font-size: 1rem; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; gap: 16px; }

  /* How it works */
  .how-it-works-inner { grid-template-columns: 1fr; gap: 40px; }
  .how-right-visual { display: none; }

  /* Cities */
  .cities-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cities-grid .city-card:nth-child(n+5) { display: none; }

  /* Testimonials */
  .testimonial-slide { min-width: calc(100% - 16px); }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .blog-main-grid { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }

  /* CTA Banner */
  #cta-banner { padding: 72px 0; }
  .cta-split { flex-direction: column; gap: 12px; }
  .cta-split-btn { width: 100%; max-width: 320px; padding: 20px 24px; }
  .cta-split-or { transform: rotate(90deg); }
  .cta-trust { gap: 16px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }

  /* -- About page fixes -- */
  /* Stack the two-column layout */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Add bottom padding so the accent image (absolute, bottom:0) doesn't overlap the next sibling */
  .about-img-wrap { padding-bottom: 80px; }
  /* Move accent image inside container bounds (was right:-28px / bottom:-28px) */
  .about-img-accent { width: 52%; right: 0; bottom: 0; }
  /* Move stat band inside container bounds (was left:-20px) */
  .about-stat-band { left: 0; top: 16px; }
  /* Mission 3-col → 1-col */
  .mission-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  /* Team 4-col → 2-col */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* -- Contact page fixes -- */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  /* Pricing tiers 3-col → 1-col */
  .pricing-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  /* Tighten card padding on small screens */
  .contact-info-card,
  .contact-form-card { padding: 28px 20px; }
  .contact-method { padding: 14px; }

  /* Post */
  .post-layout { grid-template-columns: 1fr; }
  .post-layout .blog-sidebar { display: none; }

  /* Stats band */
  .stats-band-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Mobile CTA bar */
  .mobile-cta-bar { display: block; }
  .back-to-top { bottom: 76px; }
}

/* -- Tablet Portrait (481px – 767px) ----------------------- */
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --section-py: 80px;
    --container-px: 20px;
  }

  .section-title { font-size: 2rem; }

  /* Header */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-actions .btn:first-child { display: none; }

  /* Hero */
  .hero-headline { font-size: 1.7rem; line-height: 1.22; }
  .hero-stats { gap: 28px; }
  .hero-trust { display: none; }

  /* Search */
  .search-form { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .search-form .btn { grid-column: 1 / -1; }

  /* Members */
  .members-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Features */
  .features-grid { grid-template-columns: 1fr 1fr; gap: 18px; }

  /* How it works */
  .how-it-works-inner { grid-template-columns: 1fr; gap: 48px; }
  .how-right-visual { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; height: 220px; }
  .how-visual-img:first-child { grid-row: auto; }

  /* Cities */
  .cities-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Testimonials */
  .testimonial-slide { min-width: calc(50% - 8px); }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .blog-main-grid { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }

  /* CTA Banner */
  #cta-banner { padding: 80px 0; }
  .cta-split { gap: 14px; }
  .cta-split-btn { min-width: 180px; padding: 20px 28px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }

  /* -- About page fixes -- */
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-img-wrap { padding-bottom: 80px; }
  .about-img-accent { width: 52%; right: 0; bottom: 0; }
  .about-stat-band { left: 0; top: 16px; }
  .mission-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* -- Contact page fixes -- */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .contact-info-card,
  .contact-form-card { padding: 32px 24px; }

  /* Stats band */
  .stats-band-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  /* Post */
  .post-layout { grid-template-columns: 1fr; }

  /* Mobile CTA */
  .mobile-cta-bar { display: block; }
  .back-to-top { bottom: 76px; }
}

/* -- Tablet Landscape (768px – 1023px) --------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --section-py: 90px;
    --container-px: 32px;
  }

  /* Header */
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero-headline { font-size: 2rem; line-height: 1.2; }

  /* Search */
  .search-form { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
  .search-form .btn { grid-column: 1 / -1; }

  /* Members */
  .members-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Features */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* How it works */
  .how-it-works-inner { grid-template-columns: 1fr; gap: 52px; }
  .how-right-visual { display: none; }

  /* Cities */
  .cities-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* Testimonials */
  .testimonial-slide { min-width: calc(50% - 8px); }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .blog-main-grid { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }

  /* CTA Banner */
  #cta-banner { padding: 90px 0; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }

  /* -- About page fixes -- */
  .about-grid { grid-template-columns: 1fr; gap: 52px; }
  /* Still need padding-bottom at this size – accent overflows */
  .about-img-wrap { padding-bottom: 60px; }
  .about-img-accent { right: 0; bottom: 0; }
  .about-stat-band { left: 0; }
  /* Mission: 3-col → 2-col fits better at tablet landscape */
  .mission-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* -- Contact page fixes -- */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Pricing: squeeze to single column with a max-width so it doesn't span the full width */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 520px !important;
  }

  /* Stats band */
  .stats-band-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Post */
  .post-layout { grid-template-columns: 1fr; }
}

/* -- Desktop (1024px – 1279px) ----------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --container-px: 32px;
  }

  /* Members */
  .members-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }

  /* Cities */
  .cities-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }

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

  /* Footer */
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }

  /* CTA Banner */
  .cta-split-btn { min-width: 220px; }

  /* Team */
  .team-grid { gap: 20px; }
}

/* -- Wide Desktop (1280px+) -------------------------------- */
@media (min-width: 1280px) {
  :root { --container-px: 40px; }
}

/* -- Large Monitor (1440px+) ------------------------------- */
@media (min-width: 1440px) {
  :root { --max-width: 1360px; }
  .members-grid { gap: 28px; }
  .features-grid { gap: 28px; }
  .cities-grid { gap: 20px; }
}

/* -- Ultra-Wide (1920px+) ---------------------------------- */
@media (min-width: 1920px) {
  :root { --max-width: 1600px; }
  :root { --section-py: 130px; }
}

/* -- Print Styles ------------------------------------------ */
@media print {
  #site-header,
  #site-footer,
  .mobile-cta-bar,
  .back-to-top,
  .cookie-banner { display: none !important; }
  body { color: #000; background: #fff; }
}

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

/* -- High Contrast ----------------------------------------- */
@media (forced-colors: active) {
  .btn--gold { forced-color-adjust: none; }
  .badge--verified { forced-color-adjust: none; }
}