/* study-note: base.css
 * 作用：全站设计令牌和基础样式。
 * 原则：颜色、字体、间距、日期字号、轮播标题字号都先在 :root 里定义，页面 CSS 尽量引用变量。
 * 主题色：当前主色为 #b1182d。只要页面引入 base.css，使用 var(--color-primary) 的位置都会同步生效。
 */
:root {
  /* ===== Brand colors ===== */
  --color-primary: #a2182d;
  --color-primary-dark: #8f1224;
  --color-primary-soft: #c64255;
  --color-primary-pale: #f6e8eb;
  --color-primary-rgb: 177, 24, 45;
  --color-accent: #c7a16a;
  --color-text: #232323;
  --color-muted: #6e6a66;
  --color-border: #e4ddd7;
  --color-surface: #ffffff;
  --color-page: #f5f3f0;
  --color-card: #faf9f7;
  --color-shadow: 0 8px 18px rgba(67, 39, 39, 0.10);
  --color-hover-blue: #1f5f9f;
  --color-hover-blue-dark: #174a7c;

  /* ===== Motion and radius ===== */
  --motion-fast: 0.18s ease;
  --motion-normal: 0.28s ease;
  --motion-slider: 0.56s cubic-bezier(0.45, 0, 0.2, 1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ===== Layout ===== */
  /* 页面主体宽度：需要“合理增加宽度”时，优先改这里。 */
  --container: 1440px;
  --page-side-space: clamp(18px, 3.2vw, 56px);
  --section-gap: clamp(42px, 4.2vw, 60px);
  --nav-item-width: 124px;
  /* 页头 logo：当前素材为 1452x250，按约 100px 高完整显示，宽度按真实比例控制。 */
  --brand-logo-target-height: 100px;
  --brand-logo-edge-y: 8px;
  --masthead-height: calc(var(--brand-logo-target-height) + (var(--brand-logo-edge-y) * 2));
  --brand-logo-target-width: 581px;
  --header-utility-reserve: 360px;
  --brand-logo-width: min(var(--brand-logo-target-width), calc(100% - var(--header-utility-reserve)));
  /* logo 按自身比例完整显示；不要改成 cover/fill，否则会裁切左右或拉伸字体。 */
  --brand-logo-height: var(--brand-logo-target-height);
  --brand-anchor-x: 0px;
  --topbar-link-offset-y: 12px;

  /* 页头对齐：保持原有结构，不重做 header；logo 靠左完整显示，导航居中。 */
  --header-logo-offset-x: 0px;
  --header-nav-offset-x: 0px;
  --site-header-height: 164px;

  /* 页脚 logo 单独控制，不继承页头高度；保持真实比例，避免被 max-height 压扁。 */
  --footer-logo-width: clamp(280px, 20vw, 380px);
  --footer-logo-max-height: none;
  --footer-logo-mobile-width: min(260px, 76vw);
  --footer-logo-mobile-max-height: none;

  /* 轮播首屏：宽度始终铺满屏幕，高度尽量保证进页面能看到整块轮播和底部标题。 */
  --hero-first-screen-gap: 6px;
  --hero-min-height: 220px;
  --hero-max-height: 920px;
  --hero-image-fit: cover;
  --section-bg-opacity: 0.66;
  --section-bg-opacity-mobile: 0.6;

  /* ===== Font system ===== */
  --font-sans: Arial, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', SimSun, sans-serif;
  --font-serif-heavy: Georgia, 'Times New Roman', 'Source Han Serif CN Heavy', 'Source Han Serif CN', SimSun, serif;
  --font-date: 'Times New Roman', Times, serif;
  --font-root-size: 100px;
  --font-size-body: clamp(12px, 0.72vw, 13px);
  --line-body: 1.5;
  --line-paragraph: 1.65;

  /* Header and navigation */
  --font-size-footer-heading: clamp(14px, 0.86vw, 15px);
  --font-size-footer-link: clamp(12px, 0.78vw, 13px);
  --line-footer-link: 1.18;
  --font-size-toplink: clamp(12px, 0.72vw, 13px);
  --font-size-nav: clamp(13px, 0.86vw, 15px);
  --line-nav: 46px;
  --font-size-subnav: clamp(12px, 0.78vw, 13px);
  --line-subnav: 34px;

  /* Section and card text */
  --font-size-section-title: clamp(22px, calc(2vw - 2px), 28px);
  --line-section-title: 1.25;
  --font-size-more-link: clamp(12px, 0.82vw, 14px);
  --font-size-news-title: clamp(13px, 0.95vw, 15px);
  --line-news-title: 1.58;
  --font-size-news-title-large: clamp(14px, 1.04vw, 16px);
  --line-news-title-large: 1.55;
  --font-size-news-summary: clamp(12px, 0.86vw, 13px);
  --line-news-summary: 1.7;
  --font-size-notice-title: clamp(14px, 1.1vw, 17px);
  --line-notice-title: 1.5;

  /* Date block: 日期必须自适应，保持 04-22 / 2026 两行不乱。 */
  --date-card-width: clamp(62px, 7.4vw, 108px);
  --date-card-width-small: clamp(50px, 5.8vw, 74px);
  --font-size-date-day: clamp(20px, 2.15vw, 30px);
  --font-size-date-year: clamp(12px, 1.15vw, 16px);
  --font-size-date-list: clamp(14px, 1.25vw, 18px);
  --font-size-date-year-small: clamp(10px, 0.85vw, 12px);

  /* 首页栏目图片比例：统一用 16:9，便于长期管理。
   * 教学科研、新传风采全部使用同一套素材规范：
   * 推荐原始母版 1600x900；网页轻量版 960x540；最低不低于 1200x675。
   * 页面中的“大图/横图/小图”只是版式大小不同，不再要求不同裁切比例。
   */
  --ratio-section-image: 16 / 9;
  --section-image-master-width: 1600px;
  --section-image-master-height: 900px;
  --section-image-web-width: 960px;
  --section-image-web-height: 540px;
  --section-image-gap: clamp(18px, 1.9vw, 28px);
  --ratio-teaching-image: var(--ratio-section-image);
  --ratio-campus-large: var(--ratio-section-image);
  --ratio-campus-wide: var(--ratio-section-image);
  --ratio-campus-small: var(--ratio-section-image);
  --size-teaching-image: 1600px 900px;
  --size-campus-large: 1600px 900px;
  --size-campus-wide: 1600px 900px;
  --size-campus-small: 1600px 900px;

  /* Hero caption: 轮播标题随屏幕缩放，移动端不会过大。 */
  --font-size-hero-eyebrow: clamp(10px, 0.8vw, 13px);
  --font-size-hero-title: clamp(16px, 2.05vw, 28px);
  --line-hero-title: 1.22;
}

html,
body {
  min-width: 320px;
  overflow-x: hidden;
}

html {
  font-size: var(--font-root-size);
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: linear-gradient(180deg, #f7f5f2 0%, #f4f2ee 100%);
}

p {
  line-height: var(--line-paragraph);
}

body.menu-open {
  overflow: hidden;
}

.page {
  min-height: 100vh;
}

.wrap {
  width: min(var(--container), calc(100% - (var(--page-side-space) * 2)));
  margin: 0 auto;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--color-shadow);
  overflow: hidden;
}

.section-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(18px, 2.1vw, 28px);
  text-align: center;
}

