/*
 * 官网首页：职业技术认证项目区（#yp-cert）。
 *
 * 位置在考期条之下、「智能备考管家」简介之上——它是首页第一个内容区块。
 * 这一节的任务只有一个：让人知道除了软考，这里还有一条工信部教育与考试中心的
 * 职业技术认证线，然后点进 /cert/。所以只放做判断需要的三件事——六个方向叫什么、
 * 三个等级多少钱、从哪里问——完整介绍留在 /cert/ 那七个页面里。
 *
 * **不依赖 Tailwind。** 与 plan-hero.css / course-matrix.css 同理：
 * assets/css/tailwind.css 是预编译产物，只含现有页面用过的类，这里新写的类名
 * 若走 Tailwind 会大面积落空。
 *
 * 共用 .yp-wrap 容器（1180 居中）与 plan-hero.css 定义的 --yp-* 配色 token，
 * 因此本文件必须在 plan-hero.css 之后加载。
 *
 * 配色上刻意与下面的软考内容拉开：整节走深色（同考期条那一档 --yp-ink-dark 系），
 * 是全页第二处深色块。两条产品线并排在浅底上会分不清主次，读者以为是同一件事的两个部分。
 */

.yp-cert {
  padding: 44px 0 46px;
  color: #e6ecf5;
  background: linear-gradient(135deg, #14243d 0%, #1d3a63 100%);
}

.yp-cert-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---- 左栏：说明与行动 ---- */

.yp-cert h2 {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.yp-cert-lead {
  margin: 12px 0 0;
  color: #a8b8ce;
  font-size: 15px;
  line-height: 1.85;
}

.yp-cert-lead b {
  color: #e6ecf5;
  font-weight: 600;
}

/* 三档价格：一行摆完，不做成卡片——首页这一节不承担比价，只给个量级 */
.yp-cert-price {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.yp-cert-price li {
  flex: 1 1 96px;
  padding: 10px 12px;
  border: 1px solid rgba(169, 198, 255, 0.22);
  border-radius: var(--yp-radius-flat, 12px);
  background: rgba(255, 255, 255, 0.04);
}

.yp-cert-price span {
  display: block;
  color: #8fa3c0;
  font-size: 12px;
}

.yp-cert-price b {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
}

.yp-cert-price b i {
  margin-right: 1px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.yp-cert-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.yp-cert-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border: 0;
  border-radius: 8px;
  background: #2f6aff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease;
}

.yp-cert-btn:hover {
  background: #1f4fd8;
}

.yp-cert-btn-ghost {
  background: transparent;
  border: 1px solid rgba(169, 198, 255, 0.35);
  color: #cfdcf0;
}

.yp-cert-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* ---- 右栏：六个方向 ---- */

.yp-cert-dirs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.yp-cert-dirs a {
  display: block;
  padding: 13px 15px;
  border: 1px solid rgba(169, 198, 255, 0.16);
  border-radius: var(--yp-radius-flat, 12px);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  transition: all 0.18s ease;
}

.yp-cert-dirs a:hover {
  border-color: rgba(169, 198, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.yp-cert-dirs b {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.yp-cert-dirs small {
  display: block;
  margin-top: 4px;
  color: #8fa3c0;
  font-size: 12px;
  line-height: 1.6;
}

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

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

@media (max-width: 640px) {
  .yp-cert {
    padding: 34px 0 36px;
  }

  .yp-cert h2 {
    font-size: 23px;
  }

  /* 六个方向在手机上一列一个：两列时「智能体开发应用工程师」要断成三行 */
  .yp-cert-dirs {
    grid-template-columns: minmax(0, 1fr);
  }

  .yp-cert-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}