/* theme-modern.css — 门户主题「现代版」（D-112 / B8.2）。
   override 层：加载于 portal.css 之后，只写与 classic 的差异；信息架构与 DOM 不变。
   视觉基准 = docs/portal-redesign-preview.html（学校现代版原型）：
   白底精致导航（hover 下划线动效）/ 520px 通栏大 hero（左侧渐变遮罩 + 大标题叠层 + CTA 胶囊按钮）/
   深靛蓝渐变 + 暖金点缀 / 大圆角卡片 + 柔阴影 + hover 上浮 / 充足留白 / 深色 footer。
   覆盖全部 7 类页面共享组件（header/nav/hero/区块/图库/列表/详情/搜索/分页/footer）。
   D-113 还原度整改：hero 通栏破格 + 首页去面包屑 + 品牌区 logo 横排 + 备案底栏 + 防溢出。 */

:root {
  --portal-primary: #2563eb;        /* 亮蓝（活力） */
  --portal-primary-dark: #1e3a8a;   /* 深靛蓝（稳重） */
  --portal-text: #334155;
  --portal-muted: #64748b;
  --portal-border: #e2e8f0;
  --portal-bg: #f6f8fb;
  --portal-link: #2563eb;
  /* 主题专属令牌 */
  --tm-ink: #0f172a;                /* 深墨标题 */
  --tm-gold: #f59e0b;               /* 暖金点缀 */
  --tm-grad: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  --tm-radius: 16px;
  --tm-radius-sm: 10px;
  --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .03);
  --tm-shadow: 0 6px 24px rgba(15, 23, 42, .07);
  --tm-shadow-lg: 0 22px 48px rgba(15, 23, 42, .13);
  --tm-ease: cubic-bezier(.22, .61, .36, 1);
}

