/* =====================================================================
   Subject hub pages (/curriculum/business, /computer-science, /economics)
   Loaded alongside shop.css, which supplies .wrap, .pcard and the tag pills.

   Layout rule for this surface: ONE container width (.wrap, 1240px) for every
   section, so heading left edges line up all the way down the page. Reading
   measure is constrained on the paragraphs themselves, never by narrowing and
   re-centering the container (that was the original bug: a 760px .wrap inherits
   margin-inline:auto and drifts right of the 1240px grids above it).
   ===================================================================== */

/* ---- Everything on one centered axis.
       The page is a centered column: hero, headings, prose and card rows all
       share it, so a short row (two courses) sits in the middle of the page
       instead of pooling every bit of leftover space on the right. ---- */
.hub-hero { text-align: center; }
.hub-hero > p { margin-inline: auto !important; }
.hub-crumbs ol { justify-content: center; }
.hub-stats { justify-content: center; }

/* ---- Section rhythm ---- */
.hub-sec { padding: 44px 0 0; }
.hub-sec:last-of-type { padding-bottom: 76px; }
.hub-h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px;
  text-align: center;
}
.hub-sub { font: var(--text-body-md); color: var(--tx); margin: 0 auto 22px; max-width: 60ch; text-align: center; }

/* ---- Prose: the BLOCK is centered on the page at a middle width, but the text
       inside it runs left, headings included. Centred multi-line paragraphs are
       hard to read; the section titles above (.hub-h2/.hub-sub) stay centered. ---- */
.hub-prose { margin: 8px auto 0; max-width: 860px; text-align: left; }
.hub-prose > div + div { margin-top: 28px; }
.hub-prose h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0 0 10px;
}
.hub-prose p { font: var(--text-body-md); color: var(--tx); margin: 0 0 12px; }

/* ---- Full-year courses: horizontal feature rows.
       Reads as intentional whether a hub has 1 course (Business) or 3 (CS),
       which a 3-up card grid does not: one lone card in a 3-col track just
       looks like two cards failed to load. ---- */
.hub-courses { display: grid; gap: 20px; }
.hub-course {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  box-shadow: 0 6px 18px rgba(12, 21, 56, .05);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.hub-course-thumb { display: block; overflow: hidden; border-radius: 12px; }
.hub-course-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
/* Inside a box, copy runs left. The page rhythm is centered, but content sitting
   in a card or panel reads better flush left against its own edge. */
.hub-course-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
.hub-course-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.hub-course-title { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.2; color: var(--ink); margin: 0; }
.hub-course-title a { color: inherit; }
.hub-course-desc { font: var(--text-body-md); color: var(--tx); margin: 0; max-width: 60ch; }
.hub-course-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 2px; }
.hub-course-foot .pc-buy { flex: 0 0 auto; padding: 12px 26px; }

/* ---- Count-fitted grid. Cards stay the SAME size everywhere: one third of the
       row, exactly as in the 3-up shop grid. A short row is centered rather than
       stretched, because widening two cards to half the page each blows the cover
       art up out of proportion with every other card on the site.
       A 1-item section uses .hub-courses (the feature row) instead. ---- */
.hub-fit { display: grid; gap: 22px; align-items: start; justify-content: center; }
.hub-fit-1,
.hub-fit-2,
.hub-fit-3 { grid-template-columns: repeat(var(--hub-n, 3), minmax(0, calc((100% - 44px) / 3))); }
.hub-fit-1 { --hub-n: 1; }
.hub-fit-2 { --hub-n: 2; }
.hub-fit-3 { --hub-n: 3; }

/* ---- Related / shop-all panel ---- */
/* Panel content runs flush left, heading and button included. */
.hub-more { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; box-shadow: 0 6px 18px rgba(12, 21, 56, .05); text-align: left; }
.hub-more h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); margin: 0 0 14px; }
.hub-more ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.hub-more li { font: var(--text-body-md); color: var(--tx); }
/* Scope the link colour to LIST links only. A blanket `.hub-more a` rule bled
   into the solid CTA and rendered blue text on navy, which fails contrast.
   Never style `a` broadly on a surface that also contains buttons. */
.hub-more li a { color: var(--blue); font-weight: 700; }
.hub-more .pc-buy { display: inline-flex; flex: 0 0 auto; padding: 13px 28px; color: #fff; }

/* ---- Breadcrumb ---- */
.hub-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font: var(--text-body-sm); color: var(--tx); }
.hub-crumbs a { color: var(--tx); }
.hub-crumbs a:hover { color: var(--ink); }
.hub-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---- Stat pills under the intro ---- */
.hub-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (hover: hover) and (min-width: 900px) {
  .hub-course:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12, 21, 56, .10); }
  .hub-course:hover .hub-course-thumb img { transform: scale(1.04); }
}

@media (max-width: 860px) {
  .hub-course { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hub-course-thumb { max-width: 260px; }
  .hub-h2 { font-size: 26px; }
  /* Tablet: cards fill the row like the shop grid does, no centering needed. */
  .hub-fit { justify-content: stretch; }
  .hub-fit-2, .hub-fit-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hub-sec { padding-top: 34px; }
  .hub-course { padding: 16px; }
  .hub-course-thumb { max-width: 100%; }
  .hub-course-title { font-size: 20px; }
  .hub-course-foot { gap: 14px; }
  .hub-course-foot .pc-buy { width: 100%; }
  .hub-fit-2, .hub-fit-3 { grid-template-columns: minmax(0, 1fr); }
  .hub-more { padding: 22px 20px; }
}