/* ============================================================
   EduTourChina — www.edutourchina.com
   Academic indigo + teal + warm gold. Self-contained for Phase 1.
   Phase 2 appends references/css_base.css (RTL / Arabic webfont /
   .mt-disclaimer) on top of this file.
   ============================================================ */
:root {
  --primary: #3D2F8F;
  --primary-light: #5B4BC9;
  --primary-dark: #2A1F63;
  --accent: #0E8C96;
  --accent-light: #36B0B8;
  --gold: #C9A24B;
  --gold-light: #E7CF94;
  --ink: #1C2138;
  --muted: #5B6275;
  --bg: #FFFFFF;
  --bg-alt: #F4F5FB;
  --border: #E5E7F0;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(40, 35, 90, .08);
  --shadow-lg: 0 14px 44px rgba(40, 35, 90, .14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-light); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Nav (unique structure) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--primary); }
.nav-brand .logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px;
}
.nav-brand span.tour, .nav-brand span.china { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 15px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 2px solid transparent; cursor: pointer; transition: .2s; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #fff; }
.btn-accent:hover { color: #fff; transform: translateY(-1px); }
.btn-ghost { background: #fff; border-color: var(--primary); color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { color: #fff; background: var(--gold-light); }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(14, 140, 150, .18), transparent),
    radial-gradient(900px 500px at 10% 10%, rgba(61, 47, 143, .16), transparent),
    linear-gradient(180deg, #f7f6fd, #ffffff);
  padding: 72px 0 60px;
}
.hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.1; margin: 0 0 18px; letter-spacing: -.5px; }
.hero p.lead { font-size: 19px; color: var(--muted); max-width: 640px; margin: 0 0 28px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-visual {
  border-radius: 20px; padding: 28px; color: #fff;
  background: linear-gradient(150deg, var(--primary-dark), var(--accent));
  box-shadow: var(--shadow-lg); min-height: 280px;
  display: grid; gap: 14px; align-content: center;
}
/* The figure must never wrap: as a flex item it was being shrunk to ~100px and
   breaking "2,500–3,500" across three lines. nowrap + no-shrink hands the
   remaining width to the caption instead. */
.hero-visual .stat { display: flex; align-items: baseline; gap: 12px; }
.hero-visual .stat b { font-size: 27px; white-space: nowrap; flex: 0 0 auto; min-width: 150px; letter-spacing: -.4px; }
.hero-visual .stat span { opacity: .86; font-size: 13.5px; line-height: 1.45; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hero-badges .badge {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* ---------- Trust bar ---------- */
.trustbar { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.trustbar .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 16px 20px; }
.trustbar .item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.trustbar .item b { color: var(--primary); }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section.bg-white { background: #fff; }
.section.bg-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-head .eyebrow { color: var(--accent); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }
.section-head h2 { font-size: clamp(26px, 3.5vw, 36px); margin: 8px 0 12px; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }

/* ---------- Cards grid ----------
   Column count is driven by the cols argument. The previous auto-fill/minmax
   version silently produced four columns for every call in a 1120px container,
   so "2 column" cards rendered a third of their intended width and their titles
   wrapped to a different number of lines per row — which is what made rows of
   cards look misaligned. Flex is used instead of grid so that a partial last
   row centres rather than leaving orphan cards hard against the left edge. */
.cards-grid, .cards-grid-2, .cards-grid-3, .cards-grid-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}
.cards-grid > *, .cards-grid-2 > * { flex: 0 1 calc(50% - 12px); max-width: calc(50% - 12px); }
.cards-grid-3 > * { flex: 0 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
.cards-grid-4 > * { flex: 0 1 calc(25% - 18px); max-width: calc(25% - 18px); }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); transition: .22s; display: flex; flex-direction: column; gap: 10px;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.card .card-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, rgba(61,47,143,.12), rgba(14,140,150,.14)); }
.card h3 { margin: 4px 0 0; font-size: 19px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .card-link { margin-top: auto; font-weight: 700; color: var(--primary); }
.card.feature { background: linear-gradient(160deg, #fff, #f6f5fe); }

/* ---------- Stats row ----------
   Figures differ in length ("5" vs "CNY 26,000–40,000"). Without a reserved
   height the ones that wrap to two lines push their caption down, so a row of
   four boxes ends up with captions on two different baselines. */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.stat-box { text-align: center; padding: 26px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: center; }
.stat-box b { display: flex; align-items: center; justify-content: center; min-height: 2.1em; font-size: 34px; color: var(--primary); line-height: 1.1; }
.stat-box span { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- Steps / journey ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 26px 22px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 22px;
  width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
  display: grid; place-items: center; font-weight: 800; box-shadow: var(--shadow); }
.step h4 { margin: 14px 0 6px; font-size: 17px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Page banner (article/guide header) ---------- */
.page-banner { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; padding: 56px 0 44px; }
.page-banner .breadcrumb { font-size: 13px; opacity: .8; margin-bottom: 12px; }
.page-banner .breadcrumb a { color: #fff; opacity: .9; }
.page-banner h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; }
.page-banner p { max-width: 680px; opacity: .9; margin: 0; font-size: 17px; }

/* ---------- Article layout ---------- */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.article-main { min-width: 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.article-body { font-size: 16.5px; }
.article-body h2 { font-size: 24px; margin: 32px 0 12px; }
.article-body h3 { font-size: 19px; margin: 24px 0 8px; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
.article-body li { margin: 6px 0; }
.article-body blockquote { margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--bg-alt); border-radius: var(--radius-sm); color: var(--muted); }
.article-sidebar { position: sticky; top: 86px; display: grid; gap: 18px; }
.sidebar-cta { background: linear-gradient(160deg, var(--primary), var(--accent)); color: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.sidebar-cta h4 { margin: 0 0 8px; }
.sidebar-cta p { font-size: 14px; opacity: .92; margin: 0 0 14px; }
.sidebar-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.sidebar-card h4 { margin: 0 0 10px; font-size: 15px; }
.sidebar-card ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.data th, table.data td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
table.data th { background: var(--bg-alt); color: var(--primary); font-weight: 700; }
table.data tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: #fff; }
.faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 20px; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.faq-q .plus { color: var(--primary); font-size: 22px; transition: .2s; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a .faq-a-inner { padding: 0 20px 18px; color: var(--muted); }

/* ---------- Forms ---------- */
/* Two columns: as a single 520px column the form left 600px of the container
   empty on desktop, which read as a broken layout rather than a design choice. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid button { justify-self: start; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; }
.field input, .field select, .field textarea {
  padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 15px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary-light); border-color: var(--primary-light); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter-bar select, .filter-bar input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 14px; }

/* ---------- Contact cards ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.contact-card { text-align: center; padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); }
.contact-card .ic { font-size: 26px; }
.contact-card a { font-weight: 700; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border-radius: 20px; padding: 48px; text-align: center; margin: 0 auto; max-width: var(--maxw); box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.cta-band p { opacity: .92; max-width: 620px; margin: 0 auto 22px; font-size: 17px; }
.cta-band .btn-ghost { background: #fff; color: var(--primary); }

/* ---------- Footer ---------- */
.footer { background: var(--primary-dark); color: #d9d9f0; padding: 52px 0 26px; margin-top: 60px; }
.footer a { color: #cfc9f5; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.footer .brand { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.footer .brand span { color: var(--accent-light); }
.footer p { font-size: 14px; color: #b9b6e0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 32px; padding-top: 18px; font-size: 13px; color: #9b97cc; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* ---------- Footer legal links ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-legal a { color: #b9b5e0; text-decoration: none; }
.footer-legal a:hover { color: #fff; text-decoration: underline; }

/* ---------- Ad units (AdSense) ----------
   The reserved min-height keeps cumulative layout shift at zero while the ad
   loads, and the label is required so ads stay distinguishable from editorial
   content. Both are policy and Core Web Vitals items, not styling preferences. */
.ad-unit { margin: 30px auto; max-width: 970px; text-align: center; overflow: hidden; }
.ad-unit .ad-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #98a2ad; margin-bottom: 6px; }
.ad-unit ins { display: block; }
.ad-unit ins:not([data-ad-status]) { background: #f4f6f8; border-radius: var(--radius-sm); }

/* ---------- Cookie consent ---------- */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--primary-dark); color: #e8e6f5;
  padding: 16px 20px; box-shadow: 0 -6px 24px rgba(15,12,50,.22); display: none; }
.cookie-bar.show { display: block; }
.cookie-bar-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cookie-bar p { margin: 0; font-size: 14px; line-height: 1.55; flex: 1 1 460px; color: #d6d3ea; }
.cookie-bar a { color: var(--gold-light); text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-bar button { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; }
.cookie-accept { background: var(--gold); color: #221c00; }
.cookie-accept:hover { filter: brightness(1.06); }
.cookie-reject { background: transparent; color: #e8e6f5; border-color: rgba(255,255,255,.38); }
.cookie-reject:hover { background: rgba(255,255,255,.1); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: .3s; z-index: 200; font-size: 15px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { background: #1e7d4f; }
.toast.err { background: #b23b3b; }

/* ---------- Machine-translation disclaimer (also appended by css_base) ---------- */
.mt-disclaimer { background: #FFF8E1; color: #7a5b00; font-size: 13px; padding: 8px 16px; text-align: center; line-height: 1.5; }

/* ---------- Language switcher (injected by i18n_build) ---------- */
.lang-switch { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 6px 16px; background: var(--primary-dark, #2A1F63); font-size: 13px; line-height: 1.4; }
.lang-switch a { color: #fff; opacity: .85; text-decoration: none; font-weight: 500; white-space: nowrap; }
.lang-switch a:hover { opacity: 1; text-decoration: underline; }
.lang-switch a.active { opacity: 1; font-weight: 700; }
.lang-switch a.active::after { content: " \2022"; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border); padding: 8px 20px 16px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .nav-links .nav-cta { margin: 10px 0 0; }
  .nav-toggle { display: block; }
  .cards-grid-4 > * { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cards-grid-3 > * { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 34px 22px; }
  .cards-grid > *, .cards-grid-2 > *, .cards-grid-3 > *, .cards-grid-4 > * {
    flex-basis: 100%; max-width: 100%;
  }
  /* Stack the figure above its caption: side by side, a 150px figure column
     leaves the caption too narrow to read on a 390px screen. */
  .hero-visual .stat { flex-direction: column; align-items: flex-start; gap: 1px; }
  .hero-visual .stat b { min-width: 0; font-size: 25px; }
  .form-grid { grid-template-columns: 1fr; }
  .cookie-bar-inner { flex-direction: column; align-items: stretch; }
  .cookie-bar-actions button { flex: 1; }
}