/* ============================================
   NATURE'S CARE — Responsive Styles
   Mobile-first approach
   ============================================ */

/* ─── Large tablets and below (1024px) ───── */
@media (max-width: 1024px) {
  :root {
    --sp-3xl: 6rem;
    --sp-2xl: 4rem;
  }

  .about-grid { gap: var(--sp-xl); }
  .courses-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
  .footer-newsletter-mini { grid-column: span 2; }
}

/* ─── Tablets (768px) ────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-h: 68px;
    --sp-3xl: 4.5rem;
    --sp-2xl: 3rem;
    --sp-xl: 2.5rem;
  }

  /* Navbar */
  .nav-links-main { display: none; }
  .nav-cta-desktop { display: none; }
  #menu-toggle { display: flex; }

  /* Hero */
  .hero h1 { font-size: clamp(2.8rem, 9vw, 5rem); }
  .hero-desc { font-size: var(--fs-base); }
  .hero-stats-inner { flex-wrap: wrap; }
  .hero-stat { flex: 0 0 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.12); }
  .hero-stat:nth-last-child(-n+2) { border-bottom: none; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }

  /* Image block: order first, add top padding so badge has clearance above it */
  .about-image-block {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
    padding-top: 1rem;        /* breathing room between section label and image */
  }

  /* Badge: cancel the desktop overflow-translate entirely.
     Pin it inside the bottom-right corner of the image so it
     never bleeds into the text/heading below or above. */
  .about-img-badge {
    transform: none;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    left: auto;
    top: auto;
    min-width: 0;
    max-width: calc(100% - 2rem);
  }

  /* Courses */
  .courses-grid { grid-template-columns: 1fr; }
  .courses-header { flex-direction: column; align-items: flex-start; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr 1fr; }

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

  /* Testimonials */
  .testimonial-card { flex: 0 0 calc(100% - var(--sp-sm)); }

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

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

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-newsletter-mini { grid-column: span 1; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─── Mobile (480px) ─────────────────────── */
@media (max-width: 480px) {
  :root {
    --sp-xl: 2rem;
    --sp-2xl: 2.5rem;
    --sp-3xl: 3.5rem;
  }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr; }

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

  /* Hero actions */
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; max-width: 260px; }

  /* About features */
  .about-features { grid-template-columns: 1fr; }

  /* Newsletter form */
  .newsletter-form {
    flex-direction: column;
    border-radius: var(--r-md);
    background: transparent;
    border: none;
    gap: var(--sp-sm);
  }

  .newsletter-form input {
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: var(--r-full);
    padding: 1rem var(--sp-md);
    color: #fff;
  }

  .newsletter-form button {
    background: #fff;
    color: var(--clr-sage-deep);
    border-radius: var(--r-full);
    padding: 0.875rem var(--sp-lg);
    margin: 0;
    font-weight: 600;
  }

  /* Contact form */
  .contact-form-card { padding: var(--sp-md); }

  /* Hero stats */
  .hero-stat { flex: 0 0 50%; }

  /* Course cards */
  .course-card { max-width: 100%; }

  /* Back to top */
  #back-to-top { right: 1rem; bottom: 1.5rem; }
}

/* ─── Very small screens (360px) ────────── */
@media (max-width: 360px) {
  .hero h1 { font-size: 2.4rem; }
  .hero-badge { font-size: 0.65rem; }
  .btn { padding: 0.75rem 1.5rem; font-size: var(--fs-xs); }
}

/* ─── Large screens (1400px+) ────────────── */
@media (min-width: 1400px) {
  :root { --max-w: 1300px; }
  .courses-grid { gap: var(--sp-xl); }
}

/* ─── Print ──────────────────────────────── */
@media print {
  #navbar, #back-to-top, #page-loader, #scroll-progress,
  .hero-scroll, #mobile-nav, #nav-overlay { display: none !important; }
  body { background: #fff; color: #000; }
  .section-pad { padding: 2rem 0; }
  a { color: #000; text-decoration: underline; }
}

/* ─── Reduced Motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .hero-bg { transform: none !important; }
  .hero-scroll { animation: none; }
}