/* ==================== About Page (about.html) ==================== */
.about-page {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  background: #000;
  color: #fff;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-page.light-theme {
  background: var(--bg-light);
  color: var(--text-light);
}

.slide {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px;
  background: center/cover no-repeat;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: none;
}

/* Slides 2, 4, 6 (indices 1, 3, 5) have green background */
#about-page-content .slide:nth-child(even) {
  background-color: var(--green);
  background-image: none !important;
}

/* Content Slide */
.slide-content {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
}

.slide-top {
  justify-content: flex-start !important;
  padding-top: 8%;
}

.slide-content-top {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
}


.slide-content h1 {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  margin-bottom: 10px;
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
}

.slide-content p {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
}

/* Content_1 样式 */
.slide-content-1 {
  margin: 0 auto;
  margin-left: 14%;
  text-align: left;
}

.slide-content-1 h1 {
  white-space: nowrap;
  overflow: visible;
  font-size: 4.9vw;
  font-weight: 800;
  margin-bottom: 1vw;
  line-height: 1.2;
}

.slide-content-1 p {
  white-space: nowrap;
  overflow: visible;
  font-size: 1.7vw;
  font-weight: 800;
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
}

/* Content_2 样式 */
.slide-content-2 {
  max-width: 80%;
  text-align: center;
}

.slide-content-2 h1 {
  margin-top: -1vw;
  white-space: nowrap; 
  overflow: visible;
  font-size: 5vw;
  font-weight: 800;
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
}

.slide-content-2 p {
  white-space: nowrap;
  overflow: visible;
  font-size: 3vw;
  font-weight: 800;
  margin-top: -1%;
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
}

/* Split Slide */
.slide-split {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;        /* 至少占满视口高度，保证图片可见区域 */
  overflow: hidden;         /* 防止内容溢出 */
}

.slide-split .media-area {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slide-split .media-area img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.slide-split .split-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.slide-split .split-media {
  flex: 0 0 auto;
  margin-right: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: visible;
}

.slide-split .split-media img {
  width: 40vw;
  object-fit: contain;
  pointer-events: none;
}

.slide-split .text-area {
  flex: 0 0 auto;
  color: #fff;
  text-align: right;
  margin-right: 5%;
}

.light-theme .slide-split .text-area {
  color: #333;
}

.slide-split .text-area h2 {
  font-size: 4.7vw;
  font-weight: 900;
  margin-bottom: -5vw;
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  color: inherit;
}


/* Cards Slide */
.slide-cards {
  background: center/cover;
}

.slide-cards-title {
  white-space: nowrap;
  overflow: visible;
  margin-top: -6vh;
  margin-bottom: 10vh;
  text-align: center;
}

.slide-cards-title .font-tall {
  font-size: 5vw;
  font-weight: 900;
  line-height: var(--heading-lh);
  letter-spacing: 0.001em;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 70vw;
}


.card-item {
  position: relative;
  z-index: 1;
  text-align: center;
  transition: transform 0.3s ease;
}

.card-item:hover {
  transform: scale(1.35);
  z-index: 10;
}

.card-item .card-image {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  transform-origin: center;
  cursor: pointer;
  aspect-ratio: 1/1;
  transition: box-shadow 0.3s ease;
  will-change: box-shadow;
}

.card-item:hover .card-image {
  box-shadow: 
    calc(-1 * clamp(20px, 3vw, 60px))   /* 水平偏移：负值，范围20~60px */
    clamp(20px, 3vw, 60px)              /* 垂直偏移：正值 */
    clamp(20px, 3vw, 60px)              /* 模糊半径 */
    0px                                 /* 扩散半径 */
    rgba(0, 0, 0, 0.5);
}

.card-item .card-image img {
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
}

.card-item:hover .card-image img {
  filter: brightness(0.4);
}

.card-item .card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5vw;
  font-weight: 600;
  letter-spacing: var(--body-ls);
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  /*padding: 5vw;*/
  line-height: var(--body-lh);
}

.card-item:hover .card-overlay {
  opacity: 1;
}

.card-item .card-caption {
  color: #fff;
  margin-top: 1vw;
  font-size: 1.5vw;
  font-weight: 600;
  letter-spacing: var(--body-ls);
  line-height: var(--body-lh);
}

/* News Slide */
.slide-news {
  justify-content: flex-start;
  padding: 5%;
  background: fill;
  position: relative;
  overflow: hidden;
}

/* 线条容器 — 相对于 news-list 定位 */
.news-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.news-lines .line {
  position: absolute;
  left: -3%;
  right: 0;
  height: 0.1vh;
  background: #60c0b7;
  display: none;
  /* top 由 JS 动态设置 */
}

.news-header {
  width: 100%;
  max-width: 65%;
}

.news-header h2 {
  font-size: 5vw;
  font-weight: 900;
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  color: #61bcb3;
}

