/* ===================================
   Teachia.app - MOE Responsive
   =================================== */

/* ── Global overflow prevention ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Table scroll wrapper ── */
.table-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── ROI calculator grid classes ── */
.roi-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-6);
}

.roi-breakdown-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2);
  padding: 10px 14px;
  font-size: 13px;
  align-items: center;
}

.roi-breakdown-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px 6px 0 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .nav__link { padding: 18px 10px; font-size: 13px; }
}

@media (max-width: 991px) {
  .features-grid, .testimonials-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .features-detail { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: var(--text-4xl); }
  .section__title { font-size: var(--text-3xl); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .section { padding: var(--space-12) 0; }

  .nav { display: none; }
  .menu-toggle { display: flex; }

  .hero__title { font-size: var(--text-3xl); }
  .hero__description { font-size: var(--text-base); }
  .hero__stats { flex-direction: column; gap: var(--space-4); }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; max-width: 300px; }

  .features-grid, .testimonials-grid, .pricing-grid,
  .features-detail, .mission-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  .section__title { font-size: var(--text-2xl); }
  .page-hero__title { font-size: var(--text-3xl); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer__bottom { flex-direction: column; gap: var(--space-3); text-align: center; }

  .contact-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  .comparison-table { font-size: 12px; min-width: 500px; }
  .comparison-table th, .comparison-table td { padding: 6px 8px; }

  .section__header { margin-bottom: var(--space-8); }
  .cta-section__title { font-size: var(--text-2xl); }

  /* ROI calculator responsive */
  .roi-details-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .roi-breakdown-header,
  .roi-breakdown-row {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    font-size: 11px;
    padding: 8px 10px;
    gap: var(--space-1);
  }

  /* Override inline grid styles that overflow on mobile */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  [style*="font-size: 48px"] {
    font-size: 36px !important;
  }

  [style*="font-size: 36px"] {
    font-size: 28px !important;
  }

  /* Prevent any child from exceeding viewport */
  .container {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Cards and images overflow prevention */
  .feature-card,
  .pricing-card,
  .testimonial-card,
  .mission-card,
  .team-card,
  .feature-detail-card {
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  img, video, iframe, svg {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  .hero__title { font-size: var(--text-2xl); }
  .stats-bar { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .stat-item__value { font-size: var(--text-2xl); }
  .team-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: var(--space-6); }

  /* ROI calculator stacks on very small screens */
  .roi-details-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .roi-details-grid > div {
    padding: var(--space-3) !important;
  }

  .roi-details-grid [style*="font-size: 28px"] {
    font-size: 22px !important;
  }

  .roi-breakdown-header,
  .roi-breakdown-row {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    font-size: 10px;
    padding: 6px 8px;
    gap: 2px;
  }

  /* Override inline grids to single column on small screens */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  [style*="font-size: 36px"] {
    font-size: 22px !important;
  }

  [style*="font-size: 48px"] {
    font-size: 30px !important;
  }

  /* Page hero */
  .page-hero__title { font-size: var(--text-2xl); }
  .page-hero__desc { font-size: var(--text-base); padding: 0 var(--space-2); }

  /* Header actions on very small screens */
  .header__actions .btn--sm { font-size: 11px; padding: 4px 8px; }

  /* Cloud logos */
  .cloud-logos { gap: var(--space-3); }
  .cloud-logos__item { font-size: 11px; }
}

@media print {
  .header, .footer, .cta-section, .mobile-nav, .menu-toggle { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding: 1rem 0; }
}