/* ========== 内页 Banner 右侧二级菜单（可复用） ========== */
:root {
  --section-subnav-active-bg: rgb(60, 79, 94);
  --section-subnav-inactive-bg: rgb(220, 220, 220);
  --section-subnav-inactive-text: rgb(89, 87, 87);
  --section-subnav-arrow: 8px;
  --section-banner-extra: 80px;
  --section-banner-height-min: 260px;
  --section-banner-height-vw: 40vw;
  --section-banner-height-max: 520px;
  --section-subnav-right-inset: calc(var(--section-banner-extra) / 2);
  /* 单行高度：与 .section-subnav__link 的 padding + line-height 一致 */
  --section-subnav-row: calc(16px * 2 + 1.35 * 18px);
}

.section-banner--subnav {
  padding: 28px 0 0;
  background: #fff;
}

.section-banner__box {
  position: relative;
  width: min(calc(85% + var(--section-banner-extra)), calc(100% - 2 * var(--container-gutter) + var(--section-banner-extra)));
  max-width: calc(var(--container-width) + var(--section-banner-extra));
  margin-left: auto;
  margin-right: auto;
}

.section-banner__inner {
  position: relative;
  overflow: visible;
}

.section-banner__img {
  display: block;
  width: 100%;
  height: clamp(var(--section-banner-height-min), var(--section-banner-height-vw), var(--section-banner-height-max));
  object-fit: cover;
  border-radius: 2px;
  background: #e8eaed;
}

/* 整列菜单一体定位：首项压在图底，其余项自然下垂到图外 */
.section-subnav--stack {
  position: absolute;
  right: var(--section-subnav-right-inset);
  top: calc(100% - var(--section-subnav-row));
  z-index: 2;
  margin: 0;
}

.section-subnav__list {
  margin: 0 0 0 var(--section-subnav-arrow);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.section-subnav__item {
  display: block;
  margin: 0;
  padding: 0;
}

.section-subnav__link {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-width: 180px;
  margin: 0;
  padding: 16px 40px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--section-subnav-inactive-text);
  background: var(--section-subnav-inactive-bg);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.section-subnav__link:hover,
.section-subnav__link.is-active {
  color: #fff;
  background: var(--section-subnav-active-bg);
}

.section-subnav__item:nth-child(n + 2) {
  background: var(--section-subnav-inactive-bg);
}

.section-subnav__item:nth-child(n + 2) .section-subnav__link {
  background: transparent;
}

.section-subnav__item:nth-child(n + 2) .section-subnav__link:hover,
.section-subnav__item:nth-child(n + 2) .section-subnav__link.is-active {
  background: var(--section-subnav-active-bg);
}

.section-subnav__item:first-child .section-subnav__link::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--section-subnav-arrow));
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: var(--section-subnav-arrow) solid transparent;
  border-bottom: var(--section-subnav-arrow) solid transparent;
  border-right: var(--section-subnav-arrow) solid var(--section-subnav-inactive-bg);
  transition: border-color 0.25s ease;
}

.section-subnav__item:first-child .section-subnav__link:hover::before,
.section-subnav__item:first-child .section-subnav__link.is-active::before {
  border-right-color: var(--section-subnav-active-bg);
}

@media (min-width: 1025px) {
  :root {
    --section-subnav-row: calc(18px * 2 + 1.35 * 19px);
  }

  .section-subnav__link {
    min-width: 200px;
    padding: 18px 48px;
    font-size: 19px;
  }
}

@media (max-width: 1024px) {
  .section-banner__box {
    width: calc(100% - 2 * var(--container-gutter) + var(--section-banner-extra));
    max-width: calc(var(--container-width) + var(--section-banner-extra));
  }
}

@media (max-width: 768px) {
  .section-banner--subnav {
    padding-top: 16px;
  }

  .section-subnav--stack {
    display: none;
  }
}