/* ==========================================================================
   pages/catalogue.css — /courses, /courses/{slug}, /tracks/{slug}. Rundown
   rows, hairlines and the strip family come from components.css; this file
   adds only the filter bar, the course header and the two-column course body.
   ========================================================================== */
.catalogue{ padding-block:var(--space-10) var(--space-16); }
.catalogue .head{ margin-bottom:var(--space-6); }
.head__tracks{ display:flex; gap:var(--space-4); flex-wrap:wrap; }
.head__link--on{ color:var(--accent); }
.head__link--on:hover{ color:var(--accent); }

/* Filter bar: five selects and the actions, a plain GET form */
.filters{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) auto; gap:var(--space-3); align-items:end; padding:var(--space-4) 0 var(--space-6); }
.filters .field__input{ padding-right:var(--space-8); appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size:5px 5px; background-repeat:no-repeat; }
.filters__actions{ display:flex; gap:var(--space-2); }
.row__time--tba{ color:var(--text-3); }
.row--static{ cursor:default; }
.row--static:hover{ background:transparent; }
.row__body--plain{ grid-template-columns:minmax(0,1fr); }
.rundown-list--flush{ border-top:0; }

/* Course header */
.course__crumbs{ font-size:var(--text-sm); color:var(--text-3); margin-bottom:var(--space-4); }
.course__crumbs a{ color:var(--text-2); }
.course__crumbs a:hover{ color:var(--text-1); }
.course__top{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-10); align-items:start; margin-bottom:var(--space-10); }
.course__code{ font-size:var(--text-sm); color:var(--text-3); font-variant-numeric:tabular-nums; margin-bottom:var(--space-2); }
.course__summary{ margin-top:var(--space-4); font-size:var(--text-lg); color:var(--text-2); max-width:52ch; }
.facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:var(--space-4) var(--space-6); margin:var(--space-6) 0 0; padding-top:var(--space-5); border-top:1px solid var(--border); }
.facts__item dt{ font-size:var(--text-sm); color:var(--text-3); }
.facts__item dd{ margin:var(--space-1) 0 0; font-weight:var(--weight-medium); }
.course__cover{ margin:0; aspect-ratio:16 / 9; overflow:hidden; border:1px solid var(--border-strong); background:var(--surface); }
.course__cover img{ width:100%; height:100%; object-fit:cover; }

/* Course body */
.course__grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-16); padding-top:var(--space-10); align-items:start; }
.course__block + .course__block{ margin-top:var(--space-10); }
.course__h2{ font-size:var(--text-xl); margin-bottom:var(--space-4); }
.course__text{ color:var(--text-2); }
.course__list{ padding-left:1.2em; color:var(--text-1); display:flex; flex-direction:column; gap:var(--space-2); }
.course__list a{ color:var(--text-1); text-decoration:underline; }
.course__note{ margin-top:var(--space-4); font-size:var(--text-sm); color:var(--text-3); }
.cohort__body{ grid-template-columns:76px minmax(0,1fr); grid-template-areas:"time main" "time end" "time action"; gap:var(--space-2) var(--space-5); }
.cohort__body .row__time{ grid-area:time; }
.cohort__body .row__main{ grid-area:main; }
.cohort__end{ grid-area:end; justify-content:space-between; }
.cohort__end .price{ min-width:0; }
.cohort__action{ grid-area:action; margin-top:var(--space-2); }

/* Track page */
.track-cat{ margin-top:var(--space-10); }
.track-cat .strip{ margin-top:0; }
.strip__img--blank{ display:block; background:var(--elevated); }
.track-cat__none{ padding:var(--space-4) 0; color:var(--text-3); font-size:var(--text-sm); border-bottom:1px solid var(--border); }

@media (max-width:900px){
  .filters{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .filters__actions{ grid-column:1 / -1; }
  .course__top,.course__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
  .course__cover{ order:-1; }
}
@media (max-width:759px){
  /* "14 Sep" is wider than the home page's "19:30": give the date column room */
  .catalogue .row__body,.cohort__body{ grid-template-columns:76px minmax(0,1fr); }
}
@media (max-width:640px){
  .catalogue{ padding-block:var(--space-6) var(--space-12); }
  .filters{ grid-template-columns:minmax(0,1fr); }
}

/* P5b: lessons under each module on the course page; preview lessons link to the player */
.course__lessons{ list-style:none; margin:var(--space-2) 0 0; padding:0; display:grid; gap:4px; font-size:13px; color:var(--text-2); }
.course__lessons .badge{ margin-left:4px; }