/*
 Theme Name: JetsMeta Child
 Theme URI: https://jetsmeta.com
 Description: Unified code rebuild — JetsMeta B2B industrial theme. Stage1 sample (design system + sample homepage).
 Template: generatepress
 Version: 1.0.0
 Author: Buddy
 License: GPL-2.0
 Text Domain: jetsmeta-child
*/

/* =========================================================
   1. DESIGN TOKENS (统一设计令牌)
   ========================================================= */
:root {
  /* Brand */
  --jm-primary: #0B4F8A;
  --jm-primary-dark: #08335C;
  --jm-primary-darker: #062742;
  --jm-accent: #F26522;        /* construction orange — CTA */
  --jm-accent-dark: #D9520F;

  /* Neutrals */
  --jm-ink: #15212E;           /* headings */
  --jm-body: #3D4856;          /* body text */
  --jm-muted: #6B7785;
  --jm-border: #E2E8F0;
  --jm-bg: #FFFFFF;
  --jm-bg-soft: #F4F8FC;
  --jm-bg-dark: #0B2238;       /* footer / dark sections */

  /* Semantic */
  --jm-success: #1F9D55;
  --jm-warning: #E8A33D;
  --jm-danger: #D64545;

  /* Typography */
  --jm-font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --jm-font-head: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --jm-fs-xs: 0.75rem;
  --jm-fs-sm: 0.875rem;
  --jm-fs-base: 1rem;
  --jm-fs-md: 1.125rem;
  --jm-fs-lg: 1.375rem;
  --jm-fs-xl: 1.75rem;
  --jm-fs-2xl: 2.25rem;
  --jm-fs-3xl: 3rem;

  /* Spacing (8px base) */
  --jm-sp-1: 4px;
  --jm-sp-2: 8px;
  --jm-sp-3: 12px;
  --jm-sp-4: 16px;
  --jm-sp-5: 24px;
  --jm-sp-6: 32px;
  --jm-sp-7: 48px;
  --jm-sp-8: 64px;
  --jm-sp-9: 96px;

  /* Radius */
  --jm-radius-sm: 6px;
  --jm-radius: 10px;
  --jm-radius-lg: 16px;
  --jm-radius-pill: 999px;

  /* Shadow */
  --jm-shadow-sm: 0 1px 2px rgba(15,40,70,.06), 0 1px 3px rgba(15,40,70,.08);
  --jm-shadow-md: 0 4px 12px rgba(15,40,70,.10);
  --jm-shadow-lg: 0 12px 32px rgba(15,40,70,.16);

  /* Layout */
  --jm-container: 1200px;
  --jm-container-narrow: 880px;
  --jm-header-h: 68px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--jm-font-sans);
  font-size: var(--jm-fs-base);
  line-height: 1.65;
  color: var(--jm-body);
  background: var(--jm-bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--jm-font-head);
  color: var(--jm-ink);
  line-height: 1.2;
  margin: 0 0 var(--jm-sp-3);
  font-weight: 700;
}
h1 { font-size: var(--jm-fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--jm-fs-2xl); letter-spacing: -.01em; }
h3 { font-size: var(--jm-fs-xl); }
p { margin: 0 0 var(--jm-sp-4); }
a { color: var(--jm-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--jm-accent); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 var(--jm-sp-4); padding-left: 1.2em; }

