/* 网站首页(index.html)专用样式。类名统一 hm- 前缀,
   不与 practice.css(刷题页)、landing.css(.lp-)、sign.css(.sg-)、
   schools.css、topbar.css(.ub-)冲突。
   颜色与圆角全部取 style.css 里的 CSS 变量。 */

/* ===== Banner 轮播 ===== */
.hm-banner {
  position: relative;
  background: linear-gradient(115deg, #eff6ff 0%, #f8fbff 46%, var(--card) 100%);
  border: 1px solid #dbeafe;
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;   /* 配图放大后不许顶破圆角 */
}

/* 三张 slide 用 grid 叠在同一格里。
   这样容器高度自动等于**最高的那一张**,切换时不会忽高忽低 ——
   用绝对定位就得写死一个 min-height,文案一改就露馅。 */
.hm-track { display: grid; }
.hm-slide {
  grid-area: 1 / 1;
  display: grid;
  /* 左文右图。用 grid 而不是 flex:两列比例(内容 : 配图 ≈ 1 : 0.8)要稳定,
     flex 的 shrink 会让长标题把配图挤扁。 */
  grid-template-columns: 1fr minmax(0, .8fr);
  align-items: center;
  gap: 18px;
  padding: 30px 28px;
  /* 非当前张:透明 + 不可点 + 读屏跳过。用 visibility 而不是 display:none,
     才能有淡入淡出;而 opacity 单独用会留下一个"看不见但能点"的图层。
     visibility 的过渡带 .45s 延迟,是为了让淡出动画走完再真正隐藏。
     **pointer-events 必须单独关掉,不能只靠 visibility**:三张 slide 是 grid 叠在
     同一格里的,DOM 靠后的那张盖在上面;淡出的这 450ms 内旧 slide 仍然可命中,
     此时点一下打开的是**上一张的链接**。实测 elementFromPoint 命中的确实是旧的那张。
     pointer-events 不带延迟,切换瞬间就生效,把这个窗口彻底堵死。 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.hm-slide.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .45s ease, visibility 0s;
}

.hm-slide-kicker {
  color: var(--blue); font-size: 12.5px; font-weight: 600;
  letter-spacing: 1px; margin-bottom: 8px;
}
/* h1(第一张)与 p(后两张)长得完全一样 —— 页面只该有一个 h1,
   但三张 slide 在视觉上是平级的 */
.hm-slide-h {
  font-size: 34px; font-weight: 700; line-height: 1.32; letter-spacing: 1px;
  color: var(--text); margin-bottom: 12px;
}
.hm-slide-sub {
  color: var(--text-sub); font-size: 14px; line-height: 1.9; max-width: 30em;
}
.hm-slide-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hm-slide-acts .btn { min-width: 150px; }
/* 配图给一点负边距,让它更贴近卡片边缘,视觉上不那么"框住" */
.hm-slide-art {
  width: 100%; height: auto; display: block;
  margin: -10px -8px -14px 0;
}

/* ---- 控件(由 js/banner.js 插入)---- */
.hm-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 8px;
}
.hm-dot {
  width: 26px; height: 5px; border-radius: 999px; border: none; padding: 0;
  background: #cbd5e1; cursor: pointer; transition: background .2s, width .2s;
}
.hm-dot:hover { background: #94a3b8; }
.hm-dot[aria-selected="true"] { background: var(--blue); width: 34px; }
/* 键盘焦点要看得见 —— 这几个按钮没有文字,丢了焦点圈就完全不知道自己在哪 */
.hm-dot:focus-visible, .hm-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.hm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.82); color: var(--text);
  font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s, background .2s;
}
.hm-arrow:hover { background: #fff; }
.hm-prev { left: 10px; }
.hm-next { right: 10px; }
/* 箭头平时隐藏,鼠标移上来或键盘聚焦时才出现:桌面上它们是辅助,
   常驻会挡住配图。触屏设备没有 hover,所以下面单独让它常显。 */
.hm-banner:hover .hm-arrow, .hm-arrow:focus-visible { opacity: 1; }
@media (hover: none) {
  .hm-arrow { opacity: .9; }
}

/* ===== 数字条 ===== */
.hm-stats {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: space-around;
  gap: 12px 24px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px;
}
.hm-stats li { display: flex; flex-direction: column; align-items: center; min-width: 68px; }
.hm-stats b { font-size: 22px; color: var(--blue); line-height: 1.2; }
.hm-stats span { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; }

/* ===== 区块标题 ===== */
.hm-sec {
  font-size: 18px; font-weight: 700; line-height: 1.3;
  margin: 28px 0 13px; padding-left: 9px; border-left: 4px solid var(--blue);
}

/* ===== 车型卡片 ===== */
.hm-cars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.hm-car {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 14px 15px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .12s, transform .06s, box-shadow .15s;
}
.hm-car:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.hm-car-ico { font-size: 30px; line-height: 1.1; }
.hm-car b { font-size: 16.5px; }
.hm-car-meta { font-size: 12.5px; color: var(--text-sub); }
/* 「题库最全」角标。绝对定位而不是塞进流里,免得有角标的那张卡比别的高一截 */
.hm-car-tag {
  position: absolute; top: 9px; right: 9px;
  background: var(--orange); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
}

.hm-modes {
  margin-top: 14px; padding: 12px 15px;
  background: var(--blue-light); color: #1e40af; border-radius: 10px;
  font-size: 13px; line-height: 1.9;
}
.hm-modes b { font-weight: 600; }
.hm-modes a { color: var(--blue); font-weight: 600; }

/* ===== 三个栏目 ===== */
.hm-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px;
}
.hm-col {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 18px 16px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .08s, box-shadow .15s;
}
.hm-col:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.hm-col-ico { font-size: 26px; line-height: 1.1; }
.hm-col b { font-size: 17px; }
.hm-col p { color: var(--text-sub); font-size: 13px; line-height: 1.75; }
/* margin-top:auto 把箭头压到卡片底部,三张卡的箭头就能对齐 */
.hm-col-go { margin-top: auto; padding-top: 8px; color: var(--blue); font-size: 13px; font-weight: 600; }

