/* ============================================================
   lib/styles/responsive/mobile.css — Total Solutions Mobile Responsive
   Breakpoint: 0px – 639px (max-width: 639px)

   Phase 9 responsive QA layer:
   - Preserve animation utility compatibility
   - Reduce motion intensity on mobile
   - Keep touch targets >= 44px
   - Avoid breaking AOS / scroll-reveal classes
============================================================ */

@media screen and (max-width: 639px) {
  /* ========================================================================
     1. MOBILE TOKEN OVERRIDES
     ======================================================================== */

  :root {
    --container-padding: var(--space-5);
    --section-padding-y: var(--space-10);
    --section-padding-x: var(--space-4);
    --card-padding: var(--space-5);
    --fs-h1: clamp(1.75rem, 7vw, 2rem);
    --fs-h2: clamp(1.5rem, 6vw, 1.75rem);
    --fs-h3: 1.125rem;
    --fs-body: 0.9375rem;
    --btn-height-min: 3rem;

    /* Phase 9 motion tuning for mobile */
    --motion-duration-fast: 180ms;
    --motion-duration-medium: 240ms;
    --motion-duration-slow: 360ms;
  }

  /* Keep scroll-reveal motion restrained on small screens without
     overriding the utility classes themselves. */
  .ts-animate-fade-in,
  [data-motion="fade-in"] {
    --ts-motion-fade-in-distance: 0.5rem;
  }

  .ts-animate-slide-up,
  [data-motion="slide-up"] {
    --ts-motion-slide-up-distance: 0.75rem;
  }

  .ts-animate-stagger-parent,
  [data-motion-stagger] {
    --ts-motion-stagger-delay-step: 50ms;
    --ts-motion-stagger-distance: 0.5rem;
  }

  [data-aos] {
    transition-duration: var(--motion-duration-medium);
  }

  /* ========================================================================
     2. SECTIONS
     ======================================================================== */

  .section {
    padding-block: var(--section-padding-y);
  }

  .section__inner {
    padding-inline: var(--section-padding-x);
  }

  .section__header {
    margin-bottom: var(--space-8);
  }

  .section__title {
    font-size: var(--fs-h2);
    text-align: center;
  }

  .section__subtitle {
    font-size: var(--fs-body);
    text-align: center;
  }

  /* Avoid long delayed reading on dense legal/compliance copy. */
  .legal-page [data-aos],
  .legal-page .ts-animate-fade-in,
  .legal-page .ts-animate-slide-up,
  .faq-section [data-aos],
  .faq-section .ts-animate-fade-in,
  .faq-section .ts-animate-slide-up {
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }

  /* ========================================================================
     3. NAVBAR & MOBILE MENU
     ======================================================================== */

  .navbar__hamburger {
    display: flex !important;
    min-width: 3rem;
    min-height: 3rem;
  }

  .navbar__nav-list {
    display: none;
  }

  .navbar__nav-list--mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 100% 0 auto 0;
    width: 100%;
    padding: var(--space-6) 0;
    background-color: var(--color-surface-primary);
    border-top: var(--border-width-thin) solid var(--color-border-default);
  }

  /* --- INJECTED MOBILE MENU FIXES --- */
  .mobile-menu {
    position: absolute; 
    top: 100%; 
    left: 0;
    width: 100%;
    background-color: var(--color-surface-primary, #ffffff);
    border-top: var(--border-width-thin, 1px) solid var(--color-border-default, #e5e7eb);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    
    max-height: calc(100vh - 4.5rem); 
    overflow-y: auto;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
    transform: translateY(-10px); 
    
    transition: opacity var(--motion-duration-medium, 240ms) ease-in-out,
                transform var(--motion-duration-medium, 240ms) ease-in-out,
                visibility var(--motion-duration-medium, 240ms);
  }

  .mobile-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    padding: var(--space-4) 0;
    margin: 0;
    list-style: none;
  }

  .mobile-menu__cta {
    padding: var(--space-4) var(--space-6) var(--space-6);
  }

  /* --- LOGO SCALING FOR MOBILE --- */
  .navbar__logo {
    gap: 8px; /* Tighter spacing on small screens */
  }

  .navbar__logo-img {
    height: 2.25rem !important; /* Scale down the image */
  }

  .navbar__logo-text {
    font-size: 1.125rem; /* Prevent text from wrapping or crowding */
  }
  /* --- END INJECTED FIXES --- */

  /* ========================================================================
     4. HERO
     ======================================================================== */

  .hero-section {
    min-height: 17.5rem;
    padding-top: calc(4.5rem + var(--space-8));
  }

  .hero-section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-section__headline {
    font-size: var(--fs-h1);
  }

  .hero-section__actions {
    flex-direction: column;
  }

  .hero-section__actions .btn {
    width: 100%;
  }

  .hero-section__form-panel {
    order: 3;
    padding: var(--space-6);
  }

  /* ========================================================================
     5. GRIDS
     ======================================================================== */

  .card-grid,
  .industry-grid,
  .features-grid,
  .value-prop-grid,
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }

  /* ========================================================================
     6. CARDS
     ======================================================================== */

  .card,
  .industry-card,
  .testimonial-card,
  .team-card,
  .value-card,
  .feature-card {
    padding: var(--card-padding);
    min-height: unset;
  }

  .card__icon-wrap {
    width: 3rem;
    height: 3rem;
  }

  /* Tone down hover-only motion on touch devices. */
  @media (hover: none) and (pointer: coarse) {
    .card:hover,
    .industry-card:hover,
    .testimonial-card:hover,
    .team-card:hover,
    .value-card:hover,
    .feature-card:hover,
    .btn:hover,
    .mobile-menu__link:hover,
    .mobile-menu__sub-link:hover,
    .mobile-menu__toggle:hover {
      transform: none;
    }
  }

  /* ========================================================================
     7. PROCESS TIMELINE
     ======================================================================== */

  .process-timeline__steps {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  .process-timeline__step {
    flex-direction: row;
    min-height: unset;
    margin: 0;
  }

  .process-timeline__step--has-connector::after {
    display: none;
  }

  .process-timeline__step-num {
    position: static;
    transform: none;
    margin-right: var(--space-4);
    flex-shrink: 0;
  }

  /* ========================================================================
     8. BUTTON GROUPS
     ======================================================================== */

  .btn-group,
  .hero-section__actions,
  .cta-section__actions,
  .form-footer {
    flex-direction: column;
  }

  .btn-group .btn,
  .form-footer .btn {
    width: 100%;
  }

  /* ========================================================================
     9. FORMS
     ======================================================================== */

  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .form-field__input,
  .form-field__select {
    min-height: 3rem;
    padding: 0.875rem;
  }

  /* ========================================================================
     10. FOOTER
     ======================================================================== */

  .footer__top {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  .footer__legal-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ========================================================================
     11. TRUST BANNER
     ======================================================================== */

  .trust-banner__logos {
    justify-content: center;
    gap: var(--space-4) var(--space-6);
  }

  .trust-banner__logo-item img {
    height: 1.75rem;
    max-width: 6.25rem;
  }

  /* ========================================================================
     12. UTILITIES
     ======================================================================== */

  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile--flex {
    display: flex !important;
  }

  /* Touch target compliance */
  .btn,
  .form-field__input,
  .form-field__select,
  .navbar__hamburger,
  .footer__social-link {
    min-height: 3rem;
  }
}