/* PSY-1626: Courses hub, following the internships visual language. */
#main.courses-hub {
  --background: oklch(.99 .006 80);
  --foreground: oklch(.25 .013 54);
  --secondary: oklch(.96 .013 80);
  --muted-foreground: oklch(.46 .013 58);
  --border: oklch(.87 .017 75);
  --primary: oklch(.50 .12 60);
  --honey: #EEBB58;
  --dark: oklch(.22 .019 50);
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-prose: 'Spectral', Georgia, serif;
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  overflow: clip;
}
#main.courses-hub * { box-sizing: border-box; }
#main.courses-hub :is(h1,h2,h3,p,figure) { margin: 0; }
#main.courses-hub :is(h1,h2,h3):not(:where(.faq-item h3, .card h3)) { font-family: var(--font-body); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
#main.courses-hub h2 { font-size: clamp(2rem,3.3vw,2.9rem); }
#main.courses-hub h3:not(:where(.faq-item h3, .card h3)) { font-size: 1.5rem; }
#main.courses-hub p:not(:where(.faq-body p, .card p)) { font-family: var(--font-prose); font-size: var(--body-size); line-height: var(--body-lh); color: var(--body-ink); max-width: 65ch; }
/* The course cards are the canonical Card (chrome.css, Card block) since October 15, 2026: the hub's link rules exclude them (inside :where(), so the rules keep their specificity and the text link and sources rules below still win) so the Card's own hover (brand title, action underline, no underline on the rest) applies (review round 1, finding 1). */
#main.courses-hub a:where(:not(.card)) { color: inherit; text-decoration: none; }
#main.courses-hub a:where(:not(.card)):hover { text-decoration: underline; text-underline-offset: 5px; }
#main.courses-hub :focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
#main.courses-hub :is(#courses,#how-it-works) { scroll-margin-top: 88px; }
#main.courses-hub :is(#courses,#how-it-works):focus { outline: none; }
#main.courses-hub img { display: block; max-width: 100%; }
#main.courses-hub .ch-wrap { width: min(1160px,calc(100% - 64px)); margin-inline: auto; }
#main.courses-hub .ch-skip { position: absolute; top: -100px; left: 20px; background: var(--honey); padding: 12px 20px; z-index: 100; }
#main.courses-hub .ch-skip:focus { top: 80px; }
/* Context rules (layout only): the hero's button row is the CtaBand part .cta-actions (design system Phase 1, PSY-2292, October 14, 2026) and its button the canonical .btn at the hero's 52 px height. */
#main.courses-hub .ch-text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-family: var(--font-body); font-size: .95rem; text-decoration: underline; text-underline-offset: 5px; }
#main.courses-hub .ch-quick-facts { border-block: 1px solid var(--border); background: var(--secondary); }
#main.courses-hub .ch-facts-inner { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); padding: 25px 0; }
#main.courses-hub .ch-facts-inner li { display: flex; align-items: center; justify-content: center; gap: 13px; font-size: .95rem; line-height: 1.5; }
#main.courses-hub .ch-facts-inner svg { color: var(--primary); flex: none; }
#main.courses-hub .ch-facts-inner li + li { border-left: 1px solid var(--border); }
#main.courses-hub .ch-section { padding-block: 90px; }
#main.courses-hub .ch-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; margin-bottom: 40px; }
#main.courses-hub .ch-section-heading > p { max-width: 47ch; }
/* The course cards are the canonical Card (chrome.css, Card block) since October 15, 2026 (Phase 1 Card step); the hub keeps its grid (layout only) and the Mini course label. */
#main.courses-hub .ch-course-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
#main.courses-hub .ch-mini-label { background: oklch(.95 .045 80); color: var(--foreground); padding: 4px 10px; border-radius: 4px; }
#main.courses-hub .ch-course-grid-single { grid-template-columns: 1fr; }
#main.courses-hub .ch-how { background: var(--secondary); }
#main.courses-hub .ch-work-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
#main.courses-hub .ch-work-row { display: grid; grid-template-columns: 55px 1fr 1.3fr; gap: 28px; padding: 29px 0; border-bottom: 1px solid var(--border); align-items: start; }
#main.courses-hub .ch-work-num { font-family: var(--font-prose); font-size: 1.6rem; color: var(--primary); line-height: 1.3; }
#main.courses-hub .ch-work-row p { max-width: 53ch; }
#main.courses-hub .ch-terms { background: var(--dark); color: oklch(.95 .006 80); padding-block: 65px; --body-ink: oklch(.95 .006 80); }
#main.courses-hub .ch-terms-grid { display: grid; grid-template-columns: .8fr 1.3fr; gap: 110px; }
#main.courses-hub .ch-terms p + p { margin-top: 18px; }
#main.courses-hub .ch-terms strong { color: var(--honey); font-weight: 600; }
#main.courses-hub .ch-terms .ch-text-link { color: var(--honey); font-size: inherit; }
#main.courses-hub .ch-terms :focus-visible { outline-color: var(--honey); }
#main.courses-hub .ch-closing { position: relative; padding: 78px 0 30px; margin-bottom: 0; background: linear-gradient(180deg,rgba(238,196,106,0) 0%,rgba(238,196,106,.10) 55%,rgba(238,196,106,.26) 100%); }
#main.courses-hub .ch-closing::after { content: ''; position: absolute; bottom: -420px; right: -160px; width: 900px; height: 900px; pointer-events: none; background: radial-gradient(closest-side,rgba(238,196,106,.42),rgba(238,196,106,.14) 55%,transparent 72%); }
#main.courses-hub .ch-closing > .ch-wrap { position: relative; z-index: 1; }
#main.courses-hub .ch-closing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
#main.courses-hub .ch-closing-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 20px; }
/* Only this hub's adjacent shared footer: let the honey band meet it. */
#main.courses-hub + footer.pcf { margin-top: 0; }
@media(max-width:1000px) {
  #main.courses-hub :is(.ch-section-heading,.ch-closing-grid,.ch-terms-grid) { gap: 40px; }
  #main.courses-hub .ch-work-row { grid-template-columns: 35px 1fr 1.2fr; gap: 18px; }
}
@media(max-width:700px) {
  #main.courses-hub .ch-wrap { width: calc(100% - 40px); }
  #main.courses-hub .ch-facts-inner { grid-template-columns: 1fr; padding-block: 12px; gap: 0; }
  #main.courses-hub .ch-facts-inner li { justify-content: start; padding: 10px 5px; }
  #main.courses-hub .ch-facts-inner li + li { border-left: 0; }
  #main.courses-hub .ch-section { padding-block: 58px; }
  #main.courses-hub .ch-section-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }
  #main.courses-hub .ch-course-grid { grid-template-columns: 1fr; gap: 26px; }
  #main.courses-hub .ch-work-row { grid-template-columns: 30px 1fr; gap: 12px; padding: 24px 0; }
  #main.courses-hub .ch-work-row p { grid-column: 2; }
  #main.courses-hub .ch-work-row h3 { font-size: 1.4rem; }
  #main.courses-hub .ch-terms { padding-block: 49px; }
  #main.courses-hub :is(.ch-terms-grid,.ch-closing-grid) { grid-template-columns: 1fr; gap: 28px; }
  #main.courses-hub .ch-closing { padding: 58px 0 24px; }
  }
