:root {
  --party-red: #8b1811;
  --text: #333333;
  --muted: #999999;
  --line: #dddddd;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; background: #ffffff; }
body { margin: 0; color: var(--text); background: #ffffff; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* 桌面端保留 Figma 1920px 画布，通过 zoom 等比例缩放。 */
.page-stage { width: 100%; height: auto; overflow: visible; }
.page-canvas { width: 1920px; height: auto; zoom: calc(100vw / 1920px); }

/* 头部尺寸与新闻列表页面一致，导航仅切换当前选中项。 */
.site-header { position: relative; z-index: 20; display: grid; width: 1920px; height: 120px; padding: 0 60px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 150px; align-items: center; background: #fff; }
.brand { display: flex; width: 804px; align-items: center; }
.brand-school { width: 222px; height: 60px; object-fit: contain; }
.brand-divider { flex: 0 0 1px; width: 1px; height: 60px; margin: 0 29px; background: #d6d6d6; }
.brand-department { width: 522px; height: 60px; object-fit: contain; }
.main-nav { display: flex; height: 100%; align-items: center; gap: 40px; font-size: 18px; }
.nav-item { position: relative; display: grid; height: 100%; align-items: center; }
.nav-link { position: relative; z-index: 0; display: grid; height: 100%; align-items: center; white-space: nowrap; }
.nav-link::before, .nav-link::after { position: absolute; left: 50%; z-index: -1; background: center / contain no-repeat; content: ""; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .18s ease; }
.nav-link::before { top: 0; width: 126px; height: 42px; background-image: url("../img/figma/nav-decoration-top.png"); }
.nav-link::after { bottom: 0; width: 80px; height: 42px; background-image: url("../img/figma/nav-decoration.png"); }
.nav-link.is-active::before, .nav-link.is-active::after, .nav-item:hover .nav-link::before, .nav-item:hover .nav-link::after { opacity: 1; }
/* 桌面端二级导航沿用现有页面的半透明浮层，便于统一转换为栏目循环。 */
.sub-nav { position: absolute; top: 100%; left: 50%; z-index: 10; visibility: hidden; min-width: 170px; padding: 8px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(0,0,0,.12); opacity: 0; transform: translate(-50%,-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; backdrop-filter: blur(16px); }
.sub-nav a { display: block; padding: 9px 14px; border-radius: 6px; font-size: 16px; line-height: 24px; text-align: center; white-space: nowrap; }
.sub-nav a:hover, .sub-nav a:focus-visible { color: var(--party-red); background: #f9f1f0; }
.nav-item:hover .sub-nav, .nav-item:focus-within .sub-nav { visibility: visible; opacity: 1; transform: translate(-50%,0); }
.mobile-navigation { display: none; }

/* 党建工会横幅及左侧标题卡片。 */
.party-hero { position: relative; width: 1920px; height: 550px; }
.party-banner { width: 1920px; height: 550px; object-fit: cover; }
.party-shell { position: absolute; inset: 0; width: 1680px; margin: 0 auto; pointer-events: none; }
.party-title { position: absolute; top: 250px; left: 0; width: 280px; height: 380px; color: #fff; text-align: center; pointer-events: auto; }
.party-title > img:first-child { width: 280px; height: 380px; }
.party-icon { position: absolute; top: 95px; left: 119px; width: 42px; height: 42px; object-fit: contain; }
.party-title h1 { position: absolute; top: 148px; left: 0; width: 100%; margin: 0; font-size: 24px; font-weight: 400; line-height: 34px; }
.sub-navigation { position: absolute; top: 470px; left: 0; z-index: 3; display: grid; width: 1680px; height: 100px; padding-left: 280px; grid-template-columns: repeat(4, 350px); align-items: center; pointer-events: auto; }
/* 导航本体创建层叠上下文，背景和左侧切图均严格显示在链接下方。 */
.sub-navigation-bg { position: absolute; inset: 0; z-index: -2; width: 1680px; height: 100px; }
.sub-navigation-mask { position: absolute; top: 0; left: 0; z-index: -1; width: 280px; height: 100px; object-fit: cover; }
.sub-navigation a { position: relative; display: grid; width: 350px; height: 100px; place-items: center; font-size: 18px; white-space: nowrap; }
.sub-navigation a + a::before { position: absolute; top: 40px; left: 0; width: 1px; height: 20px; background: #bbbbbb; content: ""; }
/* 当前栏目与鼠标悬停栏目使用统一的红色激活样式，移出后保留页面当前栏目。 */
.sub-navigation a.is-active,
.sub-navigation a:hover,
.sub-navigation a:focus-visible { color: var(--party-red); }
.sub-navigation a.is-active::after,
.sub-navigation a:hover::after,
.sub-navigation a:focus-visible::after { position: absolute; bottom: 20px; left: 50%; width: 100px; height: 4px; background: var(--party-red); content: ""; transform: translateX(-50%); }

/* 桌面端正文距二级栏目底部 60px，内容区继续使用 1680px 栅格。 */
.page-content { position: relative; width: 1680px; margin: 60px auto 60px; }
.breadcrumb { position: relative; height: 78px; border-bottom: 2px solid var(--party-red); }
.breadcrumb p { position: absolute; bottom: 18px; left: 0; margin: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.breadcrumb p span { color: var(--muted); }
.breadcrumb img { position: absolute; right: 0; bottom: 0; width: 210px; height: 78px; object-fit: contain; }
.party-list { position: relative; padding-top: 0; }
.party-list::before { position: absolute; top: 0; left: calc((1680px - 100vw) / 2); z-index: -2; width: 100vw; height: 910px; background: url("../img/figma/dangjian-content-texture.png") top center / 1920px 910px no-repeat; content: ""; }

/* 置顶新闻采用左图右红色信息面板。 */
/* 覆盖链接保持整张卡片均可点击，同时沿用卡片的悬停反馈。 */
.featured-party { position: relative; width: 1680px; height: 580px; cursor: pointer; }
.card-overlay-link { position: absolute; inset: 0; z-index: 4; display: block; border-radius: inherit; cursor: pointer; }
.card-overlay-link:focus-visible { outline: 3px solid rgba(139,24,17,.55); outline-offset: -3px; }
.featured-image { position: absolute; top: 0; left: 0; width: 940px; height: 580px; }
.featured-image img { width: 940px; height: 580px; object-fit: cover; }
.featured-body { position: absolute; top: 200px; left: 940px; width: 860px; height: 340px; padding: 58px 40px 30px; color: #fff; background: var(--party-red); }
.featured-body h2 { margin: 0; font-size: 20px; font-weight: 400; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.featured-body p { display: -webkit-box; max-height: 90px; margin: 24px 0 0; overflow: hidden; color: #fff; font-size: 16px; line-height: 30px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.featured-detail { display: inline-flex; margin-top: 25px; align-items: center; color: rgba(255,255,255,.5); font-size: 14px; line-height: 30px; }
.featured-detail span { margin-left: 10px; font-size: 22px; line-height: 20px; }

/* 普通新闻卡片为三列布局，底部面板保持设计稿的圆角和选中红色。 */
.party-grid { display: grid; margin-top: 100px; grid-template-columns: repeat(3, 520px); gap: 60px; }
.party-card { position: relative; width: 520px; height: 440px; overflow: hidden; border-radius: 0 0 16px 0; cursor: pointer; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.party-card:hover, .party-card:focus-within { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(139,24,17,.14); }
.party-card > img { width: 520px; height: 300px; object-fit: cover; }
.card-body { height: 140px; padding: 26px 40px 18px; background: #fff; }
/* 普通卡片仅在悬停或键盘聚焦时呈现设计稿中的激活状态。 */
.party-card:hover .card-body, .party-card:focus-within .card-body { color: #fff; background: var(--party-red); }
.card-body h2 { margin: 0; overflow: hidden; font-size: 18px; font-weight: 400; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; }
.card-body time { display: block; margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 24px; }
.party-card:hover time, .party-card:focus-within time { color: rgba(255,255,255,.5); }
.card-body::after { display: block; width: 200px; height: 2px; margin-top: 10px; background: #e5e5e5; content: ""; }
.party-card:hover .card-body::after, .party-card:focus-within .card-body::after { background: rgba(255,255,255,.65); }

/* 分页控件尺寸与 Figma 设计稿一致。 */
.pagination { display: flex; width: 690px; height: 36px; margin: 60px auto 0; align-items: center; font-size: 16px; line-height: 30px; }
.page-previous, .page-next { white-space: nowrap; }
.page-previous.is-disabled { color: var(--muted); pointer-events: none; }
.page-numbers { display: flex; height: 36px; margin-left: 25px; align-items: center; }
.page-numbers a, .page-numbers span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; }
.page-numbers a.is-active { color: #fff; background: var(--party-red); }
.page-next { margin-left: 40px; }
.pagination-divider { width: 1px; height: 20px; margin-left: 40px; background: var(--line); }
.page-jump { display: flex; height: 36px; margin-left: 39px; align-items: center; white-space: nowrap; }
.page-jump label { width: 48px; }
.page-jump input { width: 80px; height: 36px; margin-left: 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 36px; outline: none; text-align: center; font: inherit; }
.page-jump span { margin-left: 10px; }

/* 移动端改为纵向布局，隐藏横幅和桌面浮层，仅保留一级导航。 */
.is-mobile .page-stage { height: auto; min-height: 0; overflow: visible; }
.is-mobile .page-canvas { width: 100%; height: auto; zoom: 1; }
.is-mobile .site-header { width: 100%; height: 72px; padding: 0 16px; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 10px; }
.is-mobile .brand { width: 100%; min-width: 0; }
.is-mobile .brand-school { width: 96px; height: 36px; }
.is-mobile .brand-divider { height: 34px; margin: 0 10px; }
.is-mobile .brand-department { width: min(190px, calc(100% - 117px)); height: 36px; }
.is-mobile .main-nav { display: none; }
.is-mobile .mobile-navigation { position: relative; display: block; width: 44px; height: 44px; }
/* 汉堡菜单使用原生 details，确保静态页面无需额外脚本即可展开一级导航。 */
.is-mobile .mobile-navigation summary { display: block; width: 44px; height: 44px; padding: 10px; list-style: none; cursor: pointer; }
.is-mobile .mobile-navigation summary::-webkit-details-marker { display: none; }
.is-mobile .mobile-navigation summary span { display: block; height: 2px; margin: 5px 0; background: var(--party-red); transition: transform .2s ease, opacity .2s ease; }
.is-mobile .mobile-navigation[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-mobile .mobile-navigation[open] summary span:nth-child(2) { opacity: 0; }
.is-mobile .mobile-navigation[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.is-mobile .mobile-navigation nav { position: absolute; top: 52px; right: 0; z-index: 30; display: grid; width: calc(100vw - 24px); max-height: calc(100vh - 88px); padding: 8px; overflow-y: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 12px 32px rgba(0,0,0,.14); backdrop-filter: blur(16px); }
.is-mobile .mobile-navigation nav a { display: flex; min-height: 48px; padding: 0 14px; align-items: center; border-radius: 6px; font-size: 16px; }
.is-mobile .party-hero { width: 100%; height: auto; background: #fff; }
.is-mobile .party-banner, .is-mobile .party-title { display: none; }
.is-mobile .party-shell { position: static; width: 100%; pointer-events: auto; }
.is-mobile .sub-navigation { position: static; display: flex; width: 100%; height: 60px; padding: 0 16px; overflow-x: auto; background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.is-mobile .sub-navigation-bg { display: none; }
.is-mobile .sub-navigation a { flex: 0 0 auto; width: auto; height: 60px; padding: 0 18px; font-size: 16px; }
.is-mobile .sub-navigation a + a::before { top: 20px; }
.is-mobile .sub-navigation a.is-active::after { bottom: 0; width: 40px; height: 3px; }
.is-mobile .page-content { width: calc(100% - 32px); margin: 40px auto 0; }
.is-mobile .breadcrumb { height: 58px; display: flex; align-items: center; }
.is-mobile .breadcrumb p { position: static; font-size: 13px; white-space: normal; }
.is-mobile .breadcrumb img { display: none; }
.is-mobile .party-list { padding-top: 0; }
.is-mobile .party-list::before { display: none; }
.is-mobile .featured-party { display: flex; width: 100%; height: auto; flex-direction: column; overflow: hidden; border: 1px solid rgba(0,0,0,.06); border-radius: 8px; background: #f7f7f7; }
.is-mobile .featured-image { position: static; width: 100%; height: auto; aspect-ratio: 940 / 580; }
.is-mobile .featured-image img { width: 100%; height: 100%; }
.is-mobile .featured-body { position: static; width: 100%; height: auto; padding: 18px 16px 20px; color: var(--text); background: #f7f7f7; }
.is-mobile .featured-body h2 { font-size: 17px; line-height: 1.55; white-space: normal; }
.is-mobile .featured-body p { max-height: 5.25em; margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.75; -webkit-line-clamp: 3; }
.is-mobile .featured-detail { margin-top: 12px; color: var(--party-red); }
.is-mobile .party-grid { display: grid; margin-top: 16px; grid-template-columns: 1fr; gap: 16px; }
.is-mobile .party-card { width: 100%; height: auto; border-radius: 8px; }
.is-mobile .party-card > img { width: 100%; height: auto; aspect-ratio: 520 / 300; }
.is-mobile .card-body { height: auto; min-height: 130px; padding: 18px 16px; }
.is-mobile .card-body h2 { white-space: normal; font-size: 16px; line-height: 1.6; }
.is-mobile .card-body time { margin-top: 10px; font-size: 13px; }
.is-mobile .pagination { width: 100%; height: auto; margin: 32px 0 40px; flex-wrap: wrap; justify-content: center; row-gap: 16px; font-size: 14px; }
.is-mobile .page-numbers { margin-left: 8px; }
.is-mobile .page-next { margin-left: 8px; }
.is-mobile .pagination-divider { display: none; }
.is-mobile .page-jump { width: 100%; margin-left: 0; justify-content: center; }