/* ============================================================
   English-version layout adjustments (en/index.html only)
   Loaded AFTER style.css. Compensates for English text running
   ~1.5-2x longer than the Chinese the layout was designed for,
   plus English-specific typographic polish.
   The Chinese pages are untouched by this file.
   ============================================================ */

/* ---- 1. Header nav: English labels are longer ("Digital Capabilities") ---- */
.primary-nav { gap: clamp(14px, 1.6vw, 28px); }
.primary-nav a { font-size: .93rem; }

/* ---- 2. Hero value signatures: the worst breakage.
         "Self-Operated Warehouses" was nowrap at up to 3.3rem ---- */
.value-signature:nth-child(2) { margin-left: 0; }
.value-signature:nth-child(3) { margin-left: 0; }
.value-signature strong {
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  white-space: normal;
}
.value-copy {
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: 14px;
}

/* ---- 3. Hero grid: give the copy column a little more room (desktop only,
         so it never overrides the single-column responsive layouts) ---- */
@media (min-width: 993px) {
  .hero-grid { grid-template-columns: 46% 54%; }
}

/* ---- 4. Contact heading: 62 chars must never be one line.
         (style.css only relaxes this below 992px) ---- */
.contact h2 { white-space: normal; line-height: 1.35; }

/* ---- 5. Trust chips: 4-across grid + nowrap pills clips
         "TEMU-certified warehouse" — allow two lines ---- */
.trust-chips span {
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}

/* ---- 6. Region panel foot: let the three items wrap instead of squeeze ---- */
.panel-foot { flex-wrap: wrap; row-gap: 6px; }

/* ---- 7. Service card titles keep comfortable line breaks ---- */
.service-card-content h3 { line-height: 1.32; }
.service-card-content h3 span { line-height: 1.32; }

/* ---- 8. Metric labels under the big numbers can run two lines ---- */
.strength-metrics span { line-height: 1.5; }
.capacity-strip span { line-height: 1.5; }

/* ---- 9. Process steps: a touch more breathing room for longer copy ---- */
.process-list li { min-height: 250px; }

/* ---- 10. Mid-tablet range (992-1180px): nav + actions get tight ---- */
@media (max-width: 1180px) {
  .nav-shell { gap: 18px; }
  .primary-nav { gap: 14px; }
  .primary-nav a { font-size: .88rem; }
  .login-trigger { padding: 0 12px; }
  .button-small { padding-inline: 14px; }
}

/* ---- 11. Service card tags: English pills ("Scheduled Deliveries",
         "Clearance & Pickup", ...) run ~2x wider than the Chinese tags
         the fixed 34px row + nowrap flex were designed for. In the
         5-column desktop layout they spill past the card edge.
         Let the row grow and the pills wrap; they stay bottom-aligned. ---- */
.service-card-content { grid-template-rows: 64px minmax(0, 1fr) auto; }
.service-tags { flex-wrap: wrap; row-gap: 6px; }
.service-tags span { font-size: .64rem; }

/* ============================================================
   English typographic polish — tidy up the English layout.
   ============================================================ */

/* ---- 12. Hero H1: English needs more presence than the CJK-tuned
         2.42rem cap; two balanced lines in the 46% column ---- */
.hero-copy h1 {
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}

/* ---- 13. Eyebrow kickers: .18em tracking is too airy for long
         English strings ("GLOBAL SELF-OPERATED NETWORK") ---- */
.eyebrow { letter-spacing: .14em; }

/* ---- 14. Section headings: -.035em is too tight for Latin;
         relax slightly for English ---- */
.section-heading h2,
.network h2,
.digital h2,
.about h2 { letter-spacing: -.02em; }

/* ---- 15. Process steps: titles run 1-2 lines; pin them to two lines
         so the five descriptions start on the same baseline ---- */
.process-list h3 { min-height: 2.7em; line-height: 1.35; }

/* ---- 16. Service cards: titles run 1-2 lines; pin them to two lines
         so the five paragraphs start on the same baseline ---- */
.service-grid .service-header h3 { min-height: 2.9em; }

/* ---- 17. Evidence cards: same baseline alignment for descriptions ---- */
.evidence-grid h3 { min-height: 2.7em; line-height: 1.35; }

/* ---- 18. Contact band: the 62-char English heading was squeezed into
         a narrow 1.1fr column (4 ragged lines). Give it more room and
         take a little from the contacts column, which has slack. ---- */
.contact-shell { grid-template-columns: 1.35fr auto 1fr; }