/*
  Public events month page (#3087). Bare element selectors are prefixed with
  .events-page so they cannot leak into the shared header, nav or footer this
  stylesheet also loads on. Font sizes use core's typography scale variables
  (UIUXRULES.md), never a hard-coded rem.
*/

.events-page {
  line-height: var(--line-height-body);
}

/* The two content columns are capped at 440px by core and share the row 50/50,
   but the row itself is content-sized (flex: 0 1 auto), so it shrank when the
   right column lost its boxes and both columns fell to ~355px. Growing the row
   puts them back on their cap; the max-width stops it claiming more than the
   two capped columns and core's own 32px gap can use, which would otherwise
   leave dead space to the right of the calendar. Only above 640px, where the
   row is a row — stacked, growing it just widens the box around the columns. */
@media (min-width: 640px) {
  .events-page .dg-layout-default__rhs {
    flex-grow: 1;
    max-width: calc(440px * 2 + 32px);
  }
}

/* Body typeface at 700: fonts.css ships no 700 heading face. No margin here
   — a bare-element reset nested in .events-page (0,1,1) outranks the
   single-class component rules below, so each heading sets its own. */
.events-page h1,
.events-page h2,
.events-page h3 {
  font-family: 'Body default', Georgia, serif;
  font-weight: 700;
  line-height: var(--line-height-heading);
}

/* The only two <ul>s on this page that are ours. Declared on the classes
   rather than as a .events-page ul reset, which would also hit core
   components. */
.events-list,
.events-calendar__grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------
   Page heading. The rule beneath it is the dg-rule-bottom token, applied in
   the template rather than reproduced here.
   --------------------------------------------------------------------- */
.events-heading {
  font-size: var(--font-size-plus-3);
  /* own margin now the shared h1/h2/h3 rule above does not set one — this
     is a flex child of .events-content, spaced by that column's own gap */
  margin: 0;
}

/* Underlined: it is the one link in a row of plain facts, so it must read as a
   link without relying on the trailing arrow. The arrow opts out below. */
.events-meta__website {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  /* core's anchor rule sets font-weight: 500, which beat the 700 on
     .events-meta and left this row lighter than the rows above it. */
  font-weight: inherit;
}
/* Same visited-link fix as .events-details-link below: core inlines
   `a:visited{color:#1a4e99}` ahead of this file and a pseudo-class outranks a
   plain class, so source order cannot save it. */
a.events-meta__website,
a.events-meta__website:visited {
  color: #333333;
  text-decoration: underline;
}
html[data-theme="dark"] a.events-meta__website,
html[data-theme="dark"] a.events-meta__website:visited {
  color: #e8e8e8;
}
/* arrow-up-right, the house external mark. Sized off the row's font-size like
   .events-meta__icon, dimmed to match the details-link chevron. */
.events-meta__external {
  text-decoration: none;
}
.events-meta__external .svg-icon {
  display: block;
  width: 1em;
  height: 1em;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------
   "Earlier in September" — the heading over the finished events.

   plus-3, matching the page heading. plus-1 was the size of the card titles
   under it and plus-2 is the size of a featured event's title, so either would
   tie with the things it introduces. The dg-rule-top / dg-rule-bottom pair is
   what keeps it reading as a section break rather than a second page title.
   --------------------------------------------------------------------- */
.events-past-heading {
  font-size: var(--font-size-plus-3);
  /* flex child of .events-content, spaced by that column's gap — as .events-heading */
  margin: 0;
}

/* ---------------------------------------------------------------------
   Shared: the calendar-icon / pin-icon meta line (hero and card) and the
   "View Event details" link (hero and premium list cards).
   --------------------------------------------------------------------- */
/* Review round 2, A3: the design has the date and location rows close
   together, 17.6-18px baseline to baseline, reading as one block of facts.
   Left to inherit the hero's 12px / card's 8px section gap they measured
   28.1px / 24.1px instead, reading as two separate paragraphs. 0.125rem
   (2px) of flex gap on top of the ~16px line box lands at ~18.1px. */
.events-meta-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.events-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--font-size-sub-1);
  font-weight: 700;
  line-height: var(--line-height-default);
}

