/* /learn page: free AI learning for cities. Builds on hub.css (tokens, glass, cards, buttons, header, footer).
   Path colours: leaders cyan, municipal teams amber, residents and young people green.
   "Good for cities" uses soft violet, the hub colour of "what it means for your city". */

.p-leaders{--acc:41,240,255}
.p-municipal{--acc:255,181,71}
.p-residents{--acc:74,222,128}

/* ---------- hero with the diagram ---------- */
.learn-hero{padding-bottom:clamp(48px,5vw,80px)}
.lh-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.9fr);gap:28px clamp(32px,4vw,64px);align-items:center;min-height:min(560px,64vh)}
.learn-hero .h-display{max-width:11.5em}
.learn-hero .h-sub{max-width:27em}
.learn-hero .h-lead{margin-top:clamp(22px,2.4vw,32px)}
.venn{position:relative;justify-self:end;width:min(100%,520px);margin:0}
.venn::before{content:"";position:absolute;inset:6% 4% 10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(41,240,255,.12),rgba(255,43,214,.05) 60%,transparent)}
.venn svg{display:block;width:100%;height:auto;overflow:visible}
.vd-c{fill:rgba(var(--acc),.07);stroke:rgba(var(--acc),.78);stroke-width:1.5;mix-blend-mode:screen;transition:fill .35s,stroke-width .35s}
.vd-c.r-leaders,.vd-l.r-leaders{--acc:41,240,255}
.vd-c.r-municipal,.vd-l.r-municipal{--acc:255,181,71}
.vd-c.r-residents,.vd-l.r-residents{--acc:74,222,128}
.vd-l{font-size:15px;font-weight:650;letter-spacing:.01em;fill:rgb(var(--acc))}
.vd-dot{fill:#fff;stroke:rgba(11,16,32,.6);stroke-width:2;transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 5px rgba(124,224,255,.85));transition:transform .25s var(--ease),fill .25s}
.vd-a{cursor:pointer}
.vd-a:hover .vd-dot{fill:var(--magenta);transform:scale(1.45);filter:drop-shadow(0 0 7px rgba(255,43,214,.9))}
@media (hover:hover) and (pointer:fine){
  .venn:hover .vd-c{fill:rgba(var(--acc),.1)}
}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.why-side{position:sticky;top:calc(var(--head) + 36px)}
.why-side .h2{margin-top:18px}
.why-principles{display:grid;gap:10px;margin-top:30px;max-width:440px}
.why-principles a{display:flex;align-items:center;gap:14px;min-height:48px;padding:10px 16px 10px 12px;border-radius:14px;
  font-size:16px;font-weight:650;line-height:1.35;color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(124,224,255,.22);transition:background-color .25s,box-shadow .25s}
.why-principles a:hover{background:rgba(124,224,255,.07);box-shadow:inset 0 0 0 1px var(--soft)}
.why-principles .chip{flex:none;align-self:center}
.why-links{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:22px}
.why-links .text-link{display:inline-flex;align-items:center;min-height:40px;font-size:15.5px}
.why-body p{max-width:62ch;font-size:var(--fs-lead);line-height:1.7;color:var(--muted)}
.why-body p:first-child{color:rgba(255,255,255,.9)}
.why-body p + p{margin-top:22px}

/* ---------- paths: tiles ---------- */
.path-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.path-tile .card-title{font-size:clamp(20px,.6vw + 15.5px,24px)}
.path-tile.is-picked,.path-tile:target{box-shadow:0 0 0 1px rgba(var(--acc),.75),0 0 46px -12px rgba(var(--acc),.75)}

/* ---------- paths: routes ---------- */
.routes{display:grid;gap:24px;margin-top:clamp(40px,5vw,64px)}
.route{--acc:41,240,255;padding:clamp(24px,3vw,40px)}
.route.glass::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc),var(--edge)),transparent 70%),
  linear-gradient(135deg,rgba(var(--acc),.5),rgba(255,255,255,.07) 40%,rgba(var(--acc),.16))}
