/* BrounStack Learning Paths — integration-branch only.
   Scoped to the public learning page so existing cards and reader UI remain untouched. */

.learning-paths-section {
  padding: 70px 0 74px;
  background: linear-gradient(180deg, #f7f9fc 0%, #fbfcfe 100%);
  border-top: 1px solid #e7edf4;
  border-bottom: 1px solid #e7edf4;
}

.learning-paths-head {
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}

.learning-paths-head .learning-label {
  margin-bottom: 10px;
}

.learning-paths-head h2 {
  margin: 0 0 10px;
  color: #0a2540;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.learning-paths-head h2 span {
  color: #0b73ce;
}

.learning-paths-head p {
  margin: 0;
  color: #60748a;
  font-size: .98rem;
  line-height: 1.7;
}

.learning-paths-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.learning-paths-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #dde5ed;
  border-radius: 999px;
  background: #fff;
  color: #62788d;
  font-size: .7rem;
  font-weight: 700;
}

.learning-paths-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aab5bf;
}

.learning-paths-legend .is-live i { background: #16944b; }
.learning-paths-legend .is-draft i { background: #2776ca; }
.learning-paths-legend .is-book i { background: #9b612e; }
.learning-paths-legend .is-planned i { background: #aab5bf; }

.learning-paths-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.learning-path-card {
  --path-accent: #0b73ce;
  position: relative;
  min-width: 0;
  min-height: 252px;
  overflow: hidden;
  padding: 22px 20px 20px 23px;
  border: 1px solid #dce4ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 52, 83, .045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.learning-path-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--path-accent);
}

.learning-path-card:hover {
  transform: translateY(-3px);
  border-color: #c7d5e1;
  box-shadow: 0 14px 32px rgba(15, 52, 83, .09);
}

.learning-path-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.learning-path-card h3 {
  min-width: 0;
  margin: 0;
  color: #0c2238;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.learning-path-level {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecf7ef;
  color: #267542;
  font-size: .64rem;
  line-height: 1;
  font-weight: 800;
}

.learning-path-level.is-intermediate {
  background: #fff2df;
  color: #b85d0a;
}

.learning-path-level.is-advanced {
  background: #fde9ee;
  color: #b92048;
}

.learning-path-description {
  min-height: 60px;
  margin: 0 0 17px;
  color: #60748a;
  font-size: .8rem;
  line-height: 1.58;
}

.learning-path-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.learning-path-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid #dfe6e2;
  border-radius: 999px;
  background: #fbfcfb;
  color: #263e4f;
  font-size: .69rem;
  line-height: 1.15;
  font-weight: 650;
  text-decoration: none;
}

.learning-path-step b {
  flex: 0 0 auto;
  color: #168b48;
  font-size: .66rem;
}

.learning-path-step span {
  min-width: 0;
  overflow-wrap: anywhere;
}

a.learning-path-step {
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

a.learning-path-step:hover {
  transform: translateY(-1px);
}

a.learning-path-step:focus-visible {
  outline: 3px solid rgba(11, 115, 206, .23);
  outline-offset: 2px;
}

.learning-path-step.is-live {
  border-color: #cbe6d3;
  background: #fbfffc;
}

.learning-path-step.is-live b { color: #168b48; }

.learning-path-step.is-draft {
  border-color: #ccdef3;
  background: #f8fbff;
  color: #355a7d;
}

.learning-path-step.is-draft b { color: #2b70b9; }

.learning-path-step.is-book {
  border-color: #eadbcb;
  background: #fffaf5;
  color: #765232;
}

.learning-path-step.is-book b { color: #965e2c; }

.learning-path-step.is-planned {
  border-style: dashed;
  background: #fafafa;
  color: #7f8e9b;
  cursor: default;
}

.learning-path-step.is-planned b { color: #99a5ae; }

.learning-path-status-note {
  margin: 24px auto 0;
  max-width: 900px;
  color: #718396;
  font-size: .78rem;
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 1120px) {
  .learning-paths-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-path-card { min-height: 235px; }
}

@media (max-width: 680px) {
  .learning-paths-section { padding: 52px 0 56px; }
  .learning-paths-head { margin-bottom: 22px; text-align: left; }
  .learning-paths-head h2 { font-size: clamp(1.8rem, 8vw, 2.25rem); }
  .learning-paths-legend { justify-content: flex-start; }
  .learning-paths-grid { grid-template-columns: 1fr; gap: 13px; }
  .learning-path-card { min-height: 0; padding: 20px 17px 19px 20px; }
  .learning-path-description { min-height: 0; }
  .learning-path-status-note { text-align: left; }
}

@media (max-width: 390px) {
  .learning-path-card-head { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .learning-path-card,
  a.learning-path-step { transition: none; }
  .learning-path-card:hover,
  a.learning-path-step:hover { transform: none; }
}