/* =====================================================================
   北部湾职业技术学校 · 品牌主题覆盖层
   主色 #0092dd（取自校方官网），覆盖在原模板样式之上。
   ===================================================================== */
:root{
  --bb:#0092dd;        /* 主蓝 */
  --bb-deep:#0072bb;   /* 深蓝（悬停/强调） */
  --bb-navy:#26334d;   /* 页脚深色 */
  --bb-tint:#e3f5ff;   /* 浅蓝底 */
}

/* 关键修复：把 .wrap 的固定 1500px 改为流式(max-width)，
   否则硬宽度会撑大移动端布局视口、使所有响应式媒体查询失效 */
.wrap{ width:auto !important; max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; }

/* ---------- 详情页二级导航栏（原 #123E95） ---------- */
.bg-b{ background-color:var(--bb) !important; }
.navbar_nav li:hover,
.navbar_nav li:hover a,
.navbar_nav li.return:hover{ background:var(--bb-deep) !important; }
.navbar_nav li.return{ background:rgba(255,255,255,.18) !important; }
.navbar_nav li.slt a,
.navbar_nav li.slt{ background:var(--bb-deep) !important; }

/* ---------- “成果简介”标签、菜单名（原 #1b5eb2） ---------- */
.listIndex-jianjie{ background-color:var(--bb) !important; }
.menuName{ background-color:rgba(0,146,221,.92) !important; }

/* ---------- 教学成果卡片优化 ---------- */
.listDiv{
  border-radius:8px !important;          /* 圆角与 banner 一致 */
  overflow:hidden;
  border:1px solid #e7edf4;
  box-shadow:0 2px 12px rgba(38,51,77,.06);
  transition:box-shadow .3s, transform .3s;
}
.listDiv:hover{ box-shadow:0 14px 30px rgba(0,146,221,.18); transform:translateY(-5px); }

/* 统一缩略图高度，避免参差不齐 */
.listDiv .imgDiv{ height:210px; }
.listDiv .imgDiv a{ display:block; width:100%; height:100%; }
.listDiv .imgDiv img{
  width:100% !important; max-width:100% !important; height:100% !important;
  max-height:none !important; min-height:0 !important; object-fit:cover;
}

.listDiv-a{ padding:18px 22px 22px !important; }

/* 标题 */
.listTitle{
  height:56px !important; font-size:18px !important; line-height:28px !important;
  font-weight:600; color:var(--bb-navy); transition:color .3s; -webkit-line-clamp:2;
}
.listDiv:hover .listTitle{ color:var(--bb); }

/* 信息行：顶部分隔线 + 完成人(左) / 查看详情(右) */
.listLinkDiv{
  height:auto !important; margin-top:16px !important;
  padding-top:14px; border-top:1px solid #eef2f7; align-items:center;
}
.listLinkDiv img[src*="teacher"]{
  width:18px !important; height:18px !important; margin-right:8px !important; opacity:.8;
}
.listLinkDiv > div:first-of-type{          /* 成果完成人 */
  font-size:14px !important; line-height:20px !important; color:#6a7892 !important;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.listLinkDiv > div[style*="auto"]{         /* 查看详情 */
  font-size:14px !important; line-height:20px !important; color:var(--bb) !important;
  font-weight:600; margin-left:auto !important; flex:none;
}
.listLinkMoreImg{ width:16px !important; height:16px !important; margin-left:6px !important; }

