/* 全局变量：品牌颜色、最大内容宽度和响应式留白。 */
:root {
  --page-background: #faf0f4;
  --vote-color: #b1003d;
  --footer-color: #639a91;
  --content-width: 1240px;
  --gutter: 16px;
}

/* 统一盒模型，让宽度包含内边距和边框。 */
* { box-sizing: border-box; }

/* 基础字体和页面背景，优先使用系统中文字体。 */
body {
  margin: 0;
  color: #171717;
  background: var(--page-background);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* 图片默认等比缩放，消除行内图片底部空隙。 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 交互元素继承字体与颜色；键盘焦点由下方规则单独保留。 */
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }

/* 键盘导航时显示清晰的焦点轮廓。 */
a:focus, button:focus {
  outline: 3px solid var(--footer-color);
  outline-offset: 5px;
}

/* 背景统一由 main 承载；照片尺寸和首排卡片位置使用同一组参数。 */
.page {
  --photo-width: 100vw;
  --photo-top: 120px;
  position: relative;
  isolation: isolate;
  background: var(--page-background);
}

/* 按原图比例缩放，避免背景随 main 的内容长度拉伸。 */
.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--photo-top) + var(--photo-width) * 1276 / 1920);
  pointer-events: none;
  background:
    linear-gradient(to bottom, white, transparent 30%, transparent 70%, var(--page-background)),
    url("../imgs/hero-desktop.jpg") center var(--photo-top) / var(--photo-width) auto no-repeat,
    white;
}

