/* Learn section (home page, above the footer). Re-uses the Helpdesk look; add or edit lessons in index.html (id="learn"). */
.learn .learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem;margin-top:1.2rem}
.learn-card{position:relative}
.learn-no{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--glow);color:#04101e;font-weight:700;font-size:.85rem;margin-bottom:.4rem}
.learn-pts{margin:.5rem 0 .8rem;padding-left:1.1rem;font-size:.9rem;line-height:1.55;color:var(--muted)}
.learn-pts li{margin:.3rem 0}
.learn-try{margin:0;padding:.55rem .7rem;border-left:3px solid var(--glow);background:rgba(108,200,255,.08);border-radius:0 .4rem .4rem 0;font-size:.85rem;line-height:1.5}
.learn-foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:1.4rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:.6rem;background:var(--surface)}
.learn-challenge{flex:1 1 18rem}
.learn-challenge p{margin:.3rem 0 0;line-height:1.55}
.learn-foot .btns{display:flex;flex-wrap:wrap;gap:.6rem}


/* Home card that opens the lessons page */
.learn-open{display:flex;align-items:center;gap:1.1rem;margin-top:1.2rem;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.learn-open:hover,.learn-open:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px var(--glow),0 10px 30px rgba(0,0,0,.25)}
.learn-open:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.learn-open-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--glow)}
.learn-open-ico svg{width:1.7rem;height:1.7rem;fill:#04101e}
.learn-open-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.learn-open-txt b{font-size:1.2rem}
.learn-open-txt span{color:var(--muted);font-size:.9rem;line-height:1.5}
.learn-open-txt em{font-style:normal;font-size:.78rem;color:var(--glow)}
.learn-open-go{flex:none;font-weight:700;color:var(--glow);white-space:nowrap}
@media(max-width:560px){.learn-open{flex-wrap:wrap}.learn-open-go{width:100%}}

/* Lessons page: media inside each lesson */
.lesson-media{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.media-h{margin:.6rem 0 .4rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.5rem}
.ph-fig{margin:0}
.ph-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.4rem}
.ph-fig figcaption{margin-top:.25rem;font-size:.72rem;color:var(--muted)}
.ph-soon{grid-column:1/-1;margin:0;padding:.9rem;border:1px dashed var(--line);border-radius:.4rem;text-align:center;font-size:.82rem;color:var(--muted)}

button.learn-open{width:100%;font:inherit;text-align:left;cursor:pointer}
.learn-overlay{position:fixed;inset:0;z-index:9000;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg,#04101e);color:var(--text,inherit);padding:1.2rem 0 3rem;
  transform:translateY(100%);opacity:0;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .45s ease;will-change:transform}
.learn-overlay.is-in{transform:none;opacity:1}
.learn-overlay[hidden]{display:none}
.learn-overlay .wrap{max-width:68rem;margin:0 auto;padding:0 1.2rem}
.learn-bar{margin:0 0 1rem;padding:0;background:none;border:0;box-shadow:none;height:auto}
.learn-bar .btn{display:inline-flex}
body.learn-lock{overflow:hidden}

/* the lesson cards: spaced apart (this grid is outside the home .learn block, so it needs its own rules) */
#learn-hub .learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.5rem;margin:1.6rem 0 2rem}
#learn-hub .learn-card{padding:1.3rem 1.3rem 1.2rem;border:1px solid var(--line,rgba(128,140,170,.3));border-radius:.8rem;background:var(--surface,rgba(255,255,255,.04))}
#learn-hub .learn-foot{margin-top:2rem}

/* cards rise in one after another */
.learn-overlay.is-in .learn-card,.learn-overlay.is-in .learn-foot{animation:learnRise .7s cubic-bezier(.22,1,.36,1) both}
.learn-overlay.is-in .learn-card:nth-child(1){animation-delay:.20s}
.learn-overlay.is-in .learn-card:nth-child(2){animation-delay:.28s}
.learn-overlay.is-in .learn-card:nth-child(3){animation-delay:.36s}
.learn-overlay.is-in .learn-card:nth-child(4){animation-delay:.44s}
.learn-overlay.is-in .learn-foot{animation-delay:.52s}
@keyframes learnRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.learn-overlay{transition:none;transform:none}.learn-overlay.is-in .learn-card,.learn-overlay.is-in .learn-foot{animation:none}}



