/* Loading message over the calendar, so the layout doesn't jump on each fetch */
.crm-search-display-calendar-wrapper {
  position: relative;
}
.crm-search-display-calendar-loading-message {
  position: absolute;
  top: 4em;
  left: 50%;
  transform: translateX(-50%);
  /* Above FullCalendar's sticky headers */
  z-index: 10;
}
/* List views say "No events to display" until the events arrive */
.crm-search-display-calendar-loading .crm-search-display-calendar-no-events {
  visibility: hidden;
}

/* Sticky headers stick below CiviCRM's menubar, but only when it's fixed to the top of the window:
   visible, over/below the CMS menu, and wider than its mobile breakpoint (768px by default).
   Otherwise --crm-menubar-bottom is the menubar's position down the page, which would push the
   headers far down. !important to override FullCalendar's own "top: 0 !important". */
@media (min-width: 768px) {
  body.crm-menubar-visible.crm-menubar-over-cms-menu .crm-search-display-calendar-wrapper .crm-search-display-calendar-header,
  body.crm-menubar-visible.crm-menubar-below-cms-menu .crm-search-display-calendar-wrapper .crm-search-display-calendar-header {
    top: var(--crm-menubar-bottom, 0px) !important;
  }
}

/* SearchKit calendar layout styling */
.crm-search-display-calendar-container {
  display: grid;
  grid-gap: 1em;
  align-items: center;
  justify-items: center;
}

.crm-search-display-calendar-layout-2 {
  grid-template-columns: repeat(2, 1fr);
}

.crm-search-display-calendar-layout-3 {
  grid-template-columns: repeat(3, 1fr);
}

.crm-search-display-calendar-layout-4 {
  grid-template-columns: repeat(4, 1fr);
}

.crm-search-display-calendar-layout-5 {
  grid-template-columns: repeat(5, 1fr);
}