body.portal { font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* ============ Header：白底 + 圆角徽标感 + 胶囊搜索 ============ */
.portal-header { position: sticky; top: 0; z-index: 50; }
.header-inner { height: auto; min-height: 92px; padding: 18px 16px; }
/* 品牌区还原原型：徽标/首字徽章居左、站名/副标题右侧两行叠排（结构在 portal.css base 层）。
   真实上传 logo 中性化展示——不加渐变底/边框（原型 monogram 色块是无 logo 时的占位形态）。 */
.brand-name { font-size: 27px; font-weight: 800; color: var(--tm-ink); letter-spacing: .5px; }
.brand-slogan { letter-spacing: 2px; margin-top: 4px; }
.brand-logo { border-radius: 12px; height: 56px; }
/* 无 logo 首字徽章（D-114）：modern 皮肤 = 深靛蓝渐变底白字 */
.brand-monogram { width: 52px; height: 52px; border-radius: 14px; background: var(--tm-grad); font-size: 24px; box-shadow: 0 6px 16px rgba(30, 58, 138, .3); }
.search-box { border: 1.5px solid var(--portal-border); border-radius: 999px; overflow: hidden; background: var(--portal-bg); transition: border-color .2s, box-shadow .2s; }
.search-box input { border: 0; background: transparent; padding: 10px 18px; }
.search-box input:focus { border-color: transparent; }
.search-box:focus-within { border-color: var(--portal-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .1); }
.search-box button { background: var(--tm-grad); padding: 8px 18px; border-radius: 999px; margin: 4px; transition: transform .2s; }
.search-box button:hover { background: var(--tm-grad); transform: scale(1.04); }

/* ============ 主导航：白底 + 下划线动效（classic 为蓝色实心条） ============ */
.portal-nav { background: #fff; border-bottom: 1px solid var(--portal-border); }
.nav-item > a { color: var(--tm-ink); font-weight: 500; padding: 0 18px; height: 54px; display: flex; align-items: center; }
.nav-item > a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px;
  background: var(--tm-grad); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transform-origin: center; transition: transform .25s var(--tm-ease);
}
.nav-item > a:hover { background: transparent; color: var(--portal-primary); }
.nav-item > a:hover::after { transform: scaleX(1); }
.nav-sub { border-radius: var(--tm-radius-sm); border: 0; box-shadow: var(--tm-shadow); padding: 8px; min-width: 190px; }
.nav-sub li a { border-radius: 8px; transition: background .15s, color .15s, padding-left .2s; }
.nav-sub li a:hover { background: var(--portal-bg); color: var(--portal-primary); padding-left: 20px; }

/* ============ Hero：520px 通栏大图 + 左侧渐变遮罩 + 大标题叠层 + CTA ============ */
/* 通栏破格（D-113）：carousel 挣脱 .container 全宽、紧贴导航（还原原型 hero 形态）。
   100vw 含经典滚动条宽 → html 截断横向溢出（overflow 传播到视口，不影响 sticky header）。 */
html { overflow-x: hidden; overflow-x: clip; }
/* 首页隐藏面包屑：原型首页无「当前位置」条，hero 直接压在导航下 */
.portal-main:has(> .container.home) > .breadcrumb { display: none; }
.carousel { height: 520px; margin: 0 0 56px; border-radius: 0; background: #0f172a; }
.home > .carousel { width: 100vw; margin-top: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.carousel-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(15, 23, 42, .8) 0%, rgba(15, 23, 42, .45) 50%, rgba(15, 23, 42, .08) 100%);
}
.carousel-slide img { height: 100%; }
.carousel-slide figcaption {
  top: 0; bottom: auto; left: 0; right: 0; height: 100%; z-index: 2; background: none;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  /* 水平内边距与实际容器（1200px + 16px padding）对齐：标题文字与下方区块左缘齐平 */
  padding: 24px max(16px, calc((100% - 1200px) / 2 + 16px)); max-width: none;
}
.carousel-title {
  font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; color: #fff; line-height: 1.3;
  letter-spacing: 1px; max-width: 780px; text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
.carousel-cta {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  background: #fff; color: var(--portal-primary-dark); font-weight: 600; font-size: 15px;
  padding: 13px 28px; border-radius: 999px; transition: transform .2s, box-shadow .2s;
}
.carousel-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .25); color: var(--portal-primary-dark); }
.carousel-dots { bottom: 28px; }
.carousel-dot { width: 10px; height: 10px; transition: all .3s; }
.carousel-dot.active { width: 30px; border-radius: 5px; background: #fff; }

/* ============ 首页区块：3 列网格 + 首块（形态A）放大跨行 ============ */
.home-blocks { grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 0 0 48px; }
.home-blocks > .home-block:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
.home-blocks > .home-block:nth-child(2) { grid-column: 3; grid-row: 1 / 3; }
.home-block {
  border-radius: var(--tm-radius); padding: 24px 26px; border: 1px solid var(--portal-border);
  box-shadow: var(--tm-shadow-sm); transition: transform .25s var(--tm-ease), box-shadow .25s var(--tm-ease);
}
.home-block:hover { transform: translateY(-4px); box-shadow: var(--tm-shadow); }
.home-block .block-head { border-bottom: 2px solid var(--portal-bg); }
.home-block .block-head h2 {
  font-size: 21px; color: var(--tm-ink); display: flex; align-items: center; gap: 12px;
}
.home-block .block-head h2::before { content: ""; width: 6px; height: 24px; background: var(--tm-grad); border-radius: 4px; }
.home-block .more { transition: color .2s, gap .2s; }
.home-block .more:hover { color: var(--portal-primary); }

/* 形态 A：头条大卡 + 下方列表 */
.block-form-a { display: flex; flex-direction: column; gap: 18px; }
/* D-115 真修复：cover 为不缩放的圆角裁切窗口（原型 .feature-cover 同款）。img 自身圆角会随
   scale 外移、外层直角 overflow 裁回原盒 → 原盒角变方（像素实测复现）；窗口固定圆角裁住缩放溢出。 */
.block-headline-cover { display: block; height: 300px; border-radius: var(--tm-radius); overflow: hidden; }
.block-headline-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--tm-ease); }
.block-headline:hover img { transform: scale(1.04); }
.block-headline h3 { font-size: 21px; color: var(--tm-ink); margin: 14px 0 6px; line-height: 1.5; }
.block-headline p { font-size: 14px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.block-list li { padding: 11px 0; border-bottom: 1px dashed var(--portal-border); transition: padding-left .2s; }
.block-list li:hover { padding-left: 6px; }
.block-list li a { color: var(--portal-text); transition: color .2s; font-size: 15px; }
.block-list li a:hover { color: var(--portal-primary); text-decoration: none; }

/* 图库：图片卡 + hover 放大 + 标题渐变浮现；首图 feature 跨 2×2（原型层级） */
.gallery-grid { gap: 18px; }
.home .gallery-grid > .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-item { position: relative; border: 0; border-radius: var(--tm-radius); overflow: hidden; box-shadow: var(--tm-shadow-sm); aspect-ratio: 4 / 3; } /* 父级圆角裁切 + 子 img 缩放 = 正确缩放窗口模式（D-115 像素实测角点为背景） */
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--tm-ease); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item span {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; color: #fff; font-weight: 600; font-size: 15px;
  background: linear-gradient(transparent 50%, rgba(15, 23, 42, .78));
  opacity: 0; transition: opacity .3s;
}
.gallery-item:hover span { opacity: 1; }