.route.glass::after{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc),.08),transparent 70%)}
.route.is-picked,.route:target{box-shadow:0 0 0 1.5px rgba(var(--acc),.8),0 0 70px -18px rgba(var(--acc),.8);animation:picked 1.6s var(--ease) 1}
@keyframes picked{0%{box-shadow:0 0 0 1.5px rgba(var(--acc),0),0 0 0 0 rgba(var(--acc),0)}35%{box-shadow:0 0 0 1.5px rgba(var(--acc),1),0 0 90px -6px rgba(var(--acc),.9)}100%{box-shadow:0 0 0 1.5px rgba(var(--acc),.8),0 0 70px -18px rgba(var(--acc),.8)}}
.route-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.route-head .card-label{width:100%}
.route-title{font-size:clamp(24px,1vw + 17px,32px);line-height:1.15;letter-spacing:-.02em}
.route-count{margin-left:auto;font-size:14px;font-weight:600;color:var(--faint)}
.stops{position:relative;margin-top:30px;padding-left:36px}
.stops::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgb(var(--acc)),rgba(var(--acc),.35) 60%,rgba(var(--acc),.08))}
.stop{position:relative}
.stop + .stop{margin-top:36px}
.stop::before{content:"";position:absolute;left:-36px;top:1px;width:16px;height:16px;border-radius:50%;background:var(--navy);
  box-shadow:inset 0 0 0 2px rgb(var(--acc)),0 0 14px rgba(var(--acc),.55)}
.stop-grow::before{background:rgb(var(--acc))}
.stop-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.18em;line-height:1.5;color:rgb(var(--acc))}
.stop-text{margin-top:8px;max-width:74ch;font-size:16.5px;line-height:1.6;color:var(--muted)}
.stop-text::first-letter{text-transform:uppercase}
.stop-more{margin-top:16px}
.stop-more .text-link{display:inline-flex;align-items:center;min-height:40px;font-size:15.5px}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:18px}
.mini{position:relative;display:flex;flex-direction:column;padding:18px 18px 16px;border-radius:var(--r-md);
  background:rgba(11,16,32,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background-color .3s,box-shadow .3s}
.mini:hover,.mini:focus-within{background:rgba(var(--acc),.06);box-shadow:inset 0 0 0 1px rgba(var(--acc),.62)}
.mini-prov{padding-right:22px;font-size:12.5px;font-weight:600;line-height:1.45;color:var(--caption)}
.mini-title{margin-top:6px;font-size:17px;font-weight:750;line-height:1.3;letter-spacing:-.01em}
.mini-title a{color:#fff;text-decoration:none}
.mini-title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.mini-title a:focus-visible{outline:none}
.mini:has(a:focus-visible){outline:2px solid var(--soft);outline-offset:3px}
.mini-out{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.mini-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:14px}
.mini-meta span{display:flex;flex-direction:column;font-size:13.5px;font-weight:600;line-height:1.35;color:#fff}
.mini-meta b{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mini-go{position:absolute;top:18px;right:18px;width:9px;height:9px;border-right:2px solid rgba(var(--acc),.8);border-bottom:2px solid rgba(var(--acc),.8);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.mini:hover .mini-go{transform:translateY(3px) rotate(45deg)}

/* ---------- how to use ---------- */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 32px;margin-bottom:clamp(56px,6vw,88px);counter-reset:how}
.how li{padding-top:20px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.62;color:var(--muted)}
.how li::before{counter-increment:how;content:"0" counter(how);display:block;margin-bottom:12px;font-size:30px;font-weight:200;line-height:1.1;letter-spacing:-.04em;color:var(--soft);font-variant-numeric:tabular-nums}

/* ---------- catalogue ---------- */
.cat-group + .cat-group,.lp-block + .cat-group{margin-top:clamp(56px,6vw,88px)}
.cat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line-2);
  font-size:clamp(22px,.8vw + 16px,28px);letter-spacing:-.02em}
.cat-n{font-size:14px;font-weight:600;letter-spacing:0;color:var(--faint)}
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.course{--acc:124,224,255;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,28px)}
.course:target{box-shadow:0 0 0 2px var(--soft),0 0 60px -14px rgba(124,224,255,.8)}
.c-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.c-type{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--caption);background:rgba(255,255,255,.07)}
.c-roles{display:flex;flex-wrap:wrap;gap:2px 12px}
.c-roles li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--caption)}
.c-roles li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:rgb(var(--acc));box-shadow:0 0 8px rgba(var(--acc),.7)}
.c-prov{margin-top:18px;font-size:15px;font-weight:700;line-height:1.4;color:#fff}
.c-about{margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--faint)}
.c-title{margin-top:14px;font-size:clamp(19px,.45vw + 15.5px,22px);line-height:1.25;letter-spacing:-.015em}
.c-desc{margin-top:12px;font-size:15px;line-height:1.62;color:var(--muted)}
.c-spec{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 18px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font-size:14px;line-height:1.5}
.c-spec dt{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--faint)}
.c-spec dd{margin:0;min-width:0;color:#fff;font-weight:550}
.meter{display:inline-flex;gap:3px;margin-right:9px;vertical-align:.12em}
.meter i{width:13px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.meter i.on{background:var(--soft);box-shadow:0 0 6px rgba(124,224,255,.6)}
.langs summary{display:inline;cursor:pointer;color:#fff;text-decoration:underline;text-decoration-color:rgba(124,224,255,.45);text-underline-offset:4px;list-style:none}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;border-right:1.5px solid var(--soft);border-bottom:1.5px solid var(--soft);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.langs[open] summary::after{transform:translateY(0) rotate(225deg)}
.langs[open] summary{color:var(--faint)}
.langs > span{display:block;margin-top:6px;color:var(--muted);font-weight:500}
.topics{display:flex;flex-wrap:wrap;gap:6px}
.topics li{padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--caption);box-shadow:inset 0 0 0 1px rgba(124,224,255,.26)}
.c-block{margin-top:20px}
.c-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;line-height:1.5;color:var(--caption)}
.c-text{margin-top:5px;font-size:15px;line-height:1.58;color:rgba(255,255,255,.88)}
.c-good{margin-top:16px;padding:12px 14px 13px 16px;border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(199,125,255,.1),rgba(199,125,255,.025));box-shadow:inset 2px 0 0 rgba(199,125,255,.8)}
.c-good .c-label{color:var(--violet-soft)}
.c-good .c-text{color:#E9E1F6}
.c-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:auto;padding-top:24px}
.c-go{min-height:46px;padding:0 20px;gap:10px}
.course:hover .c-go{background:rgb(var(--acc));color:var(--navy);box-shadow:0 10px 30px -12px rgba(var(--acc),.9)}
.c-checked{font-size:12.5px;line-height:1.4;color:var(--faint)}