/* flex-shrink on the icon's own flex item, not just the svg inside it:
   without it a wrapping address line squeezes the icon below its 1em size. */
.events-meta__icon {
  flex-shrink: 0;
}
/* Icons inherit currentColor (ICONS.md) and are sized off the meta line's
   own font-size, so they track the 14px text without a separate variable. */
.events-meta__icon .svg-icon {
  display: block;
  width: 1em;
  height: 1em;
  margin-top: 0.15em;
}

/* Not the default site anchor style (UIUXRULES: blue, underlined). Mirrors
   core's link-box "as-row" href-label: full-width row, page ink, bold,
   trailing chevron, dimmed until hover. */
.events-details-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 700;
}
/* Colour lives on the two rules below, not the bare class above. Core inlines
   `a:visited{color:#1a4e99}` ahead of this file and a pseudo-class outranks a
   plain class, so a visited link went blue. #333333 is the page ink. */
a.events-details-link,
a.events-details-link:visited {
  color: #333333;
}
/* Dark mode needs its own pair — the dark theme has its own anchor rule. */
html[data-theme="dark"] a.events-details-link,
html[data-theme="dark"] a.events-details-link:visited {
  color: #e8e8e8;
}
.events-details-link .svg-icon {
  display: block;
  /* chevron-right-alt, matching core's link-box href-label. The plain chevron-*
     glyphs fill only ~25% of their viewBox and drew a ~2.5px mark in this slot,
     so no width would have fixed them. 1.25em tracks the link's font-size and
     resolves to the 20px core hard-codes. */
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  opacity: 0.5;
}
.events-details-link:hover .svg-icon,
.events-details-link:focus-visible .svg-icon {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Hero — "Event box 1". Column-flexed so the 16px section rhythm the page
   already uses (dg-layout-default__content's own gap) is echoed at a
   tighter 12px between the hero's own parts.
   --------------------------------------------------------------------- */
.events-hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.events-hero__title {
  font-size: var(--font-size-plus-2);
  /* own margin now the shared h1/h2/h3 rule does not set one — flex child
     of .events-hero, spaced by its own gap */
  margin: 0;
}

/* Centre-crop to the design's 3:2 slot whichever source image was picked, so
   every box is the same shape. aspect-ratio plus the <img>'s own width/height
   attributes avoid layout shift either way. */
.events-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* 0.5rem matches cocktail.css's main content image, the house value for the
     one large photo on a page. Thumbnails take a smaller radius — see
     .events-card__image img. */
  border-radius: 0.5rem;
}

/* blurb_short is already truncated by the service (word-boundary, ellipsis
   appended) — no CSS clamping needed here. */
.events-hero__blurb {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  /* Review round 2, A8: a long unbreakable word (a URL, a hyphen-free
     German/Dutch venue name) overflows the box without this — verified by
     injecting an 85-character word. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Previous / next month — kept, but not in the design. Set off from the
   content above by the same 1px hairline as .events-card__title, at body
   size, bold and in page ink like the other links on this page.
   --------------------------------------------------------------------- */
.events-month-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid #333333;
  padding-top: 0.5rem;
  font-size: var(--font-size-base);
}
html[data-theme="dark"] .events-month-nav {
  border-top-color: #3a3a3a;
}
.events-month-nav__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
}
/* Same visited-link fix as .events-details-link above: page ink, not core's
   blue :visited. */
a.events-month-nav__link,
a.events-month-nav__link:visited {
  color: #333333;
}
html[data-theme="dark"] a.events-month-nav__link,
html[data-theme="dark"] a.events-month-nav__link:visited {
  color: #e8e8e8;
}
.events-month-nav__icon .svg-icon {
  display: block;
  /* chevron-*-alt for the same reason as .events-details-link .svg-icon: the
     plain glyphs drew a ~3px dot at this size. 1em tracks the text size. */
  width: 1em;
  height: 1em;
}

