/* ub/program-index — every program, grouped by subject.
   ==========================================================================

   Loaded only on pages carrying ub/program-index (see ub-elements.php).

   The design problem, in two acts.

   First the graduate portal tabbed 38 programs by college, splitting them
   23/12/3: one tab was six rows of near-identical white boxes and two thirds
   of the list sat behind a click.

   Replacing that with a plain ruled list fixed the finding but produced a
   directory listing — program names were the SMALLEST text on the page at
   15px, under 17.6px FAQ questions and 21px body copy, with facts at 11.8px
   near the accessibility floor. Legible is not the same as appealing, and the
   thing the reader came for should not be the thing set in the smallest type.

   So: subject PANELS. Each group is a card with a tinted header band, its
   name is set at a readable size, and the panel carries enough colour and
   shadow to read as a designed object rather than a table of contents.

   Long panels start at `visible` rows and expand in place (program-index.js).
   The expansion is progressive enhancement: without the script every row is
   visible and the button never appears.
   ========================================================================== */

.ub-pidx {
  padding: var(--section-pad, 72px) 0;
  background: var(--bg-light);
}

.ub-pidx--dark {
  background: var(--white);
}

.ub-pidx-head {
  max-width: 62rem;
  margin-bottom: 2.6rem;
}

.ub-pidx-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.16;
  margin: 0 0 0.6rem;
  color: var(--text-main);
}

.ub-pidx-head .section-lede {
  color: var(--text-light);
  line-height: var(--line-height-base, 1.6);
  margin: 0;
}

/* CSS columns, not a grid. A grid puts panels in ROWS, so a 9-row panel
   beside a 4-row one leaves 400px of white to its right and a lone panel
   strands on a final row. Columns let each panel start where the previous one
   ended, and the browser balances the two stacks.

   `break-inside: avoid` on the panel is what keeps a bordered object from
   being sliced across the column break. */
.ub-pidx-groups {
  columns: 2;
  column-gap: 28px;
}

.ub-pidx-group {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 28px;
}

.ub-pidx-group {
  /* `inline-block` + width stops Chrome and Safari letting a tall panel
     overflow its column box, which break-inside alone does not prevent. */
  display: inline-block;
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(44, 62, 80, 0.12);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(27, 16, 35, 0.05);
}

/* The tinted band is what makes a panel read as designed rather than as a
   fragment of a list. */
.ub-pidx-band {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(96deg,
    rgba(89, 45, 130, 0.10) 0%,
    rgba(0, 174, 239, 0.07) 100%);
  border-bottom: 1px solid rgba(89, 45, 130, 0.14);
}

.ub-pidx-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: var(--ub-purple);
  color: var(--white);
  font-size: 0.9rem;
}

.ub-pidx-gh {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ub-purple-dark);
}

.ub-pidx-gh-n {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ub-purple);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 0;
  padding: 4px 11px;
  white-space: nowrap;
}

/* --ub-blue (#00a7e0) is a 2.5:1 contrast on white -- it is a brand accent for
   large text and fills, not a colour for a 12-13px label. --ub-purple is 9.9:1
   and is the site's primary, so small metadata text uses it instead. */
.ub-pidx-gnote {
  margin: 0;
  padding: 10px 22px 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ub-purple);
}

.ub-pidx-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.ub-pidx-row + .ub-pidx-row {
  border-top: 1px solid rgba(44, 62, 80, 0.09);
}

/* Only the script's .is-collapsed hides anything. Without JS the rows stay
   visible and the toggle stays `hidden`, so nothing is unreachable. */
.ub-pidx-group.is-collapsed .ub-pidx-row--extra { display: none; }

.ub-pidx-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 13px 22px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

a.ub-pidx-link:hover,
a.ub-pidx-link:focus-visible {
  background: rgba(89, 45, 130, 0.05);
  border-left-color: var(--ub-purple);
}

a.ub-pidx-link:focus-visible {
  outline: 3px solid var(--ub-blue);
  outline-offset: -3px;
}

.ub-pidx-main { min-width: 0; }

/* The programme name is what the reader came for. It is set at body size, not
   below it -- the first version put it at 15px, smaller than every other
   piece of running text on the page. */
.ub-pidx-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.34;
  color: var(--ub-purple-dark);
}

a.ub-pidx-link:hover .ub-pidx-name { color: var(--ub-purple); }

.ub-pidx-badge {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 7px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ub-purple-dark);
  background: rgba(89, 45, 130, 0.11);
  border-radius: 0;
  padding: 2px 8px;
}

.ub-pidx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--text-light);
}

/* Dot separators are drawn, not typed: a bullet character in the markup gets
   read aloud on every row. */
.ub-pidx-meta {
  position: relative;
  padding-left: 13px;
}

.ub-pidx-meta:first-child { padding-left: 0; }
.ub-pidx-meta:first-child::before { display: none; }

.ub-pidx-meta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgba(44, 62, 80, 0.3);
}

.ub-pidx-cred {
  flex: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ub-purple);
  white-space: nowrap;
}

.ub-pidx-more {
  display: block;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  border-top: 1px solid rgba(44, 62, 80, 0.1);
  background: rgba(89, 45, 130, 0.04);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ub-purple);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.ub-pidx-more::after {
  content: ' \25BE';
  font-size: 0.8em;
}

.ub-pidx-group:not(.is-collapsed) .ub-pidx-more::after { content: ' \25B4'; }

.ub-pidx-more:hover { background: rgba(89, 45, 130, 0.09); }

.ub-pidx-more:focus-visible {
  outline: 3px solid var(--ub-blue);
  outline-offset: -3px;
}

.ub-pidx-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 2rem;
}

.ub-pidx-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 44rem;
}

@media (max-width: 900px) {
  .ub-pidx-groups { columns: 1; }
}

/* The band is a flex row of icon + title + count pill. On a narrow panel a
   long subject name pushes the nowrap pill past the panel edge, so the row
   wraps and the pill takes the second line. */
@media (max-width: 520px) {
  .ub-pidx-band { flex-wrap: wrap; }
  .ub-pidx-gh { flex: 1 1 100%; order: 2; }
  .ub-pidx-gh-n { order: 3; }
}

/* Below this the row cannot hold name and credential on one line without the
   credential crowding a long programme name. */
@media (max-width: 420px) {
  .ub-pidx-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ub-pidx-link,
  .ub-pidx-more { transition: none; }
}