/* learn.css: the Learn hub, the 78-card index and the card pages (scripts/build-cards.mjs).
   Tokens only; every value comes from style.css §2. Loaded after style.css on /learn/ pages. */

/* card page: the card in a plate, beside everything else from 768 (sticky while you read) */
.card-layout{display:grid;gap:var(--s5);padding-block:var(--s4) var(--section)}
.card-plate{width:220px;margin:12px}
.card-plate img{height:auto;aspect-ratio:auto;border-radius:var(--r-s)}
.card-main{display:grid;gap:var(--s6);align-content:start;min-width:0}
.card-head{display:grid;gap:var(--s3);align-content:start}
.card-head h1{max-width:none}
.card-quote{margin:0;padding-left:var(--s3);border-left:2px solid var(--gold-line);max-width:var(--measure)}
.card-keys{gap:var(--s2)}
@media (min-width:768px){
  .card-layout{grid-template-columns:auto minmax(0,1fr);gap:var(--s6);padding-top:var(--s5)}
  .card-plate{width:240px;position:sticky;top:96px;align-self:start}
}
@media (min-width:1024px){ .card-layout{gap:var(--s8)} .card-plate{width:320px} }

/* card page: the meaning, the invitation, previous and next */
.card-prose h2{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}
.card-prose h2:first-child{margin-top:0}
.card-invite{display:grid;gap:var(--s3);padding-top:var(--s5);border-top:var(--hairline);max-width:var(--measure)}
.card-invite .actions{margin-top:var(--s2)}
.card-pager{display:grid;gap:var(--tap-gap);max-width:var(--measure);border-top:var(--soft)}
.card-pager a{display:grid;gap:var(--s1);min-height:var(--tap);padding-block:var(--s3);text-decoration:none;border-bottom:var(--soft)}
.card-pager-name{font:400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.card-pager a:hover .card-pager-name{text-decoration:underline;text-decoration-color:var(--gold-line);text-underline-offset:6px}
@media (min-width:640px){
  .card-pager{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .card-pager a[rel="next"]{text-align:right}
}
.card-main > .card-more,.card-main > .card-art{margin-top:calc(-1 * var(--s4))}

/* the index */
.learn-intro .lead{max-width:var(--measure)}
.suit-chips{display:flex;flex-wrap:wrap;gap:var(--tap-gap);margin-top:var(--s2)}
.suit-block{scroll-margin-top:80px}
.suit-block + .suit-block{padding-top:var(--s5)}
.tiles .tile{padding-bottom:var(--s2)}
.tiles .tile span{font-size:18px;line-height:24px}
@media (min-width:768px){ .tiles .tile span{font-size:var(--t4);line-height:var(--lh4)} }
main > .wrap:last-child{padding-bottom:var(--section)}

/* the hub */
.hub-grid{display:grid;gap:var(--s5);align-items:center}
.hub-plate{width:180px;order:2}
.hub-plate a{display:block}
.hub-plate img{height:auto;border-radius:var(--r-s)}
@media (min-width:1024px){ .hub-grid{grid-template-columns:minmax(0,1fr) auto;gap:var(--s8)} .hub-plate{width:280px;margin-right:var(--s5)} }
.learn-doors{padding-top:var(--s5)}
.doors{display:grid;gap:var(--s3)}
.doors .card{height:100%;min-height:var(--tap)}
@media (min-width:768px){ .doors{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .doors{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* card page: the questions, cards to read next (docs/SEO.md) */
.card-answer{max-width:var(--measure)}
.card-faq,.card-related{display:grid;gap:var(--s3);max-width:var(--measure)}
.card-faq-title{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}
.card-related .links{margin-top:0}
.card-related a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cream);text-underline-offset:4px;text-decoration-color:var(--gold-line)}

/* the hub: the guide */
.learn-guide{scroll-margin-top:80px}
.guide-toc{margin-top:0}
.guide-toc a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--cream-2);text-underline-offset:4px;text-decoration-color:var(--gold-line)}
.guide-prose h3{scroll-margin-top:80px;color:var(--cream)}
.card-take{display:grid;gap:var(--s3);max-width:var(--measure)}
.card-take[hidden]{display:none}
.card-take h2{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}