/* unscoped defaults -- keeps both hidden regardless of viewport, same
convention as .messageboard-expand's own unscoped display:none
(messageboard_slideshow.css); the media query below is what actually turns either
one on. */
.home-eventsbox-more {
  display: none;
}

.home-eventsbox-close {
  display: none;
}

/* Same 72rem breakpoint home_layout.css stacks Events under the message
board at (.eventsbox_container.is-expanded's position:fixed takeover lives
there, alongside the rest of this box's outer sizing) -- kept in sync by
eye since a shared variable isn't available between two plain CSS files. */
@media (max-width: 72rem) {
  /* Collapsed (not .is-expanded, toggled by home_eventsbox.js): only the
  "Happening now" callout above (already meant to stay fully visible -- a
  compact spotlight, not what's being trimmed here) plus the first 4
  upcoming events. Reaching the rest -- the remaining <li>s, and whatever
  union-tag/sub-event toggles they carry -- is what .home-eventsbox-more is
  for. No max-height/overflow-y needed any more (see home_layout.css) since
  this alone already keeps the collapsed box short. */
  .eventsbox_container:not(.is-expanded) .home-eventsbox-list li:nth-child(n+5) {
    display: none;
  }

  /* Same understated "text link, not a button" treatment as
  .messageboard-expand (messageboard_slideshow.css) -- this box's own "see more". */
  .home-eventsbox-more {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border: none;
    border-top: 1px solid var(--color-border);
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
  }

  .eventsbox_container.is-expanded .home-eventsbox-more {
    display: none;
  }

  /* position:fixed, not absolute -- .eventsbox_container is itself both
  what scrolls (overflow-y:auto) and what's position:fixed here
  (home_layout.css), so an absolutely-positioned child would scroll away
  with the list underneath it instead of staying put on screen. Same
  filled-circle "x" treatment as .messageboard-modal-close
  (messageboard_modal.css). */
  .eventsbox_container.is-expanded .home-eventsbox-close {
    display: block;
    position: fixed;
    /* box's own inset is 0.5rem (home_layout.css) -- offset a bit further
    than that so the button sits inside the card with its own breathing
    room, not flush against the border. */
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color-text) 12%, transparent);
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* Same body-scroll lock as messageboard_modal.css's body.messageboard-modal-open
-- .eventsbox_container.is-expanded covers the viewport, but without this
the page underneath can still be scrolled behind it (two-finger trackpad
scroll etc. doesn't stop just because something fixed is drawn on top).
Toggled by home_eventsbox.js alongside .is-expanded itself. */
body.eventsbox-expanded {
  overflow: hidden;
}

/* Same dark backdrop as .messageboard-modal (messageboard_modal.css, same
color-mix formula) -- .eventsbox_container.is-expanded only insets 0.5rem
(home_layout.css), not a full flush 0, specifically so its border/radius/
shadow read as a floating card; without a backdrop behind it, that thin
gap just showed the page underneath (the sidemenu's teal) bleeding through
around the edges instead of a deliberate dimmed frame. A separate
body::before rather than a pseudo-element on the card itself -- the card
is position:fixed with its own z-index:1000 stacking context, and a
negative-z-index pseudo-child there paints behind the card's *own*
background too, not just behind the card as a whole; a sibling layer at a
lower z-index (999) avoids that entirely. */
body.eventsbox-expanded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--color-text) 88%, transparent);
}