/* ============================================================
   FILE: css/responsive.css
   Mobile and tablet responsive styles.
   These styles apply on smaller screens.
   
   Breakpoints:
   - Below 1100px = Tablet
   - Below 768px  = Mobile
   - Below 480px  = Small mobile
============================================================ */

/* =====================
   TABLET (below 1100px)
===================== */
@media (max-width: 1100px) {
  /* Hero: stack content vertically */
  .hero__inner {
    grid-template-columns: 1fr;
  }

  /* Hide form card on tablet */
  .hero__form-card {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 4rem 0;
  }

  /* Lead section: stack vertically */
  .lead__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Reduce category columns */
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  /* Contact: stack vertically */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  #nav-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 80px);
    background: #1a4731;
    z-index: 99999;
    overflow-y: auto;
    padding: 20px;
  }

  #nav-menu.active {
    display: flex !important;
    flex-direction: column;
  }
}

/* =====================
   MOBILE (below 768px)
===================== */
@media (max-width: 768px) {
  /* Reduce section padding */
  .section {
    padding: 3.5rem 0;
  }

  /* Hide top bar on mobile */
  .topbar {
    display: none;
  }

  /* Hero */
  .hero {
    padding: 3.5rem 0 3rem;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__stats {
    gap: 1.5rem;
    flex-wrap: wrap;
  }

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

  /* Testimonials: single column */
  .testi-grid {
    grid-template-columns: 1fr;
  }

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

  /* CTA Band: stack */
  .cta-band__inner {
    flex-direction: column;
  }

  .cta-band__btns {
    flex-wrap: wrap;
  }

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

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

  /* Trust bar: show fewer items */
  .trust-item:nth-child(n + 4) {
    display: none;
  }

  /* Hide some trust items */
  .trust-item:nth-child(5),
  .trust-item:nth-child(6) {
    display: none;
  }
}

/* =====================
   SMALL MOBILE (below 480px)
===================== */
@media (max-width: 480px) {
  /* Category grid: 2 columns */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cards grid: single column */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  /* Form box padding */
  .form-box {
    padding: 1.5rem;
  }

  /* Page hero */
  .page-hero {
    padding: 3rem 0 2.5rem;
  }
}

/* ===== MOBILE PERFECT FIX ===== */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }

  .container,
  .hero__inner,
  .lead__grid,
  .contact-grid,
  .nav__inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .hero__content,
  .hero__form,
  .hero__text {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: 42px !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }

  .sp-form {
    width: 100% !important;
  }

  .sp-form input,
  .sp-form select,
  .sp-form button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  #nav-menu {
    position: fixed !important;
    top: 75px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 75px) !important;
    overflow-y: auto !important;
    background: #174c33 !important;
    display: none;
    flex-direction: column !important;
    padding: 20px !important;
    z-index: 999999 !important;
  }

  #nav-menu.active {
    display: flex !important;
  }

  #nav-menu a {
    display: block !important;
    padding: 14px 0 !important;
    width: 100% !important;
  }

  .logo img {
    max-height: 55px !important;
  }
}

/* FINAL MOBILE FORM FIX */
@media (max-width: 768px) {
  .hero__inner,
  .hero-grid,
  .lead__grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero__content,
  .hero__form,
  .form-card,
  .lead-form {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .form-card,
  .hero__form {
    margin-top: 20px !important;
    padding: 20px !important;
  }

  .sp-form,
  .sp-form .form-field,
  .sp-form input,
  .sp-form select,
  .sp-form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  h1 {
    font-size: 42px !important;
    line-height: 1.1 !important;
    word-break: break-word !important;
  }

  body,
  html {
    overflow-x: hidden !important;
  }
}

/* MOBILE FORM FIX */
@media screen and (max-width: 768px) {
  .hero__form-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 20px auto !important;
    padding: 20px !important;

    position: relative !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;

    z-index: 999 !important;
  }

  .sp-form {
    display: block !important;
    width: 100% !important;
  }

  .sp-form .form-field {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .sp-form input,
  .sp-form select,
  .sp-form textarea,
  .sp-form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero__content,
  .hero__text,
  .hero__form {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
}
@media (max-width: 768px) {
  .story-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.stat-card {
  background: var(--main-green);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--lime);
}

.stat-text {
  font-size: 0.875rem;
  color: rgba(244, 240, 230, 0.65);
  margin-top: 0.375rem;
}

/* Mobile View */
@media (max-width: 768px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stat-card {
    padding: 1.5rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  h2 {
    font-size: 32px;
    line-height: 1.2;
  }
}

@media (max-width: 768px) {
  /* Main Contact Section */
  #contact-form .container > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    margin-right: -4px;
  }

  /* Headings */
  #contact-form h2 {
    font-size: 42px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  /* Form Rows */
  .form-row {
    display: block !important;
  }

  .form-field {
    width: 100% !important;
    margin-bottom: 15px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Contact Cards */
  .contact-card {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box;
  }

  .contact-card__icon {
    flex-shrink: 0;
  }

  .contact-card__value {
    word-break: break-word;
    font-size: 18px !important;
  }

  /* Button */
  .btn--full {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  /* Container */
  #contact-form .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  /* Form Section */
  .sp-form {
    width: 100% !important;
  }

  .form-row {
    display: block !important;
    margin: 0 !important;
  }

  .form-field {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  textarea {
    min-height: 140px;
  }

  /* Button */
  .btn--full {
    width: 100% !important;
  }
}

@media (max-width:768px){#nav-menu.open{display:flex !important;flex-direction:column;}}