/* Block and badge for marked records (lp-): rendered by the build only when the data marks a record and gives a logo */
.lp-block{margin-bottom:0}
.lp-logo{width:auto;height:40px;margin-top:18px;object-fit:contain;object-position:left center}
.lp-badge{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--navy);background:var(--green)}

/* ---------- team call and disclaimer ---------- */
#team .share-line span{word-break:break-all}
.disclaimer{max-width:86ch;margin-top:26px;font-size:13px;line-height:1.62;color:var(--faint)}

/* ---------- responsive (screen only) ---------- */
@media screen and (max-width:1100px){
  .path-tiles,.courses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .path-tiles .path-tile:last-child{grid-column:1/-1}
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:1040px){
  .lh-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .venn{justify-self:start;width:min(100%,480px)}
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .why-side{position:static}
}
@media screen and (max-width:760px){
  .path-tiles,.courses,.how{grid-template-columns:minmax(0,1fr)}
  .venn{width:100%;max-width:440px;margin:4px auto 0}
  .vd-l{font-size:22px}
  .route{padding:22px 18px}
  .route-count{margin-left:0}
  .stops{padding-left:28px}
  .stops::before{left:6px}
  .stop::before{left:-28px;width:14px;height:14px}
  .minis{grid-template-columns:minmax(0,1fr)}
  .why-body p{font-size:17px}
  .c-go{width:100%}
  .path-tiles .card-actions .btn-acc{width:100%}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .route.is-picked,.route:target{animation:none}
  .vd-a:hover .vd-dot,.mini:hover .mini-go{transform:none}
}

/* ---------- print ---------- */
@media print{
  .venn,.cta-wave,.mini-go{display:none!important}
  .why-side{position:static}
  .mini,.course,.route{break-inside:avoid;background:#fff!important;box-shadow:0 0 0 1px #ccc!important}
  .mini-title a,.c-prov,.c-spec dd,.mini-meta span,.c-text,.c-good .c-text{color:#111!important}
  .c-good{background:none;box-shadow:inset 2px 0 0 #999}
}