/* One navigation treatment for every learning studio, including the STL studio. */
.learning-navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: min(1530px, calc(100% - 44px));
  margin: 18px auto 0;
}
.learning-section-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 66px;
  padding: 10px 15px;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  color: #244465;
  background: #fff;
  font: 800 var(--vms-text-nav)/1.35 var(--vms-font);
  text-align: start;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.learning-section-link:hover { color: #0758bb; border-color: #a9c9ee; background: #f8fbff; box-shadow: 0 5px 18px #204a7910; }
.learning-section-link[aria-current="page"] { color: #0758bb; border-color: #8ab7f1; background: #edf5ff; box-shadow: inset 0 0 0 1px #8ab7f1; }
.learning-section-link:focus-visible { outline: 3px solid #4388ed; outline-offset: 3px; }
.learning-section-link > span:last-child { min-width: 0; overflow-wrap: break-word; }
.learning-section-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; }
.learning-section-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.learning-section-link[data-section="cards"] .learning-section-icon { color: #18846d; background: #ddf6ec; }
.learning-section-link[data-section="stories"] .learning-section-icon { color: #bc5877; background: #ffedf2; }
.learning-section-link[data-section="fairy"] .learning-section-icon { color: #a5761a; background: #fff2d6; }
.learning-section-link[data-section="puzzles"] .learning-section-icon { color: #7c5abb; background: #f0e8ff; }
.learning-section-link[data-section="boards"] .learning-section-icon { color: #226894; background: #e2f3fd; }
@media (max-width: 980px) {
  .learning-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100% - 28px); gap: 9px; margin-top: 14px; }
  .learning-section-link { gap: 8px; padding: 10px; }
}
@media (max-width: 680px) {
  .learning-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 20px); gap: 8px; margin-top: 12px; }
  .learning-section-link { justify-content: flex-start; min-height: 70px; border-radius: 14px; font-size: var(--vms-text-body); }
  .learning-section-icon { width: 34px; height: 34px; border-radius: 10px; }
  .learning-section-icon svg { width: 21px; height: 21px; }
}
@media print { .learning-navigation { display: none; } }