/* pevents — events list.
   Re-authored from Baseball's rules, which were legible enough to read for
   intent. Two things changed: colours go through the accent roles rather than
   --color-blue, and the mobile layout is a real media query. Baseball's bundles
   contain TWO unconditional `.evrow` rules whose grid-template-columns differ —
   the mobile one wins only because of which file the build emitted last. */
.pevents .sec__inner { display: flex; flex-direction: column; align-items: flex-start; }
.pevents__intro { color: var(--text-muted); max-width: 70ch; margin: 0 0 8px; }

.pevents__group { width: 100%; margin-top: 24px; }
.pevents__group-label { color: var(--text-subtle); margin: 0 0 12px; }

.evrow {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.evrow:last-child { border-bottom: 1px solid var(--rule); }

.evrow__date { display: flex; flex-direction: column; }
.evrow__mon {
  color: var(--accent-deep);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}
.evrow__day {
  font-family: var(--font-display-poster);
  font-weight: var(--weight-poster-heavy);
  font-size: 26px;
  line-height: 1;
  color: inherit;
}

.evrow__main { display: flex; flex-direction: column; gap: 4px; }
.evrow__title {
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.05;
  margin: 0;
  color: inherit;
}
.evrow__cat { color: var(--text-subtle); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.evrow__loc { color: var(--text-muted); font-size: var(--fs-body-sm); white-space: nowrap; }

.evrow__reg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-deep);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.evrow__reg:hover { opacity: .72; }

/* On a navy ground the deep accent can fall below contrast; the bright one is
   the correct pair there. */
.tone--navy .evrow__mon,
.tone--navy .evrow__reg { color: var(--accent-decor); }

@media (max-width: 767px) {
  .evrow { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .evrow__date { flex-direction: row; align-items: baseline; gap: 8px; }
  .evrow__loc { white-space: normal; }
}

/* --- Card layout ---
   The same events as the list above, shown as cards. Everything structural
   comes from .card and .grid--cards; what is here is the status badge over the
   photo and the two lines the list renders side by side. */
.pevents__grid { width: 100%; }
.pevents__group--cards { margin-top: 16px; }

.evcard__photo { position: relative; }
.evcard__status {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: 4px;
}
.evcard__where { color: var(--text-subtle); margin: 0; }
.evcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--accent-deep);
}
.tone--navy .evcard__cta { color: var(--accent-decor); }
a.evcard:hover .evcard__cta { opacity: .75; }

/* Table layout — a tournament calendar a club reads across.
   The wrapper scrolls so five columns never push the page sideways. */
/* position: relative is load bearing, not decoration.

   The table is min-width: 640px inside a 335px wrapper, so on a phone it
   scrolls sideways inside this box. The registration links in it carry
   .screen-reader-text, which is position: absolute. An absolutely positioned
   element is only clipped by an ancestor's overflow if that ancestor is inside
   its containing block - and with no positioned ancestor here, the containing
   block was the section, so those spans escaped the scroller and sat at
   x = 546 in PAGE coordinates on a 375px screen.

   That is what made the whole document 546px wide and pannable sideways, and
   because a position: fixed box sizes to the layout viewport on mobile, it is
   also why the open nav panel sat in a 546px box with its left edge and its
   close button off screen. Measured: adding this line takes
   documentElement.scrollWidth from 546 to 375 and horizontal pan from 171 to 0.

   Any scroll container holding absolutely positioned descendants needs this. */
