/**
 * @Author: Wang chunsheng  email:2192138785@qq.com
 * @Date:   2026-09-04 16:23:20
 * @Last Modified by:   Wang chunsheng  email:2192138785@qq.com
 * @Last Modified time: 2026-09-04 16:55:29
 */
/* 站点样式（Bootstrap 5 之上的轻量增强，配合 Alpine 声明式模板） */

/* Alpine 未初始化前隐藏，避免模板标签闪现 */
[x-cloak] {
  display: none !important;
}

/* SPA 站内跳转：下一页先在屏幕外渲染，完成后整体换上来，中途不留空白帧 */
.spa-holder {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 100%;
  pointer-events: none;
}

/* 骨架屏：数据未回来时按最终结构占位，避免内容从「一行加载中」撑开成整片卡片造成跳动。
   占位块尺寸与真实卡片一一对应（图片 180px、标题/摘要行高），高度差控制在几像素内。 */
.skeleton {
  position: relative;
  overflow: hidden;
  background: #e9ecef;
  border-radius: 6px;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  100% { transform: translateX(100%); }
}
/* 与 .card-img-top 等高，保证卡片骨架和真实卡片一样高 */
.skeleton-img { height: 180px; border-radius: 12px 12px 0 0; }
.skeleton-title { height: 20px; margin-bottom: 12px; }
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-lg { height: 320px; border-radius: 8px; }
.skeleton-sm { height: 36px; }
.skeleton-avatar { height: 56px; width: 56px; border-radius: 50%; }
/* 导航菜单骨架：与 .sanzong-nav-link 等高（padding .7rem + 1rem 行高 ≈ 38px），
   navbar 有 min-height:88px 兜底，骨架换成菜单时高度不变 */
.nav-skeleton { display: inline-block; height: 38px; vertical-align: middle; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-80 { width: 80%; }
/* 骨架卡片不要进场动画，否则每次切换都在原地抖一下 */
.skeleton-card { animation: none !important; }

/* 首次加载保留卡片进场动画；SPA 切换后不再重播，否则主内容会整块闪一下 */
body.spa-swapped .site-card {
  animation: none;
}

/* 幻灯片：限制高度并裁切 */
.slide-img {
  height: 440px;
  object-fit: cover;
}
.carousel-caption {
  background: rgba(0, 0, 0, .35);
  border-radius: 10px;
  padding: 8px 14px;
}

/* 卡片：悬停上浮 + 进场动画（Alpine 插入节点时自动触发） */
.site-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: siteFade .5s ease both;
}
.site-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.site-card .card-img-top {
  height: 180px;
  object-fit: cover;
}
@keyframes siteFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 摘要截断，统一两行 */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 视频播放按钮 */
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  transition: background .2s ease, transform .2s ease;
}
.play-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.site-card:hover .play-btn {
  background: rgba(0, 0, 0, .65);
  transform: scale(1.08);
}

/* 详情正文（后端富文本）排版 */
.rich-text {
  line-height: 1.9;
  font-size: 15px;
  word-wrap: break-word;
}
.rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: .5rem 0;
}
.rich-text table {
  width: 100%;
  margin-bottom: 1rem;
}
.rich-text p {
  margin-bottom: 1rem;
}

/* 下拉菜单圆角 */
.dropdown-menu {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: .35rem;
}
.dropdown-item {
  border-radius: 6px;
}

/* ===========================================================
   红色导航条（咨询站，参考 huayeee.com 风格）
   - 整宽红色横幅 + 丝带光感（双层径向渐变 + 线性渐变）
   - 左：圆形 logo + 品牌中英文
   - 右：菜单水平分布，悬停底部白线，激活态白条
   - lg 以下折叠为汉堡菜单，红底白字纵向堆叠
   仅 consulting/public/navbar.html 引用 .sanzong-navbar
   =========================================================== */
.sanzong-navbar {
  position: relative;
  background:
    radial-gradient(ellipse 60% 120% at 25% 0%,  rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(ellipse 50% 100% at 90% 100%, rgba(0, 0, 0, .22),         transparent 60%),
    linear-gradient(135deg, #C8161D 0%, #A50F16 100%);
  min-height: 88px;
  padding: .65rem 0;
  box-shadow: 0 4px 18px rgba(200, 22, 29, .25);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.sanzong-navbar > .container-xl { display: flex; align-items: center; }

/* 圆形 logo + 品牌名 */
.sanzong-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  letter-spacing: -1px;
  flex-shrink: 0;
  transition: transform .25s ease, background .25s ease;
}
.sanzong-navbar .navbar-brand:hover .sanzong-logo {
  transform: rotate(-6deg);
  background: rgba(255, 255, 255, .22);
}
.sanzong-navbar .brand-zh {
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.2;
}
.sanzong-navbar .brand-en {
  font-size: .7rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .75);
  margin-top: 3px;
}

/* 菜单容器：PC 端菜单靠右、菜单项之间间距大 */
.sanzong-navbar .sanzong-nav { gap: .25rem; }
@media (min-width: 992px) {
  .sanzong-navbar .sanzong-nav { gap: 1.6rem; }
}

/* 菜单项：白字 + 悬停底部白线 + 激活态加粗白条 */
.sanzong-navbar .sanzong-nav-link {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 1rem;
  padding: .7rem 1rem !important;
  position: relative;
  transition: color .2s ease;
  white-space: nowrap;
}
.sanzong-navbar .sanzong-nav-link:hover,
.sanzong-navbar .sanzong-nav-link:focus {
  color: #fff !important;
}
.sanzong-navbar .sanzong-nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width .25s ease;
  transform: translateX(-50%);
}
.sanzong-navbar .sanzong-nav-link:hover::after,
.sanzong-navbar .sanzong-nav-link.active::after {
  width: 60%;
}
.sanzong-navbar .sanzong-nav-link.active {
  color: #fff !important;
  font-weight: 600;
}

/* 汉堡按钮：白色三线 */
.sanzong-navbar .sanzong-toggler {
  color: #fff;
  padding: .25rem .5rem;
  font-size: 1.4rem;
}
.sanzong-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* 移动端（< lg）：折叠展开样式 */
@media (max-width: 991.98px) {
  .sanzong-navbar { min-height: 72px; padding: .5rem 0; }
  .sanzong-logo { width: 44px; height: 44px; font-size: .95rem; }
  .sanzong-navbar .brand-zh { font-size: 1rem; }
  .sanzong-navbar .brand-en { font-size: .65rem; letter-spacing: 1.5px; }
  .sanzong-navbar .navbar-collapse {
    margin-top: .75rem;
    background: rgba(0, 0, 0, .15);
    border-radius: 10px;
    padding: .5rem;
  }
  .sanzong-navbar .sanzong-nav-link {
    padding: .85rem 1rem !important;
    border-radius: 8px;
  }
  .sanzong-navbar .sanzong-nav-link::after { display: none; }
  .sanzong-navbar .sanzong-nav-link.active {
    background: rgba(255, 255, 255, .15);
  }
}