@import url("./yygk.css");

.page-party {
  background: #fff;
}

.party {
  padding-bottom: calc(72 * var(--design-unit));
}

.party-hero {
  position: relative;
  margin-top: calc(36 * var(--design-unit));
  padding: calc(28 * var(--design-unit)) calc(28 * var(--design-unit)) calc(20 * var(--design-unit));
  overflow: hidden;
}

.party-hero__bg {
  position: absolute;
  top: calc(-40 * var(--design-unit));
  right: calc(-80 * var(--design-unit));
  width: calc(520 * var(--design-unit));
  height: auto;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}

.party-hero__dove {
  position: absolute;
  left: calc(-8 * var(--design-unit));
  top: calc(8 * var(--design-unit));
  width: calc(140 * var(--design-unit));
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .92;
}

.party-hero__row,
.party-hero__slogan {
  position: relative;
  z-index: 1;
}

.party-hero__row {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--design-unit));
}

.party-hero__media {
  position: relative;
  flex: 0 0 calc(330 * var(--design-unit));
  width: calc(330 * var(--design-unit));
  overflow: hidden;
  box-shadow: 0 calc(10 * var(--design-unit)) calc(24 * var(--design-unit)) rgba(120, 18, 22, .18);
}

.party-hero__media > img {
  display: block;
  width: 100%;
  aspect-ratio: 330 / 250;
  object-fit: cover;
}

.party-hero__media > span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: calc(12 * var(--design-unit)) calc(16 * var(--design-unit));
  color: #fff;
  font-size: calc(18 * var(--design-unit));
  line-height: 1.35;
  background: rgba(0, 0, 0, .55);
}

.party-hero__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: calc(36 * var(--design-unit));
  height: calc(36 * var(--design-unit));
  margin-top: calc(-18 * var(--design-unit));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  cursor: pointer;
}

.party-hero__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(10 * var(--design-unit));
  height: calc(10 * var(--design-unit));
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.party-hero__nav--prev {
  left: calc(8 * var(--design-unit));
}

.party-hero__nav--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.party-hero__nav--next {
  right: calc(8 * var(--design-unit));
}

.party-hero__nav--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.party-work {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  background: #fff;
  box-shadow: 0 calc(10 * var(--design-unit)) calc(24 * var(--design-unit)) rgba(120, 18, 22, .14);
}

.party-work h3 {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--design-unit));
  margin: 0;
  padding: calc(14 * var(--design-unit)) calc(18 * var(--design-unit));
  color: #fff;
  font-size: calc(24 * var(--design-unit));
  font-weight: 700;
  line-height: 1;
  background: #df0912;
}

.party-work h3 img {
  width: calc(28 * var(--design-unit));
  height: calc(20 * var(--design-unit));
  object-fit: contain;
}

.party-work ul {
  margin: 0;
  padding: calc(6 * var(--design-unit)) calc(16 * var(--design-unit)) calc(12 * var(--design-unit));
  list-style: none;
}

.party-work li {
  display: grid;
  grid-template-columns: calc(78 * var(--design-unit)) 1fr;
  gap: calc(12 * var(--design-unit));
  align-items: start;
  padding: calc(12 * var(--design-unit)) 0;
  border-bottom: 1px solid #f0d5d6;
}

.party-work li:last-child {
  border-bottom: 0;
}

.party-work time {
  color: #e11822;
  font-size: calc(20 * var(--design-unit));
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
}

.party-work p {
  margin: 0;
  color: #333;
  font-size: calc(20 * var(--design-unit));
  line-height: 1.45;
}

.party-hero__slogan {
  display: block;
  margin-top: calc(42 * var(--design-unit));
  color: #df0912;
  font-size: calc(28 * var(--design-unit));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .02em;
}

.party-article {
  position: relative;
  width: 100%;
  margin-top: calc(36 * var(--design-unit));
  /* 右侧不留内边距，让白色内容贴页边延伸出去 */
  padding: calc(36 * var(--design-unit)) 0 calc(78 * var(--design-unit)) calc(18 * var(--design-unit));
  background: transparent;
  overflow: visible;
}

