/* ============================================================
   Block: roadshow_schedule — split intro + stacked event rows.
   Design source: H:271-303. Mobile-first per DECISIONS D3.

   Desktop rows are `230px 1fr auto` (H:287). That template is a
   desktop value: at phone width the 230px date rail leaves ~110px
   for the title. So the row runs through THREE tiers, and all three
   are drawn in the design rather than interpolated:

     < 768   stacked  — rail / body / full-width RSVP (Mobile:357-367)
     >= 768  `190px 1fr` two columns, RSVP still full width in cell
             (2,2) (Mobile:375, Mobile:380, Mobile:390-392 — the
             artboard even labels the tier "768 — DATE COLUMN
             RETURNS, RSVP STAYS FULL-WIDTH UNDER THE ROW")
     >= 1024 `230px 1fr auto`, RSVP inline (H:287)

   The 768 tier's spacer is achieved with grid-column placement rather
   than the empty <div> the artboard uses, so no markup carries a
   presentational element.
   ============================================================ */

.m434-roadshows-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.m434-roadshows-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 10px 0 0;
}

/* --m434-muted-ink: this lede sits directly on the section ground, and
   a flat --m434-slate-strong is 2.00:1 on --navy and 1.16:1 on the
   crimson band the block can be set to. components.css's shared .lede
   already had a dark-ground value; this local copy did not. */
.m434-roadshows-lede {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--m434-muted-ink);
  margin: 14px 0 0;
  max-width: 46ch;
}

.m434-roadshows-cta { margin-top: 22px; }

.m434-roadshows-media {
  position: relative;
  background: var(--bg-soft);
  box-shadow: var(--m434-rule-accent);
  padding: 10px;
}

.m434-roadshows-media img { display: block; width: 100%; height: auto; }

/* ---------- The event list ---------- */
.m434-events {
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--white);
}

.m434-event {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;                /* Mobile:357 */
  padding: 22px 18px;       /* Mobile:357 */
  border-top: 1px solid var(--line);
  /* H:287 paints the WHITE on the row, not on the list, which is what
     gives the hover something to transition from. .m434-events keeps
     its own white so the container still reads as one opaque island. */
  background: var(--white);
}

/* min-width:0 releases the `1fr` track's min-content floor, so a long
   unbroken event title cannot widen the row past the viewport. */
.m434-event-body { min-width: 0; }

/* H:287's `transition: background .2s` plus a hover to #f9fafb
   (--m434-hover-row, already in tokens.css for exactly this role).

   THE SELECTOR IS THREE CLASSES DELIBERATELY. The row carries
   data-reveal, and global.css's `html.m434-reveal-ready [data-reveal]`
   declares the reveal transition at (0,2,1) — a plain `.m434-event`
   rule at (0,1,0) loses, and the hover would not animate. (0,3,0)
   wins, so the reveal's own opacity/transform timings are restated
   verbatim here rather than dropped. The reduced-motion block at the
   foot of global.css flattens transition-duration globally, so this
   needs no gate of its own. */
.m434-roadshows .m434-events .m434-event {
  transition:
    background .2s ease,
    opacity   .7s var(--m434-ease) var(--m434-reveal-delay, 0s),
    transform .7s var(--m434-ease) var(--m434-reveal-delay, 0s);
}

/* hover:hover so a touch device does not leave a row stuck in the
   hovered state after a tap. */
@media (hover: hover) {
  .m434-event:hover { background: var(--m434-hover-row); }
}

.m434-events .m434-event:first-child { border-top: 0; }

/* THE HEADLINE MISS. All three tiers draw a 3px accent left rule with
   the date stacked above the tag inside it (H:288, Mobile:381,
   Mobile:358); the theme had neither the rule nor the padding, and laid
   date and tag out side by side on one baseline. The 3px orange left
   border is also on the mobile artboard's explicit KEEP list
   (Mobile:591), so it holds at every width.

   --red, not --m434-accent-text: this is a 3px rule, not text. Against
   the row's white it is 3.03:1, which is decoration and a boundary
   rather than information — the date beside it carries the meaning. */
.m434-event-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;                                  /* Mobile:358 */
  border-left: 3px solid var(--red);         /* H:288 */
  padding-left: 14px;                        /* Mobile:358 */
}

/* 18 -> 20 -> 22 (Mobile:359, Mobile:381, H:289; design-system.md §2.3
   confirms 22px for "event date"). line-height:1 at all three tiers —
   the date is a single line by construction and the tag below it owns
   the gap. */