/* ---------------------------------------------------------------------
   List — "Event box 2". Cards are spaced by the list's own gap, not a rule;
   the only rule in this section is each card's own title underline, below.
   --------------------------------------------------------------------- */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.events-card__title {
  /* Hand-rolled rather than the dg-rule-bottom token: 1px #333333 here against
     that token's 3px #dcdfe1. Same numbers as core's link-box "as-row" header. */
  border-bottom: 1px solid #333333;
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-plus-1);
}
html[data-theme="dark"] .events-card__title {
  border-bottom-color: #3a3a3a;
}

.events-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 0.5rem;
}
.events-card__image {
  flex-shrink: 0;
  width: 33%;
  max-width: 120px;
}
.events-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* 0.125rem, not the hero's 0.5rem. The house value for a thumbnail in a row
     is core's .dg-component-link-box__image, which the cocktail recipe page
     renders at this same size. */
  border-radius: 0.125rem;
}
.events-card__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* List cards print the FULL blurb (design addendum, point 7), which keeps
   its "\n\n" paragraph breaks (normalise_blurb() preserves them) — pre-line
   renders them without needing |nl2br|raw, which autoescape-off rules out. */
.events-card__blurb {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  white-space: pre-line;
  /* Review round 2, A8: see .events-hero__blurb — same overflow, verified
     the same way. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Right column. Deliberately no background: the calendar panel below is the
   same grey and would disappear into it.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Calendar widget.
   --------------------------------------------------------------------- */
.events-calendar__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  /* align-content, not align-items: flex-wrap gives this container lines, and
     align-content (default stretch) positions them — stretched, the single
     line filled min-height and the contents sat at its top. align-items stays
     baseline so the heading and the select share one. */
  align-content: center;
  gap: 0.375rem 1rem;
  padding: 0.75rem 1rem;
  /* The bar keeps a light yellow background in BOTH themes, so its contents
     must be dark ink in both. Set here rather than on each child: core's
     button component resolves an unstyled button's colour to `inherit` under
     the dark theme, which without this picked up the page's #e8e8e8 and left
     the year near-white on yellow. */
  color: #333333;
  /* Bar height is 45% of the cell width, ~57px against this build's ~127px
     cell, taller than its own content makes it. min-height rather than tuned
     padding; align-content above shares the slack evenly. */
  min-height: 3.5rem;
  /* The site header's amber (.header-container in core's _header.scss), so
     the bar matches the header above it. Core hard-codes it there rather than
     as a swatch, so it is spelled out here too. No dark-mode pair: the header
     keeps this amber in both themes, and so does the bar. */
  background: #ffbe36;
}
/* Review round 2, A7: at 640px the head measured 1.9px too narrow for its
   own content (heading + year form + gaps + padding), so flex-wrap fired
   and the bar jumped from 56px to 73.5px tall — the design has title and
   year on one line at every width. Tighter gap/padding claws back 22px. */
