/* ==========================================================================
   ShrinkThatBelly.com - Responsive Media Queries
   Mobile-First & Clean Breakpoint Handling
   ========================================================================== */

/* Tablets & Medium Screens (max-width: 1024px) */
@media (max-width: 1024px) {
  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .offer-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  /* Mobile Navigation triggers at 1024px to prevent any wrapping */
  .mobile-menu-btn {
    display: block;
  }
  
  .nav-links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 99;
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-item a {
    display: block;
    font-size: 1.125rem;
    padding: 8px 0;
  }
  
  .header-actions .btn-outline {
    display: none;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.25rem; }
  
  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  
  .hero {
    padding: 3rem 0 2rem 0;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  
  .hero-left {
    text-align: center;
  }
  
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05rem;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-actions .btn-hero-primary,
  .hero-actions .btn-hero-secondary {
    width: 100%;
    justify-content: center;
  }
  
  .hero-checklist {
    align-items: center;
  }

  .hero-right {
    min-height: 420px;
  }

  .hero-glow-aura {
    width: 320px;
    height: 320px;
  }

  .floating-glass-badge {
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
  }

  .badge-top-right {
    right: 0;
    top: 0;
  }

  .badge-mid-left {
    left: 0;
    top: 45%;
  }

  .badge-bottom-right {
    right: 0;
    bottom: 0;
  }

  .hero-bottom-overlap {
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .hero-bottom-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .hero-title {
    font-size: 2.35rem;
  }
  
  /* Grids to single column */
  .offers-grid {
    grid-template-columns: 1fr;
  }
  
  .steps-grid {
    grid-template-columns: 1fr;
  }
  
  .trust-grid {
    grid-template-columns: 1fr;
  }
  
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-facts-grid {
    grid-template-columns: 1fr;
  }
  
  .blog-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .footer-legal-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .quiz-modal {
    padding: 1.5rem;
  }
  
  /* Mobile Sticky Bottom CTA for Offer Pages */
  .mobile-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid var(--color-border);
    padding: 0.875rem 1rem;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 90;
  }
  
  .mobile-sticky-cta .price-col {
    display: flex;
    flex-direction: column;
  }
  
  .mobile-sticky-cta .price-col .amt {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-teal-dark);
  }
  
  .mobile-sticky-cta .price-col .lbl {
    font-size: 0.7rem;
    color: var(--color-text-muted);
  }

  .logo-text {
    font-size: 1.05rem;
  }
  
  .logo-icon {
    width: 34px;
    height: 34px;
  }
}