.m434-event-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}

/* NO LONGER ACCENT-COLORED, and that is the point of the change.
   --m434-accent-text made a neutral micro-label ("WORKSHOP",
   "SEMINAR") read as a status or urgency signal it does not carry; the
   desktop artboard leaves the tag entirely unstyled so it inherits body
   ink, and the only styled instance in the design is a gray mono label
   (Mobile:360, Mobile:383).

   COLOR — the design's #6B7280 is 4.83:1 on the row's white and
   4.63:1 on the #f9fafb hover ground: both clear AA, but with 0.13
   to spare at 10px. --m434-muted-ink resolves to --m434-slate-strong
   #4b5563 inside .m434-events (blocks.css "LIGHT ISLANDS") — 7.56:1
   and 7.23:1 on the same two grounds — and is the gray the meta line
   beside it already uses, so the two read as one system.

   WEIGHT — the artboards set none, i.e. 400, but they set it on
   'JetBrains Mono', which this theme does not ship; Montserrat at
   10px/400 with 0.14em tracking is markedly lighter than the artboard's
   mono at the same nominal weight. 500 is the substitution, and it is
   the weight .m434-eyebrow already uses for the theme's other 10px
   letter-spaced micro-label. */
.m434-event-tag {
  font-family: var(--body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m434-muted-ink);
}

/* NOT UPPERCASE — a deliberate exception, not an oversight. The h3 rule
   in both artboards' heads sets only font-family + letter-spacing, and
   H:293 / Mobile:361 / Mobile:385 carry no text-transform at any tier.
   design-system.md §10 note 6 names "roadshow title h3 (H:293)" as one
   of three deliberate non-uppercase exceptions and says "Follow the
   design exactly." Titles here are sentences — "Automation & Robotics:
   Where to Start Without Betting the Line" — and set in caps they
   render as a wall.

   18 -> 19 -> 21 (Mobile:361, Mobile:385, H:293). */
.m434-event-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
}

/* THE AXIS IS PER TIER BECAUSE THE ARTBOARDS DISAGREE, and each tier is
   taken from its own file rather than one of them being generalized:
   column/5px at 390 (Mobile:362), a wrapping ROW/16px at 768
   (Mobile:386, where the body sits in a narrower 1fr beside a 190px
   rail), column/6px on desktop (H:292). 13px at every tier (H:292,
   Mobile:365). */
.m434-event-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0 0;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  /* Inside .m434-events, a light island, so this resolves to
     --m434-slate-strong (7.56:1 on the row's white) on every band. */
  color: var(--m434-muted-ink);
}

/* The city is PROMOTED out of the meta gray and is the largest thing in
   the row's second column — 14px/600 at 390 and 768, 15px on desktop,
   sentence case, no tracking, --ink (H:294, Mobile:363, Mobile:386).

   It used to render "MARTINSVILLE, VA": 12px/700/0.08em uppercase in
   the same gray as the format line, so a proper noun was set as a UI
   label and the two meta items had no hierarchy at all. §10 note 5
   ("never uppercase body copy") argues against the caps directly.

   --ink literally rather than --m434-surface-ink: the row is white on
   every band, and the token flips to white inside a .dark-bg section —
   the 1.00:1 trap blocks.css's LIGHT ISLANDS block exists for. Its
   neighbors .m434-event-when and .m434-event-title read --ink for the
   same reason. #303030 is 13.19:1 on #ffffff and 12.63:1 on the
   #f9fafb hover ground. */
.m434-event-city {
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* Mobile:363 — the pin's gutter */
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* The accent map pin (H:294). roadshow-schedule.php emits the inline
   <svg> with stroke="currentColor" — a presentation attribute cannot
   resolve a custom property — so the accent is handed to it here as a
   `color`, and with this rule missing it degrades to the city's own ink
   rather than to nothing.

   --red at 3.03:1 on white is correct here: the pin is aria-hidden
   decoration next to a text label that already names the city, so
   neither 1.4.3 nor 1.4.11 applies to it. flex:0 0 auto because an
   inline SVG with no intrinsic size resolves to its flex basis and
   would otherwise absorb the row (the same failure `.btn svg` in
   global.css was written for). */
.m434-event-pin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--red);
}

