/* =========================================================
   Responsive + mobile-first hardening
   ========================================================= */

/* ---- Global mobile hardening (applies to ALL viewports) ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  overflow-x: hidden; /* prevent accidental horizontal scroll from any element */
}

/* Tap-highlight tuning — remove the default iOS gray flash on touch targets,
   keep focus-visible ring for keyboard users */
a,
button,
.btn,
.chip,
.menu-toggle,
.lang-switch button,
.hero-arrow,
.hero-indicators button {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   TABLET (≤ 1024 px)
   ========================================================= */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .split {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .split--reverse > :first-child { order: 0; }

  .hero-slide h1 { font-size: clamp(2.25rem, 5vw, 3rem); }
}

/* =========================================================
   MOBILE (≤ 820 px)
   ========================================================= */
@media (max-width: 820px) {
  :root {
    --header-height: 64px;
  }

  /* Header — hide desktop nav, lang switch and CTA. The drawer keeps
     its own .lang-switch (visible) so users can still toggle language. */
  .main-nav,
  .header-actions .btn--quote,
  .header-actions .lang-switch {
    display: none;
  }

  /* Drawer language switch — comfortable touch targets (>= 44px tall) */
  .mobile-drawer .lang-switch {
    width: 100%;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
  }
  .mobile-drawer .lang-switch button {
    flex: 1;
    padding: 14px 16px;
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.85);
  }
  .mobile-drawer .lang-switch button.is-active {
    color: var(--color-primary);
  }
  .menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }
  .header-actions {
    gap: var(--sp-2);
  }

  /* Hero — full viewport on phones, but min-height so text always fits */
  .hero-carousel {
    height: calc(100vh - var(--header-height));
    min-height: 520px;
  }
  .hero-controls {
    bottom: var(--sp-9);
    gap: var(--sp-3);
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }

  /* Article hero meta wrap */
  .article-hero .meta {
    gap: var(--sp-3);
  }

  /* Industry tiles — fewer columns on tablet */
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats — 2 columns */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* Service cards — single column already, but tighten padding */
  .service-detail {
    gap: var(--sp-5);
  }
}

/* =========================================================
   SMALL PHONE (≤ 540 px)
   ========================================================= */
@media (max-width: 540px) {
  :root {
    --fs-4xl: 2.25rem;
    --fs-3xl: 1.75rem;
    --fs-2xl: 1.625rem;
  }

  .container {
    padding-inline: 1rem;
  }
  .hero-slide-content {
    padding-inline: 1rem;
  }

  .btn--lg {
    padding: 0.875rem 1.25rem;
    font-size: var(--fs-sm);
  }

  .timeline {
    padding-left: var(--sp-6);
  }
  .timeline::before { left: 8px; }
  .timeline-item::before { left: -28px; }

  .badge {
    width: 72px;
    height: 72px;
  }
  .badge-label {
    font-size: 0.5625rem;
  }

  /* Hero — tighter spacing, slightly smaller title */
  .hero-slide h1 {
    font-size: 1.875rem;
    margin-bottom: var(--sp-3);
  }
  .hero-slide p {
    font-size: var(--fs-base);
  }
  .hero-slide .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--sp-3);
  }
  .hero-slide .hero-actions .btn {
    width: 100%;
  }

  /* Process steps — vertical on tiny screens */
  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Quality badges — 2 columns */
  .quality-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  /* Services / industries — single column */
  .services-grid,
  .stats-grid,
  .industries-grid {
    grid-template-columns: 1fr;
  }

  /* Industry tiles — slightly shorter */
  .industry-tile {
    aspect-ratio: auto;
    min-height: 100px;
    padding: var(--sp-4);
  }
  .industry-tile h3 {
    font-size: var(--fs-base);
  }

  /* Service detail blocks */
  .service-detail .service-image {
    min-height: 200px;
  }

  /* Article cards — single column */
  .articles-grid {
    grid-template-columns: 1fr;
  }

  /* Filter chips — horizontal scroll on tiny screens */
  .insights-categories {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-2);
    scrollbar-width: none;
  }
  .insights-categories::-webkit-scrollbar { display: none; }
  .insights-categories .chip {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: var(--fs-sm);
  }

  /* Carousel indicators — slightly bigger on tiny screens */
  .hero-indicators button {
    width: 24px;
    height: 5px;
  }
  .hero-indicators button.is-active {
    width: 36px;
  }

  /* Contact info grid — single column */
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  /* Footer service / quick-link lists — slightly tighter */
  .site-footer h4 {
    margin-bottom: var(--sp-3);
  }

  /* Form — bigger inputs, comfortable tap */
  .form-field input,
  .form-field textarea,
  .form-field select {
    padding: 0.875rem 1rem;
  }

  /* CTA banner — full-width button */
  .cta-banner .btn {
    width: 100%;
  }

  /* Skip-link offset — only when focused (kept visually-hidden otherwise) */
  .skip-link:focus {
    top: var(--sp-3);
    left: var(--sp-3);
  }

  /* Article body — tighter padding, slightly smaller text */
  .article-body {
    padding-block: var(--sp-6);
    font-size: var(--fs-base);
  }
  .article-body h2 {
    font-size: var(--fs-lg);
  }
  .article-body h3 {
    font-size: var(--fs-base);
  }
  .article-hero h1 {
    font-size: 1.75rem;
  }

  /* Map — shorter on mobile to leave room for form */
  .map-frame {
    height: 280px;
  }
}

