/* =============================================
   XOX — Traditional Chinese (繁體中文) Styles
   Noto Sans TC + mobile/tablet optimizations
   ============================================= */

/* Chinese font stack */
.lang-zh,
.lang-zh * {
  font-family: 'Noto Sans TC', 'Inter', 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif;
}

/* Headings keep Space Grotesk for brand feel but fall back to Noto Sans TC */
.lang-zh h1,
.lang-zh h2,
.lang-zh h3,
.lang-zh h4 {
  font-family: 'Inter', 'Noto Sans TC', 'PingFang TC', sans-serif;
  letter-spacing: -0.01em;
}

/* Slightly larger base font for Chinese readability */
.lang-zh p,
.lang-zh li,
.lang-zh a {
  font-size: 0.97rem;
  line-height: 1.85;
}

/* Tighter letter spacing for Chinese body text */
.lang-zh .section-desc,
.lang-zh .hero-sub,
.lang-zh .page-desc,
.lang-zh .oh-hero-desc,
.lang-zh .oh-demo-desc {
  letter-spacing: 0.01em;
  line-height: 1.9;
}

/* Hero title Chinese scaling */
.lang-zh .hero-title {
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  line-height: 1.15;
}

/* Page hero title */
.lang-zh .page-title {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
}

/* Section label (uppercase label) */
.lang-zh .section-label {
  letter-spacing: 0.08em;
  font-size: 0.73rem;
}

/* Language switcher button in nav */
.nav-lang-switch {
  margin-left: 4px;
}
.lang-btn-en {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6) !important;
  transition: all 0.2s;
  background: transparent;
}
.lang-btn-en:hover {
  border-color: rgba(204,26,122,0.6);
  color: #CC1A7A !important;
  background: rgba(204,26,122,0.07);
}

/* English nav pages — add 繁中 button */
.lang-btn-zh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.6) !important;
  transition: all 0.2s;
  background: transparent;
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
}
.lang-btn-zh:hover {
  border-color: rgba(204,26,122,0.6);
  color: #CC1A7A !important;
  background: rgba(204,26,122,0.07);
}

/* ─── ZH HERO adjustments ──────────────────── */
.lang-zh .hero-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