/* FULL WIDTH THROUGH 1023px, not just below 480. The mobile artboard
   states it as a decision twice — "date -> title -> meta -> full-width
   RSVP" (Mobile:346) and "RSVP STAYS FULL-WIDTH UNDER THE ROW"
   (Mobile:375) — and draws it at both 390 (Mobile:367) and 768
   (Mobile:392). It goes inline only when the third grid track returns
   at lg (H:287).

   Height 52 -> 48: Mobile:367 draws 52px at phone width (the theme's
   own .btn base and design-system D3's mobile primary floor), H:299 and
   Mobile:392 both draw 48px from 768 up. Either way it clears the 44px
   hit-target floor. */
.m434-event-rsvp {
  min-height: 52px;
  width: 100%;
  justify-content: center;
}

@media (min-width: 768px) {
  .m434-roadshows-title { font-size: 34px; }
  .m434-roadshows-intro { margin-bottom: 40px; }

  .m434-roadshows-intro.has-media {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  .m434-roadshows-intro.has-media .m434-roadshows-copy { flex: 1 1 auto; }
  .m434-roadshows-intro.has-media .m434-roadshows-media { flex: 0 1 400px; }

  /* Mobile:380/390-392 — two columns, and the RSVP drops to its own
     grid ROW under the body rather than sharing the first one. Explicit
     placement replaces the artboard's empty spacer <div>: rail (1,1),
     body (1,2), action (2,2). */
  .m434-event {
    grid-template-columns: 190px 1fr;
    gap: 10px 24px;
    padding: 24px 26px;
  }
  .m434-event-rail   { grid-column: 1; }
  .m434-event-body   { grid-column: 2; }
  .m434-event-action { grid-column: 2; }

  .m434-event-rail { gap: 5px; padding-left: 16px; }   /* Mobile:381 */

  .m434-event-when  { font-size: 20px; }               /* Mobile:382 */
  .m434-event-title { font-size: 19px; line-height: 1.25; }  /* Mobile:385 */
  .m434-event-meta  { flex-direction: row; flex-wrap: wrap; gap: 16px; }  /* Mobile:386 */
  .m434-event-city  { gap: 7px; }                      /* Mobile:386 */
  .m434-event-rsvp  { min-height: 48px; }              /* Mobile:392 */

  .m434-corner-tick {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--red);
    border-style: solid;
    border-width: 0;
  }
  .m434-roadshows-media .m434-corner-tick--tl { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
  .m434-roadshows-media .m434-corner-tick--br { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; }
}

@media (min-width: 1024px) {
  .m434-roadshows-title { font-size: 40px; }

  /* H:287 — the third track returns and the RSVP goes back inline, so
     the md row placement is released. */
  .m434-event {
    grid-template-columns: 230px 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 28px 30px;
  }
  .m434-event-action { grid-column: auto; }

  .m434-event-rail  { gap: 8px; padding-left: 18px; }  /* H:288 */
  .m434-event-when  { font-size: 22px; }               /* H:289 */
  .m434-event-title { font-size: 21px; margin: 0 0 10px; }  /* H:293 */
  .m434-event-meta  { flex-direction: column; gap: 6px; margin-top: 0; }  /* H:292 */
  .m434-event-city  { gap: 8px; font-size: 15px; }     /* H:294 */
  .m434-event-pin   { width: 17px; height: 17px; }     /* H:294 */
  .m434-event-rsvp  { width: auto; }
}

/* ============================================================
   /events/ — the listing (archive-roadshow.php) and one event
   (single-roadshow.php).

   Both draw the same row this file already styles, so everything
   below is the surrounding chrome: the facet rail, the finished-
   event treatment, and the single's fact list. Mobile-first, and
   it reuses the three tiers above rather than inventing new ones.
   ============================================================ */

/* archive.css caps .m434-archive-head at 44ch — right for a header
   standing over one column of posts, wrong over a full-width list,
   where it leaves the heading and intro in the top-left corner.
   Released rather than overridden with a number, so this header uses
   the wrap the list already uses. The same finding, and the same fix,
   as .m434-staff-archive in team-cards.css. */
.m434-events-archive .m434-archive-head {
  max-width: none;
  margin-bottom: 28px;
}

/* THE SAME SECOND CAP THE STAFF ARCHIVE HAD, FIXED HERE IN THE SAME
   PASS BEFORE ANYBODY REPORTS IT (FB-024 was filed against the staff
   listing only; archive-roadshow.php:70 emits the identical
   `m434-archive-intro prose` under the identical released header, so
   it is the same bug waiting for content).

   The rule above releases the SECTION cap on .m434-archive-head. The
   intro also wears `prose`, which global.css caps at --m434-measure
   (760px) with no margin-inline — a READING MEASURE, an unrelated
   system, untouched by widening the header — so the copy strands
   flush-left at 760px inside the 1200px wrap instead of using it.

   IT IS LATENT RATHER THAN VISIBLE TODAY only because the
   `events_archive_intro` theme-settings field is empty on this
   install, so the element is not emitted at all. It appears the day
   somebody types an intro. Same release, same scoping rule, same
   reasoning as .m434-staff-archive .m434-archive-intro in
   team-cards.css. */
.m434-events-archive .m434-archive-intro {
  margin-top: 14px;
  max-width: none;
}

/* One column while the rail is above the list; the rail moves to the
   right column at lg. THE RAIL IS FIRST IN THE DOCUMENT and is placed,
   not reordered — `order` moves the picture and leaves the tab sequence
   where it was, which would put a keyboard user through every event
   before reaching the control that filters them. */
.m434-events-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

/* Releases the grid item's `auto` minimum so a long unbroken event
   title cannot widen the column past the viewport. */
.m434-events-main { min-width: 0; }

/* ---------- The facet rail ---------- */

/* Two facets in one rail — categories, then the past-events switch. */
.m434-events-filters {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.m434-events-filters__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m434-muted-ink);
  margin: 0 0 12px;
}