.jm-container { width: 100%; max-width: var(--jm-container); margin: 0 auto; padding: 0 var(--jm-sp-5); }
.jm-container--narrow { max-width: var(--jm-container-narrow); }
.jm-section { padding: var(--jm-sp-8) 0; }
.jm-section--soft { background: var(--jm-bg-soft); }
.jm-section--dark { background: var(--jm-bg-dark); color: #CFE0F0; }

/* =========================================================
   3. BUTTONS
   ========================================================= */
.jm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--jm-sp-2);
  font-family: var(--jm-font-head); font-weight: 600; font-size: var(--jm-fs-sm);
  padding: 12px 22px; border-radius: var(--jm-radius-pill); border: 2px solid transparent;
  cursor: pointer; transition: all .15s ease; text-decoration: none; line-height: 1;
}
.jm-btn--primary { background: var(--jm-primary); color: #fff; }
.jm-btn--primary:hover { background: var(--jm-primary-dark); color: #fff; }
.jm-btn--accent { background: var(--jm-accent); color: #fff; }
.jm-btn--accent:hover { background: var(--jm-accent-dark); color: #fff; }
.jm-btn--ghost { background: transparent; color: var(--jm-primary); border-color: var(--jm-primary); }
.jm-btn--ghost:hover { background: var(--jm-primary); color: #fff; }
.jm-btn--light { background: #fff; color: var(--jm-primary); }
.jm-btn--light:hover { background: var(--jm-bg-soft); }

/* =========================================================
   4. HEADER
   ========================================================= */
.jm-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--jm-border);
}
.jm-header__inner { display: flex; align-items: center; gap: var(--jm-sp-5); height: var(--jm-header-h); }
.jm-logo { display: flex; align-items: baseline; gap: 8px; font-family: var(--jm-font-head); font-weight: 800; }
.jm-logo__name { font-size: 1.4rem; color: var(--jm-primary); letter-spacing: -.02em; }
.jm-logo__tag { font-size: .7rem; color: var(--jm-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.jm-nav { display: flex; gap: var(--jm-sp-5); margin-left: auto; }
.jm-nav a { color: var(--jm-body); font-weight: 500; font-size: var(--jm-fs-sm); }
.jm-nav a:hover { color: var(--jm-primary); }
.jm-header__actions { display: flex; align-items: center; gap: var(--jm-sp-3); }
.jm-lang { display: flex; gap: 4px; font-size: var(--jm-fs-xs); font-weight: 600; }
.jm-lang a { color: var(--jm-muted); padding: 2px 6px; border-radius: var(--jm-radius-sm); }
.jm-lang a.is-active, .jm-lang a:hover { color: var(--jm-primary); background: var(--jm-bg-soft); }

/* =========================================================
   5. HERO
   ========================================================= */
.jm-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--jm-primary-darker) 0%, var(--jm-primary-dark) 55%, var(--jm-primary) 100%);
  color: #EAF2FB; padding: var(--jm-sp-9) 0;
}
.jm-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(242,101,34,.25), transparent 60%),
    radial-gradient(700px 500px at 10% 120%, rgba(11,79,138,.5), transparent 60%);
  pointer-events: none;
}
.jm-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.jm-hero__eyebrow {
  display: inline-block; font-size: var(--jm-fs-sm); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--jm-accent); margin-bottom: var(--jm-sp-3);
}
.jm-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--jm-sp-4); }
.jm-hero p { font-size: var(--jm-fs-md); color: #C9DCF0; max-width: 620px; }
.jm-hero__cta { display: flex; gap: var(--jm-sp-3); margin-top: var(--jm-sp-5); flex-wrap: wrap; }
.jm-hero__stats { display: flex; gap: var(--jm-sp-7); margin-top: var(--jm-sp-7); flex-wrap: wrap; }
.jm-stat__num { font-size: var(--jm-fs-2xl); font-weight: 800; color: #fff; line-height: 1; }
.jm-stat__label { font-size: var(--jm-fs-sm); color: #9FBBDD; margin-top: 4px; }

/* =========================================================
   6. FEATURE BAR
   ========================================================= */
.jm-featurebar {
  background: var(--jm-bg); border-bottom: 1px solid var(--jm-border);
}
.jm-featurebar__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--jm-sp-5); padding: var(--jm-sp-6) 0; }
.jm-feature { display: flex; align-items: center; gap: var(--jm-sp-3); }
.jm-feature__icon {
  flex: 0 0 44px; height: 44px; width: 44px; border-radius: var(--jm-radius); 
  display: grid; place-items: center; background: var(--jm-bg-soft); color: var(--jm-primary);
}
.jm-feature__icon svg { width: 22px; height: 22px; }
.jm-feature__title { font-weight: 700; color: var(--jm-ink); font-size: var(--jm-fs-sm); }
.jm-feature__desc { font-size: var(--jm-fs-xs); color: var(--jm-muted); }

/* =========================================================
   7. BLOG / CARD GRID
   ========================================================= */
.jm-section__head { max-width: 640px; margin-bottom: var(--jm-sp-6); }
.jm-section__head h2 { margin-bottom: var(--jm-sp-2); }
.jm-section__head p { color: var(--jm-muted); }
.jm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jm-sp-5); }
.jm-card {
  background: var(--jm-bg); border: 1px solid var(--jm-border); border-radius: var(--jm-radius-lg);
  overflow: hidden; box-shadow: var(--jm-shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column;
}
.jm-card:hover { transform: translateY(-4px); box-shadow: var(--jm-shadow-lg); }
.jm-card__media { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--jm-primary) 0%, var(--jm-primary-dark) 100%); position: relative; }
.jm-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 80% 20%, rgba(242,101,34,.35), transparent 60%);
}
.jm-card__tag {
  position: absolute; left: var(--jm-sp-3); top: var(--jm-sp-3); z-index: 1;
  background: rgba(255,255,255,.92); color: var(--jm-primary); font-size: var(--jm-fs-xs);
  font-weight: 700; padding: 4px 10px; border-radius: var(--jm-radius-pill);
}
.jm-card__body { padding: var(--jm-sp-4) var(--jm-sp-4) var(--jm-sp-5); display: flex; flex-direction: column; flex: 1; }
.jm-card__title { font-size: var(--jm-fs-md); margin-bottom: var(--jm-sp-2); }
.jm-card__excerpt { font-size: var(--jm-fs-sm); color: var(--jm-muted); flex: 1; }
.jm-card__more { margin-top: var(--jm-sp-3); font-weight: 600; font-size: var(--jm-fs-sm); color: var(--jm-primary); }

