/*
 * 官网首页：科目产品矩阵（#products）。
 *
 * 依据 softexam-prototype 的 views/website/home.js 与 styles/website.css
 * （.site-course-grid / .site-course / .course-top / .course-foot）：
 * 七个科目是「选一科开始」的清单，不是七篇产品介绍——一屏能扫完比每张卡说得多更重要。
 * 所以卡片只留做选择需要的五个事实：系统名、科目全名、本期开不开考、考哪几科、多少钱。
 *
 * **不依赖 Tailwind。** 与 plan-hero.css 同理：assets/css/tailwind.css 是预编译产物，
 * 只含现有页面用过的类，这里新写的类名若走 Tailwind 会大面积落空。
 *
 * 与 plan-hero.css 的关系：同属首页 yp- 版式，**共用 .yp-wrap 容器**（1180 居中）
 * 与 :root 上那套 --yp-* 配色 token，因此本文件必须在 plan-hero.css 之后加载。
 * 只覆盖两个本节点专用的取值，其余一律沿用。
 */

.yp-courses {
  /* 绿色在这里是浅底上的小字（考期 chip），--yp-good 那档亮绿对比度不够，压深一档 */
  --yp-good: #389e0d;
  --yp-fill: #f6f8fb;

  padding: 52px 0 56px;
  color: var(--yp-ink);
  background: #ffffff;
}

/* ---- 标题区：标题在左、这一节说明在右，比居中大标题省一屏高度 ---- */

.yp-courses-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: end;
  gap: 40px;
  margin-bottom: 28px;
}

.yp-courses-head h2 {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--yp-ink);
}

.yp-courses-head p {
  margin: 0;
  color: var(--yp-ink-2);
  font-size: 14px;
  line-height: 1.85;
}

/* ---- 级别分组：一行小标题加一条细线，替掉原来的胶囊标签 ---- */

.yp-course-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--yp-ink-2);
  font-size: 14px;
  font-weight: 600;
}

.yp-course-group::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--yp-line);
}

.yp-course-group + .yp-course-grid {
  margin-bottom: 32px;
}

/* ---- 卡片 ---- */

/*
 * 高级五科与中级两科共用同一套 5 列栅格：中级那排只填前三格，
 * 卡片宽度与上面一排完全对齐，比单独给中级排一套两列栅格更整齐。
 */
.yp-course-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* flex 列 + 底行 margin-top:auto：科目名折成两行时，价格那一行仍贴着卡片底边对齐 */
.yp-course {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--yp-line);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.yp-course:hover {
  border-color: #c7d6f5;
  box-shadow: 0 8px 20px rgba(31, 45, 61, 0.09);
  transform: translateY(-2px);
}

.yp-course-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 首字徽标。颜色一科一个，由 HTML 上的 --yp-mark 给出 */
.yp-course-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--yp-mark, var(--yp-accent));
  color: #ffffff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.yp-course-top em {
  color: var(--yp-muted);
  font-size: 13px;
  font-style: normal;
  white-space: nowrap;
}

/* 热门 / 上新：靠右挤在同一行，不再占卡片一个角 */
.yp-course-flag {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--yp-accent-soft);
  color: var(--yp-accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.yp-course h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--yp-ink);
}

/*
 * 整卡可点：标题这条链接铺满卡片（::after 绝对定位），
 * 这样卡片有一处可读的链接文字（科目全名）供读屏与搜索引擎使用，
 * 又不必把整张卡包成 <a>——底部的「进入系统」是另一个去处，不能嵌套。
 */
.yp-course h4 a {
  color: inherit;
  text-decoration: none;
}

.yp-course h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.yp-course:hover h4 a {
  color: var(--yp-accent);
}

.yp-course-term {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--yp-fill);
  color: var(--yp-muted);
  font-size: 12px;
}

.yp-course-term.on {
  background: var(--yp-good-soft);
  color: var(--yp-good);
}

.yp-course small {
  color: var(--yp-muted);
  font-size: 13px;
  line-height: 1.7;
}

.yp-course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--yp-line);
}

.yp-course-foot i {
  color: var(--yp-muted);
  font-size: 12px;
  font-style: normal;
}

/* a 是真去处（科目站），u 只是「更多产品」卡上的文字，点哪都是同一个页面 */
.yp-course-foot a,
.yp-course-foot u {
  flex: none;
  color: var(--yp-accent);
  font-size: 13px;
  text-decoration: none;
}

.yp-course-foot a {
  position: relative; /* 压在铺满卡片的 ::after 之上，点它才走科目站 */
  z-index: 1;
}

.yp-course-foot a:hover {
  text-decoration: underline;
}

.yp-course-foot a::after,
.yp-course-foot u::after {
  content: "›";
  margin-left: 4px;
}

/* ---- 窄屏 ---- */

/* 逐档降列，别从 5 列直接掉到 3 列——中间宽度上卡片会一下子变得又宽又空 */
@media (max-width: 1180px) {
  .yp-course-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .yp-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .yp-courses-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .yp-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .yp-courses {
    padding: 32px 0 36px;
  }

  .yp-course-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}