/* 新闻卡片组件 - 频道页与首页复用 */

/* 卡片基础结构 */
.news-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, var(--news-card-media-ratio, 0.8fr)) minmax(0, 1fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
  text-align: left;
  transition: box-shadow 0.2s ease;
  border: none;
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-white);
  box-shadow: var(--news-card-shadow-rest, var(--ui-shadow-elevated));
  height: 100%;
  min-height: 0;
}

/* 卡片悬停和键盘导航时提升阴影层次 */
.news-card:hover {
  box-shadow: var(--ui-shadow-soft);
}

.news-card:has(:focus-visible) {
  box-shadow: var(--ui-shadow-soft);
}

/* 整卡链接覆盖层 用于无按钮模式 */
.news-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.news-card__link:focus-visible {
  outline: 2px solid var(--ui-color-brand-blue);
  outline-offset: -4px;
}

/* 媒体区域 */
.news-card__media {
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 无图时的占位符背景 */
.news-card__media--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d7efff 0%, #eef8ff 100%);
}

/* 内容区域 */
.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  justify-content: flex-start;
}

/* 元信息行容器 标签与日期横向排列 */
.news-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* 分类标签 News 或 Event */
.news-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  border-radius: 10px 0 10px 0;
  background: #E2F2FF;
  color: var(--ui-color-brand-blue);
  font-size: var(--font-body-sm);
  font-weight: 400;
}

.news-card__tag[data-news-tag-type='news'] {
  background: #E2F2FF;
  color: var(--ui-color-brand-blue);
}

.news-card__tag[data-news-tag-type='event'] {
  background: #FFEFDC;
  color: var(--ui-color-brand-orange);
}

/* 日期或元信息文字 */
.news-card__meta {
  font-size: var(--font-body-md);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ui-color-text-default);
}

/* 标题样式 */
.news-card .ui-title {
  margin: 0;
  color: var(--ui-text-strong);
}

.news-card .ui-title--sm {
  font-size: var(--font-title-sm);
  line-height: 1.25;
}

/* 正文样式 */
.news-card .ui-text {
  color: var(--ui-text-body);
  font-size: var(--font-body-lg);
  line-height: 1.4;
}

/* 正文区占满余量并渐隐 */
.news-card__body .ui-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* 底部渐隐层避免文字截断感 */
.news-card__body .ui-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2.8em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ui-color-white) 100%);
  pointer-events: none;
}

/* 底部按钮 压过整卡链接 */
.news-card__action {
  position: relative;
  z-index: 4;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
}

/* 按钮反相橙色风格 用于频道页 */
.news-card__action.ui-button--secondary {
  font-size: var(--font-title-sm);
  border-color: var(--ui-color-brand-orange);
  background: var(--ui-color-brand-orange);
  color: var(--ui-color-brand-orange-surface);
}

.news-card__action.ui-button--secondary:hover,
.news-card__action.ui-button--secondary:focus-visible {
  border-color: var(--ui-color-brand-orange-strong);
  background: var(--ui-color-brand-orange-strong);
  color: var(--ui-color-brand-orange-surface);
}

.news-card__action.ui-button--secondary:active {
  border-color: var(--ui-color-brand-orange);
  background: #f7ae53;
  color: rgba(255, 247, 238, 0.88);
}

/* 修饰符：隐藏按钮 用于首页整卡点击模式 */
.news-card--without-action .news-card__action {
  display: none;
}

/* 修饰符：固定宽高比 用于频道页统一卡片尺寸 */
.news-card--aspect-fixed {
  aspect-ratio: 8 / 9;
}

/* 移动端适配 */
@media (max-width: 1199.98px) {
    
  .news-card__body .ui-text {
    min-height: 2.8em;
    max-height: 5.8em;
  }

  .news-card__body .ui-text::after {
    height: 1.2em;
  }
}