/* ═══════════════════════════════════════════════════════════════════════════
   COMMONS — the furniture. Page architecture is in families/civic.css.
   Everything here is a sign, a timetable or a list of facts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filters ────────────────────────────────────────────────────────────── */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-6);
}
.filter {
  min-block-size: 2.75rem;
  padding-inline: var(--s-4);
  background: transparent;
  border: 2px solid var(--line);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
}
.filter:hover { border-color: var(--fg); }
.filter[aria-pressed="true"] {
  background: var(--enamel);
  border-color: var(--enamel);
  color: var(--accent-fg);
}

/* ── The services directory ─────────────────────────────────────────────── */
.directory { list-style: none; margin: 0; padding: 0; }

.service {
  padding-block: var(--s-6);
  border-block-start: var(--rule);
}
.service:last-child { border-block-end: var(--rule); }

.service__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  margin-block-end: var(--s-3);
}
.service__name {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* State is never colour alone — the word is always there. */
.service__state {
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: var(--s-1) var(--s-3);
  border: 2px solid currentColor;
  white-space: nowrap;
}
.service__state[data-state="open"]   { color: var(--enamel); }
.service__state[data-state="soon"]   { color: var(--caution); }
.service__state[data-state="closed"] { color: var(--fg-muted); }

.service__summary {
  font-size: var(--t-md);
  max-inline-size: var(--measure-wide);
}
.service__when {
  font-weight: 700;
  margin-block-start: var(--s-3);
  color: var(--enamel);
}

.service__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-1) var(--s-5);
  margin-block-start: var(--s-4);
  max-inline-size: var(--measure-wide);
}
@media (min-width: 40rem) {
  .service__facts { grid-template-columns: 11rem minmax(0, 1fr); }
}
.service__facts dt {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  padding-block-start: 0.25em;
}
.service__facts dd { margin: 0 0 var(--s-3); font-size: var(--t-sm); }
@media (min-width: 40rem) { .service__facts dd { margin-block-end: var(--s-2); } }

/* ── Tags ───────────────────────────────────────────────────────────────── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}
.tag {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  color: var(--fg-muted);
}
.tag--free { background: var(--enamel); border-color: var(--enamel); color: var(--accent-fg); }
.tag--kind { border-color: var(--fg); color: var(--fg); }

/* ── The week timetable ─────────────────────────────────────────────────── */
.timetable {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 46rem) { .timetable { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .timetable { grid-template-columns: repeat(7, 1fr); } }

.timetable__day {
  background: var(--bg-raised);
  padding: var(--s-4) var(--s-3);
}
.timetable__day[data-today] { background: var(--bg-sunken); box-shadow: inset 0 4px 0 var(--enamel); }
.timetable__day h3 {
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-block-end: var(--s-3);
}
.timetable__empty { font-size: var(--t-xs); color: var(--fg-muted); }

.sessions { list-style: none; margin: 0; padding: 0; }
.session {
  padding-block: var(--s-2);
  border-block-start: var(--hair);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.session:first-child { border-block-start: 0; }
.session__time { font-size: var(--t-xs); font-weight: 700; color: var(--enamel); }
.session__what { font-size: var(--t-sm); line-height: 1.3; }
.session[data-kind="worship"] .session__time { color: var(--fg-muted); }

/* ── Volunteer shifts ───────────────────────────────────────────────────── */
.shifts { list-style: none; margin: 0; padding: 0; }
.shift {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-block-start: var(--hair);
}
.shift:first-child { border-block-start: var(--rule); }
.shift:last-child { border-block-end: var(--rule); }
@media (min-width: 46rem) {
  .shift { grid-template-columns: 9rem minmax(0, 1fr) 11rem; gap: var(--s-5); align-items: start; }
}
.shift[data-full] { opacity: 0.62; }

.shift__when { display: flex; flex-direction: column; }
.shift__day { font-weight: 800; }
.shift__time { font-size: var(--t-sm); color: var(--fg-muted); }
.shift__name { font-size: var(--t-md); font-weight: 700; }
.shift__note { font-size: var(--t-sm); color: var(--fg-muted); margin-block-start: var(--s-1); }

.shift__places { display: flex; flex-direction: column; gap: var(--s-2); }
.pips { display: flex; gap: 3px; }
.pip {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: 2px solid var(--enamel);
}
.pip[data-filled] { background: var(--enamel); }
.shift__left { font-size: var(--t-sm); font-weight: 700; }
.shift[data-full] .shift__left { color: var(--fg-muted); }

/* ── Records: the year's figures, as a scoreboard not a chart ───────────── */
.records {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1px;
  background: currentColor;
  border: 1px solid currentColor;
}
.record {
  background: var(--bg-raised);
  color: var(--fg);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.band--ink .record, .band--solid .record { background: var(--bg-invert); color: var(--fg-invert); }
.record__n {
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.record__label { font-weight: 700; font-size: var(--t-sm); }
.record__note { font-size: var(--t-xs); color: var(--fg-muted); }
.band--ink .record__note { color: var(--muted-invert); }

/* ── Partners, staff, needs ─────────────────────────────────────────────── */
.partners, .people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-5);
}
.partner, .person { border-block-start: var(--rule); padding-block-start: var(--s-3); }
.partner h3, .person__name { font-size: var(--t-md); font-weight: 800; }
.partner__what, .person__note { font-size: var(--t-sm); color: var(--fg-muted); margin-block-start: var(--s-2); }
.partner__contact { font-weight: 700; margin-block-start: var(--s-2); }
.person__role {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--enamel);
  margin-block-start: var(--s-1);
}

.needs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.need {
  font-weight: 700;
  padding: var(--s-2) var(--s-4);
  border: 2px solid currentColor;
}

/* ── A plain statement block: the promises that make people come in ─────── */
.plainly {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 46rem) { .plainly { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.plainly h3 {
  font-size: var(--t-md);
  font-weight: 800;
  padding-block-end: var(--s-2);
  border-block-end: 3px solid currentColor;
  margin-block-end: var(--s-3);
}
.plainly p { font-size: var(--t-sm); }

/* ── Contact / helpdesk ─────────────────────────────────────────────────── */
.helpdesk {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 52rem) { .helpdesk { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }
.helpdesk dl { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
.helpdesk dt {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  margin-block-start: var(--s-4);
}
.helpdesk dd { margin: 0; font-size: var(--t-md); font-weight: 600; }

/* ── Photography: documentary, never decorative ─────────────────────────── */
.plate { margin: 0; }
.plate img { inline-size: 100%; display: block; }
.plate figcaption {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  padding-block-start: var(--s-2);
}
.band--ink .plate figcaption, .band--solid .plate figcaption { color: inherit; opacity: 0.8; }

.plate--wide img { block-size: clamp(16rem, 44vh, 26rem); object-fit: cover; }

@media print {
  .filterbar, .shift__places { display: none !important; }
  .service { break-inside: avoid; border-block-start: 1pt solid #000; }
  .timetable { grid-template-columns: repeat(7, 1fr); }
}

/* Demo only — added by build/demo.mjs, not present in the downloadable zip. */
.photo-credit {
  padding-block: var(--s-4) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
.photo-credit a { color: inherit; }