/* Learning Hub: a spacious reading column and a larger video stage. */
.learning-page { --learn-bg:#f5f7fb; --learn-card:#fff; --learn-ink:#172b42; --learn-muted:#526477; --learn-soft:#eff6ff; --learn-link:#1d4ed8; background:var(--learn-bg); color:var(--learn-ink); padding:44px 28px 72px; min-height:60vh; }
.learning-page * { box-sizing:border-box; }
.learning-shell { max-width:1280px; margin:auto; }
.learning-page :is(h1,h2,h3,h4,p) { color:inherit; margin:0; }
.learning-header { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-bottom:30px; }
.learning-header h1 { font-size:clamp(32px,4vw,46px); line-height:1.1; letter-spacing:-1.4px; margin-bottom:14px; font-weight:700; }
.learning-header > div > p { font-size:22px; font-weight:500; }
.learning-intro { font-size:16px!important; font-weight:400!important; color:var(--learn-muted)!important; line-height:1.6; margin-top:9px!important; max-width:650px; }
.learning-help { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; min-height:44px; padding:11px 18px; border-radius:8px; font-size:14px; text-decoration:none; }
.learning-categories { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; background:transparent!important; }
.learning-categories a { padding:10px 16px; border-radius:7px; background:var(--learn-card); color:var(--learn-muted); font-size:14px; font-weight:600; text-decoration:none; transition:background-color 150ms ease-out,color 150ms ease-out; }
.learning-categories a:hover { color:var(--learn-link); background:var(--learn-soft); }
.learning-categories a[aria-current] { background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 55%,#0284c7 100%); color:#fff; }
.learning-jumps { display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 24px; background:transparent!important; }
.learning-jumps a { color:var(--learn-link); font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.learning-guide { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:44px; padding:30px 0 46px; scroll-margin-top:24px; align-items:start; }
.learning-guide + .learning-guide { margin-top:24px; }
.learning-instructions { padding:28px; background:var(--learn-card); border-radius:12px; }
.learning-instructions > h2 { font-size:30px; font-weight:650; line-height:1.2; letter-spacing:-.7px; margin-bottom:14px; }
.learning-guide-intro { font-size:16px; line-height:1.65; color:var(--learn-muted)!important; }
.learning-steps-heading { margin-top:28px!important; font-size:16px; font-weight:700; }
.learning-steps { list-style:decimal; margin:20px 0 26px; padding-left:23px; }
.learning-steps li { padding-left:9px; margin:0 0 24px; }
.learning-steps li:last-child { margin-bottom:0; }
.learning-steps li::marker { color:var(--learn-link); font-size:17px; font-weight:700; }
.learning-steps h3 { font-size:17px; line-height:1.5; font-weight:650; margin-bottom:6px; }
.learning-steps p { color:var(--learn-muted); font-size:15px; line-height:1.75; }
.learning-video-column { position:sticky; top:28px; min-width:0; align-self:start; }
.learning-video-column > h3 { font-size:24px; font-weight:650; letter-spacing:-.4px; margin-bottom:7px; }
.learning-video-caption { color:var(--learn-muted)!important; font-size:15px; line-height:1.6; margin-bottom:18px!important; }
.learning-video { display:flex; flex-direction:column; min-width:0; background:var(--learn-card); border-radius:12px; overflow:hidden; margin-bottom:22px; }
.learning-video:last-child { margin-bottom:0; }
.learning-player { order:0; width:100%; aspect-ratio:16 / 9; background:#0f172a; overflow:hidden; }
.learning-player iframe { width:100%; height:100%; border:0; display:block; }
.learning-video h4 { order:1; font-size:18px; line-height:1.4; font-weight:650; padding:20px 22px 0; overflow-wrap:anywhere; }
.learning-video > p { order:2; padding:12px 22px 0; color:var(--learn-muted); font-size:15px; line-height:1.65; }
.learning-video > a { order:3; align-self:flex-start; margin:14px 22px 20px; color:var(--learn-link); font-size:14px; font-weight:600; text-decoration:none; }
.learning-video > a:hover { text-decoration:underline; }
.learning-video-pending { text-align:center; padding:52px 28px; background:var(--learn-card); border-radius:12px; }
.learning-video-pending svg { display:block; color:var(--learn-link); margin:0 auto 20px; }
.learning-video-pending h4 { font-size:19px; font-weight:600; margin-bottom:10px; }
.learning-video-pending p { color:var(--learn-muted); font-size:15px; line-height:1.65; max-width:360px; margin:auto; }
.learning-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:20px; }
.learning-pagination a { color:var(--learn-link); font-size:14px; }
.learning-page :is(a,iframe):focus-visible { outline:3px solid #60a5fa; outline-offset:4px; }
.learning-page :is(.motion-hidden,.motion-slide-left,.motion-slide-right,.motion-scale) { opacity:1!important; transform:none!important; }
html[data-theme=dark] .learning-page { --learn-bg:#0c1420; --learn-card:#142133; --learn-ink:#eef3f8; --learn-muted:#afbed0; --learn-soft:#172554; --learn-link:#93c5fd; }
@media(max-width:1050px) { .learning-guide { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; } .learning-instructions { padding:22px; } .learning-instructions > h2 { font-size:26px; } }
@media(max-width:767px) {
 .learning-page { padding:28px 16px 48px; } .learning-header { flex-direction:column; align-items:flex-start; gap:18px; padding-bottom:24px; }
 .learning-header > div > p { font-size:20px; } .learning-categories { gap:7px; } .learning-categories a { font-size:13px; padding:9px 12px; }
 .learning-jumps { gap:10px 16px; } .learning-guide { grid-template-columns:1fr; gap:24px; padding:20px 0 32px; }
 .learning-video-column { position:static; grid-row:1; } .learning-video-column > h3 { font-size:22px; } .learning-video-caption { margin-bottom:14px!important; }
 .learning-instructions { padding:22px 20px; } .learning-instructions > h2 { font-size:26px; }
 .learning-video h4 { padding:16px 18px 0; font-size:17px; } .learning-video > p { padding:10px 18px 0; } .learning-video > a { margin:12px 18px 18px; }
 .learning-help { white-space:normal; } .learning-player { min-height:190px; }
}
@media(prefers-reduced-motion:reduce) { .learning-categories a { transition:none; } }