@media (max-width: 767px) {
  .events-calendar__head {
    gap: 0.25rem 0.5rem;
    padding: 0.75rem 0.5rem;
  }
}
.events-calendar__heading {
  font-size: var(--font-size-plus-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  /* own margin now the shared h1/h2/h3 rule does not set one — sits in a
     baseline-aligned flex row with the year form; a default h2 margin
     would throw that alignment off */
  margin: 0;
}

/* Styled year dropdown — the same core button + dropdown pair the cocktail
   rating control uses. The panel chrome is core's (component-dropdown.css);
   the option rows below are cocktail.css's .cocktail-dropdown-options values
   copied verbatim, because that stylesheet is not loaded on this page. Keep
   them in step if the cocktail one changes. */
.events-calendar__year {
  /* the dropdown component positions itself absolutely against this */
  position: relative;
  display: flex;
  align-items: baseline;
}
.events-dropdown-options {
  display: flex;
  flex-direction: column;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}
.events-dropdown-options__option {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  position: relative;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  /* right padding reserves the check slot on every row, so widths match */
  padding: 0.25rem 3rem 0.25rem 0.5rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: 500;
}
/* Cocktail's options are <button>, ours are <a>, so these alone meet the
   theme's anchor rules — same defeat as .events-details-link, same fix. */
a.events-dropdown-options__option,
a.events-dropdown-options__option:visited {
  color: #333333;
}
html[data-theme="dark"] a.events-dropdown-options__option,
html[data-theme="dark"] a.events-dropdown-options__option:visited {
  color: #e8e8e8;
}
.events-dropdown-options__option:hover {
  background: #f3f3f3;
}
html[data-theme="dark"] .events-dropdown-options__option:hover {
  background: #333333;
}
.events-dropdown-options__option--selected {
  font-weight: 700;
}
.events-dropdown-options__value {
  min-width: 2rem;
}
.events-dropdown-options__check {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.events-dropdown-options__check .svg-icon {
  display: block;
  width: 1rem;
  height: 1rem;
}
/* The trigger keeps the bar's own type, not the cocktail button's 14px/400:
   it sits beside the heading and the two read as one "EVENTS FOR 2026"
   phrase. Only the panel is a straight copy. */
.events-calendar__year-dropdown .dg-component-button {
  font-size: var(--font-size-plus-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  gap: 0.25rem;
}
/* rem, not em: the same 16x10 the <select> version renders, independent of
   the trigger's larger text. */
.events-calendar__year-dropdown .dg-component-button .svg-icon {
  width: 1rem;
  height: 0.625rem;
}

.events-calendar__year-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.events-calendar__year-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.events-calendar__year-select {
  appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  /* room for the caret below plus a gap, so it clears the year text */
  padding: 0 1.875rem 0 0;
  font: inherit;
  font-size: var(--font-size-plus-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  cursor: pointer;
}
.events-calendar__year-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.events-calendar__year-caret .svg-icon {
  display: block;
  /* chevron-lg-down, not chevron-down: that polygon fills a quarter of its
     viewBox, so no size would make it read. chevron-lg crops the viewBox to
     the shape, so box size is drawn size. */
  width: 1em;
  height: 0.625em;
  color: #333333;
}
.events-calendar__year-submit {
  font-size: var(--font-size-sub-1);
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border: 1px solid #333333;
  border-radius: 0.125rem;
  background: #fff;
  color: #333333;
  cursor: pointer;
}

/* Grid panel — three layers: a grey outer panel with generous padding, a
   thin white frame inside it, then grey cells separated by white gutters.
   Frame and gutters are the same white and width (__grid's padding equals its
   own gap). Panel and cell fill are both #f4f4f5.

   Columns are auto-fit rather than a hard breakpoint. The 97px minmax floor is
   measured: "SEPTEMBER" at this cell's type (71px) plus its padding and
   border. The max() term caps auto-fit at 3 columns. Full month names stay in
   the DOM for screen readers and for month-page.spec.js. */
.events-calendar__panel {
  /* 15.9% of this build's actual ~127px desktop cell ≈ 20px — measured
     (Playwright boundingBox), not assumed: an initial 1.5rem/24px guess
     here read as ~19% once built, so it's 1.25rem (20px), the nearest
     16px-base step (UIUXRULES padding scale) to the derived figure. */
  padding: 1.25rem;
  background: #f4f4f5;
}
html[data-theme="dark"] .events-calendar__panel {
  /* dark 'off' — the same lift cocktail.css gives its right-column panel;
     matches __cell's dark fill below, since panel and cell share one
     colour in light mode too. */
  background: #2a2a2a;
}

/* No "ul." prefix and no repeated margin/list-style needed any more — this
   is the same selector the .events-list, .events-calendar__grid rule above
   already covers for those two properties; padding overrides it here by
   plain source order (equal specificity, this rule comes later), not by
   winning a specificity fight. */
.events-calendar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(97px, calc((100% - 8px) / 3)), 1fr));
  /* Frame padding equals gutter gap — uniform white, both 4px. */
  gap: 4px;
  padding: 4px;
  background: #fff;
}
html[data-theme="dark"] .events-calendar__grid {
  /* dark content-bg — the gridlines and frame sit at the page's own dark
     tone. */
  background: #1a1a1a;
}

.events-calendar__cell {
  /* #f4f4f5 — same as __panel above; panel and cell fill are one colour. */
  background: #f4f4f5;
  /* Transparent rather than none, so the current cell's border does not change
     its box size against its siblings. 5px is 3.3% of the built cell width. */
  border: 5px solid transparent;
  /* The design's cells are square. Height used to be set by content while only
     width tracked the column, so squareness drifted with the viewport.
     aspect-ratio fixes it; the padding and line-height below are what fit the
     3-line stack at 1024px, the tightest case. */
  aspect-ratio: 1;
}
html[data-theme="dark"] .events-calendar__cell {
  /* dark 'off' — the same lift cocktail.css gives its right-column panel. */
  background: #2a2a2a;
}
.events-calendar__cell--current {
  /* The design's #a7a9ab outline is 2.15:1 against the #f4f4f5 cell, under the
     3:1 WCAG 1.4.11 minimum for non-text UI, and it is the only indicator of
     state. #8D8D8D is the lightest grey that passes at 3.02:1; #8E8E8E is
     2.98:1. Recompute this if the cell background changes. */
  border-color: #8d8d8d;
}
html[data-theme="dark"] .events-calendar__cell--current {
  /* Same approach against the dark cell (#2a2a2a), not the old #a0a0a0
     (~5.5:1, the same kind of overshoot as #767676 was in light mode):
     #737373 is the DARKEST grey that still passes 3:1 here (~3.03:1,
     #727272 fails at ~2.98:1) — i.e. the closest match to the light mode
     value's margin above the minimum, mirrored for a dark background. */
  border-color: #737373;
}

.events-calendar__cell-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Review round 2, A4: vertically centres the month/count/label stack —
     matters now the cell is a fixed square (aspect-ratio:1 above) rather
     than a height set by this padding. */
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  /* Was 1.25rem 0.5rem: with the cell now square at every width, the
     tightest case (1024px, ~92px content box) needs the 3-line stack at
     ~74.8px to fit — reduced padding is what makes room for it. */
  padding: 0.5rem 0.25rem;
  color: inherit;
  text-decoration: none;
}
a.events-calendar__cell-body:hover,
a.events-calendar__cell-body:focus-visible {
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="dark"] a.events-calendar__cell-body:hover,
html[data-theme="dark"] a.events-calendar__cell-body:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
/* Light mode: core's anchor colour outranked "color: inherit" here, so every
   linked month cell rendered blue. Element+class matches the specificity the
   :hover rule above already needed. */
