/* programme_calendar block.
   No literal colour: every value is a token (hard rules 1 and 6).

   Filter bar reuses the short_courses and annual_calendar control so the
   listings on this estate read as one system. Prefix is pc- so several
   filtering blocks can sit on one page without interfering. */

.pc__head { margin-bottom: 1.6rem; max-width: var(--measure); }
.pc__head .section-intro { margin-top: .6rem; }

/* ------------------------------------------------------------- filter bar */
.pc-filters {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
}
.pc-filters__inner { display: flex; flex-direction: column; gap: .75rem; }
.pc-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pc-filterrow__label {
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--text-heading);
  min-width: 92px;
}
.pc-chipbtn {
  font-family: inherit;
  font-size: var(--fs-min);
  font-weight: 600;
  color: var(--ink);
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .45rem 1rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pc-chipbtn:hover { border-color: var(--accent); color: var(--accent); }
.pc-chipbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.pc-count { font-size: var(--fs-min); color: var(--muted); margin: 0 0 1.6rem; }

/* --------------------------------------------------------------- grouping */
.pc-group { margin-bottom: 2rem; }
.pc-group[hidden] { display: none; }
.pc-group__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.3rem;
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
}
.pc-group__n {
  font-size: var(--fs-meta);
  font-weight: 800;
  color: var(--btn-accent-text);
  background: var(--btn-accent-bg);
  border-radius: var(--radius-pill);
  padding: .1rem .6rem;
}
.pc-group__n:empty { display: none; }

/* ------------------------------------------------------------------- rows */
.pc-row { border-bottom: 1px solid var(--line); }
.pc-row[hidden] { display: none; }

.pc-row__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  border: 0;
  padding: .95rem 0;
  cursor: pointer;
}
.pc-row__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.pc-row__name { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); }
.pc-row__when { font-size: var(--fs-meta); color: var(--muted); }

/* The plus, drawn from two rules so there is no icon file and no glyph to
   inherit a font. It becomes a minus when open. */
.pc-row__mark { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.pc-row__mark::before,
.pc-row__mark::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform var(--transition), opacity var(--transition);
}
.pc-row__mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.pc-row__mark::after { left: 7px; top: 0; width: 2px; height: 16px; }
.pc-row__btn[aria-expanded="true"] .pc-row__mark::after { opacity: 0; transform: rotate(90deg); }
.pc-row__btn:hover .pc-row__name { color: var(--accent); }

.pc-row__panel-in { padding: 0 0 1.1rem; max-width: var(--measure); }

/* ------------------------------------------------------------------- tags */
.pc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .8rem 0 0; }
.pc-tags__label {
  font-size: var(--fs-meta);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .2rem;
}
.pc-tag {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--accent-text);
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .2rem .7rem;
  text-decoration: none;
}
a.pc-tag:hover { border-color: var(--accent); color: var(--accent); }

.pc-empty {
  font-size: 1.2rem;
  color: var(--muted);
  text-align: center;
  padding: 2.5rem 0;
  margin: 0;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 40em) {
  .pc-filterrow__label { min-width: auto; width: 100%; }
}