/* ============================================================
   ARDI — Site-wide responsive behavior
   Consolidated from the Homepage, Cross-Docking & Container
   Transloading page, and Cross-Dock Quote Form component
   stylesheets during the css merge (2026-07-27). Rules shared
   across pages are declared once; page-specific rules are
   grouped and labeled below.

   Breakpoints (match approved design):
     1139px  desktop -> tablet (drawer nav)
     1019px  two-column splits / quote / fit / facility stack
      759px  mobile (footer accordions, tap targets, 1-col grids)
      640px  form rows stack, dial selector becomes bottom sheet,
             hero proof grid 1-col
      639px  quote-form: unsqueeze compound number+unit fields
      479px  spec table stacks label-over-value
   ============================================================ */

/* ---------- <=1139px -- tablet: drawer navigation ---------- */
@media (max-width: 1139px) {
  .utilbar { display: none; }
  .hdr__nav { display: none; }
  .hdr__actions { display: none; }
  .mega { display: none; }
  .hdr__mobile-actions { display: flex; }

  .hero__title { font-size: 38px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <=1019px -- splits / quote / fit / facility stack ---------- */
@media (max-width: 1019px) {
  /* shared */
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .fit-grid { grid-template-columns: 1fr; }

  /* homepage */
  .split--loc,
  .split--facility { grid-template-columns: 1fr; gap: 44px; }
  .quote__in { grid-template-columns: 1fr; gap: 44px; }
  .wq-formcard { max-width: 640px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .wh-grid { grid-template-columns: 1fr; }
  .fc-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }

  /* cross-docking & container transloading page */
  .facility-video__frame { height: 440px; }
  .hero__proof { grid-template-columns: 1fr 1fr; }

  /* cross-dock quote form */
  .xq-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xq-matrix { grid-template-columns: 1fr; }
  .xq-col--r { border-left: 0; padding-left: 0; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-hair); }
  .xq-more__body { grid-template-columns: 1fr; }
  .xq-locs { grid-template-columns: 1fr; }
}

/* ---------- <=759px -- mobile ---------- */
@media (max-width: 759px) {
  /* shared */
  .container { padding-left: 20px; padding-right: 20px; }
  .hero__title { font-size: 31px; }
  .sec { padding-top: 56px; padding-bottom: 56px; }
  .steps { grid-template-columns: 1fr; }

  /* homepage */
  .svc-grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }

  /* cross-docking & container transloading page */
  .facility-video { padding-bottom: 56px; }
  .facility-video__frame { height: auto; aspect-ratio: 16 / 10; }

  /* 44px tap targets for text links */
  .wlink { min-height: 44px; display: inline-flex; align-items: center; }
  .flink { padding: 11px 0; }
  .utilbar__link { min-height: 44px; }
  .foot__contact-lnk { min-height: 44px; }
  .foot__legal-links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* footer: columns become accordions */
  .foot__grid { grid-template-columns: 1fr; gap: 0; }
  .foot__brand { padding-bottom: 24px; }
  .fcol__head { display: none; }
  .fcol__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 0;
    cursor: pointer;
    text-align: left;
  }
  .fcol__toggle .fcol__dash { width: 16px; }
  .fcol__toggle-label {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
  }
  .fcol__chev { color: #8b9199; transition: transform var(--dur-normal) var(--ease-standard); }
  .fcol__toggle[aria-expanded="true"] .fcol__chev { transform: rotate(180deg); }
  .fcol__links { padding: 2px 0 12px 28px; margin-top: 0; gap: 0; align-items: stretch; }
  .fcol__links .flink {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: color 120ms;
  }
  .fcol__links .flink:hover { color: #fff; border-color: rgba(255,255,255,.12); }

  .foot__legal { flex-direction: column; align-items: flex-start; }

  /* cross-dock quote form */
  .xq { padding: 56px 0 72px; }
  .xq-narrow { margin-top: 22px; }
  .xq-card { padding: 18px 16px 20px; border-radius: var(--radius-xl); }
  .xq-contact { grid-template-columns: 1fr; }
  .xq-mgrid { gap: 12px 8px; }
  .xq-mgrid > .xc2, .xq-mgrid > .xc3 { grid-column: span 3; }
  .xq-mgrid > .xc4, .xq-mgrid > .xc6 { grid-column: span 6; }
  .xq-row3 { grid-template-columns: 1fr; }
  .xq-submitarea {
    margin: 18px -16px -20px; padding: 12px 16px 14px;
    grid-template-columns: 1fr;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
  .xq-submitbtn { min-width: 0; width: 100%; }
  .xq-success { padding: 34px 22px; }
  .xq-head__meta { flex-direction: column; gap: 8px; }

  /* comfortable 44px touch targets on touch devices (desktop density unchanged) */
  .xq .ardi-field__ctrl { min-height: 44px; }
  .xq .ardi-input, .xq .ardi-select { height: 44px; }
  .xq-seg span { min-height: 44px; }
  .xq-chip span { min-height: 40px; }
  .xq-unit span { min-height: 36px; }
  .xq-check { padding: 8px 0; }
  .xq-check input { width: 20px; height: 20px; }
}

/* ---------- <=640px -- form rows + dial bottom sheet + hero proof ---------- */
@media (max-width: 640px) {
  /* homepage */
  .wq-row2 { grid-template-columns: 1fr; }
  .wq-svc-pop { position: absolute; }

  /* cross-docking & container transloading page */
  .hero__proof { grid-template-columns: 1fr; }

  /* shared: dial selector becomes a bottom sheet */
  .wq-dial-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 88;
    background: rgba(15,20,17,.45);
  }
  .wq-dial-panel {
    position: fixed;
    top: auto;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    width: auto;
    max-width: none;
    max-height: 72vh;
    border: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 44px rgba(10,14,11,.28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---------- <=639px -- small phones: unsqueeze compound number+unit fields ---------- */
@media (max-width: 639px) {
  /* Weight (number + lb/kg toggle) and Quantity (number + unit select) need the
     full row on narrow phones, or the number input collapses to a few px. */
  .xq-mgrid > .ardi-field:has(.xq-unit),
  .xq-mgrid > #xq-w-qty { grid-column: span 6; }
}

/* ---------- <=479px -- spec table stacks ---------- */
@media (max-width: 479px) {
  .spec-row { grid-template-columns: 1fr; }
  .spec-row dt { border-right: 0; padding-bottom: 2px; }
  .spec-row dd { padding-top: 2px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__video { display: none; }
  .card:hover { transform: none; }

  /* cross-dock quote form */
  .xq *, .xq *::before, .xq *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  #xq-submit.is-loading::after { animation-duration: .7s !important; }
}

/* ============================================================
   ARDI — E-commerce Fulfillment Warehouse — responsive behavior
   Breakpoints (match approved design):
     1139px  desktop → tablet (drawer nav)
     1019px  two-column splits stack
      759px  mobile (footer accordions, tap targets)
      640px  form rows stack, dial selector becomes bottom sheet
      479px  spec table stacks label-over-value
   ============================================================ */

/* ---------- ≤1139px — tablet: drawer navigation ---------- */
@media (max-width: 1139px) {
  .utilbar { display: none; }
  .hdr__nav { display: none; }
  .hdr__actions { display: none; }
  .mega { display: none; }
  .hdr__mobile-actions { display: flex; }

  .hero__title { font-size: 38px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hero__trust { grid-template-columns: 1fr 1fr; }
  header .ardi-btn { min-height: 44px; }   /* mobile CTA touch target */
}

/* ---------- ≤1019px — splits stack ---------- */
@media (max-width: 1019px) {
  .split--loc,
  .split--facility { grid-template-columns: 1fr; gap: 44px; }
  .quote__in { grid-template-columns: 1fr; gap: 44px; }
  .wq-formcard { max-width: 640px; }
  .fit-grid { grid-template-columns: 1fr; }
  .twocol { grid-template-columns: 1fr; gap: 34px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .sec { padding-top: 72px; padding-bottom: 72px; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

/* ---------- ≤759px — mobile ---------- */
@media (max-width: 759px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .hero__title { font-size: 31px; }
  .sec { padding-top: 56px; padding-bottom: 56px; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero__trust { grid-template-columns: 1fr; }
  .defcard__body { padding: 26px 22px 28px; }
  .callout { padding: 20px 22px; }
  .pair-card__body { padding: 24px 22px 26px; }
  /* 16px minimum input text — prevents iOS focus zoom */
  .ardi-input, .ardi-select, .ardi-textarea { font-size: 16px; }

  /* 44px tap targets for text links */
  .wlink { min-height: 44px; display: inline-flex; align-items: center; }
  .flink { padding: 11px 0; }
  .utilbar__link { min-height: 44px; }
  .foot__contact-lnk { min-height: 44px; }
  .foot__legal-links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* footer: columns become accordions */
  .foot__grid { grid-template-columns: 1fr; gap: 0; }
  .foot__brand { padding-bottom: 24px; }
  .fcol__head { display: none; }
  .fcol__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 0;
    cursor: pointer;
    text-align: left;
  }
  .fcol__toggle .fcol__dash { width: 16px; }
  .fcol__toggle-label {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
  }
  .fcol__chev { color: #8b9199; transition: transform var(--dur-normal) var(--ease-standard); }
  .fcol__toggle[aria-expanded="true"] .fcol__chev { transform: rotate(180deg); }
  .fcol__links { padding: 2px 0 12px 28px; margin-top: 0; gap: 0; align-items: stretch; }
  .fcol__links .flink {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 15px;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: color 120ms;
  }
  .fcol__links .flink:hover { color: #fff; border-color: rgba(255,255,255,.12); }

  .foot__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- ≤640px — form rows + dial bottom sheet ---------- */
@media (max-width: 640px) {
  .wq-row2 { grid-template-columns: 1fr; }
  .wq-svc-pop { position: absolute; }

  .wq-dial-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 88;
    background: rgba(15,20,17,.45);
  }
  .wq-dial-panel {
    position: fixed;
    top: auto;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    width: auto;
    max-width: none;
    max-height: 72vh;
    border: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 44px rgba(10,14,11,.28);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---------- ≤400px — small phones ---------- */
@media (max-width: 400px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero__title { font-size: 28px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__video { display: none; }
  .card:hover { transform: none; }
}