/* ─── ZH Orbit card ──────────────────────────── */
.lang-zh .orbit-card h3 {
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.lang-zh .orbit-card p {
  font-size: 0.88rem;
  line-height: 1.8;
}

/* ─── ZH service cards ──────────────────────── */
.lang-zh .service-card h3 {
  font-size: 0.97rem;
}
.lang-zh .service-card p,
.lang-zh .service-card li {
  font-size: 0.85rem;
  line-height: 1.75;
}

/* ─── ZH team cards ─────────────────────────── */
.lang-zh .team-card h3 {
  font-size: 0.9rem;
}
.lang-zh .team-card p {
  font-size: 0.82rem;
  line-height: 1.7;
}

/* ─── ZH contact ─────────────────────────────── */
.lang-zh label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.lang-zh .contact-detail-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.lang-zh .contact-office-zh,
.lang-zh .contact-office-zh-addr {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
}

/* ─── ZH footer ──────────────────────────────── */
.lang-zh .footer-tagline {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.lang-zh .footer-sub {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 0.8rem;
}
.lang-zh .footer-col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.lang-zh .footer-bottom p {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 0.75rem;
}

/* ─── ZH breadcrumb ──────────────────────────── */
.lang-zh .breadcrumb {
  font-size: 0.75rem;
}

/* ─── ZH stat bar ────────────────────────────── */
.lang-zh .stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

/* ─── ZH dark band ───────────────────────────── */
.lang-zh .dark-band h2 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}
.lang-zh .dark-band p {
  font-size: 0.92rem;
  line-height: 1.85;
}

/* ─── ZH OH hero ──────────────────────────────── */
.lang-zh .oh-hero-title {
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
}
.lang-zh .oh-phase-title {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}
.lang-zh .oh-agent-desc {
  font-size: 0.85rem;
  line-height: 1.8;
}
.lang-zh .oh-agent-name {
  font-size: 0.97rem;
}

/* ─── ZH GPG logo row mobile ─────────────────── */
.lang-zh .gpg-logo-row {
  grid-template-columns: repeat(4, 1fr);
}

/* =============================================
   MOBILE OPTIMIZATIONS (max-width: 768px)
   ============================================= */
@media (max-width: 768px) {
  /* Prevent text overflow in Chinese */
  .lang-zh * {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Nav: hide extra links on mobile, show toggle */
  .lang-zh .nav-lang-switch {
    display: none; /* show in menu only */
  }

  /* Hero on mobile */
  .lang-zh .hero-title {
    font-size: clamp(1.6rem, 6.5vw, 2.4rem);
    line-height: 1.2;
  }
  .lang-zh .hero-sub {
    font-size: 0.88rem;
    line-height: 1.8;
  }

  /* Stat bar — 2 cols on mobile */
  .lang-zh .stat-bar-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Orbit grid — 1 col on mobile */
  .lang-zh .orbit-grid {
    grid-template-columns: 1fr;
  }

  /* Services grid — 1 col on mobile */
  .lang-zh .services-grid {
    grid-template-columns: 1fr;
  }

  /* Team grid — 1 col on mobile */
  .lang-zh .team-grid {
    grid-template-columns: 1fr;
  }

  /* Intro split — stack on mobile */
  .lang-zh .intro-split {
    flex-direction: column;
    gap: 28px;
  }
  .lang-zh .intro-split-img {
    min-height: 220px;
  }

  /* Section inner padding */
  .lang-zh .section-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Page hero */
  .lang-zh .page-title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  .lang-zh .page-desc {
    font-size: 0.85rem;
    line-height: 1.85;
  }
  .lang-zh .page-hero-inner {
    padding: 80px 16px 40px;
  }

  /* GPG logo row — 2×2 grid on mobile */
  .lang-zh .gpg-logo-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  /* Program feature — stack */
  .lang-zh .program-feature {
    flex-direction: column;
  }
  .lang-zh .program-feature.reverse {
    flex-direction: column;
  }

  /* Contact grid — stack */
  .lang-zh .contact-grid {
    grid-template-columns: 1fr;
  }

  /* OH agents grid — 1 col */
  .lang-zh .oh-agents-grid {
    grid-template-columns: 1fr;
  }

  /* OH timeline — horizontal scroll */
  .lang-zh .oh-timeline-track {
    overflow-x: auto;
    padding-bottom: 8px;
  }

  /* Dark band */
  .lang-zh .dark-band {
    padding: 48px 16px;
    text-align: center;
  }
  .lang-zh .dark-band h2 {
    font-size: 1.3rem;
  }

  /* Footer */
  .lang-zh .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .lang-zh .footer-links {
    grid-template-columns: repeat(3, 1fr);
  }
  .lang-zh .footer-bottom {
    padding: 20px 16px;
  }
  .lang-zh .footer-bottom p {
    font-size: 0.7rem;
  }

  /* Contact inquiry band */
  .lang-zh .contact-inquiry-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  /* Pub grid */
  .lang-zh .pub-grid {
    grid-template-columns: 1fr;
  }

  /* Demo band */
  .lang-zh .oh-demo-inner {
    flex-direction: column;
    gap: 32px;
  }
}

/* =============================================
   TABLET OPTIMIZATIONS (769px – 1024px)
   ============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Hero */
  .lang-zh .hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
  }
  .lang-zh .hero-sub {
    font-size: 0.92rem;
  }

  /* Orbit grid — 2 cols on tablet */
  .lang-zh .orbit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Services grid — 2 cols on tablet */
  .lang-zh .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Team grid — 2 cols on tablet */
  .lang-zh .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* GPG logo row — 2×2 on tablet */
  .lang-zh .gpg-logo-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }

  /* Intro split — keep side-by-side */
  .lang-zh .intro-split {
    gap: 32px;
  }

  /* OH agents — 2 cols */
  .lang-zh .oh-agents-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Nav at tablet — condensed */
  .lang-zh .nav-links li a {
    font-size: 0.78rem;
    padding: 0 8px;
  }

  /* Page hero */
  .lang-zh .page-title {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
  }
}

/* =============================================
   SMALL MOBILE (max-width: 480px)
   ============================================= */
