/* ==========================================================================
   扬州市生物医药行业协会 — 页面专属样式 (pages.css)
   --------------------------------------------------------------------------
   实现 DESIGN.md §5.3 全部 class（首页 + 内页），并补足首页标记里额外出现的
   .home-columns .main-col .side-col .hero__controls-inner .hero__eyebrow
   .hero__pause .hero__btn-ghost .side-box--contact .home-stats .links-row__title

   只引用 base.css 的 var(--c-*) var(--radius*) var(--shadow*) var(--gutter)
   var(--ease) var(--dur) 等令牌；全部视觉用 CSS / currentColor 完成，
   无任何外部资源（无 @import、无字体、无图片 URL、无图标库）。

   断点：1080px / 860px / 620px，与 base.css 一致。
   ========================================================================== */

/* ==========================================================================
   1. 首页 — 轮播主视觉
   ========================================================================== */


/* 幻灯片容器：固定高度，全宽 */



@keyframes hero-fade {
  from {
    transform: scale(1.015);
  }
  to {
    transform: scale(1);
  }
}

/* 内层：左对齐、上下居中 */

/* 装饰性光斑（纯 CSS 绘制） */
.hero__slide::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}





/* 深色背景上的幽灵按钮：白字 + 半透明白边框 */
.hero__btn-ghost,
.hero .btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hero__btn-ghost:hover,
.hero__btn-ghost:focus-visible,
.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ---- 控制条：叠在 hero 底部的一条细带 ---- */



.hero__arrow svg {
  display: block;
}

/* 左右箭头共用同一套外观，仅图标方向不同（标记内为内联 SVG） */
.hero__arrow--prev,

.hero__arrow:hover,
.hero__arrow:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--c-brand-800);
}

.hero__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px;
}


.hero__dot:hover {
  background: rgba(255, 255, 255, 0.85);
}



.hero__pause:hover,
.hero__pause:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* ==========================================================================
   2. 首页 — 快捷入口条（压在 hero 下沿）
   ========================================================================== */

.home-quick {
  position: relative;
  z-index: 3;
  margin-top: -46px;
  padding-bottom: 48px;
}

.home-quick .quick-links {
  margin-top: 0;
}

/* ==========================================================================
   3. 首页 — 主栏 + 侧栏 / 数据条 / 简介 / 会员 / 友情链接
   ========================================================================== */

.home-columns {
  margin: 0 auto;
}

.main-col {
  min-width: 0;
}

.side-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 侧栏块在 flex 列里不要自己再留底边距 */
.side-col .side-box {
  margin-bottom: 0;
}

/* 首页侧栏的「通知公告」「资料下载」为空态时，侧栏块会被 flex 拉伸到
   与左侧新闻列表同高，空态框里出现大面积空白。改为按内容高度收缩。 */
.home-columns .side-col > .side-box {
  align-self: flex-start;
  width: 100%;
}

/* 会员服务侧栏块：主色标题条 */

.side-box--contact .side-box__title {
  color: var(--c-brand-800);
}

/* 数据条外框 */
.home-stats .stats {
  margin-top: 4px;
}

.home-stats .stat {
  border-color: var(--c-line-strong);
}

/* 协会简介图文块 */
.home-about {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 44px;
}

.home-about__body {
  min-width: 0;
}

.home-about__body .section-head {
  margin-bottom: 20px;
}



/* 会员展示区 */
.home-members .member-grid {
  margin-top: 4px;
}

.home-members .member-card {
  border-color: var(--c-teal-100);
  border-top-color: var(--c-teal-600);
}

/* 友情链接 */
.links-row {
  padding: 22px 0 0;
  border-top: 1px solid var(--c-rule);
  background: transparent;
}

.links-row__title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
}

.links-row__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links-row__list li {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.8;
}

.links-row__list li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 14px;
  background: var(--c-line-strong);
}

.links-row__list a {
  color: var(--c-ink-600);
}

.links-row__list a:hover,
.links-row__list a:focus-visible {
  color: var(--c-brand-700);
}

/* ==========================================================================
   4. 内页 — 栏目切换 / 联系方式 / 地图 / 下载 / 404 / 章程 / 说明
   ========================================================================== */

