/* ============================================================
   lib/styles/responsive/tablet.css — Total Solutions Tablet Styles
   Breakpoint: 640px – 1023px

   Phase 9 responsive QA layer:
   - Preserve animation utility compatibility
   - Keep navigation collapsed on tablet
   - Moderate motion intensity and delays
============================================================ */

@media screen and (min-width: 640px) and (max-width: 1023px) {
  /* ========================================================================
     1. TOKEN OVERRIDES
     ======================================================================== */

  :root {
    --container-padding: var(--space-8);
    --tablet-section-padding: var(--space-12);
    --tablet-grid-gap: var(--space-6);
    --tablet-card-padding: var(--space-6);

    /* Phase 9 motion tuning for tablet */
    --motion-duration-fast: 190ms;
    --motion-duration-medium: 260ms;
    --motion-duration-slow: 420ms;
  }

  .ts-animate-fade-in,
  [data-motion="fade-in"] {
    --ts-motion-fade-in-distance: 0.625rem;
  }

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

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

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

  /* ========================================================================
     2. GENERIC SECTION
     ======================================================================== */

  .section {
    padding-top: var(--tablet-section-padding);
    padding-bottom: var(--tablet-section-padding);
  }

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

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

  .section__title {
    font-size: var(--font-size-h2);
  }

  .section__subtitle {
    max-width: 42rem;
    font-size: var(--font-size-body);
  }

  /* Keep dense compliance content readable. */
  .legal-page [data-aos],
  .legal-page .ts-animate-fade-in,
  .legal-page .ts-animate-slide-up {
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }

  /* ========================================================================
     3. NAVBAR
     ======================================================================== */

  .navbar__inner {
    padding-inline: var(--container-padding);
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__nav,
  .navbar__menu {
    display: none;
  }

  .navbar__mobile-panel--open {
    display: block;
  }

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

  .hero-section {
    min-height: 22rem;
    padding-top: calc(5.625rem + var(--space-10));
    padding-bottom: var(--space-12);
  }

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

  .hero-section__content {
    max-width: 100%;
  }

  .hero-section__headline {
    font-size: clamp(2.25rem, 4vw, 3rem);
  }

  .hero-section__subheadline {
    max-width: 38rem;
  }

  .hero-section__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-section__actions .btn {
    width: auto;
  }

  .hero-section__form-panel {
    max-width: 100%;
    padding: var(--space-8);
  }

  /* ========================================================================
     5. TRUST BANNER
     ======================================================================== */

  .trust-banner__inner {
    padding-inline: var(--container-padding);
  }

  .trust-banner__logos {
    gap: var(--space-5) var(--space-8);
  }

  .trust-banner__logo-item img {
    height: 1.875rem;
    max-width: 7rem;
  }

  /* ========================================================================
     6. VALUE / INDUSTRY / CARD GRIDS
     ======================================================================== */

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tablet-grid-gap);
  }

  .card,
  .industry-card,
  .testimonial-card,
  .team-card,
  .value-card {
    padding: var(--tablet-card-padding);
  }

  /* ========================================================================
     7. FEATURES SECTION
     ======================================================================== */

  .features-grid-section__container {
    padding-inline: var(--container-padding);
  }

  .features-grid-section__header {
    margin-bottom: var(--space-10);
  }

  .features-grid-section__visual {
    margin-top: var(--space-10);
  }

  .features-grid-section__visual-inner {
    width: 18rem;
    height: 18rem;
  }

  /* ========================================================================
     8. PROCESS TIMELINE
     ======================================================================== */

  .process-timeline__header {
    margin-bottom: var(--space-10);
  }

  .process-timeline__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-6);
  }

  .process-timeline__step {
    margin: 0;
  }

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

  .process-timeline__step:nth-child(1)::after,
  .process-timeline__step:nth-child(2)::after {
    content: "";
    position: absolute;
    top: auto;
    right: 50%;
    bottom: -1.625rem;
    display: block;
    width: 0.125rem;
    height: 1.625rem;
    background-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
    transform: translateX(50%);
  }

  /* ========================================================================
     9. CTA SECTION
     ======================================================================== */

  .cta-section__content {
    max-width: 42rem;
  }

  .cta-section__btn {
    width: auto;
    min-width: 14rem;
    justify-content: center;
  }

  /* ========================================================================
     10. FLEET SECTION
     ======================================================================== */

  .fleet-section__inner {
    padding-inline: var(--container-padding);
  }

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

  /* ========================================================================
     11. STATS BAR
     ======================================================================== */

  .stats-bar__inner {
    padding-inline: var(--container-padding);
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .stats-bar__item {
    border-right: none;
    border-bottom: var(--border-width-thin) solid color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  }

  .stats-bar__item:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  /* ========================================================================
     12. FORMS
     ======================================================================== */

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .form-grid__item--full,
  .form-grid__full {
    grid-column: 1 / -1;
  }

  /* ========================================================================
     13. FOOTER
     ======================================================================== */

  .footer__container {
    padding-inline: var(--container-padding);
  }

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

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* ========================================================================
     14. UTILITIES
     ======================================================================== */

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

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

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

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