/* photo viewer */
.lv{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;padding:3.2rem 3.5rem;background:rgba(2,6,18,.92);animation:lvIn .25s ease}
@keyframes lvIn{from{opacity:0}to{opacity:1}}
.lv-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.lv-img{max-width:100%;max-height:calc(100vh - 11rem);object-fit:contain;border-radius:.5rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lv-cap{margin:0;max-width:40rem;text-align:center;color:#f4f1e4;font-size:.95rem;line-height:1.5}
.lv-count{font-size:.75rem;color:#aeb2d3;letter-spacing:.1em}
.lv-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.lv-btn:hover,.lv-btn:focus-visible{background:rgba(255,255,255,.28);outline:none}
.lv-x{top:.8rem;right:.8rem}.lv-prev{left:.6rem;top:50%;transform:translateY(-50%)}.lv-next{right:.6rem;top:50%;transform:translateY(-50%)}
@media(max-width:560px){.lv{padding:3.2rem .6rem}.lv-prev{left:.2rem}.lv-next{right:.2rem}}
@media(prefers-reduced-motion:reduce){.lv{animation:none}}
#learn-hub .ph-fig a{display:block;cursor:zoom-in}

/* ===== Learn hub: topic cards + separate topic section ===== */
.learn-pane[hidden]{display:none}
.learn-pane.pane-in{animation:paneIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes paneIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
#learn-hub h2,#learn-hub .lead{max-width:56rem;margin-left:auto;margin-right:auto}
#learn-hub .learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))!important;gap:1.4rem;max-width:56rem;margin:1.6rem auto 2.2rem}
#learn-hub .learn-foot{max-width:56rem;margin-left:auto;margin-right:auto}
.topic-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;min-height:12.5rem;padding:1.5rem 1.5rem 1.3rem;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line,rgba(128,140,170,.3));border-radius:.9rem;background:var(--surface,rgba(255,255,255,.04));transition:transform .25s,box-shadow .25s,border-color .25s}
.topic-card:hover,.topic-card:focus-visible{transform:translateY(-4px);border-color:var(--glow);box-shadow:0 14px 34px rgba(0,0,0,.3);outline:none}
.tc-no{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--glow)}
.tc-title{margin:0;font-size:1.35rem;line-height:1.25}
.tc-sum{margin:0;font-size:.92rem;line-height:1.65;color:var(--muted)}
.tc-meta{font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.tc-go{margin-top:auto;padding-top:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--glow);transition:transform .25s}
.topic-card:hover .tc-go{transform:translateX(5px)}

#learn-detail{max-width:46rem;margin:0 auto}
.ld-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.ld-pos{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ld-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--glow)}
#learn-detail .ld-title{margin:.3rem 0 .8rem;max-width:none;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.15}
.ld-lead{margin:0 0 1.8rem;font-size:1.05rem;line-height:1.75;color:var(--muted)}
.ld-sec{margin:0 0 2rem}
.ld-h{margin:0 0 .9rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ld-facts{list-style:none;counter-reset:f;margin:0;padding:0;display:grid;gap:.75rem}
.ld-facts li{counter-increment:f;position:relative;padding:1rem 1.1rem 1rem 3.4rem;border:1px solid var(--line,rgba(128,140,170,.3));border-radius:.7rem;background:var(--surface,rgba(255,255,255,.04));font-size:1rem;line-height:1.65}
.ld-facts li::before{content:counter(f);position:absolute;left:1rem;top:.95rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--glow);color:#04101e;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.ld-try{padding:1.2rem 1.3rem;border-left:3px solid var(--glow);border-radius:.4rem;background:var(--surface,rgba(255,255,255,.04))}
.ld-try .ld-h{color:var(--glow);margin-bottom:.4rem}
.ld-try p{margin:0;font-size:1.02rem;line-height:1.65}
.ld-photos .ph-fig img{border-radius:.6rem}
.ld-photos .ph-fig a{display:block;cursor:zoom-in}
.ld-photos .ph-fig figcaption{font-size:.82rem;margin-top:.35rem}
.ld-nav{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line,rgba(128,140,170,.3))}
.ld-step{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1.1rem;text-align:left;font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line,rgba(128,140,170,.3));border-radius:.7rem;background:none;transition:border-color .2s}
.ld-step:last-child{text-align:right}
.ld-step:hover,.ld-step:focus-visible{border-color:var(--glow);outline:none}
.ld-step small{font-size:.7rem;letter-spacing:.08em;color:var(--glow)}
@media(max-width:560px){.ld-nav{grid-template-columns:1fr}.ld-step:last-child{text-align:left}.ld-facts li{padding-left:3rem}}
@media(prefers-reduced-motion:reduce){.learn-pane.pane-in{animation:none}.topic-card,.tc-go{transition:none}}

/* photos: darken + text on hover (PC) or first touch (phone) */
.ph-link{position:relative;display:block;overflow:hidden;border-radius:.6rem;cursor:zoom-in}
.ph-link img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ph-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:.9rem;text-align:center;color:#fff;background:rgba(2,8,22,.74);opacity:0;transition:opacity .3s ease}
.ph-txt{font-size:.95rem;font-weight:700;line-height:1.4;transform:translateY(10px);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ph-hint{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.ph-link:hover .ph-ov,.ph-link:focus-visible .ph-ov,.ph-link.on .ph-ov{opacity:1}
.ph-link:hover .ph-txt,.ph-link:focus-visible .ph-txt,.ph-link.on .ph-txt{transform:none}
.ph-link:hover img,.ph-link.on img{transform:scale(1.06)}
.ph-link:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.ph-link img,.ph-ov,.ph-txt{transition:none}.ph-link:hover img,.ph-link.on img{transform:none}}

/* bigger photos in a topic: two per row on a wide screen, one per row on a phone */
#learn-detail{max-width:58rem}
#learn-detail .ld-lead,#learn-detail .ld-facts,#learn-detail .ld-try{max-width:46rem}
#learn-detail .ld-photos .ph-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.2rem}
#learn-detail .ld-photos .ph-fig img{aspect-ratio:4/3;border-radius:.8rem}
#learn-detail .ld-photos .ph-link{border-radius:.8rem}
#learn-detail .ld-photos .ph-txt{font-size:1.1rem}