/* ============================================================
   洛邑古城官网 · 前端优化覆盖层  optimize.css
   说明：独立覆盖层，不改动业务 bundle。用于：
     1) 响应式布局修复（破除 952px 固定宽 + overflow 裁切）
     2) 移动端适配（断点 992 / 768 / 576）
     3) 交互动画（KenBurns、卡片悬浮、滚动渐入、返回顶部）
   回滚：删除本文件 + js/optimize.js，并把 index.html 还原即可。
   ============================================================ */

/* ---------- 1. 全局基础 ---------- */
.home, #app { box-sizing: border-box; }
.home *, .home *::before, .home *::after { box-sizing: border-box; }

/* 图片一律不超出容器、保持比例 */
.home img { max-width: 100%; height: auto; }

/* 平滑滚动（仅非降级用户） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- 2. 响应式 / 移动端修复 ---------- */
/* 992 以下：放开固定 952px 布局，让 Bootstrap 弹性布局真正生效 */
@media (max-width: 991.98px) {
  html, body, #app, .home { width: 100% !important; max-width: 100% !important; }
  body { overflow-x: hidden !important; }
  .home .w-100,
  .home .carousel,
  .home .carousel-inner,
  .home .carousel-item,
  .home [class*="col-"],
  .home .col1-md, .home .col2-md, .home .col3-md,
  .home .leftView, .home .left-rect, .home .rect,
  .home .content, .home .title-view, .home .titleView,
  .home .background-view, .home .bg, .home .nav-bg {
    max-width: 100% !important;
  }
  .home .col1-md, .home .col2-md, .home .col3-md { width: 100% !important; }
}

/* 768 以下：手机端细节 */
@media (max-width: 767.98px) {
  /* 各区块上下留白收窄，内容更紧凑 */
  .home .pt-lg-5, .home .pb-lg-5, .home .py-lg-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .home .mt-5 { margin-top: 1.75rem !important; }

  /* 区块标题字号自适应 */
  .home .title-view .font-weight-bold.text-dark { font-size: clamp(1.35rem, 6vw, 1.9rem) !important; }

  /* 新闻卡片标题字号收窄 */
  .home .card-title.ellipsis { font-size: 1rem !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* 触控目标最小高度，提升点按体验 */
  .home .card, .home a.btn, .home .btn, .home .card-body a { touch-action: manipulation; }
}

/* 576 以下：小屏 */
@media (max-width: 575.98px) {
  .home .navbar .nav-link { font-size: 0.95rem; }
  .home .card .card-body { padding: 0.9rem !important; }
}

/* 首页首屏轮播：底部圆点隐藏，改用左右箭头（箭头元素由 optimize.js 注入） */
.home > .mb-lg-5.pb-lg-5 .carousel { position: relative; }
.home > .mb-lg-5.pb-lg-5 .carousel .carousel-indicators { display: none !important; }
.home > .mb-lg-5.pb-lg-5 .carousel .ly-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  transition: background .25s, transform .25s;
}
.home > .mb-lg-5.pb-lg-5 .carousel .ly-arrow:hover { background: rgba(0,0,0,.6); transform: translateY(-50%) scale(1.08); }
.home > .mb-lg-5.pb-lg-5 .carousel .ly-prev { left: 16px; }
.home > .mb-lg-5.pb-lg-5 .carousel .ly-next { right: 16px; }
@media (max-width: 767.98px) {
  .home > .mb-lg-5.pb-lg-5 .carousel .ly-arrow { width: 34px; height: 34px; font-size: 18px; }
  .home > .mb-lg-5.pb-lg-5 .carousel .ly-prev { left: 8px; }
  .home > .mb-lg-5.pb-lg-5 .carousel .ly-next { right: 8px; }
}

/* ---------- 3. 交互动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .home [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .home .carousel-item.active img { animation: none !important; }
}

/* 首屏轮播 Ken Burns 缓慢推进 */
@media (prefers-reduced-motion: no-preference) {
  .home .carousel-fade .carousel-item.active img,
  .home .carousel-fade .carousel-item-next img {
    animation: ly-kenburns 7s ease-out both;
  }
}
@keyframes ly-kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* 滚动渐入（由 js 控制 .ly-reveal-in） */
.home [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
}
.home [data-reveal].ly-reveal-in { opacity: 1; transform: translateY(0); }

/* 卡片悬浮上浮 + 阴影 */
.home .card {
  transition: transform .35s ease, box-shadow .35s ease;
}
.home .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16) !important;
}
.home .card .card-img-top, .home .card img { transition: transform .5s ease; }
.home .card:hover img { transform: scale(1.04); }

