/**
 * 金十数据 - 重要事件 - 主题样式
 * 定义亮色和暗色两套主题颜色变量
 */

/* ==================== 字体声明 ==================== */
@font-face {
  font-family: 'D-DIN-PRO-JIN10-SemiBold';
  src: url("https://jfonts.jin10.com/assets/fonts/newsite/Open_Sans/static/D-DIN-PRO-JIN10-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==================== CSS Variables 定义 ==================== */
:root {
  /* 亮色主题 (Light) */
  --bg-page: #F8FAFF;
  --bg-card: #FFFFFF;
  --bg-comment: #F5F5F5;
  --app-nav-bg: #FFFFFF;
  --app-status-bar-height: 0px;
  --extra-safe-area-height: 0px;
  --app-safe-area-top: min(env(safe-area-inset-top, 0px), 24px);
  --app-safe-area-bottom: env(safe-area-inset-bottom, 0px);

  --text-primary: rgba(0, 0, 0, 0.9);
  --text-content: rgba(0, 0, 0, 0.8);
  --text-secondary: rgba(0, 0, 0, 0.5);
  --text-secondary-low: rgba(0, 0, 0, 0.2);
  --text-comment: rgba(0, 0, 0, 0.7);

  --color-primary: #5A82E6;
  --color-important: #E14454;
  --color-hot-2: #FF7F3A;
  --color-hot-3: #FF594D;
  --color-hot-4: #E24034;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* 边框色 */
  --border-avatar: #FFFFFF;
  --outline-color: rgba(0,0,0,0.1)
}

/* 暗色主题 (Dark) */
.dark {
  --bg-page: #2C2F37;
  --bg-card: #1C1C1D;
  --bg-comment: #262626;
  --app-nav-bg: #1C1C1D;
  --app-safe-area-top: min(env(safe-area-inset-top, 0px), 24px);
  --app-safe-area-bottom: env(safe-area-inset-bottom, 0px);

  --text-primary: rgba(255, 255, 255, 0.8);
  --text-content: rgba(255, 255, 255, 0.7);
  --text-secondary: rgba(255, 255, 255, 0.3);
  --text-secondary-low: rgba(255, 255, 255, 0.2);
  --text-comment: rgba(255, 255, 255, 0.7);

  --color-primary: #4267C2;
  --color-important: #E02D48;
  --color-hot-2: #E57234;
  --color-hot-3: #E55045;
  --color-hot-4: rgba(226, 64, 52, 0.9);

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);

  --border-avatar: #1C1C1D;
  --outline-color: rgba(255,255,255,0.1)
}

/* ==================== 基础样式重置 ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 原生APP样式：禁用点击高亮、文本选择、长按菜单 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html {
  font-size: 16px;
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-content);
  width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* ==================== 页面布局 ==================== */
.app-custom-nav {
  --app-nav-foreground: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: max(env(safe-area-inset-top, 0px), var(--app-status-bar-height, 0px));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  display: flex;
  flex-direction: column;
}

.app-custom-nav.scrolled {
  --app-nav-foreground: var(--text-primary);
  background: var(--app-nav-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 0.5px solid var(--outline-color);
}

.app-custom-nav[hidden] {
  display: none !important;
}

body.is-app-webview .app-custom-nav {
  display: block;
}

.app-custom-nav__inner {
  width: 100%;
  max-width: 1200px;
  height: 44px;
  margin: 0 auto;
  padding: 0 8px 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.app-custom-nav__back {
  width: 32px;
  height: 44px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--app-nav-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.app-custom-nav__back:active {
  opacity: 0.68;
}

.app-custom-nav__back-icon {
  width: 32px;
  height: 32px;
  display: block;
  background-color: currentColor;
  mask-image: url('../img/arrow-left.7ff56525.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('../img/arrow-left.7ff56525.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.app-custom-nav__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--app-nav-foreground);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.app-custom-nav.scrolled .app-custom-nav__title {
  opacity: 1;
}

.app-custom-nav__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.app-custom-nav__action {
  width: 44px;
  height: 44px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-custom-nav__action:active {
  opacity: 0.68;
}

.app-custom-nav__action svg {
  width: 20px;
  height: 20px;
}

.page-container {
  position: relative;
  padding-top: 42vw;
  min-height: 100vh;
  background-color: var(--bg-page);
}

/* 顶部背景图 */
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  overflow: hidden;
  padding-top: var(--extra-safe-area-height, 0px);
  /* 移动端亮色模式默认背景 */
  background: linear-gradient(180deg, #BBD5F4 41%, #FFFFFF 68%, rgba(255, 255, 255, 0) 100%);
}

/* 头部背景区域 */
.header-bg-area {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 12 / 5;
  height: auto;
  margin: 0 auto;
  position: relative;
}

/* 顶部背景图片 */
.header-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* 移动端暗色模式背景 */
.page-container.dark .header-bg {
  background: linear-gradient(180deg, #152F4F 43%, #16273B 68%, rgba(0, 0, 0, 0) 100%);
}

/* 顶部背景图片 */
.header-bg-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* 移动端亮色模式图片 */
.header-bg-img {
  content: url('../img/jin10_important_news/header-bg-light.107424f3.png');
}

/* 移动端暗色模式图片 */
.page-container.dark .header-bg-img {
  content: url('../img/jin10_important_news/header-bg-dark.8fd75153.png');
}

/* Logo 区域 */
.logo-area {
  position: absolute;
  display: block;
  top: 7.7294686vw;
  left: 7.7294686vw;
  display: flex;
  align-items: center;
  gap: 2.89855vw;
  gap: min(12px, 2.89855vw);
  text-decoration: none;
  z-index: 3;
}

/* 品牌 Logo */
.brand-logo {
  width: 28.9855vw;
  max-width: 160px;
  min-width: 110px;
  aspect-ratio: 120 / 32;
  height: auto;
}

/* 返回首页链接 */
.back-home {
  font-size: 15px;
  color: var(--text-secondary);
}

/* 水波纹动画容器 */
.ripple-container {
  position: absolute;
  left: 23vw;
  top: -17vw;
  width: 100vw;
  height: 100vw;
  pointer-events: none;
}

/* 水波纹圆圈 */
.ripple {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
  margin: auto;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  box-shadow: inset 0px 1vw 2.5vw 0px #FFFFFF;
  animation: ripple-animation 30s linear infinite;
  z-index: 1;
}

.ripple:nth-child(1) {
  animation-delay: -20s;
}

.ripple:nth-child(2) {
  animation-delay: -10s;
}

.ripple:nth-child(3) {
  animation-delay: 0s;
}

/* 水波纹动画关键帧 */
@keyframes ripple-animation {
 0% {
   width: 20%;
   height: 20%;
   opacity: 0;
 }
 50% {
   opacity: var(--ripple-mid-opacity, 0.5);
 }
 100% {
   width: 100%;
   height: 100%;
   opacity: 0;
 }
}

/* 暗色模式水波纹透明度 */
.dark .ripple {
  --ripple-mid-opacity: 0.16;
}

/* 内容区域 */
.content-wrapper {
  position: relative;
  z-index: 1;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-top: var(--extra-safe-area-height, 0px);
}

.events-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==================== 重要事件卡片样式 ==================== */
.event-card {
  background-color: var(--bg-card);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
}

.card-main {
  text-decoration: none !important;
  color: inherit !important;
  -webkit-touch-callout: none !important;
  pointer-events: auto;
}

.card-main[data-jump-url],
.news-image[data-jump-url] {
  cursor: pointer;
}

.card-main[data-jump-url]:focus-visible,
.news-image[data-jump-url]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 卡片头部：序号 + 时间 + 讨论人数 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  margin-bottom: 10px;
}

.header-left {
  display: flex;
  align-items: flex-end;
}

.event-index {
  font-family: 'D-DIN-PRO-JIN10-SemiBold', 'D-DIN-PRO-JIN10', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 28px;
  color: var(--text-secondary-low);
}

.event-index.index-1 { color: var(--color-hot-4); }
.event-index.index-2 { color: var(--color-hot-3); }
.event-index.index-3 { color: var(--color-hot-2); }

.event-time {
  font-family: 'D-DIN-PRO-JIN10-SemiBold', 'D-DIN-PRO-JIN10', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary-low);
  margin-left: 7px;
  margin-bottom: 2px;
}

.time-divider {
  width: 1px;
  height: 12px;
  background-color: var(--text-secondary-low);
  margin-left: 8px;
  margin-bottom: 4px;
  transform: skew(-15deg);
}

/* 讨论人数 */
.discussion-info {
  display: flex;
  align-items: center;
  position: relative;
}

.avatar-stack {
  display: flex;
  margin-right: -6px;
}

.avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-avatar);
  margin-left: -6px;
  object-fit: cover;
  box-sizing: content-box;
}

.avatar:first-child {
  margin-left: 0;
}

.discussion-tag {
  display: flex;
  align-items: center;
  height: 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  padding-left: 10px;
}

.discussion-tag.important {
  color: var(--color-important);
}

.discussion-tag.normal {
  color: var(--text-secondary);
}

/* 卡片标题 */
.card-title {
  font-family: Source Han Serif CN;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 24px;
  margin-bottom: 7px;
}

/* 卡片正文 */
.card-content {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}

/* 无标题时正文颜色正常 */
.card-content.no-title {
  color: var(--text-content);
}

/* 新闻图片 */
.news-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  display: block;
  overflow: hidden;
  -webkit-touch-callout: none !important;
}

.news-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dark .news-image {
  opacity: 0.8;
}

/* 只有左上、右上有圆角（下方有精选评论时） */
.news-image.top-radius-only {
  border-radius: 2px 2px 0 0;
}

/* 精选评论 */
.featured-comment {
  background-color: var(--bg-comment);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  position: relative;
  border-radius: 2px;
}

/* 只有左下、右下有圆角（上方有新闻图片时） */
.featured-comment.bottom-radius-only {
  border-radius: 0 0 2px 2px;
}

.featured-comment::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 19px;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--bg-comment);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 150px;
  object-fit: cover;
}