/* =========================================================
   LANDSCAPE PHONE / SHORT VIEWPORT (height < 500 px)
   Hero must not be 100vh — controls would be pushed off screen
   ========================================================= */
@media (max-height: 500px) {
  .hero-carousel {
    height: 420px;
    min-height: 420px;
  }
  .hero-controls {
    bottom: var(--sp-4);
  }
  .hero-scroll { display: none; }
}

/* =========================================================
   iPhone X+ safe-area insets (notch + home indicator)
   ========================================================= */
@supports (padding: max(0px)) {
  .site-header .header-inner {
    padding-left: max(var(--container-pad), env(safe-area-inset-left));
    padding-right: max(var(--container-pad), env(safe-area-inset-right));
  }
  .mobile-drawer {
    padding-left: max(var(--container-pad), env(safe-area-inset-left));
    padding-right: max(var(--container-pad), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }
  .site-footer {
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  }
  .hero-slide-content {
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }
}

/* =========================================================
   REDUCED MOTION (also handled per-component; this is the global net)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Chinese (html[lang="zh"]) layout micro-adjustments
   CJK glyphs are visually denser than Latin — bump sizes where it
   matters and trim spacing where Latin defaults look loose.
   ========================================================= */

/* Hero titles — Chinese reads smaller at the same px size */
html[lang="zh"] .hero-slide h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.3;
}
html[lang="zh"] .hero-slide p {
  line-height: 1.7;
}

/* Card / section titles */
html[lang="zh"] .card h3,
html[lang="zh"] .service-card h3,
html[lang="zh"] .article-card h3 {
  line-height: 1.4;
}

/* Article hero */
html[lang="zh"] .article-hero h1 {
  line-height: 1.35;
}

/* Navigation — Chinese characters are wider than Latin; loosen spacing */
html[lang="zh"] .main-nav a,
html[lang="zh"] .mobile-drawer nav a {
  letter-spacing: 0.04em;
}

/* Footer headings */
html[lang="zh"] .site-footer h4 {
  letter-spacing: 0.05em;
}

/* CTA / button text — Chinese fits comfortably without extra padding */
html[lang="zh"] .btn {
  letter-spacing: 0.02em;
}
html[lang="zh"] .btn--lg {
  padding-inline: 1.75rem;
}

/* Cards — Chinese descriptions need slightly taller boxes */
html[lang="zh"] .service-card p,
html[lang="zh"] .card p {
  line-height: 1.7;
}

/* Industry tiles — Chinese tiles look smaller at same font-size */
html[lang="zh"] .industry-tile h3 {
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
}

/* Stats — Chinese numerals look cramped in the current layout */
html[lang="zh"] .stats-grid .stat-value {
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* TOC list — Chinese text wraps more naturally without bullets */
html[lang="zh"] .toc ol {
  padding-left: var(--sp-6);
  list-style: none;
}
html[lang="zh"] .toc li {
  margin-bottom: var(--sp-3);
  list-style: none;
}

/* Small phone: prevent Chinese hero h1 from breaking mid-word */
@media (max-width: 540px) {
  html[lang="zh"] .hero-slide h1 {
    font-size: 1.625rem;
    word-break: keep-all;
  }
}