/* ============ 面包屑 / 页面标题（内页共享） ============ */
.breadcrumb { background: transparent; border-bottom: 0; }
.page-title { border-bottom: 2px solid var(--portal-border); position: relative; padding: 28px 0 16px; }
.page-title::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 72px; height: 2px; background: var(--tm-grad); }
.page-title h1 { font-size: 26px; color: var(--tm-ink); font-weight: 800; }

/* ============ 列表页条目：卡片化 hover ============ */
.article-list { margin-top: 8px; }
.article-item { padding: 20px 0; }
.article-item + .article-item { border-top: 1px dashed var(--portal-border); }
.article-cover { border-radius: 12px; overflow: hidden; } /* D-115：a 只包 img → 充当不缩放圆角窗口，裁住 hover 缩放溢出 */
.article-cover img { border-radius: 0; transition: transform .5s var(--tm-ease); }
.article-item:hover .article-cover img { transform: scale(1.04); }
.article-body h3 { font-size: 18px; transition: color .2s; }
.article-body h3 a { color: var(--tm-ink); }
.article-item:hover .article-body h3 a { color: var(--portal-primary); }

/* ============ 详情/单页：白卡大圆角 ============ */
.article-detail { border-radius: var(--tm-radius); padding: 32px; box-shadow: var(--tm-shadow-sm); }
.article-detail h1 { font-size: 30px; font-weight: 800; color: var(--tm-ink); }
.article-info { border-bottom: 1px solid var(--portal-border); }
/* 正文排版补强（portal.css 对正文仅 3 条，此处按主题风格增量） */
.article-content { padding: 20px 0; }
.article-content h2, .article-content h3 { color: var(--portal-primary-dark); margin-top: 1.4em; font-weight: 700; }
.article-content img { border-radius: 12px; margin: 12px auto; }
.article-content p { margin: .8em 0; }
.article-attachments, .article-related, .prev-next { border-top: 1px solid var(--portal-border); }
.article-related h3 { font-size: 17px; }

/* ============ 分页：胶囊 ============ */
.page-link { border-radius: 8px; border: 1px solid var(--portal-border); transition: all .2s; }
.page-link:hover { border-color: var(--portal-primary); transform: translateY(-1px); }
.page-link.current { background: var(--tm-grad); border-color: transparent; box-shadow: 0 4px 12px rgba(30, 58, 138, .25); }

/* ============ 搜索/空态/错误页 ============ */
.empty-state { border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-sm); }
.error-box h1 { font-size: 56px; }
.search-page .article-body em { background: rgba(245, 158, 11, .18); color: #92400e; border-radius: 3px; padding: 0 3px; }

/* ============ Footer：深墨蓝 ============ */
.portal-footer { background: #0f172a; margin-top: 72px; overflow-wrap: break-word; }
/* 列自适应（无友链时 2 列不留空位）+ 备案列升格全宽底栏（原型 footer-bottom 形态）；
   min-width:0 + overflow-wrap 兜底超长内容（ICP/邮箱/URL 连续串）不撑破列、不横向溢出。 */
.footer-inner { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px 40px; padding: 36px 16px 28px; }
.footer-col { min-width: 0; }
.footer-record { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; }
.footer-title { color: #fff; }
.footer-contact p, .footer-record p { font-size: 14px; line-height: 2; }
.footer-record a, .footer-links-list a { transition: color .2s, padding-left .2s; }
.footer-links-list a:hover { color: #fff; padding-left: 4px; }

/* ============ 响应式（叠加于 classic 断点之上） ============ */
@media (max-width: 1024px) {
  .home-blocks { grid-template-columns: repeat(2, 1fr); }
  .home-blocks > .home-block:first-child,
  .home-blocks > .home-block:nth-child(2) { grid-column: auto; grid-row: auto; }
  .home .gallery-grid > .gallery-item:first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 768px) {
  .carousel { height: 380px; }
  .carousel-title { font-size: 24px; }
  .carousel-slide figcaption { padding: 20px; gap: 14px; }
  .carousel-cta { padding: 10px 22px; font-size: 14px; }
  .home-blocks { grid-template-columns: 1fr; }
  .block-headline-cover { height: 200px; }
  .header-inner { height: auto; padding: 14px 16px; flex-wrap: wrap; }
  .search-box { width: 100%; order: 3; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
