.learning-hero {
  display: grid;
  gap: 16px;
}

.learning-roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.road-step {
  display: grid;
  gap: 8px;
  min-height: 190px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease;
}

.road-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(22, 32, 29, .10);
}

.road-step.done {
  border-color: rgba(15, 118, 110, .34);
  background: var(--soft);
}

.step-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--teal);
  font-weight: 900;
}

.road-step strong {
  font-size: 18px;
  line-height: 1.25;
}

.road-step small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.path-list {
  display: grid;
  gap: 12px;
}

.path-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.path-card.recommended {
  border-color: rgba(15, 118, 110, .35);
  background: var(--soft);
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.doc-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.doc-card.soon {
  background: #fff8e7;
}

.doc-card h3,
.doc-card p {
  margin: 0;
}

.doc-card p {
  color: var(--muted);
}

.doc-card a {
  width: fit-content;
  font-weight: 800;
}

.next-pages {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.next-pages div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.next-pages span {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .learning-roadmap,
  .doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .learning-roadmap,
  .doc-grid {
    grid-template-columns: 1fr;
  }

  .road-step {
    min-height: 0;
  }

  .next-pages div {
    flex-direction: column;
  }
}