/*
 * 成都东软学院主站首页新闻内容区改版
 * 业务类统一使用 mw- 命名空间，变量和基础重置限定在
 * .nsu-main-revision 内，便于安全接入原站。
 */

.nsu-main-revision {
  --mw-blue: #0758a8;
  --mw-orange: #ef781e;
  --mw-gold: #e6ce8e;
  --mw-text: #202020;
  --mw-muted: #515151;
  --mw-line: #d9d9d9;
  --mw-panel: #f5f5f5;
  width: 100%;
  padding: 52px 0 76px;
  position: relative;
  z-index: 1;
  clear: both;
  isolation: isolate;
  color: var(--mw-text);
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
 * 原首页的 #topmenu 为 110px 固定菜单；新版模块位于它后方时，
 * 自动预留菜单高度及 30px 的标题呼吸空间。第二个选择器兼容
 * 模块外面仍保留一层旧模板容器的接入方式。
 */
#topmenu ~ .nsu-main-revision,
#topmenu ~ * .nsu-main-revision,
.nsu-main-revision.mw-under-fixed-menu {
  padding-top: 140px;
}

.nsu-main-revision,
.nsu-main-revision * { box-sizing: border-box; }

.nsu-main-revision a { color: inherit; text-decoration: none; }
.nsu-main-revision img { display: block; max-width: 100%; }
.nsu-main-revision h2,
.nsu-main-revision h3,
.nsu-main-revision p,
.nsu-main-revision ul { margin: 0; padding: 0; }
.nsu-main-revision ul { list-style: none; }

.mw-layout {
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(0, 664px);
  grid-template-areas:
    "focus general"
    "characters media"
    "notices media";
  column-gap: 68px;
  row-gap: 38px;
  width: min(1532px, calc(100% - 64px));
  margin: 0 auto;
}

.mw-focus { grid-area: focus; }
.mw-general { grid-area: general; }
.mw-characters { grid-area: characters; }
.mw-media { grid-area: media; }
.mw-notices { grid-area: notices; }

.mw-section { min-width: 0; }

.mw-section-head {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  display: flex;
  align-items: flex-start;
  width: auto;
  height: auto;
  min-height: 70px;
  background: transparent;
}

/*
 * 兼容原首页无范围的 header 样式及 $('header') 行内高度设置。
 * 新版结构已改用 div，此规则用于已经复制过旧版 HTML 的页面。
 */
.nsu-main-revision header.mw-section-head {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 70px !important;
  line-height: normal !important;
  background: transparent !important;
  transition: none !important;
}

.mw-section-head > div { min-width: 0; }

.mw-section-head h2 {
  color: #0d0d0d;
  font-size: 31px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.03em;
}

.mw-section-head p {
  margin-top: 3px;
  color: #222;
  font-size: 20px;
  line-height: 1.2;
}

.mw-more-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 31px;
  height: 31px;
  margin: 2px 0 0 47px;
  border-radius: 50%;
  background: var(--mw-gold);
  transition: transform .2s ease, background-color .2s ease;
}

.mw-more-dot i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

.mw-more-dot:hover,
.mw-more-dot:focus-visible { background: var(--mw-orange); transform: translateY(-2px); }

.mw-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 34px;
  margin-top: 16px;
}

.mw-focus-card {
  overflow: hidden;
  min-width: 0;
  border-top: 3px solid var(--mw-blue);
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / 18%);
  transition: box-shadow .25s ease;
}

.mw-focus-card:hover {
  box-shadow: 0 8px 18px rgb(0 0 0 / 18%);
}

.mw-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 383 / 259;
}

.mw-card-media::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--mw-orange) 0 5%,
    var(--mw-blue) 5% 100%
  );
  pointer-events: none;
}

.mw-card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 24px);
  object-fit: cover;
  object-position: center top;
  transform-origin: center;
  transition: transform .3s ease;
}

.mw-card-media:hover img { transform: scale(1.1); }

.mw-focus-date {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 9px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 3px rgb(0 0 0 / 80%);
}

.mw-focus-card h3 {
  min-height: 95px;
  padding: 18px 14px 15px;
  color: var(--mw-blue);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}

.mw-focus-card h3 a,
.mw-media-card h3,
.mw-character-list span,
.mw-notice-list span,
.mw-general-list span {
  transition: color .18s ease;
}

.mw-focus-card h3 a:hover,
.mw-general-list a:hover span,
.mw-character-list a:hover span,
.mw-notice-list a:hover span { color: var(--mw-blue); }

.mw-general-list { margin-top: 8px; }

.mw-general-list li {
  position: relative;
  min-width: 0;
  height: 105px;
  border-bottom: 1px solid var(--mw-line);
}

.mw-general-list li::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 1;
  width: 23px;
  height: 6px;
  background: linear-gradient(90deg, var(--mw-orange) 0 38%, var(--mw-blue) 38% 100%);
}

.mw-general-list a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding-right: 128px;
  font-size: 20px;
}

.mw-general-list span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-general-list time {
  position: absolute;
  right: 0;
  bottom: -10px;
  z-index: 2;
  padding-left: 12px;
  background: #fff;
  color: var(--mw-blue);
  font-size: 17px;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
}

.mw-text-more {
  display: block;
  margin-top: 23px;
  color: #777;
  font-size: 15px;
  text-align: right;
}

.mw-text-more:hover { color: var(--mw-blue); }

.mw-character-panel {
  display: grid;
  grid-template-columns: 434px minmax(0, 1fr);
  height: 270px;
  margin-top: 7px;
  border: 1px solid #8d8d8d;
  background: #fff;
}