/* =========================================================
   8. FOOTER
   ========================================================= */
.jm-footer { background: var(--jm-bg-dark); color: #B9CFE4; padding: var(--jm-sp-8) 0 var(--jm-sp-6); }
.jm-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--jm-sp-6); }
.jm-footer h4 { color: #fff; font-size: var(--jm-fs-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--jm-sp-3); }
.jm-footer a { color: #B9CFE4; display: block; padding: 4px 0; font-size: var(--jm-fs-sm); }
.jm-footer a:hover { color: #fff; }
.jm-footer__brand .jm-logo__name { color: #fff; }
.jm-footer__bottom {
  margin-top: var(--jm-sp-6); padding-top: var(--jm-sp-4); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: var(--jm-sp-4); flex-wrap: wrap;
  font-size: var(--jm-fs-xs); color: #8AA6C4;
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .jm-featurebar__inner { grid-template-columns: repeat(2, 1fr); }
  .jm-grid { grid-template-columns: repeat(2, 1fr); }
  .jm-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .jm-nav { display: none; }
  .jm-hero { padding: var(--jm-sp-8) 0; }
  .jm-hero__stats { gap: var(--jm-sp-5); }
}
@media (max-width: 560px) {
  .jm-featurebar__inner, .jm-grid, .jm-footer__grid { grid-template-columns: 1fr; }
  :root { --jm-sp-8: 40px; --jm-sp-9: 56px; }
}

/* =========================================================
   10. CONTENT LAYOUTS (single / page / sidebar / comments)
   ========================================================= */
.jm-main { padding: var(--jm-sp-8) 0; }
.jm-section__cta { margin-top: var(--jm-sp-6); }

.jm-breadcrumb { font-size: var(--jm-fs-sm); color: var(--jm-muted); margin-bottom: var(--jm-sp-4); }
.jm-breadcrumb a { color: var(--jm-muted); }
.jm-breadcrumb a:hover { color: var(--jm-primary); }
.jm-breadcrumb__sep { margin: 0 6px; }

.jm-post__head { max-width: 820px; }
.jm-post__title { font-size: var(--jm-fs-2xl); margin-bottom: var(--jm-sp-3); }
.jm-post__meta { font-size: var(--jm-fs-sm); color: var(--jm-muted); display: flex; gap: var(--jm-sp-2); align-items: center; }
.jm-post__meta-sep { opacity: .5; }
.jm-post__layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--jm-sp-7); margin-top: var(--jm-sp-6); align-items: start; }
.jm-post__content { min-width: 0; }
.jm-post__content h2, .jm-post__content h3 { margin-top: var(--jm-sp-6); }
.jm-post__content img { border-radius: var(--jm-radius); margin: var(--jm-sp-4) 0; }
.jm-post__content blockquote { border-left: 3px solid var(--jm-accent); margin: var(--jm-sp-4) 0; padding: var(--jm-sp-2) var(--jm-sp-4); background: var(--jm-bg-soft); color: var(--jm-ink); }
.jm-post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jm-sp-4); margin-top: var(--jm-sp-7); padding-top: var(--jm-sp-5); border-top: 1px solid var(--jm-border); }
.jm-post__nav-link { display: flex; flex-direction: column; gap: 4px; padding: var(--jm-sp-3) var(--jm-sp-4); border: 1px solid var(--jm-border); border-radius: var(--jm-radius); color: var(--jm-ink); }
.jm-post__nav-link:hover { border-color: var(--jm-primary); color: var(--jm-primary); }
.jm-post__nav-next { text-align: right; }
.jm-post__nav-dir { font-size: var(--jm-fs-xs); color: var(--jm-muted); }
.jm-post__nav-title { font-weight: 600; }

.jm-page__head { margin-bottom: var(--jm-sp-5); }
.jm-page__title { font-size: var(--jm-fs-2xl); }
.jm-page__content { font-size: var(--jm-fs-md); }