/* Logo、标题和图卡共用居中容器与响应式左右留白。 */
.topbar, .content {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

/* 原图中的手在约 70% 高度处结束；首排卡片从主体下方开始。 */
.hero {
  min-height: calc(var(--photo-top) + var(--photo-width) * 0.49 + 24px);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-top: clamp(24px, 3.5vw, 48px);
  padding-bottom: 32px;
}

.content {
  position: relative;
  margin-top: 0;
}

/* 顶部双 Logo 分居两侧。 */
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Logo 尺寸通过 clamp 限制最小值与最大值。 */
.topbar > a { width: 180px; width: clamp(120px, 18vw, 220px); margin-right: 16px; }
.brand-shinmin { width: 100%; }
.brand-project { width: 120px; width: clamp(92px, 13vw, 160px); }

/* 标题居中并限制最大尺寸，与照片主体分开，保证中英文清晰。 */
.hero-title {
  width: calc(100% - var(--gutter) * 2);
  max-width: 640px;
  margin: 24px auto 0;
  margin: clamp(24px, 3vw, 40px) auto 0;
}

.hero-title img {
  width: 100%;
}

/* 移动优先：默认单列；更宽屏幕由末尾媒体查询增加列数。 */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 32px 24px;
  gap: clamp(32px, 5vw, 72px) 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* 白色圆角外框；默认蓝色底边，其余颜色按四张一组循环。 */
.card {
  --accent: #6eb5cd;
  display: block;
  min-width: 0;
  padding: 14px 12px 0;
  border: 0;
  border-radius: 17px;
  background: white;
  text-decoration: none;
}

/* 粉、黄、橙三种颜色与默认蓝色构成四色循环。 */
.card:nth-child(4n + 2) { --accent: #d36f93; }
.card:nth-child(4n + 3) { --accent: #d1cd4d; }
.card:nth-child(4n + 4) { --accent: #de9c78; }

/* 固定展示区比例，加载前后保持布局稳定。 */
.card-art {
  position: relative;
  overflow: hidden;
  background: #d9d9d9;
}

/* 百分比占位兼容不支持 aspect-ratio 的 Safari，空卡片也有稳定高度。 */
.card-art::before {
  content: "";
  display: block;
  padding-top: 124.74916388%; /* 746 / 598 */
}

/* 正式图卡完整展示；PDF 示例的裁切规则单独隔离。 */
.card-art img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* JS 按各张示例的裁切框计算百分比；展示比例与裁切框一致，不拉伸文字。 */
.card-art.is-pdf-sample img {
  position: absolute;
  width: var(--sample-width);
  max-width: none;
  height: var(--sample-height);
  left: var(--sample-left);
  top: var(--sample-top);
}

/* 纯 CSS 底部识别色条，随卡片宽度自动伸缩。 */
.card::after {
  content: "";
  display: block;
  height: 16px;
  border-radius: 0 0 9px 9px;
  background: var(--accent);
}

/* 投票区域：按钮、勾选图标和截止时间。 */
.vote-area {
  padding: 64px 0;
  padding: clamp(64px, 8vw, 100px) 0;
  text-align: center;
}

/* 胶囊按钮宽度不超过父容器；同样适用于启用后的投票链接。 */
.vote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 328px;
  max-width: 100%;
  min-height: 64px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: var(--vote-color);
  font-size: 21px;
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 700;
  text-decoration: none;
}

/* 未提供投票链接时保留禁用状态。 */
.vote-button:disabled { cursor: not-allowed; }

/* 按钮内白色圆形勾选图标不参与压缩。 */
.vote-check {
  margin-right: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  color: #444;
  font-size: 28px;
}

/* 日期允许换行，避免窄屏或字体放大后横向溢出。 */
.deadline {
  margin: 16px 0 0;
  font-size: 17px;
  font-size: clamp(17px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 页脚：组内 Logo 保持关联，组间可在窄屏自动换行。 */
footer {
  background: white;
  text-align: center;
}

/* 联办与支持单位居中排列，间距随屏幕变化。 */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  padding: 18px var(--gutter);
  padding: calc(clamp(32px, 4vw, 48px) - 14px) var(--gutter);
}

/* 限制每组最大宽度为父容器宽度。 */
.partner-group {
  max-width: calc(100% - 24px);
  margin: 14px 12px;
  margin: 14px clamp(12px, 5vw, 70px);
}

/* Logo 在各自分组中垂直居中。 */
.organizer-logos, .supporter-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
  min-height: clamp(65px, 8vw, 98px);
}

/* 各品牌按原始比例显示，并设置响应式宽度。 */
.partner-shinmin { width: 115px; width: clamp(115px, 20vw, 245px); }
.partner-tzu-chi {
  /* 按联办 Logo 组的宽度缩放，避免固定尺寸在不同屏幕上失衡。 */
  width: 30%;
  height: auto;
  margin-left: 12px;
  margin-left: clamp(12px, 3vw, 36px);
}
.partner-songhe {
  width: 76px;
  width: clamp(76px, 14vw, 170px);
  object-fit: contain;
}

/* 分组说明文字。 */
.partner-group p {
  margin: 14px 0 0;
  font-size: 16px;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
}

/* 版权底带支持换行和响应式字号。 */
.copyright {
  padding: 24px var(--gutter);
  color: white;
  background: var(--footer-color);
  font-size: 12px;
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.6;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 640px 起两列；列数断点以新闻卡的可读宽度为依据。 */
@media (min-width: 640px) {
  .cards {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 960px 起三列。 */
@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1280px 起四列，始终不超过四列。 */
@media (min-width: 1280px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 手机向照片左侧取景，保留纸鹤；卡片起点仍跟随同一照片尺寸。 */
@media (max-width: 639px) {
  /* 窄屏标题较矮，同步上移照片和卡片，收紧标题下方的空白。 */
  .page {
    --photo-width: 760px;
    --photo-top: 48px;
  }

  .page::before {
    background-image:
      linear-gradient(to bottom, white, transparent 30%, transparent 70%, var(--page-background)),
      url("../imgs/hero-mobile.jpg");
    background-position: center, 40% var(--photo-top);
  }
}

/* 自定义属性不会自动拒绝不支持的函数，必须在支持检查内启用。 */
@supports (width: clamp(1px, 2vw, 3px)) {
  :root { --gutter: clamp(16px, 3vw, 40px); }
  .page {
    --photo-width: clamp(760px, 100vw, 1600px);
    --photo-top: clamp(0px, calc(400px - 25vw), 120px);
  }
  @media (max-width: 639px) {
    .page { --photo-top: clamp(24px, calc(45vw - 120px), 120px); }
  }
}

/* 旧版浏览器的背景尺寸也保持上下限。 */
@supports not (width: clamp(1px, 2vw, 3px)) {
  @media (min-width: 640px) and (max-width: 759px) {
    .page { --photo-width: 760px; }
  }
  @media (min-width: 1600px) {
    .page { --photo-width: 1600px; --photo-top: 0px; }
  }
}

/* 低高度横屏减少头图留白，方便快速进入新闻卡片。 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-top: 20px; }
  .hero-title { width: 70%; max-width: 440px; margin-top: 16px; }
}

/* 仅对支持精准悬停的鼠标设备启用轻微上浮，避免触屏粘滞悬停。 */
@media (hover: hover) and (pointer: fine) {
  .card.has-image {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .card.has-image:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgb(99 65 79 / 12%);
  }
}

/* 尊重系统“减少动态效果”设置，保留阴影反馈但取消位移动画。 */
@media (prefers-reduced-motion: reduce) {
  .card.has-image {
    transition: none;
  }

  .card.has-image:hover {
    transform: none;
  }
}