/* program page: the filter buttons, the list of events (whole week)
   and the timeline (one day) */

:root { --time-column: 4.75rem; }
@media (min-width: 40em) {
  :root { --time-column: 6.25rem; }
}


/* ---- filters ----
   on phones each row of buttons scrolls sideways.
   on bigger screens they sit next to each other and wrap */

.filters {
  position: sticky; /* stays at the top when you scroll */
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: var(--rule-thick);
}
.filters__inner {
  display: grid;
  gap: 0.5rem;
  max-width: var(--max);
  margin-inline: auto;
  padding-block: 0.75rem;
}

.chips {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

@media (min-width: 48em) {
  .filters__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-inline: var(--gutter);
  }
  .chips { flex-wrap: wrap; overflow: visible; padding-inline: 0; }
}

/* one filter button */
.chip {
  position: relative; /* keeps the screen-reader text inside the row so the page doesn't get wider */
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 0.95em;
  border: 2px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.chip:hover { background: var(--fg-soft); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* the pulsing dot on "today" */
.chip__dot {
  flex: none;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: var(--pop);
  animation: pulse 1.8s ease-out infinite;
}

/* the "access" button that opens the access row */
.chip--access { gap: 0.4em; }
.chip--access .icon { width: 1.3em; height: 1.3em; }
.chip--access[aria-expanded="true"],
.chip--access.is-on { background: var(--fg); color: var(--bg); }
.chip__count:empty { display: none; }

.filters__access { padding-bottom: 0.75rem; }
.filters__access .chips { max-width: var(--max); margin-inline: auto; }
@media (min-width: 48em) {
  .filters__access .chips { padding-inline: var(--gutter); }
}

/* "14 events this week" */
.count-line {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem var(--gutter) 0;
}


/* ---- the list ----
   two columns on bigger screens like the poster, one on phones */

.week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.week[data-columns="1"] { grid-template-columns: minmax(0, 46rem); }

/* a day: "monday ........ 23 nov" */
.day { margin-bottom: clamp(2rem, 4vw, 3rem); }
.day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: -0.6rem; /* so the line lines up with the event lines under it */
  padding: 0 0.6rem 0.4rem;
  border-bottom: var(--rule-thick);
}
.day__name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}
.day__date { font-weight: 600; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem); white-space: nowrap; }

/* the white "today" tag next to the day name */
.pill {
  padding: 0.45em 0.65em 0.4em;
  background: var(--pop);
  color: var(--on-pop);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}


/* ---- one event ----
   time and type on the left, title and place in the middle, + on the right.
   it turns black when you hover or open it */

.event {
  margin-inline: -0.6rem;
  border-bottom: var(--rule);
  scroll-margin-top: 9rem;
  transition: background-color 0.15s, color 0.15s;
}
.event__heading { margin: 0; font: inherit; }