/* Extended hub sections (Seph, September 16, 2026: the cite box was not needed; the page needed substance). */
#main.courses-hub :is(#inside,#why,#upcoming,#faq) { scroll-margin-top: 88px; }
#main.courses-hub .ch-inside-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 60px; border-top: 1px solid var(--border); }
#main.courses-hub .ch-inside-item { padding: 30px 0 32px; border-bottom: 1px solid var(--border); }
#main.courses-hub .ch-inside-item h3 { font-size: 1.45rem; margin-bottom: 12px; }
#main.courses-hub .ch-inside-item p { max-width: 46ch; }
#main.courses-hub .ch-ref { font-family: var(--font-body); font-size: .8em; color: var(--primary); text-decoration: none; margin-left: 2px; vertical-align: 2px; }
#main.courses-hub .ch-sources { margin: 34px 0 0; padding: 0 0 0 22px; max-width: 78ch; font-family: var(--font-body); font-size: .85rem; line-height: 1.55; color: var(--muted-foreground); }
#main.courses-hub .ch-sources li { margin-bottom: 10px; scroll-margin-top: 100px; }
#main.courses-hub .ch-sources a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
#main.courses-hub .ch-next-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
#main.courses-hub .ch-next-item { display: flex; flex-direction: column; align-items: start; gap: 10px; padding: 28px 28px 26px; background: var(--secondary); border: 1px solid var(--border); border-radius: 14px; }
#main.courses-hub .ch-next-item h3 { font-size: 1.3rem; }
#main.courses-hub .ch-next-item p { font-size: 1rem; line-height: 1.5; color: var(--muted-foreground); }
#main.courses-hub .ch-next-tag { margin-top: auto; padding-top: 8px; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
/* The FAQ is the canonical Faq (chrome.css, design system Phase 1, PSY-2292, October 15, 2026); the hub only sets its width.
   The hub's id-scoped heading and paragraph type rules below exclude the list so the component's own type applies. */
#main.courses-hub .faq { max-width: 860px; }
@media(max-width:1000px) {
#main.courses-hub .ch-next-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
#main.courses-hub .ch-inside-grid { grid-template-columns: 1fr; gap: 0; }
#main.courses-hub .ch-inside-item { padding: 22px 0 24px; }
#main.courses-hub .ch-next-grid { grid-template-columns: 1fr; gap: 14px; }
#main.courses-hub .ch-next-item { padding: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  #main.courses-hub * { transition: none !important; scroll-behavior: auto !important; }
}