/* Shared between the single event page and the events index listing --
same badge/list styling used again (compact form) by home_eventsbox_list.css on
the homepage. */

/* Single event page only (event_page.html's own outer wrapper -- the
events index listing uses a different one, .event-index-page, so this
doesn't affect that) -- content-centered, but deliberately *not*
width-capped itself any more (see .event-page-prose below for why). */
.event-page {
  text-align: center;
}

/* Title/meta/tags/intro -- a centered reading-width column, same as
.event-page itself used to be, so prose text doesn't stretch uncomfortably
wide on a big screen. Sub-events (.event-calendar below) and Involved
Unions deliberately sit *outside* this wrapper in event_page.html: a
multi-day calendar needs the page's whole given width to be legible, not a
column sized for paragraph text -- see .event-calendar's own comment. */
.event-page-prose {
  max-width: 50rem;
  margin: 0 auto;
}

.event-type-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  color: var(--color-on-accent);
  background-color: var(--color-text-muted);
}

.event-type-badge--social {
  background-color: var(--color-accent);
}

.event-type-badge--deadline {
  background-color: var(--color-error);
}

.event-type-badge--academic {
  background-color: var(--color-secondary);
}

.event-type-badge--company {
  background-color: var(--color-cta);
}

/* Peoply-sourced provenance note (events/partials/peoply_badge.html) --
plain text, not a badge/pill like .event-type-badge above, since this is
metadata about where the data came from, not a category a visitor
scans/filters by. flex-basis:100% forces it onto its own line at the
bottom of the flex-wrap containers it lives in (.event-list-item,
.home-eventsbox-item, same trick .home-eventsbox-title already uses) --
harmless where the parent isn't flex (event_page.html), display:block
alone puts it on its own line there anyway. --compact is for the
week-calendar's small absolutely-positioned blocks
(event_calendar_grid.html). */
.event-peoply-note {
  display: block;
  flex-basis: 100%;
  text-align: center;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.event-peoply-note--compact {
  font-size: 0.6rem;
}

.event-page h1 {
  margin-top: 0.5rem;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.event-location-map-link {
  margin-left: 0.4rem;
  color: var(--color-link);
  text-decoration: underline;
}

.event-location-map-link:hover,
.event-location-map-link:focus-visible {
  color: var(--color-link-hover);
}

.event-page-intro {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

/* Back to the full events overview (events/event_index_page.html) -- same
understated link treatment as .event-location-map-link above. */
.event-overview-link {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.event-overview-link a {
  color: var(--color-link);
  text-decoration: underline;
}

.event-overview-link a:hover,
.event-overview-link a:focus-visible {
  color: var(--color-link-hover);
}

/* Freeform info tags (EventPage.info_tags -- audience/program, food,
alcohol, etc., see event_models.py's own docstring on why these are plain
django-taggit tags rather than a fixed choices list). Same pill shape as
.event-type-badge above and .home-eventsbox-union-tag (home_eventsbox_subevents.css),
but its own muted/outlined style since these aren't color-coded by
category -- the flat tag list carries no category metadata to color by. */
.event-tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.event-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
}

/* Same "solid pill button" treatment as .union-info-link--signup
(../../02_components/union/union_info_box.css), just self-contained rather
than depending on that component's own --accent-color custom property. */
.event-signup-link {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-bg);
  background-color: var(--color-secondary);
}

.event-signup-link:hover,
.event-signup-link:focus-visible {
  background-color: var(--color-secondary-hover);
}

/* Events index page only (event_index_page.html) -- current semester
label shown under the page's own editable title, and a heading per
month_groups entry (EventIndexPage.get_context) above that month's own
.event-list, so a semester spanning several months reads as one
sub-section per month rather than one long undifferentiated list. */
.event-index-semester {
  color: var(--color-text-muted);
  font-weight: bold;
  margin: 0.25rem 0 0;
}

.event-index-month-heading {
  margin: 1.5rem 0 0;
}

.event-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-list-item {
  display: flex;
  /* was a single line only (no wrap) -- badge + a long title + a nowrap
  date easily add up to more than a narrow card's own width, and with
  nothing here to let any of them give way, the date (or the whole row)
  just overflowed straight past the card's own border on mobile instead
  of the layout adapting. wrap lets the date drop to its own line
  whenever the row doesn't have room for everything. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  /* same hover-lift convention as .articlecard (article_card.css) and the
  top nav's .nav_link (topheader_bar.css). */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.event-list-item:hover,
.event-list-item:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--color-shadow);
}

.event-list-title {
  flex: 1 1 auto;
  /* flex items default to min-width:auto (not 0), which stops them
  shrinking below their own text's min-content width -- for a long
  unbroken title that min-content width can still exceed the card, which
  is what was forcing the whole row to overflow rather than wrapping the
  title's own text normally. 0 here lets it actually shrink and wrap at
  word boundaries instead. */
  min-width: 0;
  font-weight: bold;
}

.event-list-date {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.event-list-empty {
  color: var(--color-text-muted);
}

/* Past events (EventIndexPage.get_context's past_month_groups) collapsed
by default behind a native <details> toggle, same pattern as
account_settings.html's "Delete my account" -- keeps the page opening on
what's actually upcoming instead of burying it under everything that's
already happened. */
.event-index-past {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

.event-index-past-toggle {
  cursor: pointer;
  font-weight: bold;
  color: var(--color-text-muted);
}

/* EventPage.calendar_legend (event_page.html) -- optional row explaining
what each calendar_color means for this particular schedule, e.g. "Blue =
Study-relevant". Only rendered at all when calendar_legend actually has
entries, so there's no separate "show legend" toggle needed. */
.event-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.event-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Reuses .event-calendar-block--{{ color }} (below) for its background --
those rules only ever set background-color, so borrowing them here keeps
the swatch and the actual calendar blocks guaranteed to match, rather than
a second, separately maintained copy of the same color mapping. */
.event-calendar-legend-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  flex-shrink: 0;
}


/* EventPage.localized_location_articles (event_page.html) -- same
centered, wrapping card-grid shape as .event-union-list just below, reusing
.articlecard (article_card.css) as-is for each entry. Capped per-card
(rather than relying on article_card.css's own sizing, which assumes a
grid/list container that controls width) since a lone article card outside
its usual home-page/category-listing grid would otherwise stretch to fill
this section's full width. */
.event-location-articles {
  margin-top: 1.5rem;
}

.event-location-articles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.event-location-articles-grid .articlecard {
  flex: 0 1 18rem;
  max-width: 18rem;
}

/* Reuses .union-card (union_card.css) as-is for each entry -- this just
adds the role label above it. No max-width any more (dropped the 50rem cap
this used to have) -- each card is already capped on its own
(.union-card's own max-width:14rem, union_card.css), so the risk that cap
was guarding against (individual cards stretching too wide/far apart) no
longer applies; a fixed-size card grid just wraps more cards per row
instead of leaving the rest of the page's given width empty beside a
narrow column, same reasoning as .event-calendar going full-width. */
.event-union-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 1rem 0 0;
}

.event-union-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.event-union-role {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-text-muted);
  text-transform: uppercase;
}