/* ============================================================================
 * ptcargo-shipping.desktop.css — DESKTOP / TABLET light-2026 layer (>=768px)
 * ----------------------------------------------------------------------------
 * Media-gated; applies only beside the AppShell (body.ptshell). MOBILE SoT
 * (ptcargo-shipping.css) untouched — phone view byte-equal. Neutral canvas
 * (#F4F5F7); the in-body sticky header is hidden (shell topbar/sidebar replaces
 * it); the dark red xhero becomes a full-width light white card; the trust bar,
 * freight calculator, stat ribbon and the service / warehouse / why sections are
 * centred and go multi-column. Accent stays the page's own effective RED (block-2
 * :root override — --sun #FF3D2E / --sun-deep #D8190B / #C01810) — used sparingly.
 * The footer keeps its conventional dark treatment.
 * ========================================================================== */
@media (min-width:768px){
  body.ptshell{background:#F4F5F7}
  /* in-body sticky header → replaced by shell topbar/sidebar on desktop */
  body.ptshell header{display:none}

  /* ── ALL sections share ONE width (1080), centred, equal edges ──
     The `html` prefix (specificity 0,2,2) beats the shell's runtime-injected
     `body.ptshell .wrap{max-width:none!important}` (0,2,1) so every section —
     even the .wrap ones (trust / xstats / svc / warehouse / why) — lines up. */
  html body.ptshell .xhero,
  html body.ptshell .trust,
  html body.ptshell main.page,
  html body.ptshell .calc,
  html body.ptshell .xstats,
  html body.ptshell .sechead,
  html body.ptshell .svcrow,
  html body.ptshell .whlist,
  html body.ptshell .whyhead,
  html body.ptshell .whygrid{
    max-width:1080px !important; margin-left:auto !important; margin-right:auto !important;
  }
  html body.ptshell main.page{ padding-left:0 !important; padding-right:0 !important; }

  /* --- dark red xhero → light-2026 white card, 2-column (text + image) --- */
  body.ptshell .xhero{margin:16px auto 0;padding:34px 36px;border-radius:22px;color:var(--ink);
    background:#fff;border:1px solid #E8EAEF;box-shadow:0 22px 48px -30px rgba(20,25,35,.28);
    display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center}
  body.ptshell .xhero .glow,body.ptshell .xhero .scene{display:none}
  body.ptshell .xhero .xh-text{min-width:0}
  body.ptshell .xhero .eb{color:var(--sun-deep)}
  body.ptshell .xhero .eb::before{background:var(--sun-deep)}
  body.ptshell .xhero h1{color:var(--ink)}
  body.ptshell .xhero h1 .hl{color:var(--sun-deep)}
  body.ptshell .xhero p{color:var(--ink-2);max-width:600px}
  body.ptshell .xhero .callpill{background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;
    box-shadow:0 14px 30px -14px rgba(216,25,11,.5)}
  /* hero image (right column) — graceful gradient placeholder until the file lands */
  body.ptshell .xhero .xh-img{display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
    background:linear-gradient(135deg,#FFF1EC,#FFDECE 60%,#FFCBB4);border:1px solid #FFD9C2}
  body.ptshell .xhero .xh-img img{width:100%;height:100%;object-fit:cover;display:block}

  /* --- trust strip --- */
  body.ptshell .trust{margin:18px auto 0;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}

  /* --- freight calculator: light inputs --- */
  body.ptshell .calc{margin:16px auto 0;border:1px solid #E8EAEF;box-shadow:0 18px 44px -30px rgba(20,25,35,.26)}
  body.ptshell .calc .sel,body.ptshell .calc .win{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .calc .win:focus-within{border-color:var(--sun-deep);box-shadow:0 0 0 3px rgba(216,25,11,.12)}

  /* --- stat ribbon: 5-across (drop the mobile scroll pager) --- */
  body.ptshell .xstats{margin:18px auto 6px}
  body.ptshell .xstats .st{width:20%}
  body.ptshell .xstats .dots{display:none}

  /* --- service cards: responsive multi-column grid (was a horizontal scroller) --- */
  body.ptshell .svcrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;overflow:visible}
  body.ptshell .svcrow .svc{width:auto}

  /* --- card surfaces: neutral hairlines --- */
  body.ptshell .svc,body.ptshell .wh,body.ptshell .why{border-color:#E8EAEF}
  body.ptshell .band{border-color:#E8EAEF}
}