/* 校园公告横幅 · 门户首页顶部
   配色沿用门户 B 粉彩基准：暖奶油底 + 陶土点缀 + 墨黑胶囊，不抢瓷砖的戏。
   收起态恒定一行（标题超长省略号），点标题或右侧箭头才展开正文与跳转按钮。 */
.nb,
.nb *{box-sizing:border-box}

.nb{
  --nb-ink:#1B1917;
  --nb-sub:#726D66;
  --nb-line:rgba(178,90,60,.28);
  --nb-clay:#B25A3C;
  --nb-clay-dk:#8C4227;
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding:10px 11px 10px 13px;
  border:1px solid var(--nb-line);
  border-left:3px solid var(--nb-clay);
  border-radius:14px;
  background:linear-gradient(135deg,#FBF3E7 0%,#F7EADC 100%);
  box-shadow:0 1px 2px rgba(120,90,60,.06),0 6px 18px -12px rgba(120,90,60,.35);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--nb-ink);
  animation:nbIn .32s ease both;
}
@keyframes nbIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nb[hidden]{display:none}

/* 喇叭 */
.nb-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:9px;
  background:rgba(255,255,255,.9);
  color:var(--nb-clay);
  box-shadow:inset 0 0 0 1px rgba(178,90,60,.16);
}
.nb-mark svg{width:16px;height:16px;display:block}

/* 主体：收起时只有一行标题 */
.nb-body{
  flex:1 1 auto;
  min-width:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nb-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  height:22px;
}
.nb-tag{
  flex:0 0 auto;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--nb-clay-dk);
  font-size:11px;
  font-weight:600;
  line-height:15px;
  letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(178,90,60,.2);
  white-space:nowrap;
}
/* 严格一行：超长一律省略号，绝不换行把横幅撑高 */
.nb-title{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  font-weight:600;
  line-height:22px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nb-date{
  flex:0 0 auto;
  color:var(--nb-sub);
  font-size:12px;
  line-height:22px;
  font-variant-numeric:tabular-nums;
}
/* 展开后才允许标题完整换行显示；行容器要跟着放开，否则文字会溢出横幅外 */
.nb[data-open="1"] .nb-row{
  height:auto;
  min-height:22px;
  align-items:flex-start;
}
.nb[data-open="1"] .nb-title{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:break-word;
  word-break:break-word;
}
.nb-detail{
  margin:6px 0 0;
  padding:0 2px;
  font-size:13.5px;
  line-height:1.75;
  color:#5C5750;
  white-space:pre-wrap;
  word-break:break-word;
}
.nb-detail[hidden]{display:none}

/* 展开区：跳转按钮只在展开后出现，避免收起时挤占标题 */
.nb-acts{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding-left:2px;
}
.nb-acts[hidden]{display:none}
.nb-go{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 13px;
  border-radius:999px;
  background:#1F1D1A;
  color:#fff;
  font-size:12.5px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .16s ease,opacity .16s ease;
}
.nb-go:hover{transform:translateY(-1px);opacity:.9}

/* 多条切换：横向排布，不额外占高度 */
.nb-nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:2px;
}
.nb-nav[hidden]{display:none}
.nb-nav button{
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  border:0;
  border-radius:7px;
  background:rgba(255,255,255,.75);
  color:var(--nb-clay-dk);
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.nb-nav button:active{background:rgba(255,255,255,.95)}
.nb-count{
  min-width:24px;
  text-align:center;
  color:var(--nb-sub);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

/* 展开箭头 */
.nb-caret{
  flex:0 0 auto;
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#9A9086;
  cursor:pointer;
  transition:transform .22s ease,background .16s ease,color .16s ease;
}
.nb-caret svg{width:13px;height:13px;display:block}
.nb-caret[hidden]{display:none}
.nb[data-open="1"] .nb-caret{transform:rotate(180deg)}
.nb-caret:hover{background:rgba(255,255,255,.8);color:var(--nb-clay-dk)}

.nb-x{
  flex:0 0 auto;
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#9A9086;
  font-size:17px;
  line-height:1;
  cursor:pointer;
}
.nb-x:hover{background:rgba(255,255,255,.8);color:var(--nb-clay-dk)}

/* 展开时图标顶对齐第一行，不然会跟着正文居中悬在半空 */
.nb[data-open="1"]{align-items:flex-start}
.nb[data-open="1"] .nb-mark,
.nb[data-open="1"] .nb-caret,
.nb[data-open="1"] .nb-nav,
.nb[data-open="1"] .nb-x{margin-top:0}

/* 深色皮肤（html[data-dark=1]）下换成深底浅字，不然一条浅色横幅会很刺眼 */
html[data-dark="1"] .nb{
  --nb-ink:#F2EDE4;
  --nb-sub:#A29A91;
  --nb-clay:#D0805C;
  --nb-clay-dk:#E8B49A;
  border-color:rgba(208,128,92,.26);
  border-left-color:#D0805C;
  background:linear-gradient(135deg,#2F2B27 0%,#262320 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 6px 18px -12px rgba(0,0,0,.6);
}
html[data-dark="1"] .nb-mark{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
html[data-dark="1"] .nb-tag{background:rgba(255,255,255,.10);color:#E8B49A;box-shadow:none}
html[data-dark="1"] .nb-go{background:#F2EDE4;color:#1B1917}
html[data-dark="1"] .nb-nav button{background:rgba(255,255,255,.10);color:#E8B49A}
html[data-dark="1"] .nb-count{color:#A29A91}
html[data-dark="1"] .nb-detail{color:#BEB6AD}
html[data-dark="1"] .nb-caret{color:#877E75}
html[data-dark="1"] .nb-caret:hover{background:rgba(255,255,255,.10);color:#E8B49A}
html[data-dark="1"] .nb-x{color:#877E75}
html[data-dark="1"] .nb-x:hover{background:rgba(255,255,255,.10);color:#E8B49A}

/* 窄屏：仍然一条直排（不再拆两行网格），标签和日期让位给标题 */
@media (max-width:620px){
  .nb{
    gap:7px;
    padding:9px 8px 9px 10px;
    border-radius:12px;
    margin-bottom:14px;
  }
  .nb-mark{width:24px;height:24px;border-radius:7px}
  .nb-mark svg{width:14px;height:14px}
  .nb-tag{display:none}
  .nb-date{display:none}
  .nb-row{height:21px}
  /* 手机上字不能更小：老师多数在手机上看 */
  .nb-title{font-size:15px;line-height:21px}
  .nb-nav button{width:20px;height:20px;font-size:13px}
  .nb-count{min-width:21px;font-size:10.5px}
  .nb-caret{width:20px;height:20px}
  .nb-x{width:22px;height:22px;font-size:16px}
  .nb-detail{font-size:13.5px;line-height:1.72;margin-top:4px}
  .nb-acts{margin-top:8px;padding-left:0}
  .nb-go{height:27px;padding:0 12px;font-size:12px}
}