@media (max-width: 480px) {
  .lang-zh .hero-title {
    font-size: 1.55rem;
    line-height: 1.25;
  }
  .lang-zh .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .lang-zh .hero-actions a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Stat bar — 2 cols */
  .lang-zh .stat-bar-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Section inner */
  .lang-zh .section-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Orbit cards — reduce padding */
  .lang-zh .orbit-card {
    padding: 20px 16px;
  }

  /* Footer links — 1 col on very small */
  .lang-zh .footer-links {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* GPG logo row — 1×4 vertical on very small */
  .lang-zh .gpg-logo-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* OH timeline — compressed */
  .lang-zh .oh-timeline-step-label {
    font-size: 0.7rem;
  }

  /* Section title */
  .lang-zh .section-title {
    font-size: 1.4rem;
  }

  /* Page title */
  .lang-zh .page-title {
    font-size: 1.4rem;
  }
}

/* =============================================
   TENDER PAGE — Chinese UI overrides
   ============================================= */

/* Tender hero on zh pages */
.lang-zh .tender-hero {
  padding: 100px 0 48px;
}
.lang-zh .thi-stat-lbl {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.lang-zh .tuc-label {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.lang-zh .tuc-scout-btn {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.lang-zh .tender-filter-title {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.lang-zh .tender-filter-sub {
  font-size: 0.75rem;
  line-height: 1.6;
}
.lang-zh .tender-search-wrap input::placeholder {
  font-size: 0.82rem;
}
.lang-zh .tsb-label {
  font-size: 0.78rem;
}
.lang-zh .tsb-hint {
  font-size: 0.75rem;
}
.lang-zh .fia-title {
  font-size: clamp(1.3rem, 3vw, 2rem);
}
.lang-zh .fia-desc {
  font-size: 0.88rem;
  line-height: 1.85;
}
.lang-zh .fia-field-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.lang-zh .fia-privacy-note {
  font-size: 0.75rem;
  line-height: 1.7;
}
.lang-zh .method-intro {
  font-size: 0.88rem;
  line-height: 1.85;
}
.lang-zh .method-section p,
.lang-zh .method-section li {
  font-size: 0.85rem;
  line-height: 1.8;
}
.lang-zh .method-matrix-desc {
  font-size: 0.75rem;
  line-height: 1.65;
}

/* =============================================
   MOBILE — Tender page (max-width: 768px)
   ============================================= */
@media (max-width: 768px) {
  /* Tender hero stacks vertically */
  .lang-zh .tender-hero-inner {
    flex-direction: column;
    gap: 28px;
    padding: 0 16px;
  }
  .lang-zh .tender-hero-left,
  .lang-zh .tender-hero-right {
    width: 100%;
    max-width: 100%;
  }
  .lang-zh .thi-stats {
    flex-wrap: wrap;
    gap: 8px;
  }
  .lang-zh .thi-stat-div {
    display: none;
  }

  /* Tender controls: stack vertically */
  .lang-zh .tender-search-row {
    flex-direction: column;
    gap: 10px;
  }
  .lang-zh .tender-select {
    width: 100%;
  }
  .lang-zh .tender-search-wrap {
    width: 100%;
  }

  /* Sources grid → 1 col */
  .lang-zh .section-inner [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* FIA form grid → 1 col */
  .lang-zh .fia-form-grid {
    grid-template-columns: 1fr;
  }
  .lang-zh .fia-field-wide {
    grid-column: span 1;
  }
  .lang-zh .fia-url-row {
    flex-direction: column;
    gap: 10px;
  }
  .lang-zh .fia-analyse-btn {
    width: 100%;
    justify-content: center;
  }

  /* Tender hero smaller on mobile */
  .lang-zh .tender-hero {
    padding: 80px 0 32px;
  }

  /* Filter buttons wrap */
  .lang-zh .tender-filter-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .lang-zh .tender-filter-btns {
    gap: 6px;
  }

  /* FIA header stacks */
  .lang-zh .fia-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .lang-zh .fia-method-pill {
    align-self: flex-start;
  }

  /* Methodology modal full-width */
  .lang-zh .method-modal-inner {
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
  }
  .lang-zh .method-matrix-grid {
    grid-template-columns: 1fr;
  }

  /* Summary bar stacks */
  .lang-zh .tender-summary-bar {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* =============================================
   TABLET — Tender page (769px – 1024px)
   ============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .lang-zh .tender-hero-inner {
    gap: 32px;
  }
  .lang-zh .tender-search-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .lang-zh .tender-select {
    flex: 1 1 calc(50% - 10px);
    min-width: 140px;
  }
  /* Sources grid → 1 col on tablet too (3 is too cramped in Chinese) */
  .lang-zh .section-inner [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lang-zh .fia-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================
   NAV — lang switcher always visible at ≥769px
   ============================================= */
@media (min-width: 769px) {
  .lang-zh .nav-lang-switch {
    display: list-item;
  }
  /* English nav lang switch also always visible */
  .nav-lang-switch {
    display: list-item;
  }
}

/* =============================================
   ENGLISH NAV — add style-zh.css lang button
   (lang-btn-zh used in English layout too)
   ============================================= */
.nav-lang-switch {
  margin-left: 4px;
}

/* =============================================
   PROJECTS PAGE — filter bar mobile fix
   ============================================= */
@media (max-width: 600px) {
  .lang-zh #filterBar {
    gap: 6px;
  }
  .lang-zh .filter-btn {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
  }
}

/* =============================================
   INNOVATION — program-tags wrapping
   ============================================= */
.lang-zh .program-tags {
  flex-wrap: wrap;
  gap: 6px;
}
.lang-zh .program-tags span {
  font-size: 0.75rem;
  white-space: normal;
}

/* =============================================
   ABOUT — XOX description band image on mobile
   ============================================= */
@media (max-width: 768px) {
  .lang-zh .intro-split [style*="min-height:340px"] {
    min-height: 200px !important;
  }
}