/* ─────────────────────────────────────────────────────────────────────────
   blocks.css — makes Gutenberg's markup behave like the hand-written HTML
   the design was drawn for.

   Every page is block content now, so core wraps things: figures around
   images, layout classes on groups, its own spacing between siblings. The
   rules below strip that back so site.css keeps drawing the ruled grid
   exactly as before. Loaded on the front end AND inside the editor, which is
   why the editor canvas looks like the finished page.

   Two deliberate choices:

   1. Nearly everything is wrapped in :where(). That gives the rule zero
      specificity, so it beats the browser default but always loses to a real
      rule in site.css. Without it, a blanket line like .wp-block-group
      { max-width: none } would silently cancel .news-list { max-width: 76ch }
      simply because this file loads later.
   2. No selector is prefixed with a page wrapper. The editor has no such
      wrapper, and .wp-block-* classes only exist in block content anyway.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Undo core's automatic spacing between blocks ───────────────────── */

:where(.is-layout-flow) > :where(* + *),
:where(.is-layout-constrained) > :where(* + *) { margin-block-start: 0; }

/* Group blocks are plain boxes: no max-width, no auto-centring. */
:where(.wp-block-group) { max-width: none; margin-left: 0; margin-right: 0; }

/* Older group markup nests an inner container. `display: contents` lifts its
   children up so grid and flex parents still see them as direct children. */
.wp-block-group__inner-container { display: contents; }

/* Paragraphs standing in for the design's <div> and <span> labels. The
   originals had no default margin, so neither do these — but any explicit
   rule in site.css still wins. */
:where(.wp-block-group p[class]) { margin: 0; }
:where(.close-actions > p, .cta-stack > p, .event-actions > p, .modal-actions > p) { margin: 0; }

/* A classed paragraph here is standing in for a <div> or <span> the design
   used as a label, so it behaves like one: it picks up the container's body
   typography as a starting point, carries no margin of its own, and any rule
   attached to its class always wins. site.css keeps the matching
   `p:not([class])` rules for real body copy. */
:where(.prose p[class])       { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); }
:where(.cell p[class])        { font-size: 16px; line-height: 1.5;  color: var(--color-neutral-800); }
:where(.cell--sm p[class])    { font-size: 15px; }
:where(.box p[class])         { font-size: 16px; line-height: 1.55; }
:where(.aside-block p[class]) { font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); }
:where(.close-band p[class])  { font-size: 18px; line-height: 1.5; max-width: 56ch; opacity: .95; }

/* ── 2. Images ─────────────────────────────────────────────────────────── */

:where(.wp-block-image) { margin: 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }
:where(.wp-block-image figcaption) { margin: 0; text-align: inherit; font-size: inherit; color: inherit; }

/* ── 3. Lists, headings, tables ────────────────────────────────────────── */

:where(.wp-block-heading) { margin-top: 0; }
:where(.wp-block-list) { box-sizing: border-box; }

/* Core wraps tables in a figure; the theme's table styling lives on .table-plain. */
:where(.wp-block-table) { margin: 0; }
.wp-block-table.table-plain > table { width: 100%; border-collapse: collapse; font-size: 16px; }

/* ── 4. Link cards ─────────────────────────────────────────────────────
   A block cannot be nested inside <a>, so a card is a container plus a
   stretched link: the anchor sits on the call-to-action line and its ::after
   covers the whole card. Same click target as before, fully editable inside.
   ───────────────────────────────────────────────────────────────────────── */

.cell, .cta, .dir-item { position: relative; }

.cell-cta a, .cta-inline a, .cta .cta-title a { color: inherit; text-decoration: none; }
.cell-cta a::after, .cta-inline a::after, .cta .cta-title a::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Anything genuinely clickable in its own right sits above that overlay. */
.cell a:not(.cell-cta a):not(.cta-inline a), .cta a:not(.cta-title a) { position: relative; z-index: 2; }