/* 4.1 横向栏目切换 */
.cat-nav {
  margin: 0 0 26px;
  border-bottom: 1px solid var(--c-rule);
}

.cat-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-nav__item {
  display: flex;
}

.cat-nav__item > a,
.cat-nav__item > button {
  display: inline-block;
  padding: 10px 22px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--c-ink-600);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.cat-nav__item > a:hover,
.cat-nav__item > button:hover {
  background: var(--c-brand-050);
  color: var(--c-brand-700);
}

.cat-nav__item.is-active > a,
.cat-nav__item.is-active > button,
.cat-nav__item > a.is-active,
.cat-nav__item > a[aria-current="page"] {
  border-bottom-color: var(--c-brand-600);
  background: var(--c-brand-050);
  color: var(--c-brand-800);
  font-weight: 700;
}

/* 4.2 联系方式卡片 */
/* 办公地址 / 联系电话·传真 / 电子邮箱 / 工作时间共 4 张卡。
   原先 3 列会把第 4 张挤到第二行独占左侧、右侧空出约 2/3 行；
   改为 4 列一行铺满，1080px 以下 2×2，620px 以下单列。 */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.contact-card {
  padding: 0 0 16px;
  border: 0;
  border-top: 2px solid var(--c-navy);
  border-radius: 0;
  background: transparent;
}

.contact-card:hover {
  transform: translateY(-2px);
}

.contact-card__title {
  margin: 14px 0 10px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
}

.contact-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card__list li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  color: var(--c-ink-600);
  font-size: 0.9375rem;
  line-height: 1.85;
  overflow-wrap: break-word;
}

.contact-card__list li > span {
  flex: none;
  width: 4em;
  color: var(--c-ink-400);
}

/* 地图占位：纯 CSS 绘制的网格 + 虚线框 */
.map-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 30px 24px;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  background-color: var(--c-bg-soft);
  background-image: linear-gradient(rgba(46, 119, 204, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 119, 204, 0.07) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  color: var(--c-ink-400);
  font-size: 0.9375rem;
  line-height: 1.9;
  text-align: center;
}

.map-placeholder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -22px 0 0 -8px;
  border: 3px solid var(--c-brand-600);
  border-radius: 50% 50% 50% 0;
  background: var(--c-white);
  transform: rotate(-45deg);
}

.map-placeholder > * {
  position: relative;
  max-width: 30em;
}

/* 下载中心列表 */
.download-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.download-list .entry-list__item {
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-white);
}

.download-list .entry-list__item::before {
  top: 1.35em;
  left: 10px;
}

/* 4.3 404 */
.page-404 {
  padding: 76px 0;
  text-align: center;
}

.page-404__code {
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: 0.04em;
}

.page-404__title {
  margin: 14px 0 10px;
  font-size: 1.5rem;
}

.page-404__text {
  margin: 0 auto 26px;
  max-width: 34em;
  color: var(--c-ink-500);
  font-size: 0.9375rem;
  line-height: 1.9;
}

/* 4.4 章程正文 */
.charter {
  padding: 34px 40px 30px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink-700);
}

.charter h2 {
  margin: 2em 0 0.9em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-brand-050);
  font-size: 1.25rem;
  text-align: center;
}

.charter h2:first-child {
  margin-top: 0;
}

.charter h3 {
  margin: 1.6em 0 0.7em;
  font-size: 1.0625rem;
}

.charter p {
  margin: 0 0 1em;
  line-height: 1.95;
  text-align: justify;
  text-justify: inter-ideograph;
}

.charter ol,
.charter ul {
  margin: 0 0 1em;
  padding-left: 1.6em;
}

.charter li {
  margin-bottom: 0.4em;
  line-height: 1.95;
}

/* 章程条文：条号加粗突出，子项缩进，正文两端对齐 */
.charter__article {
  margin-bottom: 0.85em;
}

.charter__no {
  margin-right: 0.35em;
  font-weight: 700;
  color: var(--c-brand-800);
}

.charter__item {
  padding-left: 1.8em;
}

.charter__plain {
  color: var(--c-ink-700);
}

/* 4.5 结构说明 */
.structure-note {
  position: relative;
  margin: 0 0 26px;
  padding: 16px 22px 16px 50px;
  border: 1px solid var(--c-brand-100);
  border-left: 4px solid var(--c-brand-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-brand-050);
  color: var(--c-brand-800);
  font-size: 0.9375rem;
  line-height: 1.9;
}

