/* ============================================================
   二级页面通用样式 (inpage.css)
   适用于: department.html 及后续所有二级页
   ============================================================ */

/* ---------- 两栏布局容器 ---------- */
.page-l2 {
  display: flex;
  gap: 15px;
  margin: 30px auto;
}

.page-l2__sidebar {
  flex: 0 0 300px;
  border-radius: 8px;
  overflow: hidden;
}

.page-l2__main {
  flex: 0 0 885px;
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   左侧科室手风琴菜单 (.dept-menu)
   ============================================================ */

/* ---------- 菜单头 ---------- */
.dept-menu__header {
  height: 60px;
  background: #1D77B3;
  display: flex;
  align-items: center;
  padding-left: 25px;
  border-top: 1px solid #cccccc;
}

.dept-menu__header img {
  /* 原图 59×52 显示, 不写宽高 */
}

.dept-menu__header span {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  margin-left: 12px;
}

/* ---------- 一级项 (.dept-menu__group) ---------- */
.dept-menu__group {
  display: block;
  text-decoration: none;
}

/* 一级标题: 统一样式, 右侧预留箭头位 */
.dept-menu__group-title {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #E8F0F8;
  padding-left: 50px;
  padding-right: 40px;        /* 给右侧箭头留位 */
  font-size: 16px;
  font-weight: bold;
  color: #555;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s;
  border-bottom: 1px solid #cccccc;
}

/* 箭头指示符: 用伪元素, 默认隐藏但占位, 保证文字对齐 */
.dept-menu__group-title::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: translateY(-50%) rotate(-45deg);   /* 右箭头 > */
  transition: transform 0.25s;
  opacity: 0;                  /* 默认隐藏(无下级时不显示, 但仍占位) */
}

/* "有下级"和"无下级链接项"都显示右箭头, 保持风格统一 */
.dept-menu__group.has-children > .dept-menu__group-title::after,
.dept-menu__group--link > .dept-menu__group-title::after {
  opacity: 1;
}

/* hover 一级项: 标题高亮 */
.dept-menu__group:hover > .dept-menu__group-title {
  color: #1D77B3;
}

/* 无下级链接项: 当前页选中态高亮 */
.dept-menu__group--link.is-active > .dept-menu__group-title {
  color: #1D77B3;
  font-weight: bold;
}

/* "有下级"项展开时(.is-open): 箭头转向下(∨) */
.dept-menu__group.has-children.is-open > .dept-menu__group-title::after {
  transform: translateY(-50%) rotate(45deg);
}

/* ---------- 二级项列表 (.dept-menu__sublist) ---------- */
/* max-height 由 JS 设为真实高度(scrollHeight), 保证收起不空跑、丝滑跟手 */
/* 过渡速度也由 JS 分方向设置(展开慢/收起快), 见 inpage.js */
.dept-menu__sublist {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: #ffffff;
}

/* 展开态由 JS 切换 .is-open; opacity 在此, max-height 由 JS 写内联值 */
.dept-menu__group.has-children.is-open > .dept-menu__sublist {
  opacity: 1;
}

.dept-menu__item {
  display: block;
  min-height: 50px;
  padding: 8px 50px;
  font-size: 16px;
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
  border-bottom: 1px solid #cccccc;
  line-height: 1.5;
  white-space: normal;
  word-wrap: break-word;
}

.dept-menu__item:hover {
  color: #1D77B3;
}

.dept-menu__item.is-active {
  color: #1D77B3;
  font-weight: bold;
}

.dept-menu__item.is-active::before {
  content: '> ';
  color: #1D77B3;
  font-weight: bold;
  margin-right: 6px;
}

/* ============================================================
   右侧内容区
   ============================================================ */

/* ---------- 面包屑导航 ---------- */
.breadcrumb {
  height: 60px;
  line-height: 60px;
  text-align: right;
  padding-right: 30px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #D8E4F0;
  background: #ffffff;
}

.breadcrumb a {
  color: #666;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #1D77B3;
}

/* ---------- 底部收口条 ---------- */
.dept-menu__footer {
  height: 35px;
  background: #1D77B3;
  border-radius: 0 0 8px 8px;
}

/* ---------- 正文内容区 ---------- */
.page-l2__content {
  background: #ffffff;
  min-height: 500px;
  padding: 15px 30px;
}

/* ========== 通用组件: 信息区块 .info-block ========== */
.info-block__title {
  display: inline-block;
  padding: 10px 30px;
  background: #1D77B3;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 20px;
  user-select: none;
}

.info-block__body {
  margin-top: 15px;
  padding: 10px 15px;
  border-radius: 8px;
  background: #ffffff;
  font-size: 16px;
  color: #555;
  line-height: 2;
}

/* 两个区块之间垂直间距 30px */
.info-block + .info-block {
  margin-top: 30px;
}

.info-content_text {
  font-size:16px;
  line-height:2;	
}

/* 修饰类: 去掉正文方框边框, 让内容撑满父容器 */
.info-block--bare .info-block__body {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* 二级页面内医生卡片缩小至 170px（内容区755px，4×170+3×20=740px 恰好放下） */
.page-l2__main .doctor-card,
.page-l2__main .doctor-card--placeholder {
    flex: 0 0 170px;
    display: flex;
    flex-direction: column;
}
.page-l2__main .doctor-card__img {
  width: 170px;
  height: 227px;
}

/* ========== 通用组件: 新闻列表 .news-list ========== */
.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list__item {
  border-bottom: 1px solid #cfcfcf;
}

.news-list__link {
  display: flex;
  align-items: center;
  height: 40px;
  text-decoration: none;
  transition: color 0.2s;
  padding: 0 15px;
}

.news-list__link::before {
  content: '●';
  color: #333;
  font-size: 8px;
  margin-right: 8px;
  flex-shrink: 0;
}

.news-list__title {
  flex: 1;
  font-size: 16px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 12px;
}

.news-list__date {
  font-size: 16px;
  color: #999;
  flex-shrink: 0;
}

.news-list__link:hover .news-list__title {
  color: #1D77B3;
}

/* ---------- 分页栏 ---------- */
.page-l2__pagination {
  text-align: right;
  padding: 6px 15px;
  font-size: 16px;
  color: #555;
}
.pic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ★ 1fr → minmax(0,1fr) */
    gap: 18px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pic-grid__item {
    min-width: 0;
}
/* ★ 允许列收缩 */

.pic-grid__img {
    width: 100%;
    aspect-ratio: 450 / 260;
    overflow: hidden;
    background: #000;
    border: 1px solid #e6e6e6;
}

    .pic-grid__img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.pic-grid__title {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #333;
    white-space: nowrap; /* 单行 */
    overflow: hidden; /* 配合 item 的 min-width:0 才能真正裁切 */
    text-overflow: ellipsis; /* 超长显示 … */
}

.page-l2__pagination {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

    .page-l2__pagination a {
        color: #1a6db5;
        text-decoration: none;
        margin: 0 3px;
    }

        .page-l2__pagination a:hover {
            text-decoration: underline;
        }