/* Learning pages redesign (F2, 2026-10-31, Jill's notes).
   Used only by: /how-to-become-instructional-designer/, /applied-id-portfolio-method/, /lead-ai-framework/,
   /portfolio/ and the sample pages. Loaded after text-layouts.css.
   Tokens: H2 40 / 28 / 22px, text 18.5 / 16.5 / 15px, corners 14 / 22 / 32px. */

/* ---------- Ultimate Guide: one format all the way down (heading left, text right, like the case studies) ---------- */
html body.guide section.sec.gx > .container > .tl-body > *{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
html body.guide section.sec.gx .gx-intro p{font-size:18.5px;line-height:1.72;margin:0 0 8px}
html body.guide section.sec.gx .g-cards.gx-stack{display:block;margin-top:8px !important;max-width:none !important}
html body.guide section.sec.gx .g-cards.gx-stack > .reveal{display:block !important;padding:26px 0 26px !important;border-top:1px solid var(--line,rgba(22,51,63,.12)) !important;border-radius:0 !important;background:none !important;margin:0 !important}
html body.guide section.sec.gx .g-cards.gx-stack > .reveal:first-child{border-top:0 !important;padding-top:4px !important}
html body.guide section.sec.gx .g-cards.gx-stack > .reveal > h3{font-size:22px !important;line-height:1.3 !important;margin:0 0 10px !important;grid-row:auto !important}
html body.guide section.sec.gx .g-cards.gx-stack > .reveal p{font-size:18.5px;line-height:1.72}
html body.guide section.sec.gx .g-cards.gx-stack > .reveal p + p{margin-top:1em}
/* the learning path card that names AIDA keeps its tint so the reader can find it */
html body.guide #learning-paths .g-cards.gx-stack > .reveal:last-child{background:var(--ds-tint,#EEF8F8) !important;border:1px solid var(--ds-tint-line,rgba(31,195,204,.25)) !important;border-radius:22px !important;padding:28px 28px 30px !important;margin-top:12px !important}
html body.guide section.sec.gx .steps{max-width:none !important;margin:0 !important}
html body.guide section.sec.gx .faq-list{max-width:none !important;margin:0 !important}
/* steps 7 to 11 continue the numbered list */
html body.guide .gx-then{margin:34px 0 14px !important;font:500 18.5px/1.4 var(--font-display);color:var(--navy)}
html body.guide ol.g-step-rest.gx-rest{margin:0 0 0 !important;max-width:none !important}
html body.guide ol.g-step-rest.gx-rest a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* the Method sits outside the steps: its own section, graphic beside the definition */
html body.guide #applied-id-portfolio-method .method-art{max-width:560px;margin:22px 0 26px !important}
html body.guide #applied-id-portfolio-method .g-stage{font-size:18.5px;line-height:1.72}
@media (max-width:960px){
  html body.guide section.sec.gx > .container > .tl-left .head{margin-bottom:18px !important}
  html body.guide section.sec.gx .g-cards.gx-stack > .reveal > h3{font-size:20px !important}
  html body.guide section.sec.gx .g-cards.gx-stack > .reveal p,html body.guide section.sec.gx .gx-intro p,html body.guide #applied-id-portfolio-method .g-stage{font-size:16.5px}
}
/* rail headings: no stray last word */
html body.guide section.sec.gx > .container > .tl-left h2{text-wrap:balance}
html body.guide section.sec.gx > .container > .tl-left h2 .nowrap{white-space:normal}
html body.guide section.sec.gx .gx-intro{margin-bottom:22px !important}
/* the five stages read like the other sub-items: name on top, text under it */
html body.guide #applied-id-portfolio-method p.g-stage{display:block !important;padding:22px 0 0 !important;margin:22px 0 0 !important;border-top:1px solid var(--line,rgba(22,51,63,.12)) !important}
html body.guide #applied-id-portfolio-method p.g-stage > b:first-child{display:block !important;font:500 22px/1.3 var(--font-display) !important;color:var(--navy);margin:0 0 8px !important;width:auto !important;float:none !important;position:static !important}

/* ---------- Method and LEAD AI pages: every section uses the same rail (heading and short answer left, the rest right) ---------- */
html body.guide section.sec.gx2 > .container > .tl-body > *{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
html body.guide section.sec.gx2 > .container > .tl-body > * + *{margin-top:24px}
html body.guide section.sec.gx2 .gx-intro p{font-size:18.5px;line-height:1.72;margin:0}
html body.guide section.sec.gx2 > .container > .tl-left h2{text-wrap:balance}
html body.guide section.sec.gx2 > .container > .tl-left h2 .nowrap{white-space:normal}
html body.guide section.sec.gx2 > .container > .tl-left .tldr{margin:0 0 20px !important;max-width:none !important}
html body.guide section.sec.gx2 > .container > .tl-left .tldr .frame-card{border-radius:22px !important}
html body.guide section.sec.gx2 > .container > .tl-left .ep-side{margin-top:18px}
html body.guide section.sec.gx2 .steps,html body.guide section.sec.gx2 .faq-list{max-width:none !important;margin-left:0 !important}
html body.guide section.sec.gx2 .xrow{max-width:none !important;margin:0 !important}
html body.guide section.sec.gx2 figure.lead-art{max-width:400px !important;margin:28px 0 0 !important}
html body.guide section.sec.gx2 figure.method-art{max-width:none !important;margin:0 0 8px !important}
html body.guide section.sec.gx2 .tl-pair{display:block !important}
@media (max-width:960px){html body.guide section.sec.gx2 .gx-intro p{font-size:16.5px}}
/* Method page: the five stages, each one name on top and text under it */
html body.guide .gx-stages{margin-top:8px}
html body.guide .gx-stage{padding:26px 0;border-top:1px solid var(--line,rgba(22,51,63,.12))}
html body.guide .gx-stage:first-child{border-top:0;padding-top:6px}
html body.guide .gx-stage p{font-size:18.5px;line-height:1.72}
html body.guide .gx-stage p + p{margin-top:14px}
html body.guide h3.gx-stage-k{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font:500 28px/1.2 var(--font-display) !important;color:var(--navy);margin:0 0 12px !important}
html body.guide .gx-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;background:#DFF5F6;border:1px solid rgba(31,195,204,.45);color:#0B6F76;font:400 18px/1 var(--font-display)}
html body.guide .gx-sub{flex-basis:100%;font:500 15px/1.4 var(--font-body);color:var(--ink-soft,#5b6b74);letter-spacing:0}
html body.guide #five-stages .m-host{margin-top:28px !important;padding:26px 28px;border-radius:22px;background:#fff;border:1px solid var(--line,rgba(22,51,63,.12))}
html body.guide #five-stages .m-host h3{font-size:22px !important;line-height:1.3 !important}
@media (max-width:960px){html body.guide .gx-stage p{font-size:16.5px}html body.guide h3.gx-stage-k{font-size:24px !important}}

/* ---------- Portfolio sample galleries: only the eLearning page keeps a picture beside the hero (Jill, 10/31) ---------- */
html body section.pg-hero.lap-hero--solo .pg-hero-grid.pg-hero-solo{display:block !important;max-width:820px;margin:0 auto;text-align:center}
html body section.pg-hero.lap-hero--solo .pg-hero-solo h1{margin-left:auto !important;margin-right:auto !important;text-align:center !important}
html body section.pg-hero.lap-hero--solo .pg-hero-solo .pf-meta{justify-content:center}
html body section.pg-hero.lap-hero--solo .pg-hero-solo p{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
@media (max-width:720px){
  html body section.pg-hero.lap-hero--solo .pg-hero-grid.pg-hero-solo,html body section.pg-hero.lap-hero--solo .pg-hero-solo h1,html body section.pg-hero.lap-hero--solo .pg-hero-solo p{text-align:left !important;margin-left:0 !important}
  html body section.pg-hero.lap-hero--solo .pg-hero-solo .pf-meta{justify-content:flex-start}
}
html body.guide section.sec.gx2 > .container > .tl-body > .gx-intro{margin-bottom:20px !important}
html body.guide section.sec.gx .g-cards.gx-stack > .reveal:last-child{padding-bottom:0 !important}
html body.guide .gx-stage:last-child{padding-bottom:0}
html body.guide section.sec.gx2 > .container > .tl-body > :last-child{margin-bottom:0 !important}
html body.guide section.sec.gx2 > .container > .tl-left > :last-child{margin-bottom:0 !important}