.structure-note::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 1.6em;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.55;
}

.structure-note p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   5. 响应式（1080 / 860 / 620，与 base.css 一致）
   ========================================================================== */

@media (max-width: 1080px) {
  .home-about {
    gap: 32px;
  }
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .home-quick {
    margin-top: -36px;
  }
  .home-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  /* 834px 平板下首页两栏只剩约 490px 给新闻列表，标题逐字换行；
     此宽度改为单栏，侧栏块顺次下移。 */
  .home-columns .grid--sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  .links-row {
    padding: 18px;
  }
  .charter {
    padding: 26px 24px 22px;
  }
}

@media (max-width: 620px) {
  .hero__actions .btn {
    padding: 9px 18px;
    font-size: 0.875rem;
  }
  .home-quick {
    margin-top: -28px;
    padding-bottom: 34px;
  }
  .home-about {
    gap: 20px;
  }
  .links-row {
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }
  .links-row__list {
    gap: 4px 0;
  }
  .links-row__list li + li::before {
    margin: 0 9px;
  }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-card {
    padding: 20px 18px 18px;
  }
  .cat-nav__list {
    gap: 0;
  }
  .cat-nav__item > a,
  .cat-nav__item > button {
    padding: 9px 14px;
    font-size: 0.875rem;
  }
  /* 390px 下说明文字与 480×220 的示意 SVG 并排时，文字被压到约 2 个字宽，
     出现「地图位置待/协会确认后/标注」逐字换行。窄屏改为纵向堆叠。 */
  .map-placeholder {
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
    padding: 24px 16px;
  }
  .map-placeholder > * {
    max-width: 100%;
  }
  .map-placeholder svg {
    width: 100%;
    max-width: 420px;
    height: auto;
  }
  .page-404 {
    padding: 52px 0;
  }
  .page-404__title {
    font-size: 1.25rem;
  }
  .charter {
    padding: 20px 16px 18px;
  }
  .charter h2 {
    font-size: 1.125rem;
  }
  .structure-note {
    padding: 14px 16px 14px 42px;
  }
  .structure-note::before {
    left: 16px;
  }
  .download-list .entry-list__item {
    padding: 12px 14px 12px 18px;
  }
}

/* 尊重减少动效偏好：不做轮播淡入动画与位移 */
@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .hero__arrow,
  .hero__dot,
  .contact-card:hover {
    transform: none;
  }
}

.cat-nav__item > a {
  display: block;
  padding: 10px 18px;
  color: var(--c-ink-soft);
  border-bottom: 2px solid transparent;
}

.cat-nav__item.is-active > a {
  color: var(--c-ink);
  border-bottom-color: var(--c-seal);
  font-weight: 600;
}

/* ===== 设计重做：会刊式布局的结构与断点修正 ===== */

/* 首页：快捷入口不再压在轮播下沿，成为正常一节 */
.home-quick {
  margin-top: 0;
  padding-bottom: 0;
  z-index: auto;
}

/* 协会简介：配图块已移除，改为单栏正文 */
.home-about {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* 数据条：不再带阴影 */
.home-stats .stat {
  border-color: var(--c-rule);
}

.home-members .member-grid {
  margin-top: 0;
}

@media (max-width: 1080px) {
  .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat {
    padding: 18px 20px 16px;
  }
  .stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .stat__value {
    font-size: 1.75rem;
  }
  .feature {
    padding: 18px 0 16px;
  }
}

@media (max-width: 620px) {
  .quick-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .quick-link > a {
    grid-template-columns: 24px minmax(0, 1fr);
    row-gap: 2px;
  }
  .quick-link__text {
    grid-column: 2;
    text-align: left;
    font-size: 0.8125rem;
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
    border-bottom: 0;
  }
  .stat {
    border-left: 0;
    border-bottom: 1px solid var(--c-rule);
    padding: 16px 0 14px;
  }
  .stat:last-child {
    border-bottom: 0;
  }
  .feature {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px 12px;
  }
}

/* 报头下沿已有分隔线，首页快捷入口不再重复画线 */
.home-quick .quick-links {
  border-top: 0;
}