/* assets/pages/learn/learn-home-polish.css */
/* Final homepage-only polish for the new Musicatea learning section. */

.learn-hub-main {
  padding-top: 22px;
}

.learn-hub-hero-vivid {
  padding-top: 28px;
  background:
    radial-gradient(circle at 14% 6%, rgba(124,214,255,.22), transparent 19rem),
    radial-gradient(circle at 86% 4%, rgba(255,143,177,.18), transparent 20rem),
    radial-gradient(circle at 50% 42%, rgba(255,224,138,.10), transparent 30rem),
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
}

.learn-hub-hero-vivid::before {
  inset-block-end: 4px;
  opacity: .85;
}

.learn-hub-hero h1 {
  width: fit-content;
  position: relative;
  margin: 0 auto 16px;
  padding: 8px 22px 12px;
  border-radius: 24px;
  border: 1px solid rgba(255,224,138,.18);
  background:
    linear-gradient(135deg, rgba(255,224,138,.12), rgba(124,214,255,.07) 55%, rgba(255,143,177,.09));
  box-shadow: 0 16px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  color: #fff7df;
  text-shadow: 0 0 22px rgba(255,224,138,.12);
}

.learn-hub-hero h1::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,224,138,.75), rgba(124,214,255,.55), transparent);
}

.learn-journey-nav {
  margin-top: 16px;
}

.learn-journey-group:first-child {
  margin-top: 0;
}

@media (max-width: 560px) {
  .learn-hub-main {
    padding-top: 14px;
  }

  .learn-hub-hero-vivid {
    padding-top: 22px;
  }

  .learn-hub-hero h1 {
    width: 100%;
    padding-inline: 16px;
    font-size: clamp(1.75rem, 10vw, 2.55rem);
  }
}