.pevents__tablewrap { position: relative; overflow-x: auto; margin-top: 8px; }
.pevents__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}
.pevents__table th,
.pevents__table td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.pevents__table thead th {
  font: inherit;
  font-size: var(--fs-eyebrow, .75rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-bottom-width: 2px;
}
.pevents__table tbody th { font-weight: 600; }
.pevents__table td { color: var(--text-muted); }
.pevents__reg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* --- Visitor controls -------------------------------------------------------
   Only present when the block is set to offer them; a schedule with four dates
   does not need a filter bar. */

.pevents__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* .sec__inner is a column flex container with align-items: flex-start, so a
     child with no width shrink-wraps to its contents - the rule under the bar
     stopped at the last select instead of running the full measure.
     .pevents__grid already declares width: 100%; this is the same fix. */
  width: 100%;
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.pevents__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.pevents__filter select {
  font: inherit;
  font-size: var(--fs-meta);
  color: inherit;
  background-color: var(--section-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill, 999px);
  /* The native select arrow is drawn INSIDE padding-right, so padding alone
     cannot put space after it - the arrow just sits on the border. Drawing our
     own chevron is the only way to inset it by a known amount, here the same
     14px the label is inset from the left. */
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 14px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%231D2468" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
/* On a navy section the text goes white, so the navy chevron would disappear. */
.tone--navy .pevents__filter select {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.pevents__filter select:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.pevents__reset {
  font: inherit;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: underline;
}

.pevents__views { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-pill, 999px); overflow: hidden; }
.pevents__view {
  font: inherit;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pevents__view:hover { color: var(--accent-deep); }
.pevents__view.is-active { background: var(--accent-deep); color: var(--color-white); }
.pevents__view.is-active:hover { color: var(--color-white); }
.pevents__view:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }

/* currentColor so the icon follows the button through hover and the active
   state without a second rule for each. */
.pevents__view-icon { width: 15px; height: 15px; display: block; fill: currentColor; }

.tone--navy .pevents__view { color: #ffffffb3; }
.tone--navy .pevents__view:hover { color: var(--color-white); }
.tone--navy .pevents__view.is-active { background: var(--color-white); color: var(--color-navy); }

.pevents__count { color: var(--text-muted); font-size: var(--fs-meta); margin: -16px 0 24px; }

/* List view: the same cards, laid out as horizontal rows. One DOM, two
   presentations — the grid view is simply this rule not applying. */
/* The doubled class is not decoration. base.css sets the card grid with
   `.grid--cards:has(> :last-child:nth-child(2))`, and :has() carries the
   specificity of its argument — that rule scores (0,3,0) and silently beat the
   plain descendant selector here, so the list view stayed two columns while the
   cards inside it correctly reflowed. Same trap the tone modifiers document. */
.pevents--view-list.pevents--view-list .pevents__grid.grid--cards {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
}
.pevents--view-list .evcard {
  display: grid;
  grid-template-columns: 220px 1fr;
  /* Top, not centre: rows vary in height with the division list, and a centred
     photo leaves the thumbnail floating beside a title it is meant to sit with. */
  align-items: start;
  gap: 24px;
  /* .card carries a border on all four sides. A list wants one rule between
     rows, so the box is cleared first - overriding border-bottom alone leaves
     the left and right edges behind and each row reads as a stacked card. */
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  /* Padding belongs to the row, not the body. On .card__body it pushed the date
     down while the photo stayed at the row's top edge, so the two columns began
     at different heights. */
  padding: 16px 0;
}
.pevents--view-list .evcard__photo { aspect-ratio: 16 / 9; border-radius: var(--radius-card); }
.pevents--view-list .card__body { padding: 0; }

@media (max-width: 720px) {
  .pevents__bar { flex-direction: column; align-items: stretch; }
  .pevents__views { align-self: flex-start; }
  .pevents--view-list .evcard { grid-template-columns: 1fr; gap: 0; }
  .pevents--view-list .evcard__photo { display: none; }
}

/* --- Pillar chip row --------------------------------------------------------
   The lead filter where programming spans several pillars. Chips carry the
   shared .pillar-dot, so a pillar is the same colour here as it is anywhere
   else on the site that marks one. */

.pevents__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.pevents__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: var(--fs-meta);
  color: inherit;
  background: var(--section-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill, 999px);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pevents__chip:hover { border-color: var(--accent-deep); }
.pevents__chip:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* The active chip is marked by weight and a filled ground rather than colour
   alone — the dots already carry colour, and colour on colour stops reading. */
.pevents__chip.is-active {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--color-white);
  font-weight: var(--weight-bold);
}

.pevents__more { margin: 0; }
.pevents__more-summary {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.pevents__more-summary::-webkit-details-marker { display: none; }
.pevents__more-summary::after { content: " +"; }
.pevents__more[open] .pevents__more-summary::after { content: " −"; }
.pevents__more[open] .pevents__filters { margin-top: 12px; }

@media (max-width: 720px) {
  .pevents__pillars { gap: 6px; }
  .pevents__chip { padding: 7px 12px; }
}

/* --- Carousel layout -------------------------------------------------------
   The card layout on one scrolling line. Same markup as the grid, so every
   field an event has still renders; only the container changes.

   A real scroller rather than a slideshow: no autoplay, no JS, no dots. Native
   overflow gives keyboard scrolling, trackpad and touch swipe, and a visible
   scrollbar where the platform draws one - all of which a hand-built slider has
   to reimplement and usually gets wrong for a screen reader. */
.pevents__rail {
  display: flex;
  gap: 24px;
  /* Same reason as .pevents__tablewrap above: a scroll container has to be a
     containing block or absolutely positioned descendants escape its clip. */
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x proximity;   /* proximity, not mandatory: mandatory fights
                                      a user who is flicking through quickly */
  /* The rail runs to the window edge so the last card is visibly cut off, which
     is what tells people it scrolls. Negative margin escapes .sec__inner's
     padding, and the width has to be grown by the same amount in both
     directions - .sec__inner is a column flex container with align-items:
     flex-start, so a child that is merely width:100% stays the width of the
     content box and the rail stops short of the right edge. */
  margin-inline: calc(var(--margin) * -1);
  width: calc(100% + var(--margin) * 2);
  padding-inline: var(--margin);
  /* Without this the first card sits flush to the window edge, out of line with
     the headline above it: scroll-snap aligns a card to the SNAPPORT, which by
     default is the padding box, so on load the browser scrolled the rail by
     exactly the padding and swallowed it. scroll-padding moves the snapport in
     to match. */
  scroll-padding-inline: var(--margin);
  padding-bottom: 12px;            /* room for the scrollbar, so it never sits
                                      on top of the card's bottom edge */

  /* Pastel #61: "weird bar right here?". On any machine set to show scrollbars
     permanently - Windows, or macOS with the always-visible setting - the
     native horizontal scrollbar drew as a heavy grey slab the full width of the
     rail, directly under the cards. It read as a stray UI element rather than a
     scrollbar.

     Toned down rather than hidden. The bar is a real affordance for anyone who
     drags it, and on those machines it is the only visible sign the rail
     scrolls; removing it would trade a cosmetic complaint for a usability one.
     So it keeps its function and loses the weight. */
  scrollbar-width: thin;
  scrollbar-color: var(--rail-thumb, #00000026) transparent;
}
.pevents__rail::-webkit-scrollbar { height: 6px; }
.pevents__rail::-webkit-scrollbar-track { background: transparent; }
.pevents__rail::-webkit-scrollbar-thumb {
  background: var(--rail-thumb, #00000026);
  border-radius: 999px;
}
.pevents__rail:hover::-webkit-scrollbar-thumb { background: var(--rail-thumb-hover, #00000040); }
/* On the navy tone the same greys vanish, so the roles flip with the ground. */
.tone--navy .pevents__rail {
  --rail-thumb: #ffffff33;
  --rail-thumb-hover: #ffffff59;
}
.pevents__rail > .card {
  /* Three across with the fourth showing at the edge: a percentage, not a fixed
     width, so the same rule holds at every viewport. The floor stops the card
     collapsing on a phone, where one at a time is the right count anyway, and
     the ceiling stops three cards sprawling on a wide monitor. */
  flex: 0 0 clamp(280px, 30%, 430px);
  scroll-snap-align: start;
}

.pevents__rail:focus-visible { outline: 2px solid var(--accent-decor); outline-offset: 4px; }

/* While a mouse drag is in progress. The grab cursor is the affordance that
   replaces the scrollbar for someone who cannot swipe; user-select stops the
   drag painting the card captions blue. Snapping is suspended for the duration
   so the rail follows the pointer instead of fighting it. */
.pevents__rail.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* An event with no artwork yet. Navy rather than the default grey, which on a
   dark page reads as an image that failed to load. The faint top sheen keeps it
   from looking like a hole in the card. */
.evcard__photo--empty {
  background: linear-gradient(160deg, #ffffff14, #ffffff00 60%), var(--color-navy);
}
.tone--navy .evcard__photo--empty {
  background: linear-gradient(160deg, #ffffff1a, #ffffff00 60%), #ffffff14;
}

/* The rail's cards are the showcase treatment, not the default white card:
   a tall portrait photo, a dark panel and gold accents - the same shape the
   Baseball site uses for its destination cards (see inc/blocks/pm). That
   design is NOT reused by borrowing .pm-card's classes, because block CSS is
   enqueued only for blocks that actually render: a pevents block wearing
   pm-card classes would arrive on a page with no pm stylesheet and no styling
   at all. It is restated here, where it belongs to the block that uses it.

   Pair this with the navy section tone; .tone--navy .card already supplies the
   translucent panel and white text, so what follows is only the differences. */
.pevents__rail > .card {
  border-radius: var(--radius-card);
}
/* Landscape, same crop as the grid's cards. A portrait crop was tried first,
   to echo the reference more closely, and was wrong twice over: three landscape
   cards fit across the rail where three portrait ones did not, and a 4/5 crop
   throws away about 44% of the width of a 16/9 source - which quietly destroyed
   the captioned placeholder frames the events currently carry, slicing the
   caption off at both edges. */
.pevents__rail .evcard__photo { aspect-ratio: 16 / 10; }
/* Grounds the type that sits under the photo and stops a bright placeholder
   running straight into the card body. */
.pevents__rail .evcard__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0000 60%, #0000008c);
}
.pevents__rail .evcard__status { z-index: 1; }
.pevents__rail .card__name { font-size: var(--fs-h2); line-height: 1.04; }
/* Gold type belongs to the navy tone, not to the rail.
   These two were written when the rail was only ever used on navy, where gold
   reads at about 5.8:1. Pastel #131 moved the Las Vegas rail onto light grey
   and both became unreadable on the white card beneath: the meta line measured
   2.39:1 against white, and the gold label landed on the gold pill at 1.00,
   which is invisible rather than merely weak.

   Scoped rather than removed, so a navy rail is unchanged. Off navy each falls
   back to its own default, which is already built for a light ground. */
.pevents__rail .card__meta { letter-spacing: .04em; }
.tone--navy .pevents__rail .card__meta { color: var(--accent-decor); }
.pevents__rail .evcard__cta {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.tone--navy .pevents__rail .evcard__cta { color: var(--accent-decor); }

/* Empty states. Two of them, same look: "nothing matches your filters", which
   the script toggles, and "nothing on the calendar", which the server renders.
   A rule above rather than a box around, so an empty result sits in the page
   as an answer instead of as a warning. */
.pevents__empty {
  margin: 28px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pevents__empty-reset {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent-deep);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pevents__empty-reset:hover { color: var(--color-navy); }

/* The event stage, from B2. Live has to be the one that catches the eye: it is
   the only one of the three that is time-critical to a visitor. Results is
   quieter than the default chip, because a finished event is context rather
   than an invitation. */
.evcard__status--live {
  background: var(--accent-deep);
  color: #fff;
}
.evcard__status--results {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-muted);
}

/* Sits between the heading and the listing, so it needs air beneath it rather
   than the margin the trailing link gets above it. */
.pevents__cta--top { margin-top: 4px; margin-bottom: 28px; }