/* ==========================================================================
   Blog home + six subject hubs (scripts/build_hubs_articles.py).
   Requires tokens.css + base.css. Mobile-first (360), enhanced at 640 / 960.
   Pill bar on phones (sticky, scrolls inside its own box); left rail from 960.
   (.page-head, .crumbs, .pills mirror notes.css: see pages/subject-hubs/SHARED_REQUESTS.md)
   ========================================================================== */

/* Page head ------------------------------------------------------------ */
.page-head { padding-block: var(--s-3) var(--s-4); }
.page-head__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.page-head__text { display: grid; gap: var(--s-2); min-width: 0; }
.page-head__kicker {
  font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-red-text);
}
.page-head__title { font-size: var(--fs-h1); }
.page-head__intro { max-width: 70ch; color: var(--c-text-muted); }
.page-head__actions { min-width: 0; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-1); color: var(--c-text-muted); }
.crumbs a { color: var(--c-link-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { text-decoration: underline; }

@media (min-width: 960px) {
  .page-head { padding-block: var(--s-4) var(--s-5); }
  .page-head__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "crumbs crumbs" "text actions";
    column-gap: var(--s-6); row-gap: var(--s-3);
  }
  .page-head__inner > .crumbs { grid-area: crumbs; }
  .page-head__text { grid-area: text; }
  .page-head__actions { grid-area: actions; align-self: start; justify-self: end; width: 280px; padding-top: var(--s-1); }
  .page-head__actions .btn-row { flex-direction: column; }
  .page-head__actions .btn { width: 100%; }
}

/* Pills ------------------------------------------------------------------ */
.pills-wrap { min-width: 0; margin-inline: calc(-1 * var(--gutter)); }
.pills {
  display: flex; gap: var(--s-1); overflow-x: auto;
  padding-inline: var(--gutter); padding-block: var(--s-1);
  scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0 var(--s-2); font-family: var(--ff-display); font-size: 1rem; line-height: 1.25;
  color: var(--c-slate); background: var(--c-white); border: 1px solid var(--c-slate);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}
.pill:hover { background: var(--c-slate); color: var(--c-white); }

/* Layout: sticky jump bar (phones) / left rail (desktop) -------------------- */
.hub-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: var(--s-6); }
.hub-jump {
  position: sticky; top: 0; z-index: 20; min-width: 0;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  background: var(--c-white); border-block: 1px solid var(--c-line);
}
.hub-jump .pills-wrap { margin-inline: calc(-1 * var(--gutter)); }
.hub-jump__caption, .hub-jump__label { display: none; }
.hub-content { min-width: 0; display: grid; gap: var(--s-6); padding-top: var(--s-4); }

@media (min-width: 960px) {
  .hub-layout { grid-template-columns: 248px minmax(0, 1fr); column-gap: var(--s-6); padding-bottom: var(--s-8); }
  .hub-jump {
    top: var(--s-3); margin: 0; padding: var(--s-2); border: 1px solid var(--c-line); border-radius: var(--radius);
    max-height: calc(100vh - 2 * var(--s-3)); overflow-y: auto; align-self: start; margin-top: var(--s-4);
  }
  .hub-jump .pills-wrap { margin: 0; }
  .hub-jump__caption {
    display: block; margin-bottom: var(--s-1); font-family: var(--ff-display); font-size: var(--fs-sm);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-slate);
  }
  .hub-jump .pills { flex-direction: column; gap: 2px; overflow: visible; padding: 0; }
  .hub-jump .pill {
    display: flex; width: 100%; white-space: normal; border: 0; border-radius: var(--radius-sm);
    min-height: var(--tap-min); padding: var(--s-1) var(--s-1); background: transparent;
  }
  .hub-jump .pill:hover { background: var(--c-surface); color: var(--c-charcoal); }
  .hub-jump__label {
    display: block; margin-top: var(--s-1); padding: var(--s-1) var(--s-1) 0;
    font-family: var(--ff-display); font-size: var(--fs-sm); letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--c-red-text);
  }
  .hub-content { padding-top: var(--s-4); }
}

/* Units ------------------------------------------------------------------ */
.hub-group {
  font-size: var(--fs-h2); color: var(--c-charcoal); padding-bottom: var(--s-1);
  border-bottom: 3px solid var(--c-red-text); scroll-margin-top: 72px;
}
.hub-group + .hub-unit { margin-top: calc(-1 * var(--s-3)); }
.hub-unit { scroll-margin-top: 72px; min-width: 0; }
.hub-unit__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-2); margin-bottom: var(--s-2); }
.hub-unit__title { font-size: var(--fs-h3); color: var(--c-charcoal); }
h2.hub-unit__title { font-size: var(--fs-h2); }
.hub-unit__count { font-size: var(--fs-sm); color: var(--c-text-muted); }
.hub-unit__count a { color: var(--c-link-text); }

/* Card grids: equal height ------------------------------------------------- */
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hub-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-card { min-width: 0; gap: var(--s-1); }
.hub-card__title { font-size: var(--fs-h3); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.hub-card__title a { color: var(--c-charcoal); text-decoration: none; }
.hub-card__title a:hover { text-decoration: underline; }
.hub-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-text-muted); }
.hub-card__desc {
  font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
}
.hub-card .card__foot { justify-content: flex-start; }

/* Blog home: subject cards, latest list ------------------------------------- */
.subject-card { min-width: 0; }
.subject-card .card__title a { text-decoration: none; }
.subject-card__count { font-size: var(--fs-sm); font-weight: 700; color: var(--c-red-text); }
.subject-card__top { display: grid; gap: var(--s-1); padding-left: 1.1em; list-style: disc; }
.subject-card__top a { color: var(--c-link-text); }
.subject-card__top li { overflow-wrap: anywhere; }
.card__title a { text-decoration: none; }

.latest { display: grid; gap: var(--s-1); list-style: none; padding: 0; counter-reset: none; }
.latest__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px var(--s-2); align-items: center;
  padding: var(--s-2); background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.latest__date { font-size: var(--fs-sm); color: var(--c-text-muted); }
.latest__title { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--c-charcoal); text-decoration: none; overflow-wrap: anywhere; }
.latest__title:hover { text-decoration: underline; }
.latest__tag { justify-self: start; }
@media (min-width: 960px) {
  .latest__row { grid-template-columns: 120px minmax(0, 1fr) auto; }
  .latest__tag { justify-self: end; }
}

/* Other subjects ------------------------------------------------------------ */
.hub-others { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; }
.pill--link { white-space: normal; }

.hub-enq { justify-content: center; }
.subscribe-slot { padding-block: var(--s-4); }
@media (min-width: 960px) { .subscribe-slot { padding-block: var(--s-6); } }