/* 海南陵水黎安国际教育创新试验区 · 中外合作办学本科项目专题页
   独立样式文件。由 scripts/build_hainan_topic.py 生成，请勿手改。
   规范：无装饰性渐变（文字遮罩用纯色半透明）、无外部字体/图标依赖。 */

:root {
  --brand:#C62828; --fill:#ED4040; --brand-100:#FDECEC;
  --fg:#1A1D23; --fg2:#4A5260; --muted:#667085;
  --line:#E4E7EC; --bg:#fff; --soft:#F7F8FA;
  --ok:#1B7A3D; --ok-bg:#E7F6EC; --warn:#B45309; --warn-bg:#FFFBEB;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.75 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
/* ---- 响应式容器：PC 宽屏自适应，移动端收敛 ---- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(16px,3vw,40px) 72px}

/* ---- 首屏 ---- */
.hero{background:#FFF7F6;border-bottom:1px solid var(--line);padding:44px 0 34px;margin-bottom:34px;
  position:relative;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(1.12) brightness(1.05) contrast(1.03);object-position:center 38%}
/* 纯色半透明遮罩保证文字对比度，不用渐变（项目规范：禁装饰性渐变） */
.hero::after{content:"";position:absolute;inset:0;background:rgba(255,247,246,.46)}
.hero .wrap{position:relative;z-index:1}
.kicker{display:inline-block;background:var(--brand-100);color:var(--brand);
  font-size:13px;font-weight:600;padding:5px 12px;border-radius:4px;margin-bottom:16px}
h1{font-size:clamp(24px,2.6vw,34px);line-height:1.32;margin:0 0 14px;font-weight:700;letter-spacing:-.4px}
.lede{font-size:clamp(15px,1.05vw,17px);color:var(--fg2);margin:0 0 26px;max-width:62ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px);
  padding-top:22px;border-top:1px solid var(--line)}
.stat b{display:block;font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.2}
.stat span{font-size:13px;color:var(--muted)}
.photo-credit{font-size:11.5px;color:var(--muted);margin-top:26px;padding-top:14px;
  border-top:1px solid rgba(0,0,0,.07);position:relative;z-index:1}
.photo-credit a{color:var(--muted);text-decoration:underline}

/* ---- 区块 ---- */
h2{font-size:21px;margin:46px 0 14px;font-weight:700;padding-left:11px;border-left:4px solid var(--fill)}
h3{font-size:16.5px;margin:0;font-weight:700}
p.note{color:var(--fg2);font-size:15px;margin:0 0 18px}
.zone{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin:0 0 8px}
.zone p{margin:0 0 10px;font-size:15px;color:var(--fg2)}
.zone p:last-child{margin:0}
.zone b{color:var(--fg)}
.addr{display:inline-block;background:var(--brand-100);color:var(--brand);
  font-size:13px;font-weight:600;padding:3px 10px;border-radius:4px;margin-top:4px}

/* ---- 项目分组 ---- */
.grp{margin:0 0 30px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grp-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding:13px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.grp-meta{font-size:13px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto}
/* 首列给足宽度，避免「中方高校 × 外方院校」被挤成两行 */
.grp table td:first-child,.grp table th:first-child{width:42%}
thead th{text-align:left;padding:10px 14px;background:#FCFCFD;
  border-bottom:1px solid var(--line);font-weight:600;font-size:13px;color:var(--fg2);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FCFCFD}
.sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.c-center{text-align:center}
.c-right{text-align:right;white-space:nowrap}
.badge{display:inline-block;font-size:12px;padding:2px 9px;border-radius:10px;font-weight:600}
.badge.live{background:var(--ok-bg);color:var(--ok)}
.badge.stop{background:#F1F2F4;color:#667085}
.badge.soon{background:var(--warn-bg);color:var(--warn)}
.fee{font-weight:700;font-size:15px}
.fee.high{color:var(--brand)}
.fee.mid{color:#1B6BB5}
.fee.na{color:var(--muted);font-weight:400;font-size:13px}

/* ---- 信息图 ---- */
.fig{margin:0 0 26px;border:1px solid var(--line);border-radius:8px;padding:18px 18px 14px}
.fig-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fig svg{display:block;margin:0 auto}   /* 图与字同比例，居中，不放大 */
figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.7;
  padding-top:11px;border-top:1px solid var(--line)}

/* ---- 其他 ---- */
.warn{background:var(--warn-bg);border-left:4px solid #D97706;padding:16px 18px;
  border-radius:0 8px 8px 0;margin:26px 0;font-size:14.5px;color:#78350F}
.tip{font-size:13.5px;color:var(--muted);margin-top:14px}
.fee-tbl{max-width:720px}
footer{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---- 图片加载失败降级（无 JS 时也由 onerror 属性兜底）---- */
.hero-img.is-missing{opacity:0}

/* ---- 响应式断点：宽屏 → 桌面 → 平板 → 手机 ---- */

/* 超宽屏（≥1600px）：容器已达上限，增大留白让内容不贴边 */
@media (min-width:1600px){
  .wrap{max-width:1320px}
}

/* 桌面窄屏 / 小笔记本（≤1200px） */
@media (max-width:1200px){
  .wrap{max-width:100%}
}

/* 平板横屏（≤1024px）：统计块 4 列 → 2 列 */
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .fee-tbl{max-width:100%}
}

/* 平板竖屏（≤820px）：表格转卡片，移动端表格不好读 */
@media (max-width:820px){
  .wrap{padding:0 clamp(14px,4vw,20px) 48px}
  .stats{gap:16px 22px}
  table{font-size:13.5px}
  thead{display:none}
  tbody tr{display:block;padding:4px 4px}
  tbody td{display:flex;justify-content:space-between;gap:14px;border:0;
            padding:7px 12px;text-align:left !important}
  tbody td::before{content:attr(data-l);color:var(--muted);font-size:12.5px;flex:0 0 40px;font-weight:600}
  .c-name::before{display:none}
  .grp-hd{padding:11px 12px}
  .zone{padding:16px}
  .fig{padding:14px 12px 12px}
}

/* 手机（≤560px）：统计块 2 列 → 1 列，避免数字被挤压换行 */
@media (max-width:560px){
  .hero{padding:32px 0 26px;margin-bottom:26px}
  .stats{grid-template-columns:1fr 1fr;gap:14px 16px;padding-top:18px}
  .stat b{font-size:22px}
  h2{font-size:19px;margin:34px 0 12px}
  .photo-credit{font-size:11px;line-height:1.6}
  .grp-hd{gap:4px 10px}
  .grp-meta{font-size:12px}
}

/* 超窄屏（≤380px）：统计块单列 */
@media (max-width:380px){
  .stats{grid-template-columns:1fr}
}

/* 触屏设备：去掉 hover 态（避免「粘住」的高亮） */
@media (hover:none){
  tbody tr:hover{background:transparent}
}