.comment-name {
  font-size: 14px;
  color: var(--text-secondary);
}

.comment-likes {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  height: 24px;
  overflow: hidden;
}

.comment-likes.animating {
    overflow: visible;
}

.comment-likes.active {
  color: var(--color-primary);
}

/* Lottie 点赞动画容器 */
.lottie-like-container {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -64px;
  margin-top: -2px;
}

.lottie-like-container svg {
  width: 100% !important;
  height: 100% !important;
}

/* 点赞数量 */
.likes-count {
  font-family: PingFang SC;
  font-weight: 600;
  margin-left: 2px;
}

.comment-text {
  font-size: 15px;
  color: var(--text-comment);
  line-height: 24px;
}

/* ==================== 主题切换按钮 ==================== */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

.sun-icon, .moon-icon {
  display: none;
}

/* 暗色主题：显示太阳图标（用于切换到亮色） */
.page-container.dark .sun-icon {
  display: block;
}

.page-container.dark .moon-icon {
  display: none;
}

/* 亮色主题：显示月亮图标（用于切换到暗色） */
.page-container:not(.dark) .sun-icon {
  display: none;
}

.page-container:not(.dark) .moon-icon {
  display: block;
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 414px) {
  .events-container {
    padding: 0;
  }
}

/* PC 端适配：>= 768px */
@media (min-width: 768px) {

  .page-container {
    padding-top: clamp(120px, 20vw, 240px);
  }
  
/* PC端亮色模式背景 */
  .header-bg {
    background: linear-gradient(180deg, #BBD5F4 0%, #F8FAFF 47%, rgba(248, 250, 255, 0) 100%);
    padding: 0 16px;
    box-sizing: border-box;
  }

  /* PC端暗色模式背景 */
  .page-container.dark .header-bg {
    background: linear-gradient(180deg, #102743 0%, #111111 47%, rgba(17, 17, 17, 0) 100%);
  }

  /* PC端图片 */
  .header-bg-img {
    width: 100%;
    height: 100%;
    content: url('../img/jin10_important_news/header-bg-light-big.f168fd71.png');
  }

  /* PC端暗色模式图片 */
  .page-container.dark .header-bg-img {
    content: url('../img/jin10_important_news/header-bg-dark-big.d4494c0a.png');
  }

  .logo-area {
    top: min(39px, 3.25vw);
    left: 0;
    gap: 12px;
  }

  .brand-logo {
    width: 10vw;
    max-width: 120px;
    min-width: 100px;
    height: auto;
  }

  .ripple-container {
    left: 59%;
    top: max(-7vw, -84px);
    width: min(50vw, 600px);
    height: min(50vw, 600px);
  }

  .events-container {
    gap: 0;
    max-width: 1200px;
    padding: 0 24px;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border-radius: 8px;
  }
  /* 事件卡片：固定高度，水平布局 */
  .event-card {
    height: 164px;
    flex-direction: row;
    padding: 24px 0;
    gap: 12px;
    box-shadow: unset;
    border-radius: unset;
    position: relative;
    background-color: transparent;
  }

  .event-card::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--outline-color);
    transform: scaleY(0.5);
  }

  /* 左侧主体区域 - 保持在最左边（默认 order: 0） */
  .card-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    order: 0;
  }

  .card-main:hover .event-index:not(.index-1):not(.index-2):not(.index-3) {
    color: var(--color-primary);
  }


  .card-main:hover .event-time {
    color: var(--text-secondary);
  }

  .card-main:hover .time-divider {
    background-color: var(--text-secondary);
  }

  .card-main:hover .card-title {
    color: var(--color-primary);
  }

  .event-card:nth-child(1) .card-main:hover .card-title {
    color: var(--color-hot-4);
  }

  .event-card:nth-child(2) .card-main:hover .card-title {
    color: var(--color-hot-3);
  }

  .event-card:nth-child(3) .card-main:hover .card-title {
    color: var(--color-hot-2);
  }

  .card-header {
    margin-bottom: 7px;
  }

  /* PC 端有精选评论时显示箭头 */
  .event-card:has(.featured-comment) .discussion-info:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -12px;
    width: 0;
    height: 0;
    margin: auto;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--bg-comment);
  }

  .card-content {
    margin-bottom: 0;
  }

  /* 精选评论：固定宽度，始终圆角，放在中间 */
  .featured-comment {
    width: 205px;
    height: 100%;
    flex-shrink: 0;
    border-radius: 2px !important;
    padding: 12px;
    gap: 12px;
    order: 1;
  }

  .featured-comment::before {
    display: none;
  }

  .comment-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 评论文字为3行时的样式 */
  .comment-text.three-lines {
    font-size: 13px;
    line-height: 18px;
  }

  /* 新闻图片：固定宽度，始终圆角，放在右边 */
  .news-image {
    width: 206px;
    height: 100%;
    aspect-ratio: auto;
    flex-shrink: 0;
    border-radius: 2px !important;
    object-fit: cover;
    order: 2;
  }

  /* 移除移动端的圆角处理类（PC端不需要） */
  .news-image.top-radius-only {
    border-radius: 2px;
  }

  .featured-comment.bottom-radius-only {
    border-radius: 2px;
  }
}


/* 移动端适配：< 768px - card-main 在上，news-image 在中，featured-comment 在下 */
@media (max-width: 767px) {
  .event-card {
    flex-direction: column;
  }

  /* 左侧主体区域 - 在最上面 */
  .card-main {
    order: 0;
  }

  /* 新闻图片 - 在中间 */
  .news-image {
    order: 1;
  }

  /* 精选评论 - 在底部 */
  .featured-comment {
    order: 2;
  }
}