/* ===========================================================================
   SSTGC — pattern styles and editor bridge
   Loaded on the front end (via components) and inside the editor (via
   add_editor_style), so a layout looks the same in both places.
   =========================================================================== */

/* ── People grid ───────────────────────────────────────────────────────────
   Built from wp:columns, but columns alone gives three fixed columns that
   squeeze on a tablet. Overriding to auto-fit means one pattern serves a board
   of three or a committee of twenty.                                        */

.sstgc-people {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--s-8) var(--s-6);
  margin-block: var(--s-8);
}
.sstgc-people .wp-block-column { flex-basis: auto !important; text-align: center; }

.sstgc-people img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--brand-line);
  margin-inline: auto;
}
.sstgc-people h4 { font-size: var(--t-base); margin: var(--s-4) 0 var(--s-1); }
.sstgc-people .person-role,
.sstgc-people p {
  font-size: var(--t-sm);
  color: var(--brand);
  font-weight: 500;
  margin: 0;
  max-width: none;
}

/* An empty image placeholder should not collapse to nothing in the editor. */
.sstgc-people figure:not(:has(img[src])) {
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: 2px dashed var(--line-strong);
  margin-inline: auto;
}

/* ── Roster and timings tables ─────────────────────────────────────────────*/

.sstgc-roster table,
.sstgc-timings table { width: 100%; }

/* Last column of a timings table is the time — right-aligned, tabular. */
.sstgc-timings th:last-child,
.sstgc-timings td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}

.sstgc-roster td:first-child { font-weight: 500; color: var(--text-strong); }
.sstgc-roster td:last-child  { color: var(--brand); font-size: var(--t-sm); }

/* ── Info cards ────────────────────────────────────────────────────────────*/

.sstgc-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s-5);
  margin-block: var(--s-8);
}
.sstgc-cards .wp-block-column {
  flex-basis: auto !important;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.sstgc-cards .wp-block-column > *:first-child { margin-top: 0; }
.sstgc-cards h4 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.sstgc-cards p { font-size: var(--t-sm); color: var(--text-soft); margin: 0; max-width: none; }

/* ── Notice ────────────────────────────────────────────────────────────────*/

.sstgc-notice {
  background: var(--warning-bg);
  border-left-color: var(--warning);
}
.sstgc-notice p:first-child strong { color: var(--warning); }

/* ── Editor-only ───────────────────────────────────────────────────────────
   The editor canvas is not the page, so a few things need saying twice.     */

.editor-styles-wrapper {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
}

/* The editor wraps blocks in .block-editor-block-list__layout, not .prose, so
   the content rules have to be reachable from there too. */
.editor-styles-wrapper .block-editor-block-list__layout > * + * { margin-top: var(--s-4); }

.editor-styles-wrapper h1 { font-size: var(--t-3xl); font-weight: 700; }
.editor-styles-wrapper h2 { font-size: var(--t-2xl); font-weight: 700; }
.editor-styles-wrapper h3 { font-size: var(--t-xl); }
.editor-styles-wrapper h4 { font-size: var(--t-lg); }

.editor-styles-wrapper p,
.editor-styles-wrapper li { max-width: var(--measure); }

.editor-styles-wrapper a { color: var(--brand); }

.editor-styles-wrapper blockquote {
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r) var(--r) 0;
}

.editor-styles-wrapper table { border: 1px solid var(--line); border-radius: var(--r); }
.editor-styles-wrapper th {
  background: var(--surface-sunk);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-soft);
}