.section-head h2 {
  position: relative;
  min-width: 4em;
  font-size: var(--font-size-section-title);
  line-height: var(--line-section-title);
  font-weight: 700;
  letter-spacing: 0;
  color: #303030;
  text-align: center;
}

.section-head h2::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin: 12px auto 0;
  background: var(--color-primary);
}

.section-head .more-link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-more-link);
  line-height: 1.2;
  color: #6a6a6a;
}

.section-head.section-head-light h2 {
  color: #fff;
}

.section-head.section-head-light h2::after {
  background: #fff;
}

.more-link-light {
  color: rgba(255, 255, 255, 0.9) !important;
}

.site-main {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 1180px) {
  :root {
    --nav-item-width: 116px;
    --line-nav: 42px;
    --brand-logo-target-height: 90px;
    --brand-logo-edge-y: 4px;
    --masthead-height: calc(var(--brand-logo-target-height) + (var(--brand-logo-edge-y) * 2));
    --brand-logo-target-width: 523px;
    --header-utility-reserve: 260px;
    --brand-logo-width: min(var(--brand-logo-target-width), calc(100% - var(--header-utility-reserve)));
    --page-side-space: clamp(14px, 2.8vw, 36px);
    --site-header-height: 140px;
  }

  .wrap {
    width: min(var(--container), calc(100% - (var(--page-side-space) * 2)));
  }
}

@media (max-width: 767px) {
  :root {
    --section-gap: 38px;
    --page-side-space: 10px;
    --site-header-height: 64px;
    --masthead-height: 0px;
    --brand-logo-target-height: 92px;
    --brand-logo-edge-y: 2px;
    --brand-logo-target-width: 534px;
    --brand-logo-height: auto;
    --mobile-header-action-size: clamp(25px, calc(5vw + 7.5px), 36px);
    --mobile-header-action-gap: clamp(4px, calc(8vw - 25.5px), 24px);
    /* 手机端完整显示优先：宽度只预留右侧竖排按钮与安全留白。 */
    --brand-logo-width: min(var(--brand-logo-target-width), calc(100vw - 58px));
    --font-size-body: 12px;
    --line-paragraph: 1.6;
    --font-size-section-title: clamp(18px, calc(5.4vw - 2px), 20px);
    --font-size-more-link: 12px;
    --font-size-news-title: clamp(12px, 3.35vw, 13px);
    --font-size-news-title-large: clamp(13px, 3.8vw, 15px);
    --font-size-news-summary: 12px;
    --font-size-notice-title: clamp(13px, 3.6vw, 14px);
    --date-card-width: clamp(56px, 17vw, 78px);
    --date-card-width-small: clamp(46px, 15vw, 60px);
    --font-size-date-day: clamp(17px, 5.1vw, 22px);
    --font-size-date-year: clamp(10px, 3.2vw, 12px);
    --font-size-date-list: clamp(13px, 4vw, 15px);
    --font-size-date-year-small: clamp(9px, 2.8vw, 10px);
    --font-size-hero-eyebrow: clamp(9px, 2.8vw, 11px);
    --font-size-hero-title: clamp(13px, 4vw, 17px);
    --line-hero-title: 1.28;
  }

  .wrap {
    width: min(var(--container), calc(100% - (var(--page-side-space) * 2)));
  }

  .section-head {
    margin-bottom: 18px;
  }

  .section-head {
    min-height: 32px;
  }

  .section-head .more-link {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }
}