/* ══════════════════════════════════════════════════════════════════
   WaymarkChina Guide Report Styles — v1.0
   Shared by all Guides & Resources reports
   Depends on shared.css being loaded first (provides CSS vars)
   ══════════════════════════════════════════════════════════════════ */

/* ─── Guide Hero (light, matching Industry Insights format) ─── */
.g-hero{
  padding:88px 0 40px;position:relative;overflow:hidden;
  background:transparent;color:var(--text);text-align:left;
}
.g-hero .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.g-hero h1{
  font-size:clamp(24px,4.5vw,36px);font-weight:800;letter-spacing:-.5px;
  line-height:1.12;color:var(--brand);margin-bottom:16px;
}
.g-hero .g-sub{
  font-size:17px;color:var(--text2);
  line-height:1.55;margin:0 0 6px;
}
.g-hero .g-meta{font-size:12px;color:var(--text3);margin-top:16px}

/* ─── Back link (inside hero) ─── */
.rpt-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--text3);margin-bottom:24px;
  text-decoration:none;transition:color .15s;
}
.rpt-back:hover{color:var(--text);text-decoration:none}

/* ─── Content Area ─── */
.g-content{max-width:960px;margin:0 auto;padding:40px 24px 80px}

.g-content h2{
  font-size:clamp(22px,3vw,28px);font-weight:800;letter-spacing:-.5px;
  color:var(--brand);margin:48px 0 16px;padding-bottom:8px;
  border-bottom:2px solid var(--accent);
}
.g-content h2:first-of-type{margin-top:0}
.g-content h3{
  font-size:18px;font-weight:700;color:var(--text);margin:32px 0 12px;
}
.g-content h4{
  font-size:15px;font-weight:600;color:var(--text);margin:24px 0 10px;
  border-left:3px solid var(--accent);padding-left:12px;
}
.g-content p{margin-bottom:14px;color:var(--text2);font-size:15px;line-height:1.7}
.g-content ul,.g-content ol{margin:8px 0 16px 22px}
.g-content li{margin-bottom:6px;color:var(--text2);font-size:15px;line-height:1.65}

/* ─── Callout ─── */
.g-callout{
  border-radius:var(--radius);padding:16px 20px;margin:18px 0;
  font-size:14px;line-height:1.6;border-left:4px solid;
  border:1px solid;border-left-width:4px;
}
.g-callout.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af;border-left-color:#2563eb}
.g-callout.warn{background:var(--gold-bg);border-color:#fde68a;color:#92400e;border-left-color:var(--gold)}
.g-callout.danger{background:var(--accent-bg);border-color:#fecaca;color:#991b1b;border-left-color:var(--accent)}
.g-callout.success{background:var(--green-bg);border-color:#bbf7d0;color:#065f46;border-left-color:var(--green)}
.g-callout.purple{background:#f5f3ff;border-color:#c4b5fd;color:#4c1d95;border-left-color:#7c3aed}
.g-callout strong{display:block;margin-bottom:2px;color:inherit}

/* ─── Table ─── */
.g-table-wrap{overflow-x:auto;margin:16px 0 24px;border:1px solid var(--border);border-radius:var(--radius)}
.g-table{width:100%;border-collapse:collapse;font-size:14px}
.g-table thead th{
  background:var(--brand);color:#fff;padding:12px 14px;text-align:left;
  font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;
}
.g-table thead th:first-child{border-radius:7px 0 0 0}
.g-table thead th:last-child{border-radius:0 7px 0 0}
.g-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2)}
.g-table tbody tr:nth-child(even) td{background:var(--surface-dim)}
.g-table tbody tr:hover td{background:var(--accent-bg)}
.g-table tbody tr:last-child td:first-child{border-radius:0 0 0 7px}
.g-table tbody tr:last-child td:last-child{border-radius:0 0 7px 0}
.g-table tbody tr:last-child td{border-bottom:none}
.g-table .check{color:var(--green);font-weight:600}
.g-table .cross{color:var(--accent);font-weight:600}
.g-table .warn{color:var(--gold);font-weight:600}

/* ─── KPI Card Row ─── */
.g-kpi-row{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}
.g-kpi-card{
  flex:1 1 180px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 16px;text-align:center;
}
.g-kpi-card .num{
  font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--brand);
  letter-spacing:-.5px;
}
.g-kpi-card .lbl{font-size:12px;color:var(--text3);margin-top:4px;font-weight:500}

/* ─── Stage / Phase Card ─── */
.g-stage-row{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0}
.g-stage-card{
  flex:1 1 200px;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;background:var(--surface);
}
.g-stage-card .g-stage-label{
  font-size:11px;text-transform:uppercase;letter-spacing:1px;
  color:var(--accent);font-weight:700;
}
.g-stage-card .g-stage-title{
  font-size:16px;font-weight:700;color:var(--text);margin:4px 0 8px;
}
.g-stage-card p{color:var(--text2);font-size:14px;margin-bottom:0}

/* ─── Flow Steps ─── */
.g-flow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.g-flow .g-step{
  flex:1 0 180px;padding:14px 16px;border-radius:var(--radius);
  font-size:13px;text-align:center;border:1px solid var(--border);
  background:var(--surface);
}
.g-flow .g-step .g-step-label{font-weight:700;font-size:15px;color:var(--text)}
.g-flow .g-step .g-step-desc{color:var(--text2);font-size:12px;margin-top:4px}

/* ─── Checklist ─── */
.g-checklist{list-style:none;margin-left:0!important}
.g-checklist li{padding:5px 0 5px 26px;position:relative;color:var(--text2)}
.g-checklist li::before{position:absolute;left:0;font-size:16px;font-weight:700}
.g-checklist .yes::before{content:"\2713";color:var(--green)}
.g-checklist .no::before{content:"\2717";color:var(--accent)}
.g-checklist .warn::before{content:"\26A0";color:var(--gold)}

/* ─── CTA Section ─── */
.g-cta{
  text-align:center;padding:60px 24px;
  background:var(--surface-dim);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.g-cta .wrap{max-width:1120px;margin:0 auto}
.g-cta h2{
  font-size:clamp(20px,2.5vw,26px);font-weight:800;color:var(--brand);
  margin-bottom:10px;border:none;display:block;padding:0;
}
.g-cta p{
  font-size:15px;color:var(--text2);max-width:600px;
  margin:0 auto 24px;line-height:1.6;
}

/* ─── Report CTA Card (Industry Insights format) ─── */
.rpt-cta-card{
  padding:40px 24px;text-align:center;
}
.rpt-cta-card .rpt-cta-inner{
  max-width:1120px;margin:0 auto;
  padding:40px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
}
.rpt-cta-card .rpt-cta-inner p{
  font-size:14px;color:var(--text2);line-height:1.6;
  margin:0 auto 20px;max-width:480px;
}

/* ─── Sources Section ─── */
.rpt-sources{border-top:1px solid var(--border);padding:40px 0}
.rpt-sources .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.rpt-sources h2{font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px;border:none;padding:0}
.rpt-sources p{font-size:13px;color:var(--text3);margin-bottom:6px;line-height:1.5}

/* ─── Expert View (Industry Insights format) ─── */
.rpt-expert{
  margin:28px 0;padding:20px 24px;border-left:3px solid var(--accent);
  background:var(--accent-bg);border-radius:0 var(--radius) var(--radius) 0;
  font-size:14px;color:var(--text2);line-height:1.7;
}
.rpt-expert .re-label{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--accent);margin-bottom:8px;display:block;
}

/* ─── Phase Badge ─── */
.g-phase-badge{
  display:inline-block;background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:4px 14px;border-radius:100px;margin-bottom:16px;
}
.g-phase-badge.green{background:var(--green)}
.g-phase-badge.blue{background:#2563eb}
.g-phase-badge.red{background:var(--accent)}
.g-phase-badge.purple{background:#7c3aed}

/* ─── Route Box ─── */
.g-route-box{border-radius:var(--radius);padding:18px 22px;margin:16px 0 20px;border:1px solid var(--border)}
.g-route-box.blue{background:#eff6ff;border-left:4px solid #2563eb;border-color:#93c5fd}
.g-route-box.purple{background:#f5f3ff;border-left:4px solid #7c3aed;border-color:#c4b5fd}
.g-route-box.amber{background:var(--gold-bg);border-left:4px solid var(--gold);border-color:#fcd34d}
.g-route-box.green{background:var(--green-bg);border-left:4px solid var(--green);border-color:#6ee7b7}
.g-route-box .badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.3px}
.g-route-box .badge.blue{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}

/* ─── Responsive ─── */
@media(max-width:768px){
  .g-hero{padding:48px 0 36px}
  .g-hero h1{font-size:26px}
  .g-hero .g-sub{font-size:15px}
  .g-content{padding:24px 16px 60px}
  .g-kpi-card{flex:1 1 140px;padding:14px 10px}
  .g-table thead th,.g-table tbody td{padding:8px 12px}
  .g-cta{padding:40px 16px}
  .rpt-cta-card{padding:40px 16px}
  .rpt-cta-card .rpt-cta-inner{padding:24px 20px}
  .rpt-sources .wrap{padding:0 16px}
  .g-flow .g-step{flex:1 0 100%}
}