a.events-calendar__cell-body,
a.events-calendar__cell-body:visited {
  color: #333333;
}
/* Same theme-anchor-rule fix as .events-details-link above: linked month
   cells were rendering their name/count/label in link-blue instead of the
   cell's own near-black/light ink. */
html[data-theme="dark"] a.events-calendar__cell-body,
html[data-theme="dark"] a.events-calendar__cell-body:visited {
  color: #e8e8e8;
}

/* Months already gone are greyed so the months still to come stand out. The
   cell keeps its link and its outline; only the ink changes. Element+class on
   the anchor because a linked past month would otherwise take the rule above.
   #909090 measures 2.90:1 against the light cell and 4.50:1 against the dark
   one — under WCAG AA in light mode, chosen for the de-emphasis it gives. */
.events-calendar__cell--past .events-calendar__cell-body,
.events-calendar__cell--past a.events-calendar__cell-body,
.events-calendar__cell--past a.events-calendar__cell-body:visited {
  color: #909090;
}
html[data-theme="dark"] .events-calendar__cell--past .events-calendar__cell-body,
html[data-theme="dark"] .events-calendar__cell--past a.events-calendar__cell-body,
html[data-theme="dark"] .events-calendar__cell--past a.events-calendar__cell-body:visited {
  color: #909090;
}