.jm-contact__layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--jm-sp-7); margin-top: var(--jm-sp-5); align-items: start; }
.jm-contact__info { background: var(--jm-bg-soft); border: 1px solid var(--jm-border); border-radius: var(--jm-radius-lg); padding: var(--jm-sp-5); }
.jm-contact__info h4 { margin-bottom: var(--jm-sp-3); }
.jm-contact__list { list-style: none; padding: 0; margin: 0 0 var(--jm-sp-4); }
.jm-contact__list li { padding: var(--jm-sp-2) 0; border-bottom: 1px solid var(--jm-border); font-size: var(--jm-fs-sm); }
.jm-contact__list span { display: block; font-size: var(--jm-fs-xs); color: var(--jm-muted); text-transform: uppercase; letter-spacing: .05em; }
.jm-contact__list a { color: var(--jm-primary); font-weight: 600; }

.jm-sidebar { display: flex; flex-direction: column; gap: var(--jm-sp-4); position: sticky; top: calc(var(--jm-header-h) + var(--jm-sp-4)); }
.jm-widget { background: var(--jm-bg); border: 1px solid var(--jm-border); border-radius: var(--jm-radius-lg); padding: var(--jm-sp-4); box-shadow: var(--jm-shadow-sm); }
.jm-widget__title { font-size: var(--jm-fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--jm-primary); margin-bottom: var(--jm-sp-3); }
.jm-cat-list, .jm-pop-list { list-style: none; padding: 0; margin: 0; }
.jm-cat-list li, .jm-pop-list li { padding: 6px 0; border-bottom: 1px solid var(--jm-border); }
.jm-cat-list li:last-child, .jm-pop-list li:last-child { border-bottom: 0; }
.jm-cat-list a, .jm-pop-list a { color: var(--jm-body); font-size: var(--jm-fs-sm); }
.jm-cat-list a:hover, .jm-pop-list a:hover { color: var(--jm-primary); }
.jm-widget--cta { background: var(--jm-primary); border-color: var(--jm-primary); color: #fff; }
.jm-widget--cta h4 { color: #fff; }
.jm-widget--cta p { color: #CFE0F0; font-size: var(--jm-fs-sm); }
.jm-widget--cta .jm-btn { width: 100%; }

.jm-pagination { margin-top: var(--jm-sp-6); }
.jm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; margin-right: 6px; border: 1px solid var(--jm-border); border-radius: var(--jm-radius); font-size: var(--jm-fs-sm); color: var(--jm-body); }
.jm-pagination .page-numbers.current { background: var(--jm-primary); color: #fff; border-color: var(--jm-primary); }
.jm-pagination .page-numbers:hover:not(.current) { border-color: var(--jm-primary); color: var(--jm-primary); }
.jm-pagination .prev, .jm-pagination .next { font-weight: 700; }

.jm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jm-feature-card { background: var(--jm-bg); border: 1px solid var(--jm-border); border-radius: var(--jm-radius-lg); padding: var(--jm-sp-5); box-shadow: var(--jm-shadow-sm); }
.jm-feature-card h3 { color: var(--jm-primary); margin-bottom: var(--jm-sp-2); }
.jm-feature-card p { color: var(--jm-muted); font-size: var(--jm-fs-sm); margin: 0; }

.jm-empty { color: var(--jm-muted); }
.jm-404 { text-align: center; padding: var(--jm-sp-8) 0; }
.jm-404 h1 { font-size: var(--jm-fs-3xl); color: var(--jm-primary); }

.jm-comments { margin-top: var(--jm-sp-7); padding-top: var(--jm-sp-5); border-top: 1px solid var(--jm-border); }
.jm-comments__title { font-size: var(--jm-fs-lg); margin-bottom: var(--jm-sp-4); }
.jm-comment-list { list-style: none; padding: 0; margin: 0 0 var(--jm-sp-5); }
.jm-comment-list li { padding: var(--jm-sp-3) 0; border-bottom: 1px solid var(--jm-border); }
.jm-comment-list .children { margin-left: var(--jm-sp-5); }
.jm-comments .comment-form-comment label { display: block; font-size: var(--jm-fs-sm); color: var(--jm-muted); margin-bottom: 4px; }
.jm-comments textarea, .jm-comments input[type=text], .jm-comments input[type=email], .jm-comments input[type=url] { width: 100%; padding: 10px 12px; border: 1px solid var(--jm-border); border-radius: var(--jm-radius); font-family: inherit; font-size: var(--jm-fs-sm); }

/* =========================================================
   11. RESPONSIVE ADDITIONS
   ========================================================= */
@media (max-width: 768px) {
  .jm-post__layout, .jm-contact__layout { grid-template-columns: 1fr; }
  .jm-sidebar { position: static; }
  .jm-grid--2 { grid-template-columns: 1fr; }
  .jm-post__nav { grid-template-columns: 1fr; }
}