/* ── 5. Arrows ─────────────────────────────────────────────────────────
   The design's arrow used to be an inline <svg>. Rich text strips SVG on
   save, so it is drawn in CSS instead — identical to the eye, and it
   survives every edit staff make to the label beside it.
   ───────────────────────────────────────────────────────────────────────── */

.cell-cta::after, .cta-inline::after,
.btn-white::after, .btn-onred::after, .btn-outline::after {
	content: "\2192"; font-weight: 700; line-height: 1;
	transition: transform .15s ease, color .15s ease;
}
.cell:hover .cell-cta::after { color: var(--color-accent); transform: translateX(4px); }
.cell:hover .cta-inline::after { transform: translateX(4px); }
.btn-white:hover::after, .btn-onred:hover::after, .btn-outline:hover::after { transform: translateX(4px); }

/* A button row is a flex line of paragraphs, each holding one link. */
.btn-wrap { margin: 0; }

/* ── 6. Utilities ──────────────────────────────────────────────────────
   Block markup cannot carry an arbitrary inline style attribute, so the
   handful the old templates used became these classes. One line each,
   named for what they do.
   ───────────────────────────────────────────────────────────────────────── */

.fic-list-head { margin-bottom: 18px; }
.fic-list-head--past { margin-top: 44px; }
.fic-desc-lg { font-size: 16px; }
.fic-prose-wide { max-width: 76ch; }
.fic-indent { padding-left: 20px; margin: 0; }
.fic-gap-sm { margin-top: 10px; }

.g4--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .g4--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .g4--three { grid-template-columns: minmax(0, 1fr); } }

.u-m-0    { margin: 0; }
.u-nolink-underline { text-decoration: none; }
.u-mt-6   { margin-top: 6px; }
.u-mt-8   { margin: 8px 0 0; }
.u-mt-10  { margin-top: 10px; margin-bottom: 0; }
.u-mt-12  { margin-top: 12px; }
.u-mt-16  { margin-top: 16px; }
.u-mb-8   { margin-bottom: 8px; }
.u-mb-10  { margin-bottom: 10px; }
.u-mb-24  { margin-bottom: 24px; }
.u-mb-32  { margin-bottom: 32px; }
.u-pb-8   { padding: 0 0 8px; }
.u-rule-t     { border-top: 2px solid var(--color-divider); margin-bottom: 32px; }
.u-rule-t-28  { border-top: 2px solid var(--color-divider); margin-bottom: 28px; }
.u-lead-sm { font-size: 20px; line-height: 1.45; color: var(--color-text); }
.u-small   { font-size: 15px; color: var(--color-neutral-600); }
.u-meta    { font-size: 15px; color: var(--color-neutral-700); margin: 8px 0 0; }
.u-note    { margin-top: 12px; font-size: 14px; color: var(--color-neutral-600); }
.u-h20     { font-family: var(--font-heading); font-weight: 800; font-size: 20px; margin: 0; }
.u-h22-accent { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-accent-700); }
.u-bignum {
	font-family: var(--font-heading); font-weight: 900; font-size: 34px;
	line-height: 1; letter-spacing: -.03em; color: var(--color-accent-700); margin: 0;
}

/* ── 7. Editor-only ────────────────────────────────────────────────────── */

/* The editor gives every block a wrapper. Inside a grid that wrapper becomes
   the grid item, so stop it collapsing the column. */
.editor-styles-wrapper :where(.g-hero, .g2, .g3, .g4, .g4-light, .g2-cells, .body-grid, .row, .g-event)
	> .block-editor-block-list__block { min-width: 0; }

/* Server-rendered blocks (the event panels) show as a labelled card. */
.fic-dynamic {
	border: 2px dashed var(--color-neutral-500, #8a8a8a);
	background: var(--color-neutral-100, #f6f6f6);
	padding: 22px 24px; font-family: var(--font-heading, sans-serif);
}
.fic-dynamic strong { display: block; font-size: 15px; margin-bottom: 6px; }
.fic-dynamic span {
	font-size: 13px; line-height: 1.55;
	color: var(--color-neutral-700, #555); font-family: system-ui, sans-serif;
}