:root {
  --overview-red: #8b1811;
  --overview-text: #333333;
  --overview-muted: #999999;
}

/* 党建概况桌面区域严格使用 Figma 的 1680×800 尺寸。 */
.party-overview {
  position: relative;
  width: 1680px;
  height: 800px;
  overflow: hidden;
  color: var(--overview-text);
}

/* 背景图按照 Figma 设置为三成透明度，不承载业务文字。 */
.overview-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  pointer-events: none;
}

/* 标题位于背景顶部中央，与 Figma 的 50px 上边距一致。 */
.overview-title {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #000000;
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  text-align: center;
}

/* 三项党建数据使用固定起点和等距分布复现桌面设计。 */
.overview-statistics {
  position: absolute;
  top: 204px;
  left: 380px;
  display: flex;
  width: 868px;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
}

/* 单项数据内部保留图标、竖线、数字和名称的独立位置。 */
.overview-statistic {
  position: relative;
  width: 188px;
  height: 87px;
}

.overview-statistic:nth-child(2) {
  width: 168px;
}

.overview-statistic:nth-child(3) {
  width: 148px;
}

.overview-statistic img {
  position: absolute;
  top: 24px;
  left: 0;
  width: 48px;
  height: 48px;
}

.overview-statistic-divider {
  position: absolute;
  top: 13px;
  left: 68px;
  width: 1px;
  height: 70px;
  background: rgba(139, 24, 17, .35);
}

.overview-statistic strong {
  position: absolute;
  top: 0;
  left: 88px;
  font-size: 40px;
  font-weight: 400;
  line-height: 56px;
}

.overview-statistic > span:last-child {
  position: absolute;
  top: 59px;
  left: 88px;
  font-size: 20px;
  line-height: 28px;
  white-space: nowrap;
}

/* 人员与荣誉信息从背景左侧 190px 处开始，内容宽度为 1300px。 */
.overview-information {
  position: absolute;
  top: 351px;
  left: 190px;
  width: 1300px;
}

/* 每一行使用同一四列网格，确保两组字段严格对齐。 */
.overview-row {
  display: grid;
  min-height: 110px;
  padding-top: 38px;
  border-top: 1px solid rgba(139, 24, 17, .45);
  grid-template-columns: 240px 240px 240px 1fr;
  align-items: start;
}

/* 前四列沿用负责人行的列宽，使前两组委员分别与负责人行的两组信息对齐。 */
.overview-members {
  grid-template-columns: 240px 240px 240px 240px 160px 1fr;
}

.overview-row h2,
.overview-row p,
.overview-row ul {
  margin: 0;
}

/* 行标题左侧使用 4px 党建红标记，对应 Figma 的短竖线。 */
.overview-row h2 {
  min-height: 30px;
  padding-left: 20px;
  border-left: 4px solid var(--overview-red);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}

.overview-row p,
.overview-honors li {
  font-size: 20px;
  line-height: 28px;
}

/* 委员职务使用设计稿中的浅灰色和 16px 字号。 */
.overview-row small {
  color: var(--overview-muted);
  font-size: 16px;
}

/* 支部荣誉保留两列及每列两行的设计结构。 */
.overview-honors {
  min-height: 229px;
}

.overview-honors ul {
  display: grid;
  padding: 0;
  gap: 24px;
  list-style: none;
}

/* 左侧荣誉跨两列，避免 329px 长标题发生非设计稿换行。 */
.overview-honors ul:first-of-type {
  grid-column: 2 / 4;
}

.overview-honors ul:last-child {
  grid-column: 4;
  white-space: nowrap;
}

/* 手机端取消桌面绝对定位，所有数据和栏目按纵向自然排布。 */
.is-mobile .party-overview {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 28px 16px 32px;
  border-radius: 8px;
}

/* 手机端隐藏桌面装饰背景，保留纯色内容区域以提升文字可读性。 */
.is-mobile .overview-background {
  display: none;
}

.is-mobile .overview-title,
.is-mobile .overview-statistics,
.is-mobile .overview-information {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
}

.is-mobile .overview-title {
  font-size: 20px;
  line-height: 30px;
}

/* 手机端统计项改为三行，保证数字和文字在窄屏上清晰可读。 */
.is-mobile .overview-statistics {
  display: grid;
  margin-top: 24px;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.is-mobile .overview-statistic,
.is-mobile .overview-statistic:nth-child(2),
.is-mobile .overview-statistic:nth-child(3) {
  width: 100%;
  height: 76px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .68);
}

.is-mobile .overview-statistic img {
  top: 14px;
  left: 8px;
}

.is-mobile .overview-statistic-divider {
  top: 14px;
  left: 68px;
  height: 48px;
}

.is-mobile .overview-statistic strong {
  top: 7px;
  left: 86px;
  font-size: 28px;
  line-height: 36px;
}

.is-mobile .overview-statistic > span:last-child {
  top: 42px;
  left: 86px;
  font-size: 15px;
  line-height: 22px;
}

/* 手机端每个字段独占一行，避免姓名、职务和荣誉内容互相挤压。 */
.is-mobile .overview-information {
  margin-top: 24px;
}

.is-mobile .overview-row {
  display: grid;
  min-height: 0;
  padding: 16px 0;
  grid-template-columns: 1fr;
  gap: 10px;
}

.is-mobile .overview-row h2 {
  padding-left: 12px;
  font-size: 18px;
  line-height: 26px;
}

.is-mobile .overview-row p,
.is-mobile .overview-honors li {
  padding-left: 16px;
  font-size: 15px;
  line-height: 24px;
}

.is-mobile .overview-row small {
  font-size: 13px;
}

.is-mobile .overview-honors ul {
  grid-column: auto;
  gap: 10px;
}

.is-mobile .overview-honors ul:last-child {
  white-space: normal;
}