/* All three text elements share the page's inherited near-black colour
   (#333333 light / #e8e8e8 dark); weight alone separates them.

   #3166: the month is a light, widely tracked line on its own, and the count
   and "EVENTS" sit side by side beneath it in __tally. Stacked, a lone
   number under a month read as a date ("September 14"); inline it reads as
   a count. */
.events-calendar__month {
  font-size: var(--font-size-sub-1);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Review round 2, A4: tighter than the var()'s 1.1 default line-height —
     part of fitting the stack into the square cell at 1024px. */
  line-height: 1.1;
}
/* Count and label on one baseline. No wrap: at the 97px column floor the
   widest pair ("14 EVENTS") still fits the cell, and a wrapped pair would
   bring back the stacked look this row exists to avoid. */
.events-calendar__tally {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
}
.events-calendar__count {
  font-size: var(--font-size-plus-3);
  font-weight: 500;
  /* Was var(--line-height-heading) (1.1): 1 is tighter, needed for the
     stack to fit the square cell at 1024px (review round 2, A4). */
  line-height: 1;
}
.events-calendar__label {
  font-size: var(--font-size-sub-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Review round 2, A4: see .events-calendar__month above. */
  line-height: 1.1;
}

/* ---------------------------------------------------------------------
   Mobile calendar (#3166). Below 640px the columns stack, which used to put
   the full calendar under every event. Instead the calendar column moves
   above the list and pins to the top of the viewport, cut down to the three
   --near months (the viewed one and a neighbour either side; see
   service\event::present_calendar()). Heading and year controls are the
   same elements, only tighter.

   The COLUMN is sticky, not the section: a sticky box only travels within
   its parent, and the column's parent (__rhs) spans the whole event list.
   Nothing above it clips overflow. The site header is sticky too and keeps
   its nav bar pinned to the top of the viewport, so the column sticks just
   4px below it, at core's --header-pinned-height (set on :root by header.js,
   as core's own sticky sidebar uses it).
   --------------------------------------------------------------------- */
/* "Month" picker: phones only. From 640px the full grid shows every
   month, so there is nothing to choose. `.hide` (!important) keeps it out
   until events.js reveals it; this keeps it out of the desktop layout. */
.events-calendar__picker {
  display: none;
}

@media (max-width: 639.98px) {
  .events-calendar__picker {
    display: inline-block;
    /* the dropdown component positions itself absolutely against this */
    position: relative;
    /* pushed to the right-hand end of the bar */
    margin-left: auto;
  }
  .events-content-right {
    order: -1;
    position: sticky;
    /* 4px clear of the header's pinned bar, so the two ambers read as two */
    top: calc(var(--header-pinned-height, 0px) + 4px);
    /* above the event cards scrolling underneath. The year dropdown is inside
       this stacking context, so it opens over the list as well. */
    z-index: 10;
  }
  /* Fills that 4px gap with the page ground (core's _layout.scss body
     background), or the cards scrolling underneath show through it. */
  .events-content-right::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: #ffffff;
  }
  html[data-theme="dark"] .events-content-right::before {
    background: #1a1a1a;
  }
  .events-calendar__head {
    min-height: 0;
    padding: 0.5rem;
    /* "EVENTS FOR 2026" on the left, the month picker on the right */
    justify-content: flex-start;
  }
  /* the panel's inset would crowd three cells at 320px; the grid's white
     frame above and below is border enough */
  .events-calendar__panel {
    padding: 0;
  }
  .events-calendar__grid {
    /* always one row of three; auto-fit would drop to two below ~340px */
    grid-template-columns: repeat(3, 1fr);
    /* no side frame: the outer cells line up with the bar and the list */
    padding: 4px 0;
  }
  .events-calendar__cell {
    /* a strip, not squares: the point is to leave the screen to the list */
    aspect-ratio: auto;
    border-width: 3px;
  }
  .events-calendar__cell:not(.events-calendar__cell--near) {
    display: none;
  }
  .events-calendar__cell-body {
    padding: 0.375rem 0.125rem;
  }
  .events-calendar__month {
    /* "SEPTEMBER" at 0.1em overruns a third of a 320px screen */
    letter-spacing: 0.05em;
  }
  .events-calendar__tally {
    margin-top: 0.125rem;
  }
  .events-calendar__count {
    font-size: var(--font-size-plus-2);
  }
}