.mw-character-photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e9edf1;
}

.mw-character-photo::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--mw-orange) 0 12%,
    var(--mw-blue) 12% 100%
  );
  pointer-events: none;
}

.mw-character-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity .3s ease, transform .3s ease;
}

.mw-character-photo img.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.mw-character-panel.is-interacting .mw-character-photo img.is-active,
.mw-character-photo:hover img.is-active { transform: scale(1.1); }

.mw-character-list { min-width: 0; }

.mw-character-list li {
  min-width: 0;
  height: 89px;
  padding: 6px 15px 7px;
  border-bottom: 1px solid #bbb;
  background: #fff;
  transition: background-color .22s ease;
}

.mw-character-list li:last-child { border-bottom: 0; }

.mw-character-list li.is-active { background: #e5e5e5; }

.mw-character-list a { display: flex; flex-direction: column; height: 100%; }

.mw-character-list time {
  align-self: flex-end;
  color: #696969;
  font-size: 13px;
  line-height: 1.2;
}

.mw-character-list span {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #555;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mw-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px 38px;
  margin-top: 7px;
}

.mw-media-card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid #1688f4;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mw-media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgb(0 72 150 / 16%);
}

.mw-media-visual {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 313 / 216;
  background: #e9edf1;
}

.mw-media-visual img {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: calc(100% + 18px);
  object-fit: cover;
  object-position: center;
}

.mw-media-date {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 16px;
  padding-left: 4px;
  background: var(--mw-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

.mw-media-date::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 31%;
  height: 50%;
  background: var(--mw-orange);
  pointer-events: none;
}

.mw-media-card h3 {
  display: -webkit-box;
  min-height: 86px;
  padding: 14px 16px 10px;
  overflow: hidden;
  color: var(--mw-blue);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nsu-main-revision .mw-notice-list {
  margin-top: 7px;
  padding: 6px 30px 6px 19px;
  background: var(--mw-panel);
}

.mw-notice-list li {
  position: relative;
  height: 64px;
}

.mw-notice-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 18px;
  width: 4px;
  height: 4px;
  background: #ecd898;
}

.mw-notice-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 29%;
  bottom: 0;
  left: 28px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    #ecd898 0 10px,
    transparent 10px 18px
  );
}

.mw-notice-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding-left: 18px;
}

.mw-notice-list span {
  overflow: hidden;
  color: #222;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-notice-list time {
  color: var(--mw-blue);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.mw-section a:focus-visible {
  outline: 3px solid rgb(7 88 168 / 35%);
  outline-offset: 3px;
}

/* 独立预览页外壳，不复制到原站也不会影响业务组件。 */
.mw-demo-page {
  margin: 0;
  min-width: 320px;
  background: #fff;
}

@media (max-width: 1260px) {
  .mw-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 42px;
    width: min(1120px, calc(100% - 48px));
  }

  .mw-focus-card h3 { font-size: 18px; }
  .mw-character-panel { grid-template-columns: 52% 48%; }
  .mw-general-list a { font-size: 17px; }
  .mw-media-grid { gap: 36px 24px; }
  .mw-media-card h3 { font-size: 16px; }
}

@media (max-width: 900px) {
  .nsu-main-revision { padding: 38px 0 52px; }

  .mw-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "focus"
      "general"
      "characters"
      "media"
      "notices";
    row-gap: 48px;
    width: min(720px, calc(100% - 36px));
  }

  .mw-section-head h2 { font-size: 28px; }
  .mw-section-head p { font-size: 18px; }
  .mw-more-dot { margin-left: 28px; }
  .mw-general-list li { height: 84px; }
  .mw-general-list a { font-size: 17px; }
}

@media (max-width: 600px) {
  .nsu-main-revision { padding-top: 28px; }
  .mw-layout { width: calc(100% - 28px); row-gap: 40px; }
  .mw-section-head { min-height: 61px; }
  .mw-section-head h2 { font-size: 25px; }
  .mw-section-head p { font-size: 16px; }
  .mw-more-dot { width: 28px; height: 28px; margin-left: 20px; }

  .mw-focus-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 12px; }
  .mw-focus-card h3 { min-height: 0; padding: 15px; font-size: 18px; }

  .mw-general-list li { height: auto; min-height: 80px; }
  .mw-general-list a {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 10px;
    padding: 14px 0;
    font-size: 16px;
  }
  .mw-general-list span { white-space: normal; }
  .mw-general-list time { font-size: 13px; }

  .mw-character-panel { grid-template-columns: 1fr; height: auto; }
  .mw-character-photo { aspect-ratio: 434 / 269; }
  .mw-character-list li { height: auto; min-height: 84px; }

  .mw-media-grid { gap: 24px 14px; }
  .mw-media-card h3 { min-height: 78px; padding: 10px; font-size: 14px; }

  .nsu-main-revision .mw-notice-list { padding-inline: 12px; }
  .mw-notice-list li:not(:last-child)::before { left: 12px; }
  .mw-notice-list li:not(:last-child)::after { right: 0; left: 22px; }
  .mw-notice-list li { height: auto; min-height: 68px; }
  .mw-notice-list a { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; padding: 12px 0 12px 12px; }
  .mw-notice-list span { font-size: 15px; white-space: normal; }
  .mw-notice-list time { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .nsu-main-revision *,
  .nsu-main-revision *::before,
  .nsu-main-revision *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .nsu-main-revision .mw-card-media img,
  .nsu-main-revision .mw-character-photo img {
    transition-duration: .3s !important;
  }
}