/* 列表布局：电脑端每行 3 个（手机端在媒体查询里改为 2 个） */
.ixPart1 .wrap{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
/* clearfix 的 ::before/::after 在网格里会变成空的网格子项，占掉第一格，需禁用 */
.ixPart1 .wrap::before, .ixPart1 .wrap::after{ content:none !important; display:none !important; }
.listDiv{ width:auto !important; min-width:0 !important; margin:0 !important; }
.listDiv:empty{ display:none !important; }

/* ---------- 友情链接标题 ---------- */
.ixTit span em{ color:var(--bb); border-bottom:3px solid var(--bb); padding-bottom:4px; }

/* =========================================================
   新页头：白底 + 校徽 + 蓝色强调条
   ========================================================= */
/* 仿官网：校园大图打底 + 顶部“上深下透”渐变蒙版 */
.bb-header{
  background:
    url(../images/header-overlay.png) center top/100% 100% no-repeat,
    url(../images/header-hero.jpg) center 30%/cover no-repeat;
}
.bb-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:52px 0;
}
/* 彩色 logo 原色显示，加柔和投影替代白色托底，压在照片上更清晰 */
.bb-logo-plate{ display:inline-flex; }
.bb-logo{
  height:88px; width:auto; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.bb-header__title{
  font-size:40px; color:#fff; font-weight:700; letter-spacing:4px;
  padding-left:0; white-space:nowrap; margin-right:60px;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.bb-strip{ display:none; }

/* 首页横幅 banner（宽度与成果卡片一致，置于标题下方） */
.bb-banner{ width:100%; overflow:hidden; line-height:0; border-radius:8px;
  box-shadow:0 6px 18px rgba(38,51,77,.10); margin-bottom:34px; }
.bb-banner img{ width:100%; height:auto; display:block; }

/* =========================================================
   区块标题（替换原 jxchjList.png 图片）
   ========================================================= */
.bb-sectit{ text-align:center; margin:46px 0 38px; }
.bb-sectit span{
  display:inline-block; font-size:30px; font-weight:700; color:var(--bb-navy);
  padding-bottom:14px; position:relative;
}
.bb-sectit span::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:64px; height:3px; background:var(--bb); border-radius:2px;
}
.bb-sectit small{
  display:block; font-size:13px; letter-spacing:4px; color:#9aa7b8;
  margin-top:10px; text-transform:uppercase; font-weight:400;
}

/* =========================================================
   详情页标题带（替换 listLogo.jpg 叠字 / listBanner.jpg）
   ========================================================= */
.bb-detail-title{ background:linear-gradient(120deg,var(--bb),var(--bb-deep)); }
.bb-detail-title .wrap{ padding:26px 0; margin-top:0; }
.bb-detail-title h1{ margin:0; color:#fff; font-size:30px; font-weight:700; line-height:1.45; }

/* =========================================================
   详情页成果名称（置于“成果简介”上方）
   ========================================================= */
.bb-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--bb); background:#fff;
  border:1px solid #d8e4f0; border-radius:999px;
  padding:8px 18px 8px 15px; margin-bottom:18px;
  box-shadow:0 2px 8px rgba(38,51,77,.06);
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.bb-back svg{ transition:transform .25s; }
.bb-back:hover{
  background:var(--bb); color:#fff; border-color:var(--bb);
  box-shadow:0 6px 16px rgba(0,146,221,.28);
}
.bb-back:hover svg{ transform:translateX(-3px); }
/* 成果名称（保持在顶部、居中） */
.bb-cg-title{
  font-size:26px; font-weight:700; color:var(--bb-navy); line-height:1.55;
  text-align:center; max-width:1000px; margin:4px auto 0;
  padding-bottom:20px; position:relative;
}
.bb-cg-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:60px; height:3px; background:var(--bb); border-radius:2px;
}