.event__button {
  display: grid;
  grid-template-columns: var(--time-column) 1fr auto;
  grid-template-areas:
    "time title plus"
    "type venue plus";
  column-gap: 1rem;
  row-gap: 0.2rem;
  align-items: baseline;
  width: 100%;
  padding: 1rem 0.6rem 1.1rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.event__button:focus-visible { outline-offset: -4px; }

.event__time {
  grid-area: time;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  font-variant-numeric: tabular-nums;
}
.event__type { grid-area: type; font-size: 0.65rem; }
.event__title {
  grid-area: title;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.1rem, 0.95rem + 0.75vw, 1.55rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.event__venue { grid-area: venue; font-weight: 600; font-size: 0.95rem; }
.event__plus {
  grid-area: plus;
  align-self: center;
  width: 1em;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: transform 0.25s var(--ease);
}

.event.is-open { background: var(--fg); color: var(--bg); }
.event.is-open .event__plus { transform: rotate(45deg); } /* + turns into × */
.event.is-open :focus-visible { outline-color: var(--bg); }
@media (hover: hover) {
  .event:hover { background: var(--fg); color: var(--bg); }
  .event:hover :focus-visible { outline-color: var(--bg); }
}

/* events that are already over are faded */
.event.is-over:not(.is-open):not(:hover) .event__button { opacity: 0.45; }

/* "(finished)" and "(happening now)" for screen readers, only when it's true */
.time-note { display: none; }
.is-over .time-note--over,
.is-on .time-note--on { display: inline; }

/* "SV · EN", the languages an event is in */
.languages-tag {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.25em 0.45em;
  border: 2px solid currentColor;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  line-height: 1;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* the part that opens up */
.event__more { padding: 0 0.6rem 1.4rem calc(var(--time-column) + 1.6rem); }
@media (max-width: 30em) {
  .event__more { padding-left: 0.6rem; }
}
.event__description { max-width: 44ch; margin: 0 0 1.1rem; font-weight: 500; }
.event__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.action--dashed { border-style: dashed; } /* report and remove */

/* language and access */
.event__info { margin: 0 0 1.25rem; }
.event__info .label { margin: 0 0 0.4rem; }
.event__info-text { margin: 0; font-weight: 600; font-size: 0.95rem; }
.access-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.access-list li::before { content: "✓"; margin-right: 0.4em; font-weight: 900; }
.access-none { margin: 0; font-size: 0.9rem; font-weight: 600; opacity: 0.85; }


/* ---- events people added themselves ----
   they get an extra line: a circle with their first letter, "added by ...", and a community tag */

.event--community .event__button {
  grid-template-areas:
    "time title plus"
    "type venue plus"
    ".    by    plus";
}
.event__by {
  grid-area: by;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.45rem;
  font-weight: 700;
  font-size: 0.85rem;
}
.avatar {
  display: inline-grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--pop);
  color: var(--on-pop);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1;
}
.tag {
  padding: 0.3em 0.55em;
  border: 2px solid currentColor;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
/* "added by someone in the community, not by the community week team" */
.event__note {
  max-width: 44ch;
  margin: 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--pop);
  font-size: 0.9rem;
  font-weight: 700;
}


/* ---- when nothing matches the filters ---- */

.empty { padding: 1rem 0 2rem; }
.empty__big {
  margin: 0 0 1.25rem;
  font-size: clamp(2.75rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.empty p { font-weight: 600; }


/* ---- the timeline (one day) ----
   hours down the left, events placed by when they start and as tall as they last.
   --hour is how tall one hour is */

.timeline {
  --hour: 5.5rem;
  --hours-column: 3.25rem;
  display: grid;
  grid-template-columns: var(--hours-column) 1fr;
  padding-top: 1.25rem;
}
@media (min-width: 40em) {
  .timeline { --hour: 6.5rem; --hours-column: 4rem; }
}

.timeline__hours { position: relative; }
.timeline__hour {
  position: absolute;
  top: calc(var(--at) * var(--hour));
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* the events area, with a thin line at every hour */
.timeline__events {
  position: relative;
  height: calc(var(--hours) * var(--hour));
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--fg) 30%, transparent) 0 1px,
    transparent 1px var(--hour)
  );
}

/* one event on the timeline */
.slot {
  position: absolute;
  top: calc(var(--top) * var(--hour));
  left: calc(100% / var(--columns) * var(--column));
  width: calc(100% / var(--columns));
  height: calc(var(--length) * var(--hour));
  padding: 2px;
  scroll-margin-top: 9rem;
  container-type: inline-size; /* so the inside can change when it's narrow */
}
.slot__button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.65rem;
  border: 2px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, opacity 0.3s;
}
.slot__button:hover { background: var(--fg); color: var(--bg); }
.slot__button:focus-visible { outline-offset: 2px; }

.slot__time { font-weight: 800; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.slot__title {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  line-height: 1.15;
}
.slot__venue { font-weight: 600; font-size: 0.85rem; }
.slot__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.2rem; }
.slot__tags .label { font-size: 0.6rem; }
.slot__tags .languages-tag { margin: 0; }
.slot--community .slot__button { border-style: dashed; }

/* when events sit side by side on a phone there isn't room for everything.
   the rest is in the pop-up */
@container (max-width: 9rem) {
  .slot__button { padding: 0.4rem 0.45rem; }
  .slot__venue, .slot__tags { display: none; }
  .slot__title { font-size: 0.85rem; hyphens: auto; overflow-wrap: break-word; }
}

/* happening now: solid black. over: gray and dashed */
.slot.is-on .slot__button { background: var(--fg); color: var(--bg); }
.slot.is-over .slot__button { opacity: 0.4; border-style: dashed; }
.slot.is-over .slot__button:hover { opacity: 1; }

/* the line for right now, with the time on it */
.now-line {
  position: absolute;
  z-index: 2;
  top: calc(var(--top, 0) * var(--hour));
  left: calc(var(--hours-column) * -1);
  right: 0;
  border-top: 3px dotted var(--pop);
  pointer-events: none;
}
.now-line[hidden] { display: none; }
.now-line__time {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-55%);
  padding: 0.3em 0.45em;
  background: var(--pop);
  color: var(--on-pop);
  font-weight: 800;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* the dot where the line starts on the events, like the one on the "today" button */
.now-line::after {
  content: "";
  position: absolute;
  left: calc(var(--hours-column) - 0.4rem);
  top: -0.55rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--pop);
  animation: pulse 1.8s ease-out infinite;
}


/* the same line in the whole week list, between two events */
.now-marker {
  position: relative;
  z-index: 2;
  margin-inline: -0.6rem;
  border-top: 3px dotted var(--pop);
  margin-top: -2px; /* sits on top of the line under the event above */
}
.now-marker::after {
  content: "";
  position: absolute;
  left: 3.6rem;
  top: -0.55rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--pop);
  animation: pulse 1.8s ease-out infinite;
}


/* ---- the pop-up with one event (opened from the timeline) ---- */

.event-popup .popup__box { position: relative; }
.event-popup .popup__title { margin-right: 2rem; }
.event-popup__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.event-popup__when { margin: 0 0 0.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.event-popup__venue { margin: 0 0 0.75rem; font-weight: 600; }
.event-popup .event__by { margin: 0 0 1rem; }
.event-popup__details { margin-top: 1.25rem; }
.event-popup .label { margin: 0 0 0.4rem; }