/* ============================================================
   lib/styles/responsive/desktop.css — Total Solutions Desktop Styles
   Breakpoint: 1024px+
   Large Desktop: 1536px+

   Phase 9 responsive QA layer:
   - Preserve animation utility compatibility
   - Keep desktop navigation fully available
   - Maintain restrained premium motion
============================================================ */

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

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

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

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

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

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

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

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

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

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

  .section__subtitle {
    max-width: 42rem;
  }

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

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

  .navbar__hamburger {
    display: none !important;
  }

  .navbar__nav,
  .navbar__menu,
  .navbar__links,
  .navbar__actions {
    display: flex !important;
  }

  .navbar__mobile-panel,
  .navbar__mobile-drawer,
  .navbar__mobile-menu {
    display: none !important;
  }

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

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

  .hero-section__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: start;
    gap: var(--space-12);
    padding-inline: var(--container-padding);
  }

  .hero-section__content {
    max-width: 44rem;
    gap: var(--space-5);
  }

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

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

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

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

  .hero-section__form-panel {
    padding: var(--space-8);
  }

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

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

  .trust-banner__logos {
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: nowrap;
  }

  .trust-banner__logo-item img {
    height: 2rem;
    max-width: 7.5rem;
  }

  /* ========================================================================
     6. CARD GRIDS
     ======================================================================== */

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

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

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

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

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

  .features-grid-section__visual {
    display: flex;
  }

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

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

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

  .process-timeline__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 0px;
  }

  .process-timeline__step {
    margin: 0 var(--space-3);
  }

  .process-timeline__step:first-child {
    margin-left: 0;
  }

  .process-timeline__step:last-child {
    margin-right: 0;
  }

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

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

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

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

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

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

  .fleet-section__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
  }

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

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

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

  .stats-bar__item:last-child {
    border-right: 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: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-12);
  }

  .footer__brand {
    grid-column: auto;
  }

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

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

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

  .hide-mobile,
  .hide-tablet {
    display: block !important;
  }

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

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

@media screen and (min-width: 1536px) {
  :root {
    --container-padding: var(--space-16);
  }

  .section__inner,
  .hero-section__inner,
  .trust-banner__inner,
  .features-grid-section__container,
  .fleet-section__inner,
  .stats-bar__inner,
  .footer__container {
    max-width: var(--container-xl);
  }

  .hero-section {
    min-height: 38rem;
  }

  .hero-section__inner {
    gap: var(--space-16);
  }

  .footer__top {
    gap: var(--space-16);
  }
}