/* 红底不全宽：右侧留白，白色卡片可伸出红底贴右边缘 */
.party-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% - 56 * var(--design-unit));
  background: linear-gradient(180deg, #d91d27 0%, #b50e17 100%);
  z-index: 0;
  pointer-events: none;
}

.party-article__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(236 * var(--design-unit)) minmax(0, 1fr);
  gap: calc(10 * var(--design-unit));
  align-items: stretch;
}

.party-article__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(16 * var(--design-unit));
  padding: calc(18 * var(--design-unit)) calc(8 * var(--design-unit)) calc(18 * var(--design-unit)) calc(18 * var(--design-unit));
}

.party-article__aside::before {
  content: "";
  position: absolute;
  left: calc(6 * var(--design-unit));
  top: calc(28 * var(--design-unit));
  bottom: calc(28 * var(--design-unit));
  width: 1px;
  background: rgba(255, 255, 255, .78);
  pointer-events: none;
}

.party-article__aside a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(58 * var(--design-unit));
  padding: calc(10 * var(--design-unit)) calc(14 * var(--design-unit));
  border: 0;
  border-radius: 0;
  color: #fff;
  font-size: calc(18 * var(--design-unit));
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  background: transparent;
}

.party-article__aside .is-active {
  z-index: 2;
  color: #e11822;
  background: #fff;
  border-radius: calc(999 * var(--design-unit));
}

.party-article__panels {
  min-width: 0;
  display: flex;
}

.party-article__content {
  flex: 1;
  min-height: calc(520 * var(--design-unit));
  padding: calc(28 * var(--design-unit)) calc(30 * var(--design-unit)) calc(30 * var(--design-unit)) calc(28 * var(--design-unit));
  /* 仅左侧圆角，右侧贴齐页面边缘伸出红底 */
  border-radius: calc(40 * var(--design-unit)) 0 0 calc(40 * var(--design-unit));
  color: #2f2f2f;
  font-size: calc(22 * var(--design-unit));
  line-height: 1.85;
  text-align: justify;
  background: #fff;
}

.party-article__content.is-active {
  border: 1px solid #d91d27;
  border-right: 0;
  box-shadow:
    calc(10 * var(--design-unit)) 0 calc(22 * var(--design-unit)) rgba(185, 14, 23, .28),
    0 calc(6 * var(--design-unit)) calc(18 * var(--design-unit)) rgba(185, 14, 23, .16);
}

.party-article__content[hidden] {
  display: none;
}

.party-article__content p {
  margin: 0;
}

.party-article__content p + p {
  margin-top: calc(16 * var(--design-unit));
}

.party-article__cityline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 56 * var(--design-unit));
  height: auto;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 375px) {
  .party-hero__row {
    gap: calc(12 * var(--design-unit));
  }

  .party-hero__media {
    flex-basis: calc(300 * var(--design-unit));
    width: calc(300 * var(--design-unit));
  }

  .party-article::before,
  .party-article__cityline {
    width: calc(100% - 40 * var(--design-unit));
  }

  .party-article__body {
    grid-template-columns: calc(210 * var(--design-unit)) minmax(0, 1fr);
  }
}

@media (max-width: 340px) {
  .party-hero__row {
    flex-direction: column;
  }

  .party-hero__media,
  .party-work {
    width: 100%;
    flex-basis: auto;
  }

  .party-work {
    margin-top: 0;
  }

  .party-article::before,
  .party-article__cityline {
    width: calc(100% - 24 * var(--design-unit));
  }

  .party-article__body {
    grid-template-columns: 1fr;
    padding-right: calc(24 * var(--design-unit));
  }

  .party-article__aside::before {
    display: none;
  }

  .party-article__content {
    min-height: 0;
    border-radius: calc(24 * var(--design-unit));
  }
}