.news-list {
  position: relative;
  width: 65%;
  max-width: 65%;
  margin-top: 4vh;
}


/* 新闻项位置，由 CSS 控制 */
.news-list.has-2items .news-item:nth-of-type(2) { top: 29vh; } /*23+3+3*/

/* 线条位置，由 CSS 控制 */
.news-list.has-1item .line-1 { top: 0; display: block; }
.news-list.has-1item .line-2 { top: 29vh; display: block; }
.news-list.has-1item .line-3 { display: none; }

.news-list.has-2items .line-1 { top: 0vh; display: block; }
.news-list.has-2items .line-2 { top: 29vh; display: block; }
.news-list.has-2items .line-3 { top: 58vh; display: block; }

.news-item {
  overflow: hidden;
  cursor: pointer;
  display: flex;
  transition: transform 0.2s, box-shadow 0.2s;
  position: absolute;
  width: 85%;
  height: 23vh;
  margin-top: 3vh;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.news-item:hover {
  transform: scale(1.02);
}

.news-item .news-image {
  flex: 0 0 auto;
}

.news-item .news-image img {
  width: auto;
  height: 23vh;
}

.news-item .news-content {
  flex: 1;
  padding: 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

.news-item .news-content h3 {
  overflow: visible;
  font-size: 2.5vw;
  font-weight: 900;
  margin-bottom: 0%;
  margin-top: -2%;
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
}

.news-item .news-content .subtitle {
  overflow: visible;
  font-size: 1.5vw;
  font-weight: 900;
  margin-bottom: 2%;
  margin-top: -3%;
  line-height: var(--news-summary-lh);
  letter-spacing: var(--news-summary-ls);
  opacity: 0.8;
}

.news-item .news-content .summary {
  font-family: var(--font-normal);
  font-size: 0.9vw;
  font-weight: var(--font-normal-weight);
  line-height: 1.4;
  letter-spacing: var(--font-normal-ls);
}

/* News Pagination */
.news-pagination {
  display: flex;
  justify-content: center;
  gap: 2vw;
  margin-top: 65vh;
}

.news-pagination button {
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background: rgba(122, 113, 113, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.news-pagination button.active {
  border-color: #60c0b7;
  background: #60c0b7;
}

/* Contact Slide */
.slide-contact {
  background: center/cover;
  text-align: center;
}

.slide-contact h1 {
  white-space: nowrap;
  overflow: visible;
  font-size: 4.3vw;
  font-weight: 900;
  margin-bottom: 10vh;
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
}

.logo-wall-wrap {
  margin-bottom: 10vh;
  max-width: 80%;
  overflow: fill;
}

.logo-wall-img {
  width: 100%;
  height: auto;
  display: block;
}

.callout {
  white-space: nowrap;
  overflow: visible;
  font-size: 3vw;
  font-weight: 900;
  margin-bottom: 3vh;
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
}

.contact-info {
  white-space: nowrap;
  overflow: visible;
  font-size: 1.2vw;
  font-weight: 900;
  font-family: var(--font-normal);
  display: flex;
  justify-content: center;
  line-height: var(--news-summary-lh);
  letter-spacing: var(--news-summary-ls);
  gap: 0.4vw;
  text-align: center;
}

.contact-sep {
  opacity: 0.5;
}

.light-theme .slide-news {
  background-color: var(--bg-light);
}

.light-theme .slide-news h2 {
  color: #333;
}

.light-theme .news-item {
  background: transparent;
}

.light-theme .news-item .news-content h3,
.light-theme .news-item .news-content .date,
.light-theme .news-item .news-content .summary {
  color: #333;
}

/* ==================== News Modal ==================== */
.news-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(10px);
}

.news-modal-content img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: fill;
}

.news-modal-text {
  position: absolute;
  bottom: 30%;
  right: 15%;
  width: 30%;
  background: rgba(0, 0, 0, 0.4);
  padding: 3% 1.5% 1% 6%;
  color: #fff;
  text-align: right;
}

.news-modal-text h3 {
  font-size: 3vw;
  font-weight: 900;
  margin-top: -2vh;
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  color: #61bcb3;
}

.news-modal-text .subtitle {
  font-size: 1.5vw;
  font-weight: 900;
  margin-bottom: 1vh;
  margin-top: -1vh;
  line-height: var(--news-summary-lh);
  letter-spacing: var(--news-summary-ls);
  color: #61bcb3;
}

.news-modal-text p {
  font-size: 1.3vw;
  font-weight: 500;
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  margin-bottom: 3vh;
}

.news-modal-text a {
  font-size: 1.5vw;
  font-weight: 900;
  letter-spacing: var(--body-ls);
  color: #61bcb3;
}

.news-modal-close {
  position: absolute;
  top: 2%;
  right: 2%;
  width: clamp(20px,3vw,40px);
  height: clamp(20px,3vw,40px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  font-size: clamp(10px,1.5vw,20px);
}