/* 标题下方整块为白色面板：封面(左,小) + 成果简介(右) 同行 */
.bb-detail-row{
  display:flex; gap:30px; align-items:flex-start; margin-top:28px; margin-bottom:56px;
  background:#fff; border-radius:12px; padding:30px;
  box-shadow:0 6px 22px rgba(38,51,77,.08);
}
.bb-detail-side{ flex:none; width:300px; }
.bb-detail-cover{ border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(38,51,77,.16); }
.bb-detail-cover img{ width:100%; height:195px; object-fit:cover; display:block; }
.bb-detail-meta{
  margin-top:16px; background:#f4f7fb; border:1px solid #e6ecf4; border-radius:10px;
  padding:6px 16px; font-size:14px;
}
.bb-detail-meta > div{ padding:11px 0; border-top:1px dashed #dde6f1; }
.bb-detail-meta > div:first-child{ border-top:0; }
.bb-detail-meta span{ display:block; font-size:12px; color:#9aa7b8; margin-bottom:3px; }
.bb-detail-meta b{ color:var(--bb-navy); font-weight:600; line-height:1.5; }
.bb-detail-main{ flex:1; min-width:0; }
/* 右侧白底叠白底 → 取消内层白框，标签归位 */
.bb-detail-main .inRight{ background:transparent !important; }
.bb-detail-main .listIndex-jianjie{ margin:0 0 18px 0; }
.bb-detail-main .list{ padding:0 !important; min-height:0 !important; }
@media(max-width:768px){
  .bb-detail-row{ flex-direction:column; gap:18px; margin-top:22px; padding:18px; }
  .bb-detail-side{ width:100%; }
  .bb-detail-cover img{ height:200px; }
  .bb-cg-title{ font-size:20px; }
}

/* =========================================================
   成果视频播放器
   ========================================================= */
.video-box{
  width:100%; border-radius:8px; overflow:hidden; background:#000;
  box-shadow:0 8px 26px rgba(38,51,77,.14);
}
.video-box video{ width:100%; max-height:600px; display:block; background:#000; }

/* =========================================================
   PDF 成果内嵌查看器（浏览器插件）
   ========================================================= */
.pdf-viewer{
  width:100%; max-width:1040px; margin:0 auto;
  border:1px solid #d8e1ec; border-radius:8px; overflow:hidden;
  box-shadow:0 8px 26px rgba(38,51,77,.14); background:#525659;
}
.pdf-viewer iframe{ width:100%; height:88vh; min-height:640px; border:0; display:block; }
@media(max-width:768px){ .pdf-viewer iframe{ height:78vh; min-height:480px; } }

/* =========================================================
   专业页脚（多栏式）
   ========================================================= */
.bb-footer{
  background:linear-gradient(180deg,#2b3a57,#1f2b42);
  color:rgba(255,255,255,.7);
}
.bb-footer__top{ display:flex; gap:64px; padding:50px 0 42px; margin-top:0; }
.bb-footer__brand{ flex:1.7; min-width:260px; }
.bb-footer__col{ flex:1; min-width:160px; }
/* 页脚 logo：徽标保留彩色、校名反白，深色背景上清晰（无托底、不改背景） */
.bb-footer__logo{ height:52px; width:auto; display:block; margin-bottom:18px; }
.bb-footer__desc{ font-size:13.5px; line-height:2; color:rgba(255,255,255,.55); margin:0; max-width:430px; }
.bb-footer__h{
  font-size:16px; color:#fff; font-weight:600; margin:6px 0 20px;
  padding-bottom:12px; position:relative;
}
.bb-footer__h::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; background:var(--bb); }
.bb-footer__list{ list-style:none; margin:0; padding:0; }
.bb-footer__list li{ font-size:14px; line-height:1.6; margin-bottom:13px; color:rgba(255,255,255,.62); display:flex; align-items:flex-start; gap:8px; }
.bb-footer__list li svg{ flex:none; margin-top:3px; opacity:.7; }
.bb-footer__links a{ color:rgba(255,255,255,.62); transition:color .2s, padding-left .2s; }
.bb-footer__links a:hover{ color:#fff; padding-left:4px; }
.bb-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); }
.bb-footer__bottom .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 24px;
  padding:18px 0; margin-top:0; font-size:13px; color:rgba(255,255,255,.42);
}
.bb-footer__bottom a{ color:rgba(255,255,255,.55); }

@media(max-width:1024px){
  .bb-footer__top{ flex-wrap:wrap; gap:30px 40px; padding:40px 20px; }
  .bb-footer__brand{ flex:1 1 100%; }
  .bb-footer__col{ flex:1 1 40%; }
  .bb-footer__bottom .wrap{ padding:16px 20px; }
}
@media(max-width:600px){
  .bb-footer__col{ flex:1 1 100%; }
  .bb-footer__bottom .wrap{ flex-direction:column; }
}

/* ---------- 响应式 ---------- */
@media(max-width:1520px){
  .bb-header__inner,.bb-detail-title .wrap,.bb-footer__inner{ padding-left:20px; padding-right:20px; }
}
@media(max-width:768px){
  /* 页头：白底 + 彩色 logo + 蓝色标题（手机上必然清晰可读） */
  .bb-header{ background:#ffffff !important; box-shadow:0 1px 0 #e6ecf4; }
  .bb-header__inner{ flex-direction:column; gap:8px; text-align:center; padding:16px 0; background-color: #193044; margin-top: 0;}
  .bb-logo{ height:40px; filter:none; }
  .bb-header__title{ border-left:none; padding-left:0; margin-right:0; font-size:17px; letter-spacing:1px; color:var(--bb); text-shadow:none; }
  .bb-detail-title h1{ font-size:22px; }
}

/* =========================================================
   移动端适配（列表页 + 详情页）
   ========================================================= */
@media (max-width: 768px) {
  /* 用 100vw 给容器确定宽度，打破 width:auto 自动撑大的循环 */
  html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; min-width: auto;}
  .bb-header, .main, .row, .ixPart1, .ixPart3, .bb-footer {
    width: 100vw !important; max-width: 100vw !important; box-sizing: border-box; overflow-x: hidden;margin:0;
  }
  /* 详情页主体面板：正常填充父容器并居中（不要 100vw，否则会偏右溢出） */
  .bb-detail-row{ width:auto !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
  .bb-header__inner, .bb-footer__top, .bb-footer__bottom > .wrap { max-width: 100% !important; }
  /* 容器流式：覆盖 .wrap 的 1500px 固定宽度 */
  .wrap {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 16px !important; padding-right: 16px !important;
    box-sizing: border-box;
  }
  /* 列表页：手机上仍每行 2 个，卡片紧凑化 */
  .ixPart1 .wrap { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; padding: 0 !important;margin-top:0;}
  .listDiv .imgDiv { height: 118px !important; }
  .listDiv-a { padding: 12px !important; }
  .listTitle { font-size: 14px !important; line-height: 21px !important; height: 42px !important; }
  .listLinkDiv { margin-top: 10px !important; padding-top: 10px; }
  .listLinkDiv img { display: none; }                       /* 隐藏教师图标/箭头 */
  .listLinkDiv > div:first-of-type { display: none; }       /* 小卡省略完成人 */
  .listLinkDiv > div[style*="auto"] { font-size: 13px !important; margin-left: 0 !important; }
  .bb-sectit { margin: 30px 0 22px; }
  .bb-sectit span { font-size: 23px; }
  .bb-banner { margin-bottom: 0; }
  /* 详情页：内容上边距收紧 */
  .main .col-sm-12[style*="margin-top:40px"],
  .main .col-sm-12[style*="margin-top: 40px"] { margin-top: 24px !important; }
}