/* ---------------------------------------------------------------------
   Day boxes — right column widget below the calendar (#3087, placeholder
   data; see the TODO in index.twig). Same visual language as the list card
   but its own classes, so the two content types can diverge later.
   .events-details-link is reused: that class is generic, not events-specific.
   --------------------------------------------------------------------- */
/* Its own grey panel, separated from the calendar panel by the column's own
   gap. Same 1.25rem inset as .events-calendar__panel so the two line up. */
.events-daybox-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem;
  background: #f4f4f5;
}
html[data-theme="dark"] .events-daybox-list {
  background: #2a2a2a;
}

/* Type below is core's link-box --as-row: 1.1 line-height, 700 heading, 300
   body copy, 700 href label. */
.events-daybox {
  line-height: 1.1;
}

.events-daybox__title {
  /* same hairline treatment as .events-card__title — see its comment */
  border-bottom: 1px solid #333333;
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-plus-1);
}
html[data-theme="dark"] .events-daybox__title {
  border-bottom-color: #3a3a3a;
}
/* Heading link carries the heading's own ink, underlining only on hover, as
   core's link-box heading does. Element+class+:visited for the same reason as
   .events-details-link — see that comment. */
.events-daybox__title a,
.events-daybox__title a:visited {
  color: #333333;
  /* core's anchor rule sets 500; the heading is 700 */
  font-weight: inherit;
  text-decoration: none;
}
html[data-theme="dark"] .events-daybox__title a,
html[data-theme="dark"] .events-daybox__title a:visited {
  color: #e8e8e8;
}
.events-daybox__title a:hover,
.events-daybox__title a:focus-visible {
  text-decoration: underline;
}

/* Plain flex, NOT CSS Grid with align-items: stretch. That had a circular
   dependency: row height came from the wrapped text, the image's width came
   from the row height, and that width decided how the text wrapped. Between
   375-410px it settled short and the "Read more" link fell outside the panel.
   Sizing the image as a percentage of the row's width breaks the loop.
   Trade-off: the image no longer matches the text column's exact height. */
.events-daybox__body {
  display: flex;
  align-items: flex-start;
  /* 1.25rem, up from 1rem, to push the content right. */
  gap: 1.25rem;
  margin-top: 0.5rem;
}

/* No real image source is wired yet (see the TODO in index.twig) — a neutral
   tile stands in at the footprint a real <img> would take. width plus
   aspect-ratio derives height from width, never the reverse; that reversal is
   what caused the overflow described above. */
.events-daybox__image {
  flex-shrink: 0;
  width: 34%;
  min-width: 3rem;
  max-width: 8rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* swatch 'off' (#e9e9e9), not #f6f6f6: the panel behind it is now grey and
     the tile would otherwise be invisible. */
  background: #e9e9e9;
  /* same 0.125rem as .events-card__image img, and for the same reason — this
     is a thumbnail in a row, so it takes core's link-box radius rather than
     the hero's. See that rule's comment. */
  border-radius: 0.125rem;
  color: #767676;
}
html[data-theme="dark"] .events-daybox__image {
  background: #3a3a3a;
  color: #a0a0a0;
}
.events-daybox__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* Same hover as core's link-box image link. */
a.events-daybox__image:hover img {
  opacity: 0.7;
}
.events-daybox__image .svg-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

.events-daybox__content {
  /* __body is flex again (see its comment) — same as .events-card__content */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 6px;
}

.events-daybox__text {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  /* Review round 2, A8: see .events-hero__blurb — same overflow, verified
     the same way. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Responsive — mobile (<640px). The right-hand column stacks BELOW the event
   list, so a phone opens on the month's events rather than on navigation to
   other months. No `order` needed: __rhs is already flex-flow: column here
   and source order gives this. Kept as a comment so the old order:-1 is not
   "restored".
   --------------------------------------------------------------------- */