/* A wrapping chip row while the rail sits above the list, a stacked
   list once it is beside it — one flex container, one property
   changed at lg. */
.m434-events-filters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* box-shadow, not border, for the hairline — the theme's standing
   idiom (global.css line 88): a ring costs no layout box, so the
   active state can add a 3px accent rule inside the same shadow
   without the chip changing size. min-height 44 clears the hit-target
   floor. */
.m434-events-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 16px;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  transition: background 0.18s var(--m434-ease);
}

@media (hover: hover) {
  .m434-events-filter:hover { background: var(--m434-hover-row); }
}

/* The theme's own selected-row language, reused verbatim from
   .m434-network-row.is-active: the light fill plus the 3px accent left
   rule that carries the industrial motif at every size (D3). It is the
   same rule .m434-event-rail draws, so a selected facet and an event
   row read as the same system.

   The fill is #f4f5f7, on which --ink #303030 measures 12.44:1 and
   --m434-slate-strong 6.93:1, so neither the label nor the count needs
   a color of its own to stay legible. aria-current on the same
   element is what actually announces the state; this is its picture. */
.m434-events-filter.is-active {
  background: var(--m434-hover-light);
  box-shadow: 0 0 0 1px var(--line), inset 3px 0 0 0 var(--red);
}

/* Tabular figures so the counts line up once the rail is a column. */
.m434-events-filter__count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: var(--m434-muted-ink);
}

/* ---------- The listing ---------- */

.m434-events-count {
  margin: 0 0 14px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--m434-muted-ink);
}

/* The title is a link to the event's own page now. It takes the row's
   ink rather than the global link color, because the whole row is the
   thing being scanned and a blue-ish title in a list of eight would
   read as the only interactive element in it. The underline appears on
   hover and is always present on focus. */
.m434-event-title a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .m434-event-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* The featured image, in the rail under the date. parts/event-card.php
   carries the reasoning for why it is here rather than in a column of
   its own beside the copy.

   A fixed 4:3 box, so a portrait original and a landscape original sit
   on the same baseline and the rows do not stagger; object-fit crops
   rather than letterboxes, because a gray band beside every second
   photograph is the thing a fixed ratio exists to prevent.

   max-width at the phone tier only: the rail is full width there, and
   an unconstrained 4:3 banner above every row turns a scannable list
   into a stack of cards. */
.m434-event-thumb {
  display: block;
  width: 100%;
  max-width: 200px;
  margin-top: 4px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--m434-hover-light);
}

.m434-event-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m434-event-summary {
  margin: 10px 0 0;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--m434-muted-ink);
  /* Inside .m434-events, a light island, so --m434-muted-ink resolves
     to --m434-slate-strong: 7.56:1 on the row's white and 7.23:1 on the
     #f9fafb hover ground. */
}

/* ---------- A finished event ---------- */

