/* ==========================================================
   TUTOR EXPRESS — MOBILE RESPONSIVE PATCH
   Covers: Phone (≤768px), Small Phone (≤480px), XS (≤360px)
   Fixes inline-style overflows, layout breaks, font sizes
   ========================================================== */

/* ─── GLOBAL TOUCH & SCROLL IMPROVEMENTS ─────────────────── */
html {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Remove default underline from anchor tags styled as buttons */
a.nav-cta,
a.hn-btn-primary,
a.hn-btn-secondary,
a.pc-btn,
a.pc-btn-outline,
a.pc-btn-solid,
a.btn-cta-demo,
a.mobile-nav-cta {
  text-decoration: none !important;
  display: inline-flex;
}



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

/* ─── PREVENT HORIZONTAL SCROLL ──────────────────────────── */
body {
  overflow-x: hidden;
  width: 100%;
}

section {
  overflow-x: hidden;
}

/* ─── FASTER ANIMATIONS ON MOBILE ────────────────────────── */
/* On desktop 0.8s feels elegant; on mobile it's sluggish    */
@media (max-width: 768px) {
  .animate-on-scroll {
    transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  .animate-on-scroll.fade-up {
    transform: translateY(20px) !important; /* shorter travel distance on mobile */
  }
}




/* ==========================================================
   TABLET  769px – 1024px  (layout improvements)
   ========================================================== */
@media (max-width: 1024px) {

  /* Philosophy inner padding */
  .philosophy-section > .section-container > div {
    padding: 3rem 2.5rem !important;
  }

  /* About section: stack on tablet */
  .about-top-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Features 4-col → 2-col on tablet */
  .features-white-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Stats 4-col → 2-col on tablet */
  .stats-green-banner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Mission grid */
  .mission-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Pricing cards min-width fix */
  .pricing-card {
    min-width: unset !important;
  }

  /* CTA left min-width fix */
  .cta-left {
    min-width: 0 !important;
  }
}


/* ==========================================================
   MOBILE  ≤ 768px — PRIMARY FIXES
   ========================================================== */
@media (max-width: 768px) {

  /* ── Sections: reduce vertical padding ─────────────────── */
  .philosophy-section {
    padding: 2rem 1rem 0 !important;
  }

  .about-section {
    padding: 3rem 0 !important;
  }

  .about-section .section-container {
    padding: 0 1rem !important;
  }

  /* ── Philosophy card: tighten inner padding & font ─────── */
  .philosophy-section > .section-container > div {
    padding: 2rem 1.25rem !important;
    border-radius: 16px !important;
  }

  .philosophy-section h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 1rem !important;
  }

  .philosophy-section p {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  /* ── About section top grid ────────────────────────────── */
  .about-top-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .about-left-content h2 {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }

  .about-left-content > div[style*="border-left"] p {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  .about-left-content > div[style*="flex-direction: column"] {
    font-size: 0.9rem !important;
  }

  /* Promise card (right in about) */
  .promise-card {
    padding: 1.75rem !important;
  }

  .promise-card h3 {
    font-size: 1.1rem !important;
  }

  .promise-item {
    gap: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .promise-item > div:first-child {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .promise-item h4 {
    font-size: 0.95rem !important;
  }

  .promise-item p {
    font-size: 0.82rem !important;
  }

  /* ── Mission Grid ───────────────────────────────────────── */
  .mission-container {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 0.5rem !important;
  }

  .mission-card {
    padding: 1.5rem !important;
  }

  .mission-card h3 {
    font-size: 1.25rem !important;
  }

  .mission-card p {
    font-size: 0.88rem !important;
  }

  /* ── Features White Card: 4-col → 2-col ────────────────── */
  .features-white-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
  }

  /* Feature tiles: keep icon on top, text below (column layout) */
  .feature-col {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }

  .feature-col h4 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .feature-col p {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
  }

  .feature-col > div:first-child {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0.25rem !important;
  }

  /* ── Stats Green Banner: 4-col → 2-col ─────────────────── */
  .stats-green-banner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }

  /* ── "What Makes Us Different" section header ───────────── */
  .feature-header {
    margin-bottom: 2rem !important;
  }

  .feature-header h2 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* ── Pricing card min-width override ───────────────────── */
  .pricing-card {
    min-width: unset !important;
    width: 100% !important;
  }

  /* Pricing: features included grid → 2 col */
  .wi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── CTA Banner ─────────────────────────────────────────── */
  .cta-left {
    min-width: 0 !important;
  }

  /* ── Footer contact section ────────────────────────────── */
  .footer-contact {
    padding: 2rem 1rem !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── Testimonial marquee cards ─────────────────────────── */
  .testimonial-card {
    width: 260px !important;
    padding: 1.1rem !important;
  }

  .testimonial-card .t-text {
    font-size: 0.85rem !important;
  }

  /* ── General inline h2 overrides (section headers) ─────── */
  section h2[style*="font-size: 2.8rem"],
  section h2[style*="font-size:2.8rem"] {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  section h2[style*="font-size: 3.2rem"],
  section h2[style*="font-size:3.2rem"] {
    font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
  }

  section h2[style*="font-size: 2.4rem"],
  section h2[style*="font-size:2.4rem"] {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
  }

  section h2[style*="font-size: 2rem"],
  section h2[style*="font-size:2rem"] {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
  }

  /* ── "How it Works" / step sections ────────────────────── */
  section[style*="padding: 5rem"] {
    padding: 3rem 1rem !important;
  }

  section[style*="padding:5rem"] {
    padding: 3rem 1rem !important;
  }

  section[style*="padding: 4rem"] {
    padding: 2.5rem 1rem !important;
  }

  /* ── Portal cards ───────────────────────────────────────── */
  .portal-cards {
    flex-direction: column !important;
  }

  .portal-card {
    min-width: unset !important;
  }
}


/* ==========================================================
   SMALL MOBILE  ≤ 480px
   ========================================================== */
@media (max-width: 480px) {

  /* Philosophy */
  .philosophy-section > .section-container > div {
    padding: 1.5rem 1rem !important;
    border-radius: 12px !important;
  }

  .philosophy-section h2 {
    font-size: clamp(1.3rem, 6.5vw, 1.7rem) !important;
  }

  /* About */
  .about-section {
    padding: 2rem 0 !important;
  }

  .about-left-content h2 {
    font-size: clamp(1.5rem, 7.5vw, 1.9rem) !important;
  }

  .promise-card {
    padding: 1.25rem 1rem !important;
  }

  /* Features: KEEP 2-col on small phones too — looks much better than 1-col */
  .features-white-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }

  /* Keep column layout (icon on top) for the 2-col grid */
  .feature-col {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.4rem !important;
  }

  .feature-col > div:first-child {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 0 !important;
  }

  /* Stats: keep 2x2 grid even on very small phones */
  .stats-green-banner {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 1.25rem 1rem !important;
    gap: 1rem !important;
    border-radius: 12px !important;
  }

  .stats-green-banner h4 {
    font-size: 1.05rem !important;
  }

  .stats-green-banner span {
    font-size: 0.72rem !important;
  }

  /* Mission */
  .mission-card {
    padding: 1.25rem 1rem !important;
  }

  .mission-card h3 {
    font-size: 1.1rem !important;
  }

  /* What Makes Different section */
  .feature-header h2 {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
  }

  /* Pricing */
  .pricing-card {
    padding: 1.1rem 0.9rem !important;
  }

  /* Testimonials section header */
  .testimonials-section h2 {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-contact {
    padding: 1.5rem 0.85rem !important;
  }

  .fc-brand {
    font-size: 1.3rem !important;
  }

  /* CTA */
  .cta-banner-box {
    padding: 1.25rem 1rem !important;
  }

  .cta-text h2 {
    font-size: 1.2rem !important;
  }
}


/* ==========================================================
   XS MOBILE  ≤ 360px — Last resort fixes
   ========================================================== */
@media (max-width: 360px) {

  .philosophy-section h2 {
    font-size: 1.3rem !important;
  }

  .about-left-content h2 {
    font-size: 1.4rem !important;
  }

  .features-white-card {
    padding: 0.85rem !important;
  }

  .stats-green-banner {
    grid-template-columns: 1fr !important;
  }

  .stats-green-banner > div {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 0.85rem !important;
  }

  .stats-green-banner > div:last-child {
    border-bottom: none;
  }

  .promise-card {
    padding: 1rem 0.85rem !important;
  }

  .mission-card {
    padding: 1rem 0.85rem !important;
  }

  .feature-header h2 {
    font-size: 1.35rem !important;
  }

  .testimonial-card {
    width: 220px !important;
  }

  /* Navbar */
  .nav-inner { height: 54px !important; }
  .brand-name { font-size: 1rem !important; }
}


/* ==========================================================
   TOUCH-FRIENDLY MINIMUM TAP TARGET SIZE
   ========================================================== */
@media (max-width: 768px) {
  button,
  a,
  .mobile-nav-link,
  .subject-chip,
  .time-chip,
  .stream-card,
  .portal-btn,
  .btn-primary,
  .btn-secondary,
  .hn-btn-primary,
  .hn-btn-secondary,
  .mobile-nav-cta {
    min-height: 44px;
  }

  /* Time chips: full width on mobile for easy tap */
  .timeslot-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ==========================================================
   SMOOTH SCROLL RESTORATION ON MOBILE
   ========================================================== */
@media (max-width: 768px) {
  .modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}