/* ===== 链接胶囊(热门城市 / 常查标志) ===== */
.hm-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-cities a {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 15px; font-size: 13.5px; color: var(--text); text-decoration: none;
  transition: border-color .12s, color .12s;
}
.hm-cities a:hover { border-color: var(--blue); color: var(--blue); }
.hm-cities-more { color: var(--blue) !important; font-weight: 600; }

/* ===== 站点说明 ===== */
.hm-about {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 22px 18px; margin-top: 28px;
}
.hm-about h2 { font-size: 17px; margin-bottom: 10px; }
.hm-about p { color: var(--text-sub); font-size: 13.5px; line-height: 1.95; margin-bottom: 10px; }
.hm-about b { color: var(--text); font-weight: 600; }
.hm-about-note { font-size: 12.5px !important; color: var(--text-sub); opacity: .85; margin-bottom: 0 !important; }

/* ===== 移动端 ===== */
/* 中等屏:配图先缩,别让它把文字挤到只剩两个字一行 */
@media (max-width: 820px) {
  .hm-slide { grid-template-columns: 1fr minmax(0, .62fr); padding: 26px 22px; }
  .hm-slide-h { font-size: 29px; }
}

@media (max-width: 560px) {
  /* 手机上改成上下:横向并排的话配图只剩一条,什么也看不清。
     配图放到文字下面而不是上面 —— 首屏第一眼应该是标题和按钮,不是插图。 */
  /* 手机上整体收紧。放任不管的话 banner 有 600px 高 —— 812px 的视口里占七成半,
     数字条和下面的车型卡片全被挤出首屏,用户得先滑一屏才看得到实际入口。
     收缩的优先级:先砍装饰(配图),再砍留白,正文和按钮尺寸不动。 */
  .hm-slide {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 18px 24px;   /* 底部留出圆点的位置 */
    text-align: center;
  }
  .hm-slide-h { font-size: 25px; margin-bottom: 10px; }
  .hm-slide-h br { display: none; }     /* 窄屏让它自然折行,别在奇怪的地方断开 */
  .hm-slide-sub { max-width: none; font-size: 13.5px; line-height: 1.8; }
  /* 两个按钮并排各占一半,而不是各占一行:省下一整行高度,
     单个仍有 ~145px 宽、44px 高,点起来完全够 */
  .hm-slide-acts { justify-content: center; gap: 10px; margin-top: 16px; }
  .hm-slide-acts .btn { flex: 1; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .hm-slide-art { max-width: 210px; margin: 2px auto 0; }
  .hm-dots { bottom: 9px; }
  /* 手机上箭头会压住配图,而且有滑动手势可用,直接不要 */
  .hm-arrow { display: none; }
  .hm-stats { padding: 14px 12px; gap: 10px 16px; }
  /* 车型卡一行两个:再窄就只剩图标了,四个挤一行也看不清 */
  .hm-cars { grid-template-columns: 1fr 1fr; }
  .hm-cols { grid-template-columns: 1fr; }
  .hm-about { padding: 18px 16px 14px; }
}