/* assets/pages/learn/learn-section-pages.css */
/* Vivid premium learning-section skin for existing rhythm/maqam/reading/lesson pages. */

.learn-section-body {
  background:
    radial-gradient(circle at 12% 4%, rgba(124,214,255,.16), transparent 26rem),
    radial-gradient(circle at 88% 8%, rgba(255,143,177,.14), transparent 27rem),
    radial-gradient(circle at 52% 30%, rgba(226,192,122,.10), transparent 34rem),
    var(--bg);
}

.learn-section-body .learn-shell {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 42px 0 90px;
}

.learn-section-body .learn-page { position: relative; }
.learn-section-body .learn-breadcrumb { margin-bottom: 14px; color: rgba(255,255,255,.62); }
.learn-section-body .learn-breadcrumb a { color: #bfeeff; font-weight: 900; }

.learn-section-body .learn-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 16%, rgba(124,214,255,.18), transparent 18rem),
    radial-gradient(circle at 84% 12%, rgba(255,143,177,.14), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.020));
  box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}

.learn-section-body .learn-hero::before {
  content: '𝄞   ♪   ♫   ♩   𝄽';
  position: absolute;
  inset-inline-start: 5%;
  inset-block-end: 8px;
  color: rgba(255,255,255,.052);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: .18em;
  white-space: nowrap;
  transform: rotate(-5deg);
  pointer-events: none;
}

.learn-section-body .learn-kicker { border-color: rgba(124,214,255,.28); background: rgba(124,214,255,.10); color: #bfeeff; }
.learn-section-body .learn-hero h1 { color: #fff7df; }
.learn-section-body .learn-hero p { color: rgba(255,255,255,.78); }
.learn-lesson-hero-compact { display: grid; justify-items: center; align-items: center; text-align: center; padding-inline: clamp(18px, 5vw, 54px); }
.learn-lesson-hero-compact .learn-kicker { margin-inline: auto; }
.learn-lesson-hero-compact h1 { width: 100%; margin-inline: auto; text-align: center; }
.learn-section-body .learn-tabs { margin-top: 24px; }
.learn-section-body .learn-tab-btn { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.045); color: rgba(255,255,255,.76); }
.learn-section-body .learn-tab-btn:hover,
.learn-section-body .learn-tab-btn:focus-visible,
.learn-section-body .learn-tab-btn.is-active { color: #fff0ad; border-color: rgba(255,224,138,.38); background: rgba(255,224,138,.12); outline: none; }

.learn-section-body .learn-lab-card,
.learn-section-body .learn-lab-practice,
.learn-section-body .learn-lab-terms {
  border-color: rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 12% 10%, rgba(124,214,255,.08), transparent 16rem),
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.020));
  box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.learn-section-body .learn-term-card,
.learn-section-body .learn-quiz-card { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.030); }

.learn-section-body .learn-term-symbol,
.learn-section-body .learn-info-box,
.learn-section-body .learn-tool-row button,
.learn-section-body .learn-action-row button,
.learn-section-body .learn-quiz-options button { border-color: rgba(255,224,138,.28); background: rgba(255,224,138,.09); color: #fff0ad; }

.learn-section-body .learn-tool-row button:hover,
.learn-section-body .learn-action-row button:hover,
.learn-section-body .learn-quiz-options button:hover,
.learn-section-body .learn-tool-row button:focus-visible,
.learn-section-body .learn-action-row button:focus-visible,
.learn-section-body .learn-quiz-options button:focus-visible,
.learn-term-button:hover,
.learn-term-button:focus-visible,
.learn-term-button.is-active { background: rgba(255,224,138,.16); border-color: rgba(255,224,138,.42); outline: none; }

.learn-term-grid-buttons { align-items: stretch; }
.learn-term-button { width: 100%; text-align: start; cursor: pointer; font-family: inherit; color: inherit; animation: learnClickablePulse 2.8s ease-in-out infinite; }
.learn-term-button:nth-child(2n) { animation-delay: .35s; }
.learn-term-button:nth-child(3n) { animation-delay: .7s; }
.learn-term-button.is-active { box-shadow: 0 14px 30px rgba(255,224,138,.10); animation: none; }

.learn-reading-stage {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 8px auto 16px;
  max-width: 840px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at 20% 20%, rgba(255,143,177,.10), transparent 14rem), rgba(9,9,11,.28);
}

.learn-reading-stage-meter { min-height: 86px; display: grid; place-items: center; border-radius: 20px; border: 1px dashed rgba(255,224,138,.24); background: rgba(255,255,255,.035); color: rgba(255,255,255,.42); font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; font-weight: 900; transition: all .2s var(--ease); }
.learn-reading-stage-meter.is-active { border-style: solid; border-color: rgba(255,224,138,.42); background: rgba(255,224,138,.12); color: #fff0ad; box-shadow: 0 0 22px rgba(255,224,138,.12); }
.learn-reading-stage-staff { position: relative; min-height: 150px; display: grid; align-content: center; gap: 13px; padding: 22px 18px; border-radius: 20px; border: 1px dashed rgba(255,255,255,.12); background: rgba(255,255,255,.025); transition: all .2s var(--ease); }
.learn-reading-stage-staff.is-highlighted { border-style: solid; border-color: rgba(124,214,255,.38); background: rgba(124,214,255,.07); }
.learn-reading-stage-staff > span { height: 2px; border-radius: 999px; background: rgba(255,224,138,.40); }
.learn-reading-stage-clef,.learn-reading-stage-symbol,.learn-reading-stage-barline { position: absolute; opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease), filter .2s var(--ease); pointer-events: none; }
.learn-reading-stage-clef.is-visible,.learn-reading-stage-symbol.is-visible,.learn-reading-stage-barline.is-visible { opacity: 1; transform: translateY(0); filter: drop-shadow(0 0 12px rgba(255,224,138,.35)); }
.learn-reading-stage-clef { right: 22px; top: 34px; color: #fff0ad; font-family: Georgia, 'Times New Roman', serif; font-size: 5.2rem; line-height: 1; }
.learn-reading-stage-symbol { left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 6px)); color: #fff0ad; font-family: Georgia, 'Times New Roman', serif; font-size: 4.2rem; line-height: 1; }
.learn-reading-stage-symbol.is-visible { transform: translate(-50%, -50%); }
.learn-reading-stage-barline { left: 30px; top: 22px; bottom: 22px; width: 4px; border-radius: 999px; background: #fff0ad; }

.learn-reading-example { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 8px auto 16px; max-width: 760px; padding: 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(circle at 20% 20%, rgba(255,143,177,.10), transparent 14rem), rgba(9,9,11,.26); }
.learn-reading-meter { min-width: 72px; min-height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; border: 1px solid rgba(255,224,138,.26); background: rgba(255,224,138,.10); color: #fff0ad; font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; font-weight: 900; }
.learn-reading-bar { min-height: 82px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 12px; border-inline-start: 3px solid rgba(255,224,138,.55); border-inline-end: 3px solid rgba(255,224,138,.55); background: linear-gradient(transparent 47%, rgba(255,224,138,.45) 48%, rgba(255,224,138,.45) 52%, transparent 53%); }
.learn-reading-bar span { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.045); color: #fff0ad; font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; font-weight: 900; }

.learn-lesson-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 20px; }
.learn-lesson-main-card { min-height: 210px; }
.learn-section-badge { width: fit-content; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(124,214,255,.34); background: rgba(124,214,255,.12); color: #bfeeff; font-size: .92rem; line-height: 1.1; letter-spacing: .01em; font-weight: 900; box-shadow: 0 8px 20px rgba(124,214,255,.06); }
.learn-section-badge-exam { border-color: rgba(255,143,177,.40); background: rgba(255,143,177,.14); color: #ffd5e1; box-shadow: 0 8px 20px rgba(255,143,177,.07); }
.learn-lesson-info-card { border-color: rgba(124,214,255,.18) !important; background: radial-gradient(circle at 15% 10%, rgba(124,214,255,.12), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020)) !important; }
.learn-lesson-terms-card { border-color: rgba(255,224,138,.17) !important; }
.learn-lesson-focus-block { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 14px; padding: 14px; border-radius: 20px; border: 1px solid rgba(255,224,138,.22); background: rgba(255,224,138,.075); }

.learn-lesson-symbol {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  border: 1px solid rgba(255,224,138,.32);
  background: rgba(9,9,11,.34);
  color: #fff0ad;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.85rem;
  line-height: 1;
  font-weight: 900;
}

.learn-lesson-focus-block strong { display: block; color: #fff7df; font-size: 1.08rem; margin-bottom: 4px; }
.learn-lesson-focus-block p,.learn-lesson-hint { margin: 0; color: rgba(255,255,255,.72); line-height: 1.65; }
.learn-lesson-symbol-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
.learn-lesson-term-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.095); background: rgba(255,255,255,.035); }
.learn-lesson-term-symbol { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; border: 1px solid rgba(255,224,138,.24); background: rgba(255,224,138,.085); color: #fff0ad; font-family: Georgia, 'Times New Roman', serif; font-size: 1.55rem; font-weight: 900; line-height: 1; }
.learn-lesson-term-card strong { display: block; color: #fff7df; font-size: 1rem; margin-bottom: 2px; }
.learn-lesson-term-card p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.6; font-size: .9rem; }
.learn-lesson-example-display { min-height: 110px; display: grid; place-items: center; padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(9,9,11,.30); color: #fff0ad; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 900; text-align: center; }
.learn-lesson-example-block { border-color: rgba(255,224,138,.16) !important; }
.learn-lesson-practice-block { border-color: rgba(124,214,255,.18) !important; }
.learn-lesson-exam-block { position: relative; border-color: rgba(255,143,177,.30) !important; background: radial-gradient(circle at 12% 10%, rgba(255,143,177,.13), transparent 18rem), linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.024)) !important; box-shadow: 0 22px 54px rgba(0,0,0,.28), 0 0 32px rgba(255,143,177,.08), inset 0 1px 0 rgba(255,255,255,.05) !important; }
.learn-lesson-exam-block::before { content: '?'; position: absolute; left: 18px; top: 12px; color: rgba(255,255,255,.055); font-family: Georgia, 'Times New Roman', serif; font-size: 6rem; font-weight: 900; line-height: 1; pointer-events: none; }
.learn-lesson-exam-block .learn-lab-head h2 { color: #fff7df; font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
.learn-lesson-exam-block .quiz-item { position: relative; z-index: 1; padding: 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(9,9,11,.22); }

.learn-lesson-options,.learn-lesson-beats,.learn-lesson-note-row,.learn-lesson-pulse,.learn-lesson-measure { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.learn-lesson-options button,.learn-lesson-beats button,.learn-lesson-note-row span,.learn-lesson-pulse span,.learn-lesson-measure span { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 16px; border: 1px solid rgba(255,224,138,.24); background: rgba(255,224,138,.08); color: #fff0ad; font-family: inherit; font-weight: 900; }
.learn-lesson-beats button { min-width: 92px; flex-direction: column; cursor: pointer; }
.learn-lesson-beats button span { font-size: .78rem; color: rgba(255,255,255,.72); }
.learn-lesson-options button { cursor: pointer; }
.learn-lesson-options button:hover,.learn-lesson-options button:focus-visible,.learn-lesson-beats button:hover,.learn-lesson-beats button:focus-visible { border-color: rgba(255,224,138,.46); background: rgba(255,224,138,.14); outline: none; }
.learn-lesson-options button.is-correct,.learn-lesson-beats button.is-correct { border-color: rgba(126,207,160,.50); background: rgba(126,207,160,.14); color: #bfffd5; }
.learn-lesson-options button.is-wrong,.learn-lesson-beats button.is-wrong { border-color: rgba(255,143,177,.46); background: rgba(255,143,177,.12); color: #ffd1df; }

.learn-lesson-pulse span { width: 58px; height: 58px; border-radius: 50%; animation: learnLessonPulse 1.6s ease-in-out infinite; }
.learn-lesson-pulse span:nth-child(2) { animation-delay: .25s; }
.learn-lesson-pulse span:nth-child(3) { animation-delay: .5s; }
.learn-lesson-pulse span:nth-child(4) { animation-delay: .75s; }

.learn-lesson-module-link { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,224,138,.30); background: linear-gradient(135deg, #ffe08a, #ffb86c 46%, #ff8fb1 100%); color: #16120b; text-decoration: none; font-weight: 900; }

@keyframes learnLessonPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,224,138,0); transform: scale(1); } 50% { box-shadow: 0 0 22px rgba(255,224,138,.22); transform: scale(1.03); } }

.learn-section-body #maqam-interactive-root .learn-click-note,.learn-section-body #maqam-test-root .learn-click-note,.learn-section-body #rhythm-interactive-root .learn-click-rhythm,.learn-section-body #rhythm-interactive-root .learn-meter-click,.learn-section-body #rhythm-interactive-root .learn-cycle-click { filter: drop-shadow(0 0 9px rgba(255,224,138,.18)); animation: learnSvgClickablePulse 2.45s ease-in-out infinite; }
.learn-section-body #maqam-interactive-root .learn-click-note:nth-of-type(2n),.learn-section-body #maqam-test-root .learn-click-note:nth-of-type(2n),.learn-section-body #rhythm-interactive-root .learn-click-rhythm:nth-of-type(2n) { animation-delay: .3s; }
.learn-section-body #maqam-interactive-root .learn-click-note:nth-of-type(3n),.learn-section-body #maqam-test-root .learn-click-note:nth-of-type(3n),.learn-section-body #rhythm-interactive-root .learn-click-rhythm:nth-of-type(3n) { animation-delay: .6s; }
.learn-section-body #maqam-interactive-root .learn-click-note ellipse,.learn-section-body #maqam-test-root .learn-click-note ellipse,.learn-section-body #rhythm-interactive-root .learn-click-rhythm ellipse,.learn-section-body #rhythm-interactive-root .learn-rest-symbol { filter: drop-shadow(0 0 7px rgba(255,224,138,.22)); }
.learn-section-body #maqam-interactive-root .learn-click-note:hover,.learn-section-body #maqam-test-root .learn-click-note:hover,.learn-section-body #rhythm-interactive-root .learn-click-rhythm:hover,.learn-section-body #rhythm-interactive-root .learn-meter-click:hover,.learn-section-body #rhythm-interactive-root .learn-cycle-click:hover { filter: drop-shadow(0 0 15px rgba(255,224,138,.34)); animation: none; }

@keyframes learnClickablePulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,224,138,0); border-color: rgba(255,255,255,.09); } 50% { box-shadow: 0 0 18px rgba(255,224,138,.13); border-color: rgba(255,224,138,.28); } }
@keyframes learnSvgClickablePulse { 0%, 100% { opacity: .88; filter: drop-shadow(0 0 6px rgba(255,224,138,.14)); } 50% { opacity: 1; filter: drop-shadow(0 0 17px rgba(255,224,138,.38)); } }

.learn-section-body .learn-next-grid { margin-top: 26px; }
.learn-section-body .learn-next-card { border-color: rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.020)); }
.learn-section-body .learn-next-card:hover,.learn-section-body .learn-next-card:focus-visible { border-color: rgba(255,224,138,.35); outline: none; }
.learn-section-body .site-footer { margin-top: 0; }

@media (max-width: 900px) { .learn-lesson-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .learn-section-body .learn-shell { width: min(100% - 24px, 1180px); padding-top: 28px; }
  .learn-section-body .learn-hero { border-radius: 24px; }
  .learn-section-body .learn-hero::before { font-size: 2.7rem; inset-inline-start: 0; }
  .learn-lesson-hero-compact { padding-inline: 18px; }
  .learn-lesson-hero-compact h1 { text-align: center; }
  .learn-reading-stage,.learn-reading-example,.learn-lesson-focus-block { grid-template-columns: auto 1fr; }
  .learn-reading-stage-meter,.learn-reading-meter { width: 100%; }
  .learn-reading-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-lesson-symbol { width: 58px; height: 58px; border-radius: 17px; font-size: 2.65rem; }
  .learn-lesson-symbol-cards { grid-template-columns: 1fr; }
  .learn-lesson-term-card { padding: 11px; }
  .learn-lesson-term-symbol { width: 44px; height: 44px; border-radius: 14px; font-size: 1.38rem; }
  .learn-lesson-main-card { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-section-body .learn-tab-btn,.learn-section-body .learn-next-card,.learn-section-body .learn-tool-row button,.learn-section-body .learn-action-row button,.learn-section-body .learn-quiz-options button,.learn-term-button,.learn-lesson-pulse span,.learn-section-body #maqam-interactive-root .learn-click-note,.learn-section-body #maqam-test-root .learn-click-note,.learn-section-body #rhythm-interactive-root .learn-click-rhythm,.learn-section-body #rhythm-interactive-root .learn-meter-click,.learn-section-body #rhythm-interactive-root .learn-cycle-click { transition: none; animation: none; }
}