/* DIMMED, NOT HIDDEN, and never dimmed alone. Opacity is invisible to a
   screen reader and unreliable for a reader with low vision, so the row
   also carries a "Past event" label — the fade is the glance-level cue
   and the words are the actual information.

   THE FADE IS ON THE SECONDARY PARTS, NOT ON THE ROW, and the first
   attempt got that wrong in two ways that have to stay fixed:

   1. `opacity` on the row LOST THE CASCADE. Every row carries
      data-reveal, and global.css declares
      `html.m434-reveal-ready [data-reveal].is-visible { opacity: 1 }`
      at (0,3,1) — so a plain `.m434-event--past` at (0,1,0) applied for
      exactly as long as it took the reveal observer to fire, which is
      the flash-then-snap-back this replaces. Fading children instead
      sidesteps the race completely: none of them carry data-reveal, so
      nothing is competing for the property.

   2. `opacity` on the row CANNOT EXEMPT THE TITLE. It establishes a
      group: the whole subtree composites at the parent's alpha and a
      child's own `opacity: 1` changes nothing. The rule that claimed to
      lift the title back was inert, and the title — which is the row's
      LINK — was rendering at 3.54:1 against white.

   So: the date, the tag, the meta line, the summary and the thumbnail
   recede; the title, the "Past event" label and the RSVP control do
   not. The accent rail lightens to the ordinary hairline, which is what
   actually reads as "this one is done" at a glance. */
.m434-event--past .m434-event-when,
.m434-event--past .m434-event-tag,
.m434-event--past .m434-event-meta,
.m434-event--past .m434-event-summary,
.m434-event--past .m434-event-thumb { opacity: 0.55; }

.m434-event--past .m434-event-rail { border-left-color: var(--line); }

/* Restored in full on hover, so a reader who is interested in a past
   event is not reading it at 55%. hover:hover, so a touch device does
   not leave a row stuck in the restored state after a tap. */
@media (hover: hover) {
  .m434-event--past:hover .m434-event-when,
  .m434-event--past:hover .m434-event-tag,
  .m434-event--past:hover .m434-event-meta,
  .m434-event--past:hover .m434-event-summary,
  .m434-event--past:hover .m434-event-thumb { opacity: 1; }
}

.m434-event-past {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m434-muted-ink);
}

.m434-events-clear { margin: 20px 0 0; }

/* ---------- One event (single-roadshow.php) ---------- */

.m434-event-single h1 {
  margin: 10px 0 0;
}

/* A statement, not a decoration — so it gets the accent rule the rest
   of the event language uses rather than a colored background that
   would have to carry text contrast of its own. */
.m434-event-notice {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--m434-hover-light);
  box-shadow: inset 3px 0 0 0 var(--red);
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* A <dl>, so each fact is a real label/value pair rather than a
   colored run of text. One column on a phone; two once there is room,
   which is where a date and a location stop needing a line each. */
.m434-event-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 32px;
  margin: 24px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.m434-event-fact dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m434-muted-ink);
  margin: 0 0 4px;
}

.m434-event-fact dd {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

.m434-event-figure { margin: 28px 0 0; }
.m434-event-figure img { display: block; width: 100%; height: auto; }

.m434-event-single .prose { margin-top: 28px; }

.m434-event-cta   { margin: 28px 0 0; }
.m434-event-back  { margin: 32px 0 0; }

.m434-event-terms {
  margin: 24px 0 0;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--m434-muted-ink);
}

/* NO FADE ON AN EVENT'S OWN PAGE. The fade is a listing affordance for
   scanning a set, and there is no set here — the notice above the fold
   is what says the event is over. `.m434-event-single--past` is on the
   article for anything that wants to hook it; nothing styles it today,
   and a rule restating the default would only look like one that does. */

@media (min-width: 768px) {
  .m434-events-layout { gap: 32px; }
  .m434-event-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The rail becomes a 190px column of its own — the picture takes it. */
  .m434-event-thumb { max-width: none; margin-top: 6px; }
}

@media (min-width: 1024px) {
  /* The rail moves to the right column. Explicit placement, because the
     rail is FIRST in the document and auto-placement would drop the
     list onto a second row under it. */
  .m434-events-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 40px;
    align-items: start;
  }
  .m434-events-filters { grid-column: 2; grid-row: 1; }
  .m434-events-main    { grid-column: 1; grid-row: 1; }

  /* A column of full-width rows once it is a rail, so the counts line
     up on a right edge and the accent rules line up on a left one. */
  .m434-events-filters__list { flex-direction: column; gap: 6px; }
  .m434-events-filter { justify-content: space-between; width: 100%; }

  .m434-event-facts { gap: 16px 40px; }

  /* The rail is 230px at this tier, so the picture fills it. */
  .m434-event-thumb { max-width: none; margin-top: 8px; }
}