/* Event drawer: full screen on phones, docked beside the calendar on wide screens */
html:has(dialog.blr-event:modal) { overflow: hidden; }

.blr-event {
  --ink: #222; --muted: #666; --paper: #fff; --line: #e6e6e6; --tint: #f6f6f8;
  --accent: var(--blr-event-color, dodgerblue);
  --accent-tint: color-mix(in srgb, var(--accent) 22%, white);
  width: min(30rem, 100%); height: 100dvh; max-width: none; max-height: 100dvh;
  padding: 0; border: 0; border-left: 6px solid var(--accent); margin: 0 0 0 auto; overflow: hidden;
  color: var(--ink); background: var(--paper);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  overscroll-behavior: contain;
}
.blr-event::backdrop { background: rgb(20 20 30 / .55); }
.blr-event *, .blr-event *::before, .blr-event *::after { box-sizing: border-box; }
.blr-event :is(header, figure, ul, ol, dl, address, p, table, h2, h3) { margin: 0; padding: 0; width: auto; }
.blr-event :is(h2, h3)::before, .blr-event section::after { content: none; display: none; }
.blr-event :is(h2, h3) { font-variant: normal; position: static; }
.blr-event a { color: var(--clink, #07c); overflow-wrap: anywhere; }
.blr-event ul { list-style: none; }
.blr-event :is(li, dd) { margin: 0; }
.blr-event address { font-style: normal; }
.blr-event button { margin: 0; letter-spacing: normal; }
@media (prefers-reduced-motion: no-preference) {
  .blr-event[open] { animation: blr-drawer-in .22s ease-out; }
  @keyframes blr-drawer-in { from { translate: 30% 0; opacity: 0; } }
}

.blr-event__inner {
  position: relative; overflow-y: auto; overscroll-behavior: contain;
  height: 100%; -webkit-overflow-scrolling: touch;
}
.blr-event__close {
  position: absolute; top: .5rem; right: .5rem; z-index: 3;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0;
  border: 0; background: rgb(255 255 255 / .9); color: #222;
  font: 400 1.6rem/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / .25);
}
.blr-event__close:focus-visible, .blr-event__button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.blr-event__stub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem;
  padding: 1rem 3.5rem 1rem 1rem; background: var(--accent-tint);
  border-bottom: 2px dashed color-mix(in srgb, var(--accent) 60%, #333);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase;
}
.blr-event__day { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.blr-event__month { font-size: 1.1rem; font-weight: 700; }
.blr-event__dow, .blr-event__time { font-size: .9rem; }
.blr-event__stub-price {
  font-size: 1rem; font-weight: 700; padding: .2rem .5rem;
  border: 2px solid currentColor; width: fit-content; transform: rotate(-2deg);
}

/* Fixed image boxes, so loading images never push the text down */
.blr-event__media { display: flex; gap: .5rem; margin: 1rem 1rem 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.blr-event__zoom {
  flex: 0 0 40%; height: 10rem; scroll-snap-align: start; display: block;
  padding: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in;
}
.blr-event__zoom:only-child { flex-basis: 100%; height: 14rem; }
.blr-event__media img {
  display: block; width: 100%; max-width: none; height: 100%; max-height: none;
  object-fit: cover; border-radius: .25rem; margin: 0 !important;
}

.blr-event__content { padding: 1rem; display: grid; grid-auto-rows: max-content; align-content: start; }
.blr-event__header { display: grid; gap: .35rem; padding-bottom: 1rem; }
.blr-event__kicker {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; font-size: .8rem; color: var(--muted);
  font-family: ui-monospace, Menlo, monospace; text-transform: uppercase;
}
.blr-event__type { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); }
.blr-event__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); flex: none; }
.blr-event__status { color: #b00020; letter-spacing: .05em; }
.blr-event__title { font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.blr-event__when { font-weight: 500; }
.blr-event__duration, .blr-event__where { color: var(--muted); }
.blr-event__price { display: none; }
.blr-event__tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .3rem; margin-top: .25rem; }
.blr-event__tags li { font-size: .7rem; padding: .1rem .4rem; border: 1px solid #ccc; border-radius: 3px; background: #f0f0f0; color: #555; }

.blr-event__actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1rem; }
.blr-event__button {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .5rem 1rem;
  border: 1.5px solid var(--line); border-radius: .25rem; text-decoration: none !important;
  font: inherit; cursor: pointer; letter-spacing: normal;
  color: var(--ink) !important; background: var(--paper); font-weight: 600; font-size: .9rem;
}
.blr-event__button:hover { filter: none; border-color: var(--accent); }
.blr-event__button--primary { background: #222; border-color: #222; color: #fff !important; flex: 1 1 100%; justify-content: center; }

.blr-event__section {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem;
  padding: .75rem 0; border-top: 1px solid var(--line);
}
.blr-event__section h3 {
  font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: .75rem; line-height: 1.2;
  padding-top: .2rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.blr-event__section-body { display: grid; gap: .5rem; }
.blr-event__section-body ul { display: grid; gap: .25rem; }
.blr-event__facts { display: grid; gap: .2rem; }
.blr-event__facts div { display: flex; gap: .5rem; justify-content: space-between; border-bottom: 1px dotted var(--line); }
.blr-event__facts dt { font-size: .85rem; color: var(--muted); font-weight: 400; }
.blr-event__facts dd { font-weight: 600; }
.blr-event__ticket-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.blr-event__ticket-table :is(th, td) { white-space: normal; text-align: left; padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--line); font-size: inherit; vertical-align: top; }
.blr-event__ticket-table th { font-size: .75rem; color: var(--muted); font-weight: 400; }
.blr-event__ticket-table tr:hover { background: none; }
.blr-event__ticket-table .is-sold-out { color: var(--muted); }
.blr-event__ticket-table .is-sold-out s { text-decoration-thickness: 1.5px; }
.blr-event__about p + p { margin-top: .75rem; }
.blr-event__about { overflow-wrap: anywhere; }
@media (max-width: 26rem) {
  .blr-event__section { grid-template-columns: 1fr; gap: .35rem; }
}

/* Docked: the page shrinks into the space left of the drawer, so nothing hides under it */
.blr-event:not(:modal) { position: fixed; inset: 0 0 0 auto; z-index: 1001; border-left-color: var(--accent-tint); }
html:has(dialog.blr-event[open]:not(:modal)) body {
  --blr-drawer: min(30rem, 100vw);
  max-width: min(var(--width), 100vw - var(--blr-drawer));
  margin: 0 var(--blr-drawer) 0 auto; padding-right: 0;
}
html:has(dialog.blr-event[open]:not(:modal)) .fc-list-event.blr-event-current {
  --blr-tint: color-mix(in srgb, var(--blr-event-color) 22%, white);
  position: relative; z-index: 1; background-color: var(--blr-tint);
  box-shadow: inset 4px 0 0 var(--blr-event-color), 2px 0 0 var(--blr-tint);
}
html:has(dialog.blr-event[open]:not(:modal)) .blr-event-current :is(.fc-list-event-title, .fc-list-event-time) { color: #222; font-weight: 600; }

.blr-lightbox {
  width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(0 0 0 / .94); color: #fff; overflow: hidden;
}
.blr-lightbox::backdrop { background: #000; }
.blr-lightbox__track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none; width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain;
}
.blr-lightbox__track li { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 3.5rem .5rem; }
.blr-lightbox__track img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; }
.blr-lightbox button {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: 50%;
  width: 2.75rem; height: 2.75rem; background: rgb(255 255 255 / .15); color: #fff;
  font: 400 1.8rem/1 system-ui, sans-serif; letter-spacing: normal; cursor: pointer;
}
.blr-lightbox button:hover { background: rgb(255 255 255 / .3); color: #fff; filter: none; }
.blr-lightbox__close { top: .5rem; right: .5rem; }
.blr-lightbox__prev, .blr-lightbox__next { top: calc(50% - 1.375rem); }
.blr-lightbox__prev { left: .5rem; }
.blr-lightbox__next { right: .5rem; }
.blr-lightbox__count { position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; font: 600 .9rem/1 system-ui, sans-serif; }