/* ==========================================================================
   NC State Billboard Events Slide
   Canvas: 1920 x 1080. Shares the stage scaling and font stack in slide.css.

   An agenda, not a gallery. Someone glancing at this from across a lobby wants
   to know what is on and when, so the date leads and the type is large enough
   to read at a distance. No photos: the calendar's images are mostly flyers,
   and six events with dates carry more than four events with pictures.
   ========================================================================== */

.ev-stage {
  background: var(--white);
  display: flex;
  flex-direction: column;
  /* Bottom padding clears the footer, which is positioned rather than in flow
     and would otherwise sit on top of the last row. */
  padding: calc(var(--rule-top) + 54px) 64px calc(var(--footer-height) + 14px);
}

/* ---------------------------------------------------------------- header */

.ev-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 26px;
  border-bottom: 5px solid var(--wolfpack-red);
  flex: 0 0 auto;
}

/* Uppercase as a label treatment, matching the news slide's eyebrow. */
.ev-eyebrow {
  margin: 0 0 8px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wolfpack-red);
}

.ev-title {
  margin: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 70px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--black);
}

.ev-window {
  margin: 0;
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gray-70);
}

/* ------------------------------------------------------------------ list */

.ev-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 6px 0 0;
}

/*
 * Rows divide the space they are given rather than each claiming a fixed
 * height. Four events and eight events then both fill the canvas evenly, and
 * nothing has to be retuned when the count changes.
 */
.ev-row {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 118px 1fr max-content;
  gap: 30px;
  align-items: center;
  border-bottom: 2px solid var(--gray-20);
  opacity: 0;
  animation: row-in 420ms ease-out forwards;
}

.ev-row:last-child { border-bottom: 0; }

.ev-row:nth-child(1) { animation-delay: 0ms; }
.ev-row:nth-child(2) { animation-delay: 70ms; }
.ev-row:nth-child(3) { animation-delay: 140ms; }
.ev-row:nth-child(4) { animation-delay: 210ms; }
.ev-row:nth-child(5) { animation-delay: 280ms; }
.ev-row:nth-child(6) { animation-delay: 350ms; }
.ev-row:nth-child(7) { animation-delay: 420ms; }
.ev-row:nth-child(8) { animation-delay: 490ms; }

@keyframes row-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-row { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------- the date */

.ev-chip {
  width: 118px;
  height: 96px;
  /* Set per row by events.js from config.php's events.type_colors, e.g.
     .ev-chip { --type-accent: #008473 }. Falls back to Wolfpack Red for
     event types with no configured color. */
  background: var(--type-accent, var(--wolfpack-red));
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* A second event on the same day repeats no date. The chip keeps its space so
   the titles stay aligned, which is the whole point of the column. */
.ev-row.same-day .ev-chip { visibility: hidden; }

.ev-chip-month {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 6px;
}

.ev-chip-day {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 52px;
}

/* --------------------------------------------------------------- the event */

.ev-body { min-width: 0; }

.ev-name {
  margin: 0 0 10px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: var(--black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ev-meta {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: var(--gray-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-meta .ev-time {
  font-weight: 500;
  color: var(--gray-90);
}

.ev-meta .ev-sep { color: var(--gray-20); padding: 0 10px; }

/*
 * Event type, set in the type's accent color so the colored date chips read
 * as a system rather than decoration. Hidden (by events.js leaving it empty)
 * when Localist reports no type for an event.
 */
.ev-type {
  margin: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--type-accent, var(--wolfpack-red));
}

/* --------------------------------------------------------- status screen */

.ev-stage .status { background: var(--wolfpack-red); }