/* 区块标题下划线动效 */
.home .title-view .font-weight-bold.text-dark { position: relative; display: inline-block; }
.home .title-view .font-weight-bold.text-dark::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0;
  background: currentColor; opacity:.6; transition: width .5s ease;
}
.home .title-view .font-weight-bold.text-dark:hover::after { width: 100%; }

/* 返回顶部按钮 */
.ly-to-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 2000;
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(139, 69, 19, .92); color: #fff; font-size: 20px; line-height: 46px;
  text-align: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.ly-to-top.ly-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ly-to-top:hover { background: rgba(139, 69, 19, 1); }
@media (max-width: 767.98px) { .ly-to-top { right: 14px; bottom: 16px; width: 42px; height: 42px; line-height: 42px; font-size: 18px; } }

/* ---------- 4. 顶部荣誉条精修（颜色保持原样，仅布局/动效） ---------- */
/* 用 .bar-bg.bar-bg 提高特异性，压过元素自带的 .position-relative 工具类 */
.bar-bg.bar-bg {
  height: 46px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  /* 固定在页面顶端 */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1050 !important;
  /* 强制独立合成层，避免滚动时绿条闪烁/消失 */
  transform: translateZ(0);
  will-change: transform;
  /* 锁死不透明度与显示：让站点滚动>400px时的 fadeOut/fadeIn 变成无效，杜绝消失又出现 */
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}
/* 为固定条占位，避免内容上移被遮挡 */
body { padding-top: 87px !important; }

/* 去掉固定头部下方多余的空占位（白条）：偏移已由 body padding 承担 */
#app .background-view > .placeholder {
  display: none !important;
}

/* 导航栏压在首页轮播图上：把首屏轮播图外层向上顶 41px（被半透明导航栏盖住） */
.home > .mb-lg-5.pb-lg-5 {
  margin-top: -41px !important;
}

/* 导航栏固定到绿条下方；半黑透明底直接放在导航栏上（全宽、内容居中） */
.navbar {
  position: fixed !important;
  top: 46px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  z-index: 1040 !important;
  height: 41px !important;
  align-items: center !important;
  background: rgba(0, 0, 0, .75) !important;
}
/* 内容仍保持在原容器宽度内居中 */
@media (min-width: 1200px) {
  .navbar { padding-left: calc((100% - 1140px)/2 + 15px) !important; padding-right: calc((100% - 1140px)/2 + 15px) !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar { padding-left: calc((100% - 960px)/2 + 15px) !important; padding-right: calc((100% - 960px)/2 + 15px) !important; }
}
.bar-bg .container-lg {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}
.bar-bg .container-lg > .d-flex.flex-column {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
}

/* 荣誉文本：静态单行展示 + 溢出省略号（去掉跑马灯） */
/* 荣誉父容器作为弹性子项：占剩余宽度并裁切溢出，避免挤掉右侧语言/日期 */
.bar-bg .container-lg > .d-flex.flex-column > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

/* 右侧语言/日期不收缩 */
.bar-bg .d-flex.flex-wrap { flex-shrink: 0; }

/* 移动端更紧凑 */
@media (max-width: 767.98px) {
  .bar-bg.bar-bg { height: 40px !important; }
  .navbar { top: 40px !important; height: auto !important; min-height: 48px !important; }
  body { padding-top: 88px !important; }
  /* 压轮播：图片顶部对齐绿条底部(40px=导航顶部)，被不透明绿条遮住边缘线；导航(40-88)压住图片顶部，既压住又不露边 */
  .home > .mb-lg-5.pb-lg-5 { margin-top: -80px !important; }
  .bar-bg .d-flex.flex-wrap { max-width: 52%; }
  /* 底部新媒体二维码：移动端每行3个（3+1两行）并缩小 */
  .col-6.col-lg-1.col-md { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
  .col-6.col-lg-1.col-md > img { width: 88px !important; height: 88px !important; object-fit: contain !important; }
}

/* 二维码：只点图片本身可点击（PC+移动端统一），点击放大由 optimize.js 处理 */
.col-6.col-lg-1.col-md { pointer-events: none !important; }
.col-6.col-lg-1.col-md > img { pointer-events: auto !important; cursor: pointer !important; }

/* ---------- 二维码点击放大层 ---------- */
.ly-qr-zoom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: lyQrFade 0.18s ease;
}
.ly-qr-zoom-box {
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
}
.ly-qr-zoom-box img {
  width: min(72vw, 320px);
  height: auto;
  display: block;
  border-radius: 8px;
}
.ly-qr-zoom-tip {
  text-align: center;
  color: #888;
  font-size: 13px;
  margin-top: 10px;
}
@keyframes lyQrFade {
  from { opacity: 0; }
  to { opacity: 1; }
}