/* ==========================================================================
   Hub pages (/courses, /free-resources) — page head with breadcrumb, the
   2x2 course grid, the centred guide-card grid and the cross-hub button row.
   Requires tokens.css + base.css. Mobile-first (360), enhanced at 640 / 960.
   (.page-head and .crumbs mirror notes.css / prev-papers.css: see
   pages/hubs/SHARED_REQUESTS.md)
   ========================================================================== */

/* Page head ------------------------------------------------------------ */
.page-head { padding-block: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.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; }

/* Breadcrumb */
.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%; }
  /* /free-resources has no action column: text spans the row */
  .page-head__inner--text-only { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "text"; }
}

/* Course cards: 1 column → 2x2 from 640 (base .grid already does this; the
   override only widens the gap at 960 to match .grid--3 and caps the width
   so two cards never stretch across the whole 1120px container). ---------- */
.course-grid { max-width: 920px; margin-inline: auto; }
@media (min-width: 960px) {
  .course-grid { gap: var(--s-4); }
}

/* Guide cards: a wrapping row that centres a short last row (6 cards = 3x2,
   7 cards = 3+3+1 with the lone card centred). Items in one row share a height. */
.hub-guides {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s-3);
}
.hub-guides > .card { flex: 1 1 100%; min-width: 0; }
@media (min-width: 640px) {
  .hub-guides > .card { flex: 0 1 calc((100% - var(--s-3)) / 2); }
}
@media (min-width: 960px) {
  .hub-guides { gap: var(--s-4); }
  .hub-guides > .card { flex: 0 1 calc((100% - 2 * var(--s-4)) / 3); }
}

/* Cross-hub button row ---------------------------------------------------- */
.hub-teaser { padding-block: var(--s-6); border-top: 1px solid var(--c-line); }
.hub-teaser .section__head { margin-bottom: var(--s-3); }
.hub-teaser__row { justify-content: center; }
@media (min-width: 640px) {
  .hub-teaser__row .btn { min-width: 220px; }
}
@media (min-width: 960px) {
  .hub-teaser { padding-block: var(--s-8); }
}