/* ================================================================
   新韦旅游® 内页横幅样式  xinwei-banner.css
   版本：V1（2026-10-04）
   配套模板：/template/default/html/comm/top.html
   栏目配色在页面里通过 <style> 覆盖 --bn-* 变量，见下方"栏目配色覆盖说明"
   ================================================================ */

:root{
  --bn-blaze:#E87A1F;   /* 炉橙 主色 */
  --bn-roast:#3B2417;   /* 深焙棕 标题 */
  --bn-taupe:#75604F;   /* 暖灰棕 辅助文字 */
  --bn-teal:#0FA6A0;
  --bn-violet:#7A5AE8;
  --bn-lake:#2D7FF0;
  --bn-honey:#FFC53D;
  --bn-punch:#EF3E5C;
  /* 栏目变量默认值（橙系） */
  --bn-bg:linear-gradient(140deg,#FFF9F3 0%,#FFF3E6 58%,#FFEFE2 100%);
  --bn-stripe:linear-gradient(90deg,#E87A1F,#FFC53D);
  --bn-en:#E87A1F;
}

/* ============ 横幅主体 ============ */
.xw-banner{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  min-height:236px;
  display:flex;
  align-items:center;
  margin:20px auto 18px;
  background:var(--bn-bg);
  box-shadow:0 14px 34px rgba(59,36,23,.10);
}
/* 顶部多彩细条：每个栏目的"彩色签名" */
.xw-banner::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:7px;z-index:5;
  background:var(--bn-stripe);
}
/* 右下角柔光 */
.xw-banner::after{
  content:"";
  position:absolute;right:-120px;bottom:-140px;width:340px;height:340px;
  border-radius:50%;background:var(--bn-glow,rgba(232,122,31,.07));
  z-index:0;pointer-events:none;
}
.xw-banner .xb-wrap{
  position:relative;z-index:3;width:100%;
  padding:44px 40px 40px;
}
.xb-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:800;letter-spacing:.14em;
  color:var(--bn-blaze-deep,#D96A0E);margin-bottom:10px;
}
.xb-kicker::before{
  content:"";width:26px;border-top:3px dotted var(--bn-blaze);
}
.xb-title{
  margin:0;
  font-size:40px;
  font-weight:900;
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--bn-roast);
}
.xb-en{
  margin:8px 0 0;
  font-family:Bahnschrift,"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-size:13.5px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bn-en);
}
.xb-sub{
  margin:10px 0 0;
  font-size:15px;line-height:1.7;color:var(--bn-taupe);
  max-width:520px;
}
/* 右下角面包屑（原 position.html 的样式被这里统一，避免两处重复显示） */
.xb-crumb{
  position:absolute;right:22px;bottom:16px;z-index:6;
  background:rgba(59,36,23,.86);
  border-radius:999px;padding:6px 16px;
  font-size:12.5px;font-weight:600;color:#fff;
  max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.xb-crumb a{color:rgba(255,255,255,.92);text-decoration:none}
.xb-crumb a:hover{color:var(--bn-honey)}
.xb-crumb .sep{opacity:.7;margin:0 7px}
.xb-crumb .cur{color:var(--bn-honey);font-weight:800}

/* ============ 插画层 ============ */
.xb-art{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;
}
.xb-art svg{position:absolute;inset:0;width:100%;height:100%}

/* ============ 尊重"减少动态效果"偏好 ============ */
@media (prefers-reduced-motion:reduce){
  .xw-banner,.xw-banner *{animation:none !important;transition:none !important}
}

/* ============ 响应式 ============ */
@media (max-width:991px){
  .xw-banner{min-height:200px;border-radius:16px}
  .xw-banner .xb-wrap{padding:32px 26px 30px}
  .xb-title{font-size:30px}
  .xb-sub{margin-top:8px;font-size:14.5px}
  .xb-art svg{opacity:.75}
}
@media (max-width:575px){
  .xw-banner{min-height:176px;margin:14px auto 14px}
  .xw-banner .xb-wrap{padding:26px 20px 30px}
  .xb-title{font-size:25px}
  .xb-en{font-size:11px;letter-spacing:.2em;margin-top:5px}
  .xb-sub{display:none}          /* 小屏只留标题，避免字挤在插画上 */
  .xb-crumb{right:12px;bottom:10px;font-size:11px;padding:5px 12px;max-width:78%}
  .xb-art svg{opacity:.55}
}