/* Training Hub: a guided entry followed by a quiet course directory. */
body.training-hub {
  --font-display: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font: 400 1rem/1.65 var(--font-body);
}
.training-hub::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
}
.training-hub .hub-shell { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); }
.training-hub :where(h1, h2, h3, h4, p) { margin: 0; }
.training-hub :where(a, button, input, summary):focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
.training-hub :where(section, main) { scroll-margin-top: 2rem; }
.training-hub a { text-decoration: none; }
.training-hub p { max-width: 65ch; }
.training-hub .hub-header { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.hub-brand { display: block; }
.hub-brand img { width: 64px; height: 33px; object-fit: contain; }
.hub-wordmark { border-left: 1px solid var(--line); padding-left: 1rem; font-size: .82rem; color: var(--steel); }
.hub-header nav { display: flex; flex-wrap: wrap; gap: 1.4rem; width: 100%; }
.hub-header nav a { font-size: .85rem; padding-block: .4rem; }
.hub-header nav a:hover, .hub-text-link:hover, .hub-return-link:hover, .hub-footer a:hover { color: var(--coral); }
.hub-label { font: 500 .66rem/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.hub-start { padding-block: clamp(3rem, 7vw, 6rem); display: grid; gap: 2.5rem; }
.hub-intro h1 { font: 400 clamp(4.4rem, 9vw, 7.3rem)/.94 var(--font-display); letter-spacing: -.015em; margin-block: 1.3rem 1.5rem; }
.hub-lede { color: var(--steel); font-size: 1.02rem; }
.hub-mobile-start { display: flex; justify-content: space-between; margin-top: 1.25rem; }
.hub-intro .hub-text-link { display: inline-block; margin-top: 1.5rem; max-width: 30ch; }
.training-hub .hub-text-link { font-size: .85rem; font-weight: 500; text-decoration: underline; text-underline-offset: .35em; }
.hub-python-path { border: 1px solid var(--line-strong); border-radius: .75rem; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%), var(--void-2); }
.hub-first-step, .hub-next-step { padding: clamp(1.25rem, 3vw, 2rem); }
.hub-step-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.hub-step-number { font: 400 1.5rem/1 var(--font-display); color: var(--coral); }
.hub-first-step .hub-label { color: var(--gold); }
.hub-python-path h2 { font: 400 2.75rem/1.1 var(--font-display); margin-bottom: .65rem; }
.hub-python-path p:not(.hub-label) { font-size: .86rem; color: var(--steel); }
.hub-lesson-preview { margin-block: 1.35rem; padding: 1rem 1.15rem; border-left: 2px solid var(--coral); background: var(--void); }
.hub-lesson-preview h3 { font: 600 1rem/1.5 var(--font-body); margin-block: .3rem; }
.hub-lesson-preview code { display: block; margin-top: .75rem; font: 400 clamp(.68rem, 2.8vw, .83rem)/1.5 var(--font-mono); overflow-wrap: anywhere; }
.hub-lesson-preview code span { color: var(--gold); }
.training-hub .btn-primary { background: color-mix(in srgb, var(--coral) 65%, var(--void)); border-color: var(--coral); color: var(--ice); font-weight: 600; box-shadow: none; }
.training-hub .btn-primary:hover { background: color-mix(in srgb, var(--coral) 72%, var(--void)); box-shadow: 0 4px 18px color-mix(in srgb, var(--coral) 12%, transparent); }
.hub-start-button { display: flex; justify-content: space-between; width: 100%; }
.training-hub .hub-return-link { display: inline-block; margin-top: 1rem; font-size: .78rem; text-decoration: underline; text-underline-offset: .3em; }
.hub-python-path .hub-small { font-size: .72rem; margin-top: .7rem; }
.hub-next-step { border-top: 1px solid var(--line); }
.hub-next-step h2 { font-size: 1.8rem; }
.hub-next-step .hub-text-link { display: inline-block; margin-top: .8rem; }
.hub-how { border-block: 1px solid var(--line); padding-block: 2rem; display: grid; gap: 1.5rem; }
.hub-how h2 { font: 400 1.8rem/1.15 var(--font-display); margin-top: .5rem; }
.hub-how ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 1rem; }
.hub-how li { padding-left: .35rem; }
.hub-how li::marker { color: var(--coral); font: 400 .75rem var(--font-mono); }
.hub-how li span { font-size: .86rem; font-weight: 600; }
.hub-how li p { color: var(--steel); font-size: .8rem; margin-top: .25rem; }
.hub-catalogue { padding-block: clamp(5rem, 10vw, 9rem); }
.hub-section-heading { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.hub-section-heading h2 { font: 400 clamp(2.8rem, 5vw, 4rem)/1.05 var(--font-display); margin-top: .7rem; }
.hub-section-heading > p { color: var(--steel); max-width: 40ch; font-size: .9rem; }
.hub-catalogue-layout { display: grid; gap: 2.5rem; }
.hub-category-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-self: start; }
.hub-category-nav a { color: var(--steel); font-size: .8rem; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.hub-category-nav a:hover { color: var(--coral); border-color: var(--coral); }
.hub-course-groups { min-width: 0; }
.hub-course-group + .hub-course-group { margin-top: 3.5rem; }
.hub-course-group h3 { font: 400 2rem/1.2 var(--font-display); padding-bottom: 1rem; border-bottom: 1px solid var(--line-strong); }
.hub-course { display: grid; gap: .9rem; padding: 1.4rem .25rem; border-bottom: 1px solid var(--line); border-radius: .375rem; }
.hub-course:hover { background: var(--void-3); }
.hub-course h4 { font: 600 1rem/1.5 var(--font-body); }
.hub-course p { font-size: .84rem; color: var(--steel); margin-top: .4rem; }
.hub-course div > span { display: block; margin-top: .6rem; color: var(--steel); font: 400 .67rem/1.6 var(--font-mono); }
.hub-course-action { font-size: .76rem; color: var(--coral); white-space: nowrap; align-self: center; }
.hub-tutor { border: 1px solid var(--line); border-radius: .75rem; background: var(--void-2); padding: clamp(1.25rem, 3vw, 2.5rem); display: grid; gap: 2rem; margin-bottom: clamp(5rem, 10vw, 9rem); }
.hub-tutor h2 { font: 400 2.4rem/1.1 var(--font-display); margin-block: .7rem 1rem; }
.hub-tutor p:not(.hub-label) { color: var(--steel); font-size: .85rem; }
.hub-tutor details { margin-top: 1rem; font-size: .8rem; }
.hub-tutor summary { cursor: pointer; padding-block: .4rem; transition: color var(--ease-premium); }
.hub-tutor summary:hover { color: var(--coral); }
.hub-tutor details p { margin-top: .5rem; }
.hub-tutor-form { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.hub-tutor .tutor-unlock { display: grid; gap: 1rem; margin: 1rem 0; padding: 0; border: 0; }
.hub-tutor .tutor-unlock[hidden] { display: none; }
.hub-tutor .tutor-unlock label { font-size: .8rem; display: grid; gap: .5rem; }
.hub-tutor .tutor-unlock input { width: 100%; min-width: 0; font: inherit; color: var(--ice); background: var(--void); border: 1px solid var(--steel); border-radius: .375rem; padding: .8rem; }
.hub-tutor .tutor-unlock button { font: 500 .85rem var(--font-body); color: var(--coral); border: 1px solid var(--coral); border-radius: .375rem; background: transparent; padding: .8rem 1rem; cursor: pointer; }
.hub-tutor .tutor-unlock button:hover { background: var(--void-3); }
.hub-tutor .tutor-unlock__note { color: var(--coral); }
.hub-tutor #tutorAccessStatus:empty { display: none; }
.hub-return-link {
  display: inline-block;
  margin-block: .75rem;
  padding: .7rem 1rem;
  color: var(--ice);
  border: 1px solid var(--coral);
  border-radius: .375rem;
  font-size: .85rem;
  transition: color .25s cubic-bezier(.16,1,.3,1);
}
.hub-return-link:hover { color: var(--coral); }
.training-hub .hub-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 2rem; border-top: 1px solid var(--line); color: var(--steel); font-size: .75rem; }
.hub-footer a:last-child { margin-left: auto; }
@media (min-width: 768px) {
  .hub-mobile-start { display: none; }
  .training-hub::before { opacity: .055; }
  .hub-header nav { width: auto; margin-left: auto; }
  .hub-start { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 3rem; }
  .hub-intro { padding-top: 1.5rem; }
  .hub-how ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .hub-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
  .hub-catalogue-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .hub-category-nav { position: sticky; top: 2rem; display: grid; gap: .5rem; }
  .hub-course { grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; padding-inline: .75rem; }
  .hub-tutor { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hub-tutor-form { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 2rem; }
}
@media (min-width: 1024px) {
  .hub-start { gap: 5rem; }
  .hub-catalogue-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.training-hub) { scroll-behavior: auto; }
  .training-hub *, .training-hub *::